/* Landing del Ciclo Anual · Admisión San Marcos, todas las áreas.

   TODO cuelga de .lp-anu. El marco del sitio inyecta en ESTE documento Bootstrap,
   akcadmia.css y sitio.css, y lo hace DESPUÉS de esta hoja: sus reglas conviven con
   las de aquí y, a igualdad de especificidad, ganan las suyas. De ahí el prefijo
   propio, el bloque de neutralización y los !important de la costura.

   DOS IDENTIDADES, Y NO SE MEZCLAN:

     · LA UNIVERSIDAD (--lp-uni-*): granate y dorado, idénticos en todas las
       landings de San Marcos.
     · LA CAMPAÑA (el resto): azul cielo, verde brote y amarillo sol sobre blanco
       cálido.

   Es la landing MÁS CLARA de las siete, y a propósito: el mensaje es un año largo
   y sostenible, no una cuenta atrás. Nada de secciones en penumbra, nada de velos
   oscuros sobre las fotografías —el texto vive en tarjetas blancas y la imagen se
   ve entera— y los pies de foto van debajo, no encima.

   El público son chicos de cuarto y quinto de secundaria: formas redondeadas,
   espaciado generoso y tipografía grande, sin caer en lo infantil. */
.lp-anu {
    /* ── Identidad de la universidad ───────────────────────────────────── */
    --lp-uni: #7A0C2E;
    --lp-uni-claro: #A31D42;
    --lp-uni-tinta: #FFFFFF;
    --lp-uni-oro: #D3A85B;
    /* ── Paleta de la campaña ──────────────────────────────────────────── */
    --lp-cielo: #2E86DE;
    --lp-cielo-claro: #A9D3F5;
    --lp-cielo-suave: #EAF4FD;
    /* Fondo y texto de los botones principales, aparte de --lp-cielo porque el
       texto tiene que leerse sobre ese fondo: en el tema claro el azul es más
       hondo que el cielo para sostener el texto blanco, y en el oscuro, donde el
       cielo se aclara, el botón lo toma tal cual y el texto pasa a oscuro. */
    --lp-boton: #2075CB;
    --lp-boton-tinta: #FFFFFF;
    --lp-brote: #34B36B;
    --lp-brote-claro: #A8E6C1;
    --lp-sol: #FFC93C;
    --lp-coral: #FF7A6B;
    /* ── Superficies y texto ───────────────────────────────────────────── */
    --lp-tinta: #17293D;
    --lp-tinta-suave: #5A6B7D;
    /* Cielo y brote para TEXTO pequeño. Los de la paleta pintan superficies,
       bordes y cifras grandes, y como letra menuda sobre los fondos claros no
       llegan al contraste mínimo: estos son más hondos. En el tema oscuro valen lo
       mismo que los de la paleta, que sobre fondo oscuro ya se leen. */
    --lp-cielo-texto: #1E6CBB;
    --lp-brote-texto: #237949;
    /* Superficie oscura en los dos temas, para la cinta, que lleva el texto en
       blanco: --lp-tinta no sirve ahí porque en el tema oscuro pasa a ser clara. */
    --lp-noche: #17293D;
    --lp-fondo: #FFFDFA;
    --lp-fondo-alterno: #F2F8FD;
    --lp-superficie: #FFFFFF;
    --lp-borde: rgba(23, 41, 61, .12);
    --lp-sombra: rgba(23, 41, 61, .08);
    --lp-sombra-fuerte: rgba(23, 41, 61, .16);
    --lp-ancho: 80rem;
    --lp-ancho-texto: 44rem;
    --lp-radio: 1.25rem;
    margin: 0;
    background: var(--lp-fondo);
    color: var(--lp-tinta);
    line-height: 1.68;
    scroll-behavior: smooth;
}

/* Tema oscuro del sitio. El atributo lo pone Akcadmia en un ancestro; aquí solo se
   reasignan las variables, nunca las reglas. Se oscurece lo justo: esta landing
   pierde carácter si se vuelve nocturna, así que el fondo es un azul muy profundo
   y no un negro. */
