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

   TODO cuelga de .lp-ver. 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): naranja sol, coral y turquesa sobre arena.

   El lenguaje es el de un cartel de verano y es exclusivo de esta landing: cortes
   diagonales, cifras enormes, sellos redondos y fotografías giradas como si
   estuvieran sueltas sobre una mesa. Ninguna de las otras cinco se compone así.

   LAS DOS VÍAS: los bloques con data-via se ocultan o se muestran según la que
   elija el visitante. Sin el guion se ven las dos, cada una con su rótulo. */
.lp-ver {
    /* ── 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-sol: #FF7A18;
    --lp-sol-claro: #FFA94D;
    --lp-coral: #E8365D;
    --lp-turquesa: #0EA5B5;
    --lp-turquesa-claro: #5BD6E0;
    /* Coral y turquesa para el texto de las pegatinas de la portada, que son
       blancas en los dos temas: más hondos que los de la paleta para leerse sobre
       blanco, y por eso el tema oscuro no los reasigna. */
    --lp-coral-hondo: #D31841;
    --lp-turquesa-hondo: #0A7883;
    --lp-tinta: #2B1A2E;
    --lp-tinta-suave: #6B5566;
    --lp-arena: #FFF6EA;
    --lp-arena-honda: #FFEBD6;
    --lp-superficie: #FFFFFF;
    --lp-noche: #2B1A2E;
    --lp-claro: #FFE3C7;
    --lp-borde: rgba(43, 26, 46, .14);
    --lp-sombra: rgba(43, 26, 46, .12);
    --lp-sombra-fuerte: rgba(43, 26, 46, .22);
    --lp-ancho: 80rem;
    --lp-ancho-texto: 44rem;
    margin: 0;
    background: var(--lp-arena);
    color: var(--lp-tinta);
    line-height: 1.65;
    scroll-behavior: smooth;
}

/* Tema oscuro del sitio. El atributo lo pone Akcadmia en un ancestro; aquí solo se
   reasignan las variables, nunca las reglas. La arena pasa a una noche cálida y el
   naranja se mantiene: es el color que sostiene la identidad.

   --lp-tinta es el color del texto y aquí pasa a crema. Por eso las superficies
   oscuras (botones, cinta, consejo, cuenta atrás) y el texto sobre naranja o sobre
   blanco no la usan: usan --lp-noche, que es oscura en los dos temas. */
[data-tema="oscuro"] .lp-ver {
    --lp-uni: #8E1637;
    --lp-uni-claro: #B02A4E;
    --lp-uni-oro: #DFC384;
    --lp-sol: #FF8F3C;
    --lp-sol-claro: #FFB871;
    --lp-coral: #F45C7E;
    --lp-turquesa: #35C0CE;
    --lp-turquesa-claro: #7FE0E8;
    --lp-tinta: #FDEFE2;
    --lp-tinta-suave: #C3AEBC;
    --lp-arena: #1B1119;
    --lp-arena-honda: #241723;
    --lp-superficie: #251A26;
    --lp-noche: #150D14;
    --lp-claro: #FFDCBC;
    --lp-borde: rgba(253, 239, 226, .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-ver y
   aquí se pinta su ancestro, que no la ve. */
body:has(> .lp-ver) {
    margin: 0 !important;
    padding: 0 !important;
    background-color: #7A0C2E;
}

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

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

    body > :has(+ .lp-ver) > :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-ver :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-ver__ancho {
    width: min(100% - 3rem, var(--lp-ancho));
    margin-inline: auto;
}

.lp-ver 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-ver--animada [data-revelar] {
    opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity .6s ease, transform .6s ease;
}

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

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

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

    .lp-ver__punto,
    .lp-ver__sol {
        animation: none;
    }
}

/* ═══ Las dos vías ═════════════════════════════════════════════════════════
   Sin el guion se ven los dos bloques, cada uno con su rótulo. Con él, solo el de
   la vía elegida, y el rótulo sobra porque ya lo dice la cinta. */
.lp-ver--con-vias .lp-ver__bloque-via {
    display: none;
}

.lp-ver--con-vias .lp-ver__bloque-via--activa {
    display: block;
    animation: lp-ver-entra .35s ease;
}

.lp-ver--con-vias .lp-ver__bloque-rotulo {
    display: none;
}

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

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

.lp-ver__bloque-via + .lp-ver__bloque-via {
    margin-top: 3rem;
}

.lp-ver__bloque-rotulo {
    display: inline-block;
    margin: 0 0 1.25rem;
    padding: .35rem 1rem;
    border-radius: 999px;
    background: var(--lp-turquesa);
    color: #fff;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* ═══ Franja institucional ═════════════════════════════════════════════════ */
.lp-ver__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-ver__institucional-contenido {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1.25rem;
    padding: .7rem 0;
}

.lp-ver__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-ver__emblema svg {
        width: 1.3rem;
        height: 1.3rem;
    }

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

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

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

.lp-ver__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 ══════════════════════════════════════════════════════════════
   Cartel: degradado de atardecer, sol que respira y corte diagonal abajo. El
   recorte se hace con clip-path sobre el propio bloque, así que no hace falta
   ningún SVG ni imagen para el borde inclinado. */
.lp-ver__portada {
    position: relative;
    background: linear-gradient(145deg, var(--lp-coral) 0%, var(--lp-sol) 55%, var(--lp-sol-claro) 100%);
    color: #fff;
    padding: 4rem 0 7rem;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.5rem), 0 100%);
}

