@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Montserrat:wght@400;500;600;700;800&family=Caveat:wght@500;600&display=swap');

:root {
    --azul-noche: #030b20;
    --azul: #071a40;
    --azul-brillante: #1479e8;
    --celeste: #a9ccff;
    --blanco: #f8faff;
    --suave: #d0dcef;
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body {
    margin: 0;
    min-height: 100vh;
    color: var(--blanco);
    font-family: 'Montserrat', Arial, sans-serif;
    background: var(--azul-noche);
}
.pagina {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    padding: 42px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 8%, rgba(19, 73, 153, .5), transparent 48%),
        linear-gradient(135deg, #071a40, #020817 80%);
}
.fondo-decorativo {
    position: fixed;
    z-index: -1;
    inset: 0;
    background-image:
        linear-gradient(rgba(2, 9, 27, .48), rgba(2, 9, 27, .72)),
        url("fondo_alba.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: .82;
    transform: scale(1.025);
}
.pagina::before, .pagina::after {
    content: "";
    position: fixed;
    z-index: -1;
    width: 54vw;
    height: 54vw;
    border: 1px solid rgba(68, 139, 255, .12);
    border-radius: 50%;
    pointer-events: none;
}
.pagina::before { top: -38vw; left: -24vw; box-shadow: 0 0 0 35px rgba(40,111,226,.035), 0 0 0 75px rgba(40,111,226,.025); }
.pagina::after { bottom: -42vw; right: -26vw; box-shadow: 0 0 0 35px rgba(40,111,226,.035), 0 0 0 75px rgba(40,111,226,.025); }

.tarjeta {
    width: min(100%, 510px);
    padding: 30px clamp(20px, 6vw, 42px) 27px;
    border: 1px solid rgba(164, 199, 255, .24);
    border-radius: 26px;
    background: linear-gradient(155deg, rgba(4, 19, 49, .88), rgba(2, 9, 27, .93));
    box-shadow: 0 28px 90px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.07);
    backdrop-filter: blur(8px);
    text-align: center;
}
.etiqueta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--celeste);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .23em;
}
.etiqueta span { width: 5px; height: 5px; border-radius: 50%; background: #d8e7ff; }
.escudo {
    display: block;
    width: 132px;
    height: 132px;
    object-fit: contain;
    margin: 20px auto 15px;
    border-radius: 12px;
    filter: drop-shadow(0 8px 20px rgba(0,0,0,.35));
}
.sobretitulo { margin: 0 0 3px; color: #dce8ff; font-size: .76rem; font-weight: 700; letter-spacing: .3em; }
h1 {
    margin: 0;
    font-family: 'Barlow Condensed', Impact, sans-serif;
    font-size: clamp(2.6rem, 8vw, 3.65rem);
    font-weight: 900;
    line-height: .98;
    letter-spacing: .025em;
}
h1 span { color: #a8c8ff; }
.lema { margin: 12px 0 0; color: #5da6ff; font-size: .76rem; font-weight: 700; letter-spacing: .22em; }
.lema i { padding: 0 5px; font-style: normal; color: #dbe8ff; }
.acento { width: 48px; height: 4px; margin: 22px auto 24px; border-radius: 4px; background: #1679e8; box-shadow: 0 0 18px rgba(22,121,232,.3); }
.titulo-redes { margin: 0 0 17px; color: #c6dcff; font-size: .76rem; font-weight: 800; letter-spacing: .2em; }
.redes { display: grid; gap: 11px; }
.enlace-red {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 67px;
    padding: 11px 14px;
    border: 1px solid rgba(34, 132, 255, .8);
    border-radius: 14px;
    color: white;
    text-align: left;
    text-decoration: none;
    background: linear-gradient(100deg, rgba(10, 47, 104, .64), rgba(3, 18, 47, .65));
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.enlace-red:hover { transform: translateY(-2px); background: rgba(20, 80, 157, .6); box-shadow: 0 7px 20px rgba(0,0,0,.2); }
.enlace-red:focus-visible, .celular a:focus-visible { outline: 3px solid #c5dcff; outline-offset: 4px; }
.icono { flex: 0 0 40px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.1); }
.icono svg { width: 22px; height: 22px; fill: currentColor; }
.whatsapp .icono { color: #72e7a2; }
.instagram .icono { color: #ffb7dc; }
.facebook .icono { color: #9fc7ff; }
.texto-enlace { min-width: 0; }
.texto-enlace strong { display: block; margin-bottom: 4px; font-size: .86rem; font-weight: 800; }
.texto-enlace small { display: block; color: #c4d5f2; font-size: .68rem; line-height: 1.4; }
.flecha { margin-left: auto; color: #d9e8ff; font-size: 1.8rem; line-height: 1; font-weight: 300; }

.contacto {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-top: 25px;
    padding: 19px 15px;
    border-top: 1px solid rgba(100, 161, 255, .4);
    border-bottom: 1px solid rgba(100, 161, 255, .2);
    text-align: left;
}
.contacto-icono { flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center; color: #9ec9ff; }
.contacto-icono svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.contacto h2 { margin: 0 0 9px; color: #a9ceff; font-size: .78rem; font-weight: 800; letter-spacing: .16em; }
.celular { margin: 0 0 12px; color: #d6e4fb; font-size: .83rem; }
.celular a { color: #fff; font-weight: 800; text-decoration: none; }
.celular a:hover { text-decoration: underline; }
.horario-titulo { margin: 0 0 5px; color: #a9ceff; font-size: .68rem; font-weight: 700; }
.horario { margin: 0; color: #d5e0f3; font-size: .76rem; line-height: 1.7; }
footer { margin-top: 22px; }
footer p { margin: 0; color: #6fb2ff; font-family: 'Caveat', cursive; font-size: 2rem; font-weight: 600; transform: rotate(-3deg); }
footer span { display: block; width: 100px; height: 2px; margin: 3px auto 0; border-radius: 50%; background: #6fb2ff; transform: rotate(-8deg); }

@media (max-width: 480px) {
    .pagina { padding: 15px 10px; align-items: flex-start; }
    .tarjeta { padding: 23px 17px 22px; border-radius: 21px; }
    .escudo { width: 118px; height: 118px; margin: 17px auto 13px; }
    .titulo-redes { font-size: .68rem; letter-spacing: .13em; }
    .enlace-red { min-height: 63px; padding: 10px 11px; gap: 10px; }
    .icono { flex-basis: 37px; width: 37px; height: 37px; }
    .texto-enlace strong { font-size: .8rem; }
    .texto-enlace small { font-size: .63rem; }
    .contacto { gap: 10px; padding: 17px 7px; }
    .contacto h2 { font-size: .72rem; letter-spacing: .1em; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
}