[data-tema="oscuro"] .lp-anu {
    --lp-uni: #8E1637;
    --lp-uni-claro: #B02A4E;
    --lp-uni-oro: #DFC384;
    --lp-cielo: #6AB4F0;
    --lp-cielo-claro: #9CCDF5;
    --lp-cielo-suave: #14263A;
    --lp-boton: #6AB4F0;
    --lp-boton-tinta: #08111C;
    --lp-brote: #5BD08D;
    --lp-brote-claro: #8FE0B2;
    --lp-sol: #FFD466;
    --lp-coral: #FF9385;
    --lp-tinta: #E8F1F8;
    --lp-tinta-suave: #A6B8C9;
    --lp-cielo-texto: #6AB4F0;
    --lp-brote-texto: #5BD08D;
    /* Más honda que el fondo: la cinta se separa de lo que pasa por debajo. */
    --lp-noche: #08111C;
    --lp-fondo: #0D1826;
    --lp-fondo-alterno: #11202F;
    --lp-superficie: #16273A;
    --lp-borde: rgba(232, 241, 248, .16);
    --lp-sombra: rgba(0, 0, 0, .4);
    --lp-sombra-fuerte: rgba(0, 0, 0, .55);
}

/* ═══ Costura con la cabecera del sitio ════════════════════════════════════
   El marco inserta su cabecera como hermano justo encima de la landing y deja un
   hueco entre las dos. Por ese hueco asomaba el fondo del cuerpo, que en el sitio
   es claro.

   El hueco no se suprime: se PINTA del color de la franja institucional, y así
   deja de distinguirse sea cual sea su origen. Las anulaciones se quedan porque
   recortan su altura cuando sí vienen de la cabecera.

   El granate va escrito y no como variable porque --lp-uni se declara en .lp-anu y
   aquí se pinta su ancestro, que no la ve. */
body:has(> .lp-anu) {
    margin: 0 !important;
    padding: 0 !important;
    background-color: #7A0C2E;
}

[data-tema="oscuro"] body:has(> .lp-anu) {
    background-color: #200811;
}

body > :has(+ .lp-anu) {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
}

    body > :has(+ .lp-anu) > :last-child {
        margin-bottom: 0 !important;
    }

/* ═══ Neutralización de los estilos del sitio ══════════════════════════════
   Una regla de elemento del sitio gana siempre a un color heredado: sin esto, el
   titular tomaba el color de marca de la plataforma. :where aporta cero
   especificidad, así que este bloque solo derrota a esos selectores y queda por
   debajo de las clases de más abajo. */
.lp-anu :where(h1, h2, h3, h4, p, ul, ol, li, a, span, strong, small, em, label, summary, button, textarea, article, figure, figcaption) {
    color: inherit;
    font-family: inherit;
}

.lp-anu__ancho {
    width: min(100% - 3rem, var(--lp-ancho));
    margin-inline: auto;
}

.lp-anu svg {
    fill: currentColor;
}

/* ═══ Aparición al desplazar ═══════════════════════════════════════════════
   El estado inicial solo se aplica cuando el guion ha marcado el documento: sin él
   la clase nunca se añade y todo se ve desde el principio. */
.lp-anu--animada [data-revelar] {
    opacity: 0;
    transform: translateY(1.25rem);
    transition: opacity .6s ease, transform .6s ease;
}

    .lp-anu--animada [data-revelar].lp-anu--visible {
        opacity: 1;
        transform: none;
    }

@media (prefers-reduced-motion: reduce) {
    .lp-anu {
        scroll-behavior: auto;
    }

    .lp-anu--animada [data-revelar] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .lp-anu__punto {
        animation: none;
    }

    /* Sin movimiento, las casillas del calendario aparecen ya encendidas. */
    .lp-anu__casilla {
        transition: none;
        opacity: 1;
        transform: none;
    }
}

/* ═══ Los tres perfiles ════════════════════════════════════════════════════
   Sin el guion se ven los tres bloques, cada uno con su rótulo. Con él, solo el
   elegido, y el rótulo sobra porque ya lo dice la cinta. */
.lp-anu--con-perfiles .lp-anu__bloque-perfil {
    display: none;
}

.lp-anu--con-perfiles .lp-anu__bloque-perfil--activo {
    display: block;
    animation: lp-anu-entra .35s ease;
}

.lp-anu--con-perfiles .lp-anu__bloque-rotulo {
    display: none;
}