.lp-ver__sol {
    position: absolute;
    top: -12rem;
    right: -6rem;
    width: 34rem;
    height: 34rem;
    max-width: 80%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 62%);
    pointer-events: none;
    animation: lp-ver-respira 7s ease-in-out infinite;
}

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

    50% {
        transform: scale(1.08);
        opacity: .82;
    }
}

.lp-ver__portada-rejilla {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 3rem;
    align-items: center;
}

.lp-ver__marca-uni {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    margin: 0 0 1.5rem;
    padding: .5rem 1.1rem .5rem .5rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, .22);
    border: 1px solid var(--lp-uni-oro);
    text-align: left;
}

    .lp-ver__marca-uni .lp-ver__emblema {
        width: 2.1rem;
        height: 2.1rem;
    }

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

    .lp-ver__marca-uni small {
        display: block;
        font-size: .7rem;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--lp-claro);
    }

.lp-ver__antetitulo {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1.25rem;
    padding: .4rem 1.1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.lp-ver__punto {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: #fff;
    animation: lp-ver-latido 1.6s ease-in-out infinite;
}

@keyframes lp-ver-latido {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .35;
    }
}

/* El titular es una cifra enorme junto a dos líneas de texto: la composición de
   cartel que sostiene toda la portada. */
.lp-ver__titulo {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin: 0 0 1.25rem;
}

.lp-ver__titulo-cifra {
    font-size: clamp(5rem, 15vw, 11rem);
    font-weight: 800;
    line-height: .82;
    letter-spacing: -.05em;
    /* 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;
    text-shadow: 0 .4rem 2rem rgba(0, 0, 0, .25);
}

.lp-ver__titulo-texto {
    font-size: clamp(1.5rem, 3.4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.02em;
}

.lp-ver__bajada {
    margin: 0;
    max-width: 32rem;
    font-size: 1.08rem;
    color: rgba(255, 255, 255, .95);
}

.lp-ver__sellos {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1.75rem 0 0;
}

.lp-ver__sello {
    padding: .45rem 1rem;
    border-radius: 999px;
    background: #fff;
    color: var(--lp-coral-hondo);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .04em;
    /* Ligeramente giradas, como pegatinas puestas a mano. */
    transform: rotate(-2deg);
}

    .lp-ver__sello:nth-child(2) {
        transform: rotate(1.5deg);
        color: var(--lp-turquesa-hondo);
    }

    .lp-ver__sello:nth-child(3) {
        transform: rotate(-1deg);
        color: var(--lp-noche);
    }

/* ═══ Collage de la portada ════════════════════════════════════════════════
   Tres fotografías giradas y una pegatina redonda con la cuenta atrás. Las
   imágenes van como fondo: si falta un archivo se ve el bloque de color y la
   composición se sostiene igual. */
.lp-ver__collage {
    position: relative;
    height: clamp(20rem, 34vw, 28rem);
}