@keyframes lp-anu-entra {
    from {
        opacity: 0;
        transform: translateY(.5rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.lp-anu__bloque-perfil + .lp-anu__bloque-perfil {
    margin-top: 2.5rem;
}

.lp-anu__bloque-rotulo {
    display: inline-block;
    margin: 0 0 1.25rem;
    padding: .35rem 1rem;
    border-radius: 999px;
    background: var(--lp-cielo-suave);
    color: var(--lp-cielo-texto);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* ═══ Franja institucional ═════════════════════════════════════════════════ */
.lp-anu__institucional {
    background: linear-gradient(90deg, var(--lp-uni), var(--lp-uni-claro));
    color: var(--lp-uni-tinta);
    box-shadow: inset 0 -2px 0 var(--lp-uni-oro);
}

.lp-anu__institucional-contenido {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1.25rem;
    padding: .7rem 0;
}

.lp-anu__emblema {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    border: 2px solid var(--lp-uni-oro);
    color: var(--lp-uni-oro);
}

    .lp-anu__emblema svg {
        width: 1.3rem;
        height: 1.3rem;
    }

.lp-anu__uni {
    margin: 0 auto 0 0;
    line-height: 1.3;
}

.lp-anu__uni-nombre {
    display: block;
    font-size: 1rem;
    font-weight: 700;
}

.lp-anu__uni-lema {
    display: block;
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lp-uni-oro);
}

.lp-anu__uni-sello {
    padding: .3rem 1rem;
    border: 1px solid var(--lp-uni-oro);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lp-uni-oro);
}

/* ═══ Portada ══════════════════════════════════════════════════════════════
   Fondo claro con dos halos de color muy suaves. No hay imagen de fondo ni velo:
   las fotografías van en su columna y se ven enteras. */
.lp-anu__portada {
    position: relative;
    background: radial-gradient(50rem 34rem at 88% -8%, rgba(169, 211, 245, .55), transparent 62%), radial-gradient(38rem 28rem at 2% 100%, rgba(168, 230, 193, .4), transparent 62%), var(--lp-fondo);
    padding: 3.5rem 0 4.5rem;
    overflow: hidden;
}

.lp-anu__portada-rejilla {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 3rem;
    align-items: center;
}

.lp-anu__marca-uni {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    margin: 0 0 1.5rem;
    padding: .5rem 1.1rem .5rem .5rem;
    background: var(--lp-superficie);
    border: 1px solid var(--lp-borde);
    border-radius: 999px;
    box-shadow: 0 .4rem 1rem var(--lp-sombra);
    text-align: left;
}

    .lp-anu__marca-uni .lp-anu__emblema {
        width: 2.1rem;
        height: 2.1rem;
        border-color: var(--lp-uni);
        color: var(--lp-uni);
    }

    .lp-anu__marca-uni strong {
        display: block;
        font-size: .95rem;
        line-height: 1.25;
    }

    .lp-anu__marca-uni small {
        display: block;
        font-size: .7rem;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--lp-tinta-suave);
    }

.lp-anu__antetitulo {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1.25rem;
    padding: .4rem 1.1rem;
    border-radius: 999px;
    background: var(--lp-brote-claro);
    color: #10402A;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.lp-anu__punto {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--lp-brote);
    animation: lp-anu-latido 2s ease-in-out infinite;
}

@keyframes lp-anu-latido {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .45;
        transform: scale(.72);
    }
}

.lp-anu__titulo {
    margin: 0 0 1.25rem;
    font-size: clamp(2.3rem, 5.4vw, 4.2rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.03em;
    color: var(--lp-tinta);
}

.lp-anu__titulo-destacado {
    display: block;
    color: var(--lp-cielo);
}

.lp-anu__bajada {
    margin: 0;
    max-width: 33rem;
    font-size: 1.1rem;
    color: var(--lp-tinta-suave);
}

.lp-anu__ventajas {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1.5rem 0 0;
    padding: 0;
}

    .lp-anu__ventajas li {
        padding: .4rem 1rem;
        border-radius: 999px;
        background: var(--lp-superficie);
        border: 1px solid var(--lp-borde);
        font-size: .88rem;
        font-weight: 700;
        color: var(--lp-tinta-suave);
    }

/* ═══ Fotografías de la portada ════════════════════════════════════════════
   Dos piezas superpuestas y una pastilla con la cuenta atrás. Van como fondo para
   que, si falta un archivo, se vea el bloque de color en lugar del icono de imagen
   rota. Ninguna lleva velo: se ven tal cual. */
.lp-anu__portada-imagenes {
    position: relative;
    height: clamp(21rem, 36vw, 30rem);
}

.lp-anu__foto {
    display: block;
    position: absolute;
    border-radius: var(--lp-radio);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 1.2rem 2.8rem var(--lp-sombra-fuerte);
}

.lp-anu__foto--grande {
    top: 0;
    right: 0;
    width: 78%;
    height: 76%;
    background-color: var(--lp-cielo-claro);
    background-image: url("imagenes/anual-1.jpeg");
}

.lp-anu__foto--chica {
    bottom: 0;
    left: 0;
    width: 52%;
    height: 46%;
    border: .4rem solid var(--lp-superficie);
    background-color: var(--lp-brote-claro);
    background-image: url("imagenes/anual-2.jpeg");
}

/* Pastilla de la cuenta atrás, en amarillo sol sobre las dos fotos. */
.lp-anu__pastilla {
    position: absolute;
    right: 2%;
    bottom: 8%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    max-width: 60%;
    padding: .7rem 1.2rem;
    border-radius: 999px;
    background: var(--lp-sol);
    color: #4A3300;
    font-size: .88rem;
    font-weight: 800;
    box-shadow: 0 .7rem 1.6rem var(--lp-sombra-fuerte);
}

/* ═══ Botones ══════════════════════════════════════════════════════════════ */
.lp-anu__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-top: 2rem;
}

.lp-anu__acciones--centro {
    justify-content: center;
}

.lp-anu__accion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2.1rem;
    border: 0;
    border-radius: 999px;
    background: var(--lp-boton);
    color: var(--lp-boton-tinta);
    font: inherit;
    font-size: .98rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 .6rem 1.4rem rgba(46, 134, 222, .3);
    transition: transform .2s ease, box-shadow .2s ease;
}

    .lp-anu__accion:hover {
        color: var(--lp-boton-tinta);
        transform: translateY(-3px);
        box-shadow: 0 1rem 2rem rgba(46, 134, 222, .4);
    }

    .lp-anu__accion:focus-visible {
        outline: 3px solid var(--lp-uni-oro);
        outline-offset: 3px;
    }

.lp-anu__accion--suave {
    background: var(--lp-superficie);
    border: 2px solid var(--lp-borde);
    color: var(--lp-tinta);
    box-shadow: none;
}

    .lp-anu__accion--suave:hover {
        color: var(--lp-tinta);
        border-color: var(--lp-cielo);
        box-shadow: none;
    }

.lp-anu__accion--mini {
    padding: .5rem 1.2rem;
    font-size: .84rem;
    box-shadow: none;
}

/* ═══ Cifras ═══════════════════════════════════════════════════════════════ */
.lp-anu__cifras {
    background: var(--lp-fondo-alterno);
    padding: 2.5rem 0;
}

.lp-anu__cifras-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1.25rem;
}

.lp-anu__cifra {
    padding: 1.25rem 1.5rem;
    background: var(--lp-superficie);
    border-radius: var(--lp-radio);
    box-shadow: 0 .5rem 1.2rem var(--lp-sombra);
}

.lp-anu__cifra-numero {
    display: block;
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--lp-cielo);
    /* Cifras de ancho fijo: el contador cambia de número al entrar y sin esto daría
       un salto lateral. */
    font-variant-numeric: tabular-nums;
}

.lp-anu__cifra-texto {
    display: block;
    margin-top: .3rem;
    font-size: .88rem;
    color: var(--lp-tinta-suave);
}

/* ═══ Secciones ════════════════════════════════════════════════════════════ */
.lp-anu__seccion {
    padding: 4.5rem 0;
}

.lp-anu__seccion--alterna {
    background: var(--lp-fondo-alterno);
}

.lp-anu__indice {
    display: inline-block;
    margin: 0 0 .75rem;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lp-brote-texto);
}

.lp-anu__h2 {
    margin: 0 0 1rem;
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.025em;
    color: var(--lp-tinta);
}

.lp-anu__h3 {
    margin: 0 0 .5rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--lp-tinta);
}

.lp-anu__texto {
    margin: 0 0 1rem;
    font-size: 1.02rem;
}

.lp-anu__texto--intro {
    max-width: var(--lp-ancho-texto);
    font-size: 1.08rem;
    color: var(--lp-tinta-suave);
    margin-bottom: 0;
}

.lp-anu__texto--cierre {
    max-width: 34rem;
    margin-inline: auto;
    color: var(--lp-tinta-suave);
}

.lp-anu__pie-seccion {
    max-width: var(--lp-ancho-texto);
    margin: 2rem 0 0;
    font-size: .92rem;
    color: var(--lp-tinta-suave);
}

.lp-anu__enlace {
    color: var(--lp-cielo-texto);
    font-weight: 700;
}

/* ═══ Selector de perfil ═══════════════════════════════════════════════════
   Tres tarjetas con un icono dibujado en CSS. No hacen falta imágenes: son formas
   geométricas simples y así no hay tres descargas más para tres iconos. */
.lp-anu__perfiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.25rem;
    margin-top: 2.5rem;
}