.lp-ver__foto {
    position: absolute;
    border: .5rem solid #fff;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .28);
    background-color: var(--lp-turquesa);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.lp-ver__foto--uno {
    top: 0;
    left: 4%;
    width: 52%;
    height: 58%;
    transform: rotate(-5deg);
    background-image: url("imagenes/verano-1.jpeg");
}

.lp-ver__foto--dos {
    top: 22%;
    right: 0;
    width: 46%;
    height: 50%;
    transform: rotate(4deg);
    background-color: var(--lp-coral);
    background-image: url("imagenes/verano-2.jpeg");
}

.lp-ver__foto--tres {
    bottom: 0;
    left: 18%;
    width: 48%;
    height: 44%;
    transform: rotate(2.5deg);
    background-color: var(--lp-sol);
    background-image: url("imagenes/verano-3.jpeg");
}

/* Pegatina de la cuenta atrás, encima del collage. */
.lp-ver__reloj {
    position: absolute;
    bottom: 4%;
    right: 2%;
    z-index: 2;
    display: flex;
    align-items: center;
    text-align: center;
    width: 8.5rem;
    height: 8.5rem;
    padding: 1rem;
    border-radius: 50%;
    background: var(--lp-noche);
    color: #fff;
    font-size: .84rem;
    font-weight: 700;
    line-height: 1.25;
    box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .35);
    transform: rotate(-8deg);
}

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

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

.lp-ver__accion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2.2rem;
    border: 0;
    border-radius: 999px;
    background: var(--lp-noche);
    color: #fff;
    font: inherit;
    font-size: .98rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 .6rem 1.4rem var(--lp-sombra-fuerte);
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

    .lp-ver__accion:hover {
        color: #fff;
        transform: translateY(-3px);
        box-shadow: 0 1rem 2rem var(--lp-sombra-fuerte);
    }

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

/* Sobre las secciones claras el botón principal va en naranja, y también sobre la
   noche de la cinta y del cierre: oscuro sobre oscuro no se leería como botón. El
   de contorno del cierre conserva su borde y su fondo transparente. */
.lp-ver__seccion .lp-ver__accion,
.lp-ver__intensidad .lp-ver__accion,
.lp-ver__cinta .lp-ver__accion,
.lp-ver__cierre .lp-ver__accion:not(.lp-ver__accion--hueco) {
    background: var(--lp-sol);
    color: var(--lp-noche);
}

    .lp-ver__seccion .lp-ver__accion:hover,
    .lp-ver__intensidad .lp-ver__accion:hover,
    .lp-ver__cinta .lp-ver__accion:hover,
    .lp-ver__cierre .lp-ver__accion:not(.lp-ver__accion--hueco):hover {
        color: var(--lp-noche);
    }

.lp-ver__accion--hueco {
    background: transparent;
    border: 2px solid currentColor;
    color: inherit;
    box-shadow: none;
}

    .lp-ver__accion--hueco:hover {
        color: inherit;
        box-shadow: none;
    }

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

/* ═══ Selector de vía ══════════════════════════════════════════════════════
   Dos tarjetas grandes con fotografía: es la decisión que ordena toda la página,
   así que ocupa una sección entera y no un par de pestañas. */
.lp-ver__vias {
    padding: 4rem 0;
}

.lp-ver__vias-tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: 1.5rem;
    margin-top: 2.5rem;
}

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

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

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

.lp-ver__via-imagen {
    display: block;
    height: 11rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.lp-ver__via--primera .lp-ver__via-imagen {
    background-color: var(--lp-turquesa);
    background-image: url("imagenes/via-primera.jpeg");
}

.lp-ver__via--repaso .lp-ver__via-imagen {
    background-color: var(--lp-coral);
    background-image: url("imagenes/via-repaso.jpeg");
}

.lp-ver__via-cuerpo {
    display: block;
    padding: 1.5rem;
}

.lp-ver__via-etiqueta {
    display: inline-block;
    margin-bottom: .6rem;
    padding: .25rem .8rem;
    border-radius: 999px;
    background: var(--lp-arena-honda);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--lp-tinta-suave);
}

.lp-ver__via-titulo {
    display: block;
    margin-bottom: .5rem;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.2;
}

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

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

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

/* La vía elegida se marca con el borde grueso y una palomita, no solo con color. */
.lp-ver__via[aria-pressed="true"] {
    border-color: var(--lp-sol);
}

    .lp-ver__via[aria-pressed="true"] .lp-ver__via-marca {
        color: var(--lp-turquesa);
    }

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