.lp-anu__perfil {
    display: block;
    padding: 1.75rem 1.5rem;
    background: var(--lp-superficie);
    border: 2px solid var(--lp-borde);
    border-radius: var(--lp-radio);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

    .lp-anu__perfil:hover {
        transform: translateY(-4px);
        box-shadow: 0 1.2rem 2.2rem var(--lp-sombra);
    }

    .lp-anu__perfil:focus-visible {
        outline: 3px solid var(--lp-cielo);
        outline-offset: 3px;
    }

.lp-anu__perfil-icono {
    display: block;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    border-radius: 1rem;
}

/* Cada perfil con su color y su forma: el cuadrado redondeado crece de uno a otro,
   como el avance de los tres momentos. */
.lp-anu__perfil-icono--cuarto {
    background: var(--lp-brote-claro);
    box-shadow: inset 0 -1.1rem 0 var(--lp-brote);
}

.lp-anu__perfil-icono--quinto {
    background: var(--lp-cielo-claro);
    box-shadow: inset 0 -1.8rem 0 var(--lp-cielo);
}

.lp-anu__perfil-icono--egresado {
    background: var(--lp-sol);
    box-shadow: inset 0 -2.4rem 0 var(--lp-coral);
}

.lp-anu__perfil-titulo {
    display: block;
    margin-bottom: .5rem;
    font-size: 1.25rem;
    font-weight: 800;
}

.lp-anu__perfil-texto {
    display: block;
    font-size: .95rem;
    color: var(--lp-tinta-suave);
}

.lp-anu__perfil-marca {
    display: inline-block;
    margin-top: 1rem;
    font-size: .86rem;
    font-weight: 800;
    color: var(--lp-cielo-texto);
}

    .lp-anu__perfil-marca::after {
        content: " →";
    }

/* El perfil elegido se marca con el borde y con la palomita, no solo con color. */
.lp-anu__perfil[aria-pressed="true"] {
    border-color: var(--lp-cielo);
    background: var(--lp-cielo-suave);
}

    .lp-anu__perfil[aria-pressed="true"] .lp-anu__perfil-marca {
        color: var(--lp-brote-texto);
    }

        .lp-anu__perfil[aria-pressed="true"] .lp-anu__perfil-marca::after {
            content: " ✓";
        }

/* ═══ Cinta de perfil ══════════════════════════════════════════════════════
   Fija abajo y estrecha. El guion la retira en el cierre para no tapar el pie del
   sitio, donde vive el libro de reclamaciones.

   La franja ocupa todo el ancho, pero su contenido se detiene antes de la esquina
   inferior derecha, que es la de la mascota del sitio: el relleno derecho es la
   reserva que publica el marco, y la mascota, en su esquina, queda de pie sobre
   ese tramo vacío de la franja sin tapar ningún botón. Sin mascota la variable no
   existe y el relleno vuelve a cero. */
.lp-anu__cinta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    padding-right: var(--edu-landing-reserva-mascota, 0px);
    background: var(--lp-noche);
    color: #fff;
    border-top: 3px solid var(--lp-sol);
    transform: translateY(110%);
    opacity: 0;
    /* Sin visibilidad no basta el desplazamiento: la cinta seguiría interceptando
       pulsaciones sobre el pie del sitio aunque no se vea. */
    visibility: hidden;
    transition: transform .3s ease, opacity .3s ease, visibility .3s;
}

.lp-anu__cinta--visible {
    transform: none;
    opacity: 1;
    visibility: visible;
}

.lp-anu__cinta-contenido {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    padding: .7rem 0;
}

.lp-anu__cinta-texto {
    margin: 0 auto 0 0;
    font-size: .92rem;
}

    .lp-anu__cinta-texto strong {
        color: var(--lp-sol);
    }

.lp-anu__cinta-cambio {
    padding: .35rem .9rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 999px;
    color: #fff;
    font: inherit;
    font-size: .82rem;
    cursor: pointer;
}

    .lp-anu__cinta-cambio:hover {
        border-color: var(--lp-sol);
        color: var(--lp-sol);
    }

/* ═══ Plan por perfil ══════════════════════════════════════════════════════ */
.lp-anu__plan {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.lp-anu__plan-columna {
    padding: 1.5rem;
    background: var(--lp-superficie);
    border-radius: var(--lp-radio);
    border-top: 5px solid var(--lp-cielo);
    box-shadow: 0 .5rem 1.4rem var(--lp-sombra);
}

    .lp-anu__plan-columna:nth-child(2) {
        border-top-color: var(--lp-brote);
    }

    .lp-anu__plan-columna:nth-child(3) {
        border-top-color: var(--lp-coral);
    }

    .lp-anu__plan-columna p {
        margin: 0;
        font-size: .95rem;
        color: var(--lp-tinta-suave);
    }

.lp-anu__consejo {
    max-width: 46rem;
    margin: 1.5rem 0 0;
    padding: 1.25rem 1.5rem;
    background: var(--lp-sol);
    color: #4A3300;
    border-radius: var(--lp-radio);
    font-size: .98rem;
    font-weight: 600;
}

    .lp-anu__consejo span {
        display: block;
        margin-bottom: .25rem;
        font-size: .74rem;
        font-weight: 800;
        letter-spacing: .14em;
        text-transform: uppercase;
        opacity: .75;
    }

/* ═══ Calendario de 38 semanas ═════════════════════════════════════════════
   Las casillas las genera el guion a partir de las etapas del marcado. Cada una
   nace apagada y se enciende en cascada cuando la sección entra en pantalla: el
   retardo lo pone el guion en una variable propia, para no escribir 38 reglas.

   auto-fill con un mínimo reparte las casillas en las filas que quepan, así que el
   calendario se adapta al ancho sin ninguna consulta de medios. */
.lp-anu__calendario {
    margin-top: 2rem;
}

.lp-anu__casillas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(1.6rem, 1fr));
    gap: .35rem;
    padding: 1.5rem;
    background: var(--lp-superficie);
    border-radius: var(--lp-radio);
    box-shadow: 0 .5rem 1.4rem var(--lp-sombra);
}

.lp-anu__casilla {
    aspect-ratio: 1;
    border-radius: .4rem;
    background: var(--lp-cielo-suave);
    opacity: 0;
    transform: scale(.6);
    transition: opacity .3s ease, transform .3s ease;
    transition-delay: var(--lp-retardo, 0ms);
}

.lp-anu--visible .lp-anu__casilla {
    opacity: 1;
    transform: none;
}

/* Cada etapa tiñe sus semanas. El guion pone la clase según el tramo. */
.lp-anu__casilla--uno {
    background: var(--lp-cielo-claro);
}

.lp-anu__casilla--dos {
    background: var(--lp-cielo);
}

.lp-anu__casilla--tres {
    background: var(--lp-brote);
}

.lp-anu__casilla--cuatro {
    background: var(--lp-coral);
}

/* Semana de simulacro: anillo amarillo. El color no va solo, lleva forma. */
.lp-anu__casilla--simulacro {
    box-shadow: inset 0 0 0 3px var(--lp-sol);
}

.lp-anu__etapas {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1.25rem;
    margin: 1.5rem 0 0;
    padding: 0;
}

.lp-anu__etapa {
    padding-left: 1rem;
    border-left: 4px solid var(--lp-cielo-claro);
}

    .lp-anu__etapa:nth-child(2) {
        border-left-color: var(--lp-cielo);
    }

    .lp-anu__etapa:nth-child(3) {
        border-left-color: var(--lp-brote);
    }

    .lp-anu__etapa:nth-child(4) {
        border-left-color: var(--lp-coral);
    }

.lp-anu__etapa-rango {
    display: block;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lp-tinta-suave);
}

.lp-anu__etapa-titulo {
    display: block;
    margin: .2rem 0 .4rem;
    font-size: 1.15rem;
    font-weight: 800;
}

.lp-anu__etapa-texto {
    display: block;
    font-size: .93rem;
    color: var(--lp-tinta-suave);
}

/* ═══ La línea del año ═════════════════════════════════════════════════════
   Los meses encadenados por una línea vertical con su punto. En pantalla ancha
   pasan a dos columnas, pero la línea se mantiene a la izquierda de cada una. */
.lp-anu__linea {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: 0 2.5rem;
    margin: 2rem 0 0;
    padding: 0;
}

.lp-anu__mes {
    position: relative;
    padding: 0 0 1.75rem 2rem;
    border-left: 2px solid var(--lp-cielo-claro);
}

    .lp-anu__mes::before {
        content: "";
        position: absolute;
        left: -.55rem;
        top: .35rem;
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        background: var(--lp-cielo);
        box-shadow: 0 0 0 .3rem var(--lp-fondo-alterno);
    }

.lp-anu__mes--final {
    border-left-color: transparent;
}

    .lp-anu__mes--final::before {
        background: var(--lp-brote);
    }

.lp-anu__mes-nombre {
    display: block;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--lp-tinta);
}