/* ═══ Cinta de vía ═════════════════════════════════════════════════════════
   Fija abajo, estrecha y sin barra de progreso: solo recuerda la vía y ofrece
   cambiarla. 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-ver__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-ver__cinta--visible {
    transform: none;
    opacity: 1;
    visibility: visible;
}

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

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

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

.lp-ver__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-ver__cinta-cambio:hover {
        border-color: var(--lp-sol);
        color: var(--lp-sol-claro);
    }

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

.lp-ver__seccion--alterna {
    background: var(--lp-arena-honda);
}

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

.lp-ver__indice--claro {
    color: var(--lp-sol-claro);
}

.lp-ver__h2 {
    margin: 0 0 1rem;
    font-size: clamp(1.8rem, 4vw, 2.9rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.025em;
    color: var(--lp-tinta);
}

.lp-ver__h2--claro {
    color: #fff;
}

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

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

.lp-ver__texto--claro {
    max-width: 36rem;
    margin-inline: auto;
    color: var(--lp-claro);
}

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

.lp-ver__enlace {
    color: var(--lp-turquesa);
    font-weight: 700;
}

/* ═══ Etapas del plan ══════════════════════════════════════════════════════
   Tres bloques en fila, cada uno con su franja de color arriba. */
.lp-ver__etapas {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.25rem;
}

.lp-ver__etapa {
    padding: 1.5rem;
    background: var(--lp-superficie);
    border-radius: 1.25rem;
    border-top: 6px solid var(--lp-sol);
    box-shadow: 0 .6rem 1.6rem var(--lp-sombra);
}

    .lp-ver__etapa:nth-child(2) {
        border-top-color: var(--lp-coral);
    }

    .lp-ver__etapa:nth-child(3) {
        border-top-color: var(--lp-turquesa);
    }

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

.lp-ver__etapa-titulo {
    display: block;
    margin: .3rem 0 .5rem;
    font-size: 1.25rem;
    font-weight: 800;
}

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

.lp-ver__consejo {
    max-width: 46rem;
    margin: 1.75rem 0 0;
    padding: 1.25rem 1.5rem;
    background: var(--lp-noche);
    color: #fff;
    border-radius: 1rem;
    font-size: .98rem;
}

    .lp-ver__consejo span {
        display: block;
        margin-bottom: .3rem;
        font-size: .74rem;
        font-weight: 800;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--lp-sol-claro);
    }

/* ═══ Mosaico ══════════════════════════════════════════════════════════════
   Cuatro piezas de distinto tamaño en una rejilla de cuatro columnas. En pantalla
   estrecha pasan a dos columnas y todas iguales. */
.lp-ver__mosaico-seccion {
    padding: 4.5rem 0;
}

.lp-ver__mosaico {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 11rem;
    gap: 1rem;
    margin-top: 2rem;
}

.lp-ver__pieza {
    position: relative;
    margin: 0;
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 .6rem 1.6rem var(--lp-sombra);
}

.lp-ver__pieza--alta {
    grid-row: span 2;
}

.lp-ver__pieza--ancha {
    grid-column: span 2;
}

.lp-ver__pieza-imagen {
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform .5s ease;
}

.lp-ver__pieza:hover .lp-ver__pieza-imagen {
    transform: scale(1.05);
}

.lp-ver__pieza-imagen--uno {
    background-color: var(--lp-turquesa);
    background-image: url("imagenes/mosaico-1.jpeg");
}

.lp-ver__pieza-imagen--dos {
    background-color: var(--lp-coral);
    background-image: url("imagenes/mosaico-2.jpeg");
}

.lp-ver__pieza-imagen--tres {
    background-color: var(--lp-sol);
    background-image: url("imagenes/mosaico-3.jpeg");
}

.lp-ver__pieza-imagen--cuatro {
    background-color: var(--lp-tinta);
    background-image: url("imagenes/mosaico-4.jpeg");
}

/* El pie va sobre la imagen, con un degradado detrás para que se lea sea cual sea
   la fotografía que se suba. */
.lp-ver__pieza figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2.5rem 1.1rem .9rem;
    background: linear-gradient(180deg, transparent, rgba(20, 10, 18, .85));
    color: #fff;
    font-size: .92rem;
    font-weight: 700;
}

/* ═══ Intensidad ═══════════════════════════════════════════════════════════
   Franja oscura con corte diagonal arriba, que responde al de la portada. */
.lp-ver__intensidad {
    padding: 6rem 0 4.5rem;
    margin-top: -2rem;
    background: var(--lp-noche);
    color: #fff;
    clip-path: polygon(0 3.5rem, 100% 0, 100% 100%, 0 100%);
}

.lp-ver__cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.lp-ver__cifra-numero {
    display: block;
    font-size: clamp(3rem, 7vw, 5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--lp-sol);
    font-variant-numeric: tabular-nums;
}

.lp-ver__cifra-texto {
    display: block;
    margin-top: .4rem;
    font-size: .92rem;
    color: var(--lp-claro);
}