.lp-anu__mes-texto {
    display: block;
    margin-top: .2rem;
    font-size: .95rem;
    color: var(--lp-tinta-suave);
}

/* ═══ Mosaico ══════════════════════════════════════════════════════════════
   Tres piezas iguales con el pie DEBAJO de la imagen, no encima: así la fotografía
   se ve entera y no hace falta oscurecerla para que se lea el texto. */
.lp-anu__mosaico {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.lp-anu__pieza {
    margin: 0;
}

.lp-anu__pieza-imagen {
    display: block;
    height: 14rem;
    border-radius: var(--lp-radio);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 .8rem 1.8rem var(--lp-sombra);
}

.lp-anu__pieza-imagen--uno {
    background-color: var(--lp-cielo-claro);
    background-image: url("imagenes/anual-3.jpeg");
}

.lp-anu__pieza-imagen--dos {
    background-color: var(--lp-brote-claro);
    background-image: url("imagenes/anual-4.jpeg");
}

.lp-anu__pieza-imagen--tres {
    background-color: var(--lp-sol);
    background-image: url("imagenes/anual-5.jpeg");
}

.lp-anu__pieza figcaption {
    margin-top: .85rem;
    font-size: .95rem;
    font-weight: 600;
    color: var(--lp-tinta-suave);
}

/* ═══ La objeción ══════════════════════════════════════════════════════════
   Una tarjeta grande con la frase que todos piensan y la respuesta al lado. */
.lp-anu__objecion {
    padding: 4.5rem 0;
    background: var(--lp-fondo);
}

.lp-anu__objecion-caja {
    position: relative;
    padding: 2.5rem;
    background: var(--lp-cielo-suave);
    border-radius: 2rem;
}

.lp-anu__objecion-comilla {
    position: absolute;
    top: .5rem;
    left: 1.5rem;
    margin: 0;
    font-size: 6rem;
    line-height: 1;
    color: var(--lp-cielo-claro);
}

.lp-anu__objecion-frase {
    position: relative;
    max-width: 26rem;
    margin: 0 0 1.5rem;
    font-size: clamp(1.5rem, 3.4vw, 2.2rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--lp-tinta);
}

.lp-anu__objecion-respuesta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.25rem;
}

    .lp-anu__objecion-respuesta p {
        margin: 0;
        padding: 1.25rem;
        background: var(--lp-superficie);
        border-radius: var(--lp-radio);
        font-size: .95rem;
        color: var(--lp-tinta-suave);
    }

/* ═══ Áreas ════════════════════════════════════════════════════════════════
   Cinco filas con la letra en su color: el guiño a las otras cinco landings sin
   copiarles la composición. */
.lp-anu__areas {
    list-style: none;
    display: grid;
    gap: .75rem;
    margin: 2rem 0 0;
    padding: 0;
}

.lp-anu__area {
    display: grid;
    grid-template-columns: 3.4rem minmax(0, 1fr);
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 1.25rem;
    background: var(--lp-superficie);
    border-radius: var(--lp-radio);
    box-shadow: 0 .4rem 1rem var(--lp-sombra);
}

.lp-anu__area-letra {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 1rem;
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
}

.lp-anu__area--a .lp-anu__area-letra {
    background: #0E7C74;
}

.lp-anu__area--b .lp-anu__area-letra {
    background: #17518C;
}

.lp-anu__area--c .lp-anu__area-letra {
    background: #0E9F6E;
}

.lp-anu__area--d .lp-anu__area-letra {
    background: #1E3A6E;
}

.lp-anu__area--e .lp-anu__area-letra {
    background: #C9603F;
}

.lp-anu__area-nombre {
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
}

.lp-anu__area-detalle {
    display: block;
    font-size: .9rem;
    color: var(--lp-tinta-suave);
}

/* ═══ Para los padres ══════════════════════════════════════════════════════ */
.lp-anu__padres {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
}

.lp-anu__padre-punto {
    margin: 0;
    padding: 1.5rem;
    background: var(--lp-superficie);
    border: 1px solid var(--lp-borde);
    border-radius: var(--lp-radio);
    font-size: .95rem;
    color: var(--lp-tinta-suave);
}

    .lp-anu__padre-punto span {
        display: block;
        margin-bottom: .35rem;
        font-size: 1.02rem;
        font-weight: 800;
        color: var(--lp-tinta);
    }

/* ═══ Preguntas frecuentes ═════════════════════════════════════════════════
   details y summary: se despliegan sin JavaScript. El marcador del navegador se
   retira y se dibuja un signo que cambia al abrir. */
.lp-anu__faq-comun {
    margin-top: 2.5rem;
}

.lp-anu__faq-item {
    background: var(--lp-superficie);
    border-radius: var(--lp-radio);
    margin-top: .75rem;
    overflow: hidden;
    box-shadow: 0 .3rem .9rem var(--lp-sombra);
}

    .lp-anu__faq-item summary {
        position: relative;
        padding: 1.1rem 3rem 1.1rem 1.3rem;
        font-weight: 700;
        color: var(--lp-tinta);
        cursor: pointer;
        list-style: none;
    }

        .lp-anu__faq-item summary::-webkit-details-marker {
            display: none;
        }

        .lp-anu__faq-item summary::after {
            content: "+";
            position: absolute;
            right: 1.2rem;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.4rem;
            line-height: 1;
            color: var(--lp-cielo);
        }

        .lp-anu__faq-item summary:focus-visible {
            outline: 3px solid var(--lp-cielo);
            outline-offset: -3px;
        }

    .lp-anu__faq-item[open] summary::after {
        content: "−";
    }

    .lp-anu__faq-item p {
        margin: 0;
        padding: 0 1.3rem 1.2rem;
        font-size: .95rem;
        color: var(--lp-tinta-suave);
    }

/* ═══ Cierre ═══════════════════════════════════════════════════════════════
   También claro: esta landing no se apaga al final. El relleno inferior deja sitio
   a la cinta de perfil. */
.lp-anu__cierre {
    padding: 4.5rem 0 6rem;
    background: radial-gradient(40rem 26rem at 50% 0%, rgba(169, 211, 245, .5), transparent 65%), var(--lp-fondo);
    text-align: center;
}

.lp-anu__cierre-caja {
    max-width: 44rem;
}

.lp-anu__cuenta-cierre {
    margin: 2rem 0 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--lp-brote-texto);
}

.lp-anu__nota-legal {
    margin: 2rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--lp-borde);
    font-size: .8rem;
    color: var(--lp-tinta-suave);
}

/* ═══ Adaptación a pantallas estrechas ═════════════════════════════════════ */
@media (max-width: 61.99rem) {
    .lp-anu__portada-rejilla {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
    }

    .lp-anu__portada-imagenes {
        height: 20rem;
    }

    .lp-anu__pastilla {
        right: 0;
        bottom: 2%;
        font-size: .8rem;
    }

    /* Las casillas se hacen algo mayores: con 38 en dos filas quedarían diminutas. */
    .lp-anu__casillas {
        grid-template-columns: repeat(auto-fill, minmax(1.9rem, 1fr));
    }
}

@media (max-width: 35.99rem) {
    .lp-anu__seccion,
    .lp-anu__objecion {
        padding: 3.25rem 0;
    }

    .lp-anu__portada {
        padding: 2.5rem 0 3.5rem;
    }

    .lp-anu__institucional-contenido {
        justify-content: center;
        text-align: center;
    }

    .lp-anu__uni {
        margin: 0;
    }

    .lp-anu__accion {
        width: 100%;
    }

    .lp-anu__accion--mini,
    .lp-anu__cinta-cambio {
        width: auto;
    }

    /* Descontada la esquina de la mascota, a la cinta le queda poco más de dos
       tercios del ancho: texto y botones se alinean a la izquierda, con menos
       margen y más compactos, y así los dos botones caben en una fila bajo el
       texto en lugar de apilarse uno sobre otro. */
    .lp-anu__cinta .lp-anu__ancho {
        width: calc(100% - 2rem);
    }

    .lp-anu__cinta-contenido {
        gap: .35rem .5rem;
    }

    .lp-anu__cinta-texto {
        flex: 1 0 100%;
        font-size: .85rem;
        line-height: 1.4;
    }

    .lp-anu__cinta .lp-anu__accion--mini {
        padding: .45rem .9rem;
        font-size: .8rem;
    }

    .lp-anu__cinta-cambio {
        padding: .3rem .75rem;
        font-size: .8rem;
    }

    .lp-anu__objecion-caja,
    .lp-anu__casillas,
    .lp-anu__plan-columna,
    .lp-anu__padre-punto,
    .lp-anu__perfil {
        padding: 1.25rem;
    }

    .lp-anu__objecion-comilla {
        display: none;
    }

    .lp-anu__area {
        grid-template-columns: 2.6rem minmax(0, 1fr);
        gap: .9rem;
    }

    .lp-anu__area-letra {
        width: 2.6rem;
        height: 2.6rem;
        font-size: 1.2rem;
        border-radius: .75rem;
    }
}