.lp-ver__intensidad-texto {
    max-width: 44rem;
    margin: 0;
    font-size: 1.02rem;
    color: rgba(255, 255, 255, .88);
}

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

.lp-ver__area {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr);
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 1.25rem;
    background: var(--lp-superficie);
    border-radius: 1rem;
    border-left: 6px solid var(--lp-sol);
}

.lp-ver__area--a {
    border-left-color: #0E7C74;
}

.lp-ver__area--b {
    border-left-color: #17518C;
}

.lp-ver__area--c {
    border-left-color: #0E9F6E;
}

.lp-ver__area--d {
    border-left-color: #1E3A6E;
}

.lp-ver__area--e {
    border-left-color: #C9603F;
}

.lp-ver__area-letra {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    color: var(--lp-tinta-suave);
}

.lp-ver__area-nombre {
    display: block;
    font-size: 1.08rem;
    font-weight: 800;
}

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

/* ═══ El trato ═════════════════════════════════════════════════════════════ */
.lp-ver__tratos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
}

.lp-ver__trato {
    position: relative;
    margin: 0;
    padding: 1.5rem 1.5rem 1.5rem 4rem;
    background: var(--lp-superficie);
    border-radius: 1.25rem;
    font-size: .97rem;
    color: var(--lp-tinta-suave);
    box-shadow: 0 .5rem 1.4rem var(--lp-sombra);
}

.lp-ver__trato-numero {
    position: absolute;
    left: 1.25rem;
    top: 1.35rem;
    width: 1.9rem;
    height: 1.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--lp-sol);
    color: var(--lp-noche);
    font-weight: 800;
    font-size: .92rem;
}

/* ═══ 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-ver__faq-comun {
    margin-top: 3rem;
}

.lp-ver__faq-item {
    background: var(--lp-superficie);
    border-radius: 1rem;
    margin-top: .75rem;
    overflow: hidden;
}

    .lp-ver__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-ver__faq-item summary::-webkit-details-marker {
            display: none;
        }

        .lp-ver__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-sol);
        }

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

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

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

/* ═══ Cierre ═══════════════════════════════════════════════════════════════
   Sobre la noche cálida, así engancha con el pie del sitio que el marco añade
   justo debajo. El relleno inferior deja sitio a la cinta de vía. */
.lp-ver__cierre {
    background: var(--lp-noche);
    color: #fff;
    padding: 4.5rem 0 6rem;
    text-align: center;
}

.lp-ver__cuenta-cierre {
    margin: 2rem 0 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--lp-sol-claro);
}

.lp-ver__nota-legal {
    max-width: 44rem;
    margin: 2rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .16);
    font-size: .8rem;
    color: rgba(255, 255, 255, .62);
}

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

    /* El collage baja de altura y la pegatina se recoloca para no salirse. */
    .lp-ver__collage {
        height: 20rem;
    }

    .lp-ver__reloj {
        width: 7rem;
        height: 7rem;
        font-size: .74rem;
        right: 0;
        bottom: 0;
    }

    /* El mosaico pasa a dos columnas y todas las piezas miden lo mismo: con cuatro
       columnas las piezas quedarían en tiras. */
    .lp-ver__mosaico {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 9rem;
    }

    .lp-ver__pieza--alta,
    .lp-ver__pieza--ancha {
        grid-row: auto;
        grid-column: auto;
    }
}

@media (max-width: 35.99rem) {
    .lp-ver__seccion,
    .lp-ver__vias,
    .lp-ver__mosaico-seccion {
        padding: 3.25rem 0;
    }

    .lp-ver__portada {
        padding: 3rem 0 5.5rem;
    }

    /* La cifra del titular pasa encima del texto: en línea no cabe. */
    .lp-ver__titulo {
        flex-direction: column;
        align-items: flex-start;
        gap: .25rem;
    }

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

    .lp-ver__uni {
        margin: 0;
    }

    .lp-ver__accion {
        width: 100%;
    }

    .lp-ver__accion--mini,
    .lp-ver__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-ver__cinta .lp-ver__ancho {
        width: calc(100% - 2rem);
    }

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

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

    .lp-ver__cinta .lp-ver__accion--mini {
        padding: .45rem .9rem;
        font-size: .8rem;
    }

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

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

    .lp-ver__area-letra {
        font-size: 1.8rem;
    }

    .lp-ver__etapa,
    .lp-ver__trato,
    .lp-ver__via-cuerpo {
        padding: 1.25rem;
    }

    .lp-ver__trato {
        padding-left: 3.5rem;
    }
}