/* Landing del Ciclo Semestral — Pontificia Universidad Católica del Perú.

   TODO cuelga de .lp-revela. El marco del sitio inyecta en ESTE documento
   Bootstrap, akcadmia.css y sitio.css, y lo hace DESPUÉS de esta hoja: a igualdad
   de especificidad ganan sus reglas. Por eso el prefijo propio, el bloque de
   neutralización y los !important de la costura con la cabecera.

   CONCEPTO: un cuarto oscuro de fotografía. Con el tema claro las secciones de
   trabajo son una mesa de luz (blanco frío con un halo central); con el oscuro,
   el mismo banco del cuarto oscuro bajo la luz roja de seguridad. Las fotos son
   el material del diseño: copias con borde de papel, tomas en una hoja de
   contactos, copias en las cubetas, una tira de fotomatón y copias colgadas.

   SIETE FAMILIAS DE COLOR, Y NO SE MEZCLAN:
     · LA UNIVERSIDAD (--lp-uni-*): azul noche y celeste de la franja superior, la
       identidad común de las landings de la PUCP.
     · LA MESA (--lp-mesa-*, --lp-tinta-*): la superficie que cambia con el tema.
     · LAS SUPERFICIES FIJAS (--lp-pelicula-*, --lp-seguridad-*, --lp-camara-*,
       --lp-cabina-*, --lp-negativo-*): película, luz de seguridad, cuerpo de
       cámara, cortina de fotomatón y negativo de color. Son oscuras en los dos
       temas, como lo son en la vida real.
     · LOS PAPELES (--lp-papel-*, --lp-cristal-*, --lp-diapo-*): papel
       fotográfico, sobres de papel cristal y marcos de diapositiva. Se quedan
       claros en los dos temas, con su propia tinta oscura.
     · EL LÁPIZ GRASO (--lp-lapiz, --lp-marcador): las marcas del fotógrafo.
     · LA QUÍMICA (--lp-vidrio-*, --lp-liquido-*, --lp-cubeta-*): probetas y
       cubetas.
     · LA ACCIÓN (--lp-accion-*): rojo de lápiz graso sobre la mesa; amarillo de
       reloj de revelado (--lp-accion-clara-*) sobre las superficies oscuras.

   Cada superficie fija además unas variables locales (--lp-sup-tinta,
   --lp-sup-suave, --lp-sup-linea, --lp-foco y --lp-dibujo-trazo) para que las
   piezas comunes y los iconos reutilizados se lean bien encima de cualquiera.

   El movimiento solo existe con prefers-reduced-motion: no-preference y ninguna
   animación se repite sin fin. */
.lp-revela {
    /* ── La universidad ────────────────────────────────────────────────── */
    --lp-uni: #0B2A5B;
    --lp-uni-alto: #14407F;
    --lp-uni-celeste: #8FCDF3;
    --lp-uni-tinta: #FFFFFF;
    --lp-uni-suave: #CFE3F6;
    /* ── La mesa: mesa de luz de día, banco del cuarto oscuro de noche ── */
    --lp-mesa: #ECEEEA;
    --lp-mesa-luz: #FFFFFF;
    --lp-mesa-borde: #C3C9C0;
    --lp-mesa-panel: rgba(255, 255, 255, .78);
    --lp-tinta: #15181A;
    --lp-tinta-suave: #454C50;
    --lp-sombra: rgba(16, 20, 24, .22);
    --lp-perforacion: #F3F4F0;
    /* ── Superficies fijas, oscuras en los dos temas ───────────────────── */
    --lp-pelicula: #15110E;
    --lp-pelicula-alta: #251D17;
    --lp-pelicula-borde: #3E3228;
    --lp-pelicula-tinta: #F6EDE2;
    --lp-pelicula-suave: #DCCDB9;
    --lp-pelicula-marca: #EAAA52;
    --lp-pelicula-velada: #2E2924;
    --lp-seguridad: #170B0A;
    --lp-seguridad-luz: rgba(255, 58, 40, .4);
    --lp-seguridad-lampara: #FF3B2E;
    --lp-seguridad-tinta: #FFF2EF;
    --lp-seguridad-suave: #F3CFC9;
    --lp-seguridad-linea: rgba(255, 214, 205, .34);
    --lp-camara: #1C1C1F;
    --lp-camara-grano: rgba(255, 255, 255, .05);
    --lp-camara-tinta: #F4F4F6;
    --lp-camara-suave: #CACDD2;
    --lp-camara-linea: rgba(255, 255, 255, .16);
    --lp-cromo: #D3D7DB;
    --lp-cromo-alto: #F8F9FA;
    --lp-cromo-sombra: #727980;
    --lp-cabina: #0E4550;
    --lp-cabina-pliegue: rgba(0, 0, 0, .24);
    --lp-cabina-brillo: rgba(255, 255, 255, .06);
    --lp-cabina-tinta: #F1FAFB;
    --lp-cabina-suave: #CDE5EA;
    --lp-negativo-base: #43220F;
    --lp-negativo-cuadro: #643615;
    --lp-negativo-tinta: #FFF0E0;
    --lp-negativo-suave: #F4D4B4;
    --lp-negativo-dibujo: #C2EAF6;
    /* ── Papeles: claros en los dos temas ──────────────────────────────── */
    --lp-papel: #FBFAF6;
    --lp-papel-borde: #DCD7CB;
    --lp-papel-tinta: #1A1C1E;
    --lp-papel-suave: #50575C;
    --lp-papel-enlace: #1D5A9E;
    --lp-papel-lapiz: #B8231A;
    --lp-cristal: rgba(251, 249, 243, .97);
    --lp-cristal-trama: rgba(120, 112, 96, .06);
    --lp-cristal-linea: #CBC3B2;
    --lp-diapo-1: linear-gradient(140deg, #F6D37A, #EB9D3F);
    --lp-diapo-2: linear-gradient(140deg, #A9D9A0, #4F9E66);
    --lp-diapo-3: linear-gradient(140deg, #9CCBF2, #3E7DC0);
    --lp-diapo-4: linear-gradient(140deg, #F4AFC2, #C9547A);
    --lp-diapo-5: linear-gradient(140deg, #C9B8F0, #7258B8);
    --lp-diapo-trazo: #1D1A17;
    --lp-pinza: #C99A62;
    --lp-pinza-sombra: #8E6638;
    /* ── El lápiz graso ────────────────────────────────────────────────── */
    --lp-lapiz: #D0291F;
    --lp-marcador: rgba(242, 194, 48, .55);
    /* ── La química ────────────────────────────────────────────────────── */
    --lp-vidrio: rgba(255, 255, 255, .6);
    --lp-vidrio-borde: #8C959A;
    --lp-graduacion: rgba(22, 25, 27, .5);
    --lp-liquido-lectura: #3A8CD0;
    --lp-liquido-matematica: #E0862A;
    --lp-liquido-colegio: #4E9F69;
    --lp-liquido-brillo: rgba(255, 255, 255, .45);
    --lp-cubeta: #2B1614;
    --lp-cubeta-borde: #6E2C25;
    --lp-cubeta-liquido: rgba(255, 92, 70, .2);
    /* ── La acción ─────────────────────────────────────────────────────── */
    --lp-accion: #C2281F;
    --lp-accion-alta: #A11F18;
    --lp-accion-tinta: #FFFFFF;
    --lp-accion-clara: #FFD45C;
    --lp-accion-clara-alta: #FFE395;
    --lp-accion-clara-tinta: #2A1A00;
    --lp-sombra-flotante: rgba(0, 0, 0, .45);
    /* ── Sombras y brillos de los objetos: iguales en los dos temas porque
          caen sobre superficies oscuras o sobre papel ─────────────────────── */
    --lp-sombra-honda: rgba(0, 0, 0, .62);
    --lp-reflejo: rgba(255, 255, 255, .14);
    --lp-reflejo-suave: rgba(255, 255, 255, .09);
    --lp-diapo-filete: rgba(0, 0, 0, .15);
    --lp-diapo-relleno: rgba(255, 255, 255, .45);
    --lp-negativo-relleno: rgba(194, 234, 246, .16);
    --lp-pelicula-relleno: rgba(234, 170, 82, .2);
    /* ── Medidas y letras ──────────────────────────────────────────────── */
    --lp-ancho: 76rem;
    --lp-titular: Bahnschrift, "DIN Alternate", "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", "DejaVu Sans Condensed", "Segoe UI", sans-serif;
    --lp-texto: "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
    --lp-borde: "OCR A Std", "OCR A Extended", Consolas, "Lucida Console", "DejaVu Sans Mono", ui-monospace, monospace;
    --lp-dibujo-trazo: var(--lp-tinta);
    --lp-dibujo-relleno: rgba(208, 41, 31, .16);
    --lp-dibujo-grosor: 1.6px;
    margin: 0;
    background: var(--lp-mesa);
    color: var(--lp-tinta);
    font-family: var(--lp-texto);
    font-size: 1rem;
    line-height: 1.6;
    color-scheme: light;
}

/* Tema oscuro del sitio: la mesa de luz se apaga y queda el cuarto oscuro con su
   luz roja. El atributo lo pone Akcadmia en un ancestro, también cuando el tema
   se hereda del navegador; aquí solo se reasignan variables, nunca reglas. Las
   superficies fijas y los papeles no cambian. */
[data-tema="oscuro"] .lp-revela {
    --lp-uni: #061B3E;
    --lp-uni-alto: #0D2B5E;
    --lp-uni-celeste: #A3D6F7;
    --lp-uni-suave: #D6E7F8;
    --lp-mesa: #110D0D;
    --lp-mesa-luz: #2C1513;
    --lp-mesa-borde: #42302D;
    --lp-mesa-panel: rgba(36, 24, 23, .82);
    --lp-tinta: #F6ECE8;
    --lp-tinta-suave: #D3C2BD;
    --lp-sombra: rgba(0, 0, 0, .55);
    --lp-perforacion: #241A19;
    --lp-lapiz: #FF6A5C;
    --lp-marcador: rgba(255, 106, 92, .36);
    --lp-vidrio: rgba(255, 255, 255, .07);
    --lp-vidrio-borde: #8D7D79;
    --lp-graduacion: rgba(255, 236, 232, .45);
    --lp-liquido-lectura: #68B2EE;
    --lp-liquido-matematica: #F2A65A;
    --lp-liquido-colegio: #78C98F;
    --lp-liquido-brillo: rgba(255, 255, 255, .3);
    --lp-dibujo-relleno: rgba(255, 106, 92, .2);
    --lp-accion: #FF6A5C;
    --lp-accion-alta: #FF8C80;
    --lp-accion-tinta: #2A0503;
    color-scheme: dark;
}

/* ═══ 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. El hueco se pinta del color de la franja institucional
   para que no se note. El color va escrito porque aquí se pinta un ancestro de
   .lp-revela, que no ve sus variables. */
body:has(> .lp-revela) {
    margin: 0 !important;
    padding: 0 !important;
    background-color: #0B2A5B;
}

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

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

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

/* ═══ Neutralización de los estilos del sitio ══════════════════════════════
   :where aporta especificidad cero: derrota las reglas de elemento del sitio y
   queda por debajo de cualquier clase de esta hoja. */
.lp-revela :where(h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, a, span, strong, small, b, label, legend, summary, button, input, details, fieldset, article, section) {
    color: inherit;
    font-family: inherit;
}

.lp-revela :where(h1, h2, h3, h4, p, dl, dd, figure) {
    margin: 0;
}

.lp-revela :where(ul, ol) {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Bootstrap hace flotar las leyendas a lo ancho y les sube la letra. */
.lp-revela :where(legend) {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    font-size: inherit;
    line-height: inherit;
}

.lp-revela :where(fieldset) {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.lp-revela :where(button) {
    font: inherit;
}

.lp-revela :where(dt) {
    font-weight: inherit;
}

.lp-revela :where(label) {
    display: block;
    margin: 0;
}

.lp-revela,
.lp-revela *,
.lp-revela *::before,
.lp-revela *::after {
    box-sizing: border-box;
}

/* Lo que el guion oculta con hidden se oculta siempre, aunque una regla de esta
   hoja le haya dado otro display. */
.lp-revela [hidden] {
    display: none !important;
}

/* Sin guion no se escriben las fechas ni los datos del ciclo: lo que depende de
   ellos no se enseña, para no dejar etiquetas con el hueco vacío. */
.lp-revela:not(.lp-revela--animada) :is([data-depende-fechas], [data-requiere-guion]) {
    display: none !important;
}

/* Las anclas no quedan tapadas por una cabecera fija del sitio. */
.lp-revela [id] {
    scroll-margin-top: 5rem;
}

/* Las fotos reservan su proporción con width y height del marcado, así la página
   no salta al cargarlas. Dentro de :where para que la clase de cada foto pueda
   cambiarle el alto sin pelear por especificidad. */
.lp-revela :where(img) {
    display: block;
    max-width: 100%;
    height: auto;
}

/* El foco se ve sobre cualquier superficie: cada una fija su color en --lp-foco. */
.lp-revela :where(a, button, summary, input, [tabindex]):focus-visible {
    outline: 3px solid var(--lp-foco, var(--lp-accion));
    outline-offset: 3px;
}

/* Texto solo para lectores de pantalla. También esconde los radios: siguen en el
   orden del teclado y su etiqueta enseña el foco con :has(:focus-visible). */
.lp-revela__oculto {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ═══ Iconos ═══════════════════════════════════════════════════════════════
   La hoja de símbolos no ocupa sitio pero sigue en el documento: con display:
   none algunos navegadores dejarían de pintar los <use>. El trazo no escala con
   el icono (vector-effect) y su color llega por variables, que sí atraviesan el
   <use>: cada superficie las ajusta. */
.lp-revela__simbolos {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.lp-revela__t-linea,
.lp-revela__t-grueso,
.lp-revela__t-emblema-trazo,
.lp-revela__t-lapiz {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lp-revela__t-linea,
.lp-revela__t-grueso,
.lp-revela__t-emblema-trazo {
    vector-effect: non-scaling-stroke;
}

.lp-revela__t-linea {
    stroke: var(--lp-dibujo-trazo);
    stroke-width: var(--lp-dibujo-grosor);
}

.lp-revela__t-grueso {
    stroke: var(--lp-dibujo-trazo);
    stroke-width: calc(var(--lp-dibujo-grosor) * 2.6);
}

.lp-revela__t-relleno {
    fill: var(--lp-dibujo-relleno);
}

.lp-revela__t-vidrio {
    fill: var(--lp-vidrio);
}

.lp-revela__t-emblema-libro {
    fill: var(--lp-uni-alto);
}

.lp-revela__t-emblema-trazo {
    stroke: var(--lp-uni-celeste);
    stroke-width: 1.8px;
}

/* El óvalo de lápiz graso: su recorrido (pathLength="1") permite dibujarlo con
   stroke-dashoffset, que se hereda a través del <use>. Va sin vector-effect a
   propósito: con él el trazo discontinuo se mide en píxeles de pantalla y la
   normalización de pathLength deja de cubrir el óvalo entero. El grosor va en
   unidades del dibujo; los dos símbolos de óvalo tienen la proporción de lo que
   rodean para que el trazo no se deforme. */
.lp-revela__t-lapiz {
    stroke: var(--lp-lapiz);
    stroke-width: 1.9;
}

/* ═══ Superficies ══════════════════════════════════════════════════════════ */
.lp-revela__mesa,
.lp-revela__pelicula,
.lp-revela__seguridad,
.lp-revela__camara,
.lp-revela__cabina {
    position: relative;
    padding-block: clamp(3.5rem, 2rem + 6vw, 6.5rem);
    color: var(--lp-sup-tinta);
}

/* La mesa de luz: un halo blanco en el centro, como el difusor encendido. De
   noche el mismo halo es el reflejo rojo de la luz de seguridad. */
.lp-revela__mesa {
    --lp-sup-tinta: var(--lp-tinta);
    --lp-sup-suave: var(--lp-tinta-suave);
    --lp-sup-linea: var(--lp-mesa-borde);
    --lp-foco: var(--lp-accion);
    --lp-dibujo-trazo: var(--lp-tinta);
    background-color: var(--lp-mesa);
    background-image: radial-gradient(ellipse 75% 60% at 50% 35%, var(--lp-mesa-luz), transparent 72%);
}

.lp-revela__pelicula {
    --lp-sup-tinta: var(--lp-pelicula-tinta);
    --lp-sup-suave: var(--lp-pelicula-suave);
    --lp-sup-linea: var(--lp-pelicula-borde);
    --lp-foco: var(--lp-accion-clara);
    --lp-dibujo-trazo: var(--lp-pelicula-tinta);
    --lp-dibujo-relleno: var(--lp-pelicula-relleno);
    background-color: var(--lp-pelicula);
    background-image: linear-gradient(180deg, var(--lp-pelicula), var(--lp-pelicula-alta));
}

/* Luz de seguridad: el resplandor rojo cae desde una lámpara colgada arriba, al
   centro (::before). */
.lp-revela__seguridad {
    --lp-sup-tinta: var(--lp-seguridad-tinta);
    --lp-sup-suave: var(--lp-seguridad-suave);
    --lp-sup-linea: var(--lp-seguridad-linea);
    --lp-foco: var(--lp-accion-clara);
    --lp-dibujo-trazo: var(--lp-seguridad-tinta);
    background-color: var(--lp-seguridad);
    background-image: radial-gradient(ellipse 60% 50% at 50% 0%, var(--lp-seguridad-luz), transparent 72%);
}

    .lp-revela__seguridad::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        width: 4.5rem;
        height: 1.3rem;
        margin-left: -2.25rem;
        border-radius: 0 0 2.25rem 2.25rem;
        background: var(--lp-seguridad-lampara);
        box-shadow: 0 0 2.5rem 1rem var(--lp-seguridad-luz);
    }

/* El cuerpo de la cámara: piel granulada hecha con puntos. */
.lp-revela__camara {
    --lp-sup-tinta: var(--lp-camara-tinta);
    --lp-sup-suave: var(--lp-camara-suave);
    --lp-sup-linea: var(--lp-camara-linea);
    --lp-foco: var(--lp-accion-clara);
    --lp-dibujo-trazo: var(--lp-camara-tinta);
    background-color: var(--lp-camara);
    background-image: radial-gradient(var(--lp-camara-grano) 1px, transparent 1.6px);
    background-size: 6px 6px;
}

/* La cortina del fotomatón: pliegues verticales de sombra y brillo. */
.lp-revela__cabina {
    --lp-sup-tinta: var(--lp-cabina-tinta);
    --lp-sup-suave: var(--lp-cabina-suave);
    --lp-sup-linea: rgba(241, 250, 251, .3);
    --lp-foco: var(--lp-accion-clara);
    --lp-dibujo-trazo: var(--lp-cabina-tinta);
    background-color: var(--lp-cabina);
    background-image: repeating-linear-gradient(90deg, var(--lp-cabina-pliegue) 0 1.2rem, transparent 1.2rem 2.6rem, var(--lp-cabina-brillo) 2.6rem 3.4rem, transparent 3.4rem 4.6rem);
}

/* El ancho útil es también el contenedor de las unidades cqi: los titulares se
   limitan a una fracción de él y nunca desbordan una columna estrecha. */
.lp-revela__ancho {
    container-type: inline-size;
    width: 100%;
    max-width: var(--lp-ancho);
    margin-inline: auto;
    padding-inline: 1rem;
}

    .lp-revela__ancho--estrecho {
        max-width: 52rem;
    }

@media (min-width: 768px) {
    .lp-revela__ancho {
        padding-inline: 1.75rem;
    }
}

/* ═══ Textos comunes ═══════════════════════════════════════════════════════ */
.lp-revela__cabecera {
    max-width: 48rem;
    margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}

/* El antetítulo es el rótulo de la toma: un punto rojo como el piloto de
   grabación y el número de toma recuadrado. */
.lp-revela__antetitulo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .75rem;
    margin-bottom: .9rem;
    color: var(--lp-sup-suave);
    font-family: var(--lp-borde);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.lp-revela__antetitulo-toma {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .15rem .55rem;
    border: 1.5px solid currentColor;
    border-radius: .2rem;
}

    .lp-revela__antetitulo-toma::before {
        content: "";
        width: .55rem;
        height: .55rem;
        border-radius: 50%;
        background: var(--lp-lapiz);
    }

.lp-revela__h1,
.lp-revela__h2 {
    font-family: var(--lp-titular);
    font-stretch: condensed;
    font-weight: 700;
    text-wrap: balance;
}

.lp-revela__h1 {
    font-size: min(clamp(2.7rem, 1.5rem + 4.8vw, 5.1rem), 14cqi);
    line-height: .98;
    letter-spacing: .005em;
    text-transform: uppercase;
}

/* «PUCP» rodeada con lápiz graso: un óvalo de borde, algo torcido, que se dibuja
   con un barrido al cargar. */
.lp-revela__h1-marca {
    position: relative;
    display: inline-block;
    padding-inline: .1em;
}

    .lp-revela__h1-marca::after {
        content: "";
        position: absolute;
        inset: -.12em -.28em -.08em -.26em;
        border: .075em solid var(--lp-lapiz);
        border-radius: 50%;
        rotate: -4deg;
        pointer-events: none;
    }

.lp-revela__h2 {
    font-size: min(clamp(2rem, 1.2rem + 2.8vw, 3.3rem), 10.5cqi);
    line-height: 1.04;
}

.lp-revela__bajada {
    max-width: 44rem;
    margin-top: 1rem;
    color: var(--lp-sup-suave);
    font-size: 1.08rem;
}

    .lp-revela__bajada--fechas {
        margin-top: .6rem;
        color: var(--lp-sup-tinta);
        font-family: var(--lp-borde);
        font-size: .95rem;
        font-weight: 700;
    }

.lp-revela__nota {
    max-width: 52rem;
    margin: 2rem auto 0;
    color: var(--lp-sup-suave);
    font-size: .95rem;
    text-align: center;
}

/* ═══ Botones ══════════════════════════════════════════════════════════════ */
.lp-revela__boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 3rem;
    padding: .75rem 1.45rem;
    border: 2px solid var(--lp-accion);
    border-radius: .4rem;
    background: var(--lp-accion);
    color: var(--lp-accion-tinta);
    font-family: var(--lp-titular);
    font-stretch: condensed;
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: .03em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: 0 .8rem 1.5rem -1rem var(--lp-sombra);
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

    .lp-revela__boton:hover {
        border-color: var(--lp-accion-alta);
        background: var(--lp-accion-alta);
        color: var(--lp-accion-tinta);
    }

    .lp-revela__boton:active {
        transform: translateY(1px);
    }

.lp-revela__boton--linea {
    border-color: currentColor;
    background: transparent;
    color: var(--lp-sup-tinta);
    box-shadow: none;
}

    .lp-revela__boton--linea:hover {
        border-color: var(--lp-sup-tinta);
        background: var(--lp-mesa-panel);
        color: var(--lp-sup-tinta);
    }

/* Sobre las superficies oscuras el botón es el amarillo del reloj de revelado. */
.lp-revela__boton--claro {
    border-color: var(--lp-accion-clara);
    background: var(--lp-accion-clara);
    color: var(--lp-accion-clara-tinta);
}

    .lp-revela__boton--claro:hover {
        border-color: var(--lp-accion-clara-alta);
        background: var(--lp-accion-clara-alta);
        color: var(--lp-accion-clara-tinta);
    }

.lp-revela__boton--grande {
    min-height: 3.5rem;
    padding: .9rem 2.1rem;
    font-size: 1.22rem;
}

/* El diafragma de los botones toma el color de su letra. */
.lp-revela__boton-icono {
    flex: none;
    width: 1.4rem;
    height: 1.4rem;
    --lp-dibujo-trazo: currentColor;
    --lp-dibujo-relleno: transparent;
    --lp-dibujo-grosor: 1.5px;
}

.lp-revela__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.75rem;
}

.lp-revela__accion {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
    text-align: center;
}

    .lp-revela__accion--izquierda {
        align-items: flex-start;
        text-align: left;
    }

.lp-revela__accion-nota {
    max-width: 30rem;
    color: var(--lp-sup-suave);
    font-size: .92rem;
}

@media (max-width: 575.98px) {
    .lp-revela__acciones .lp-revela__boton {
        width: 100%;
    }
}

/* ═══ Franja de la universidad ═════════════════════════════════════════════ */
.lp-revela__franja {
    background: linear-gradient(90deg, var(--lp-uni), var(--lp-uni-alto));
    color: var(--lp-uni-tinta);
    border-bottom: 3px solid var(--lp-uni-celeste);
}

.lp-revela__franja-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem 1rem;
    padding-block: .7rem;
}

.lp-revela__franja-emblema {
    flex: none;
    width: 2rem;
    height: 2.2rem;
}

.lp-revela__franja-nombre {
    font-family: var(--lp-titular);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
}

.lp-revela__franja-lugar {
    color: var(--lp-uni-suave);
    font-size: .85rem;
}

.lp-revela__franja-sello {
    margin-left: auto;
    padding: .2rem .7rem;
    border: 1.5px solid var(--lp-uni-celeste);
    border-radius: 999px;
    color: var(--lp-uni-celeste);
    font-family: var(--lp-borde);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

@media (max-width: 575.98px) {
    .lp-revela__franja-fila {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: .75rem;
    }

    .lp-revela__franja-emblema {
        grid-row: span 3;
    }

    .lp-revela__franja-sello {
        justify-self: start;
        margin: .3rem 0 0;
    }
}

/* ═══ Toma 1 · La copia ════════════════════════════════════════════════════ */
.lp-revela__portada {
    overflow: clip;
    padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(3.5rem, 2rem + 5vw, 6rem);
}

.lp-revela__portada-rejilla {
    display: grid;
    gap: 2.75rem;
    align-items: center;
}

@media (min-width: 992px) {
    .lp-revela__portada-rejilla {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 3.5rem;
    }
}

.lp-revela__entrada {
    max-width: 38rem;
    margin-top: 1.25rem;
    color: var(--lp-sup-suave);
    font-size: clamp(1.05rem, 1rem + .35vw, 1.22rem);
}

/* Los datos de la toma, como el pie técnico de una foto: etiquetas en letra de
   borde de película y valores en negrita, separados por líneas finas. */
.lp-revela__exif {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1.25rem;
    max-width: 34rem;
    margin-top: 2rem;
    border-top: 2px solid var(--lp-sup-tinta);
}

.lp-revela__exif-dato {
    display: flex;
    flex-direction: column;
    padding: .55rem 0;
    border-bottom: 1px solid var(--lp-sup-linea);
}

    .lp-revela__exif-dato dt {
        color: var(--lp-sup-suave);
        font-family: var(--lp-borde);
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

    .lp-revela__exif-dato dd {
        font-weight: 700;
        line-height: 1.35;
    }

/* La composición: copia, tira y lupa. En móvil van una debajo de otra; desde
   576 px la copia se monta sobre la tira, que cruza en diagonal por detrás. */
.lp-revela__toma {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(100%, 34rem);
    margin-inline: auto;
}

/* En el flujo de móvil la copia va primero y la tira debajo; desde 576 px las
   dos se posicionan y el orden deja de importar. */
.lp-revela__copia {
    position: relative;
    z-index: 2;
    order: -1;
    padding: .55rem .55rem 2.3rem;
    background: var(--lp-papel);
    box-shadow: 0 1.8rem 3rem -1.6rem var(--lp-sombra);
    rotate: 1.2deg;
}

.lp-revela__copia-foto {
    width: 100%;
}

.lp-revela__copia-pie {
    position: absolute;
    right: .9rem;
    bottom: .55rem;
    left: .8rem;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    color: var(--lp-papel-suave);
    font-family: var(--lp-borde);
    font-size: .74rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.lp-revela__copia-pie-marca {
    color: var(--lp-papel-lapiz);
    font-family: var(--lp-titular);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: none;
}

.lp-revela__ovalo {
    position: absolute;
    overflow: visible;
    pointer-events: none;
}

.lp-revela__ovalo--portada {
    right: .1rem;
    bottom: -.2rem;
    width: 8.6rem;
    height: 2.4rem;
}

/* La tira de negativos: perforaciones elípticas arriba y abajo (dos degradados
   radiales repetidos) y cuatro tomas. */
.lp-revela__tira {
    position: relative;
    display: flex;
    gap: .35rem;
    padding: 1.15rem .4rem;
    background-color: var(--lp-pelicula);
    background-image: radial-gradient(ellipse .3rem .22rem at 50% 50%, var(--lp-perforacion) 92%, transparent 100%), radial-gradient(ellipse .3rem .22rem at 50% 50%, var(--lp-perforacion) 92%, transparent 100%);
    background-size: 1.1rem .6rem, 1.1rem .6rem;
    background-position: 0 .28rem, 0 calc(100% - .28rem);
    background-repeat: repeat-x;
    box-shadow: 0 1rem 1.6rem -1.2rem var(--lp-sombra);
}

.lp-revela__tira-cuadro {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    border-radius: .15rem;
}

    .lp-revela__tira-cuadro img {
        width: 100%;
        aspect-ratio: 3 / 2;
        object-fit: cover;
        filter: saturate(.85);
    }

.lp-revela__tira--portada {
    margin-top: 1.25rem;
}

.lp-revela__lupa-objeto {
    display: none;
}

@media (min-width: 576px) {
    .lp-revela__toma {
        aspect-ratio: 1.12;
    }

    .lp-revela__copia {
        position: absolute;
        right: 3%;
        bottom: 2%;
        width: 80%;
        rotate: 3deg;
    }

    .lp-revela__tira--portada {
        position: absolute;
        top: 6%;
        left: -2%;
        right: -2%;
        z-index: 1;
        margin: 0;
        rotate: -7deg;
    }

    .lp-revela__lupa-objeto {
        position: absolute;
        z-index: 3;
        left: 1%;
        bottom: 4%;
        display: block;
        width: 5.4rem;
        height: 5.4rem;
        rotate: -18deg;
        --lp-dibujo-trazo: var(--lp-tinta);
        --lp-dibujo-grosor: 2px;
        filter: drop-shadow(0 .5rem .6rem var(--lp-sombra));
    }
}

@media (min-width: 1200px) {
    .lp-revela__tira--portada {
        left: -8%;
    }
}

@media (prefers-reduced-motion: no-preference) {
    /* La copia sale del revelador: empieza lavada y sin contraste y llega a su
       imagen. La tira entra deslizándose, el óvalo de la copia se dibuja y la
       lupa cae sobre la mesa. */
    .lp-revela--animada .lp-revela__copia-foto {
        animation: lp-revela-revelar 2.8s cubic-bezier(.4, 0, .2, 1) .3s both;
    }

    .lp-revela--animada .lp-revela__tira--portada {
        animation: lp-revela-entrar-tira 1.1s cubic-bezier(.2, .8, .3, 1) both;
    }

    .lp-revela--animada .lp-revela__ovalo--portada {
        stroke-dasharray: 1;
        animation: lp-revela-trazar .9s ease-out 2.6s both;
    }

    .lp-revela--animada .lp-revela__h1-marca::after {
        animation: lp-revela-barrer .7s ease-out 1.1s both;
    }

    .lp-revela--animada .lp-revela__lupa-objeto {
        animation: lp-revela-caer .8s cubic-bezier(.3, 1.4, .5, 1) 1.6s both;
    }
}

@keyframes lp-revela-revelar {
    from {
        filter: grayscale(1) brightness(2.4) contrast(.2);
    }

    45% {
        filter: grayscale(.8) brightness(1.5) contrast(.55);
    }

    to {
        filter: none;
    }
}

@keyframes lp-revela-entrar-tira {
    from {
        opacity: 0;
        translate: 3rem -1rem;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@keyframes lp-revela-trazar {
    from {
        stroke-dashoffset: 1;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes lp-revela-barrer {
    from {
        clip-path: inset(0 100% 0 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes lp-revela-caer {
    from {
        opacity: 0;
        translate: 0 -2.5rem;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

/* ═══ Apariciones ══════════════════════════════════════════════════════════
   El guion pone --visible al entrar en pantalla. El estado de partida solo existe
   con movimiento permitido y guion en marcha: sin ellos todo se ve desde el
   principio. */
@media (prefers-reduced-motion: no-preference) {
    .lp-revela--animada [data-revelar] {
        opacity: 0;
        translate: 0 1.5rem;
        transition: opacity .7s ease-out, translate .7s cubic-bezier(.2, .7, .3, 1);
    }

        .lp-revela--animada [data-revelar].lp-revela--visible {
            opacity: 1;
            translate: 0 0;
        }
}

/* ═══ Toma 2 · Hoja de contactos ═══════════════════════════════════════════ */
.lp-revela__contactos {
    display: grid;
    gap: 2rem;
}

@media (min-width: 992px) {
    .lp-revela__contactos {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
        gap: 2.5rem;
        align-items: start;
    }

    .lp-revela__lupa {
        position: sticky;
        top: 6rem;
    }
}

/* La hoja de contactos es papel fotográfico con las tiras impresas encima. */
.lp-revela__hoja {
    padding: 1rem;
    background: var(--lp-papel);
    color: var(--lp-papel-tinta);
    box-shadow: 0 1.5rem 3rem -1.6rem var(--lp-sombra-honda);
    --lp-foco: var(--lp-papel-lapiz);
}

/* En móvil la hoja es una sola tira que se desliza de lado; desde 768 px son dos
   tiras de cuatro tomas. Cada toma pinta su tramo de película, así las tomas
   vecinas forman una tira continua y entre filas asoma el papel. */
.lp-revela__rollo {
    display: flex;
    gap: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}

@media (min-width: 768px) {
    .lp-revela__rollo {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        row-gap: 1rem;
        overflow: visible;
    }
}

.lp-revela__cuadro {
    position: relative;
    flex: 0 0 min(64%, 15rem);
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.lp-revela__cuadro-ventana {
    position: relative;
    display: block;
    padding: 1.1rem .3rem 1.95rem;
    background-color: var(--lp-pelicula);
    background-image: radial-gradient(ellipse .28rem .2rem at 50% 50%, var(--lp-papel) 92%, transparent 100%), radial-gradient(ellipse .28rem .2rem at 50% 50%, var(--lp-papel) 92%, transparent 100%);
    background-size: 1rem .55rem, 1rem .55rem;
    background-position: 0 .3rem, 0 calc(100% - .3rem);
    background-repeat: repeat-x;
}

.lp-revela__cuadro-foto {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: .15rem;
    filter: brightness(.78) saturate(.8);
    transition: filter .3s ease;
}

.lp-revela__cuadro .lp-revela__ovalo {
    top: .45rem;
    left: -.35rem;
    width: calc(100% + .7rem);
    height: calc(100% - 1.75rem);
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset .6s ease-out;
}

/* El número de toma va impreso en el borde de la película, en ámbar, entre la
   foto y las perforaciones. */
.lp-revela__cuadro-numero {
    position: absolute;
    bottom: .95rem;
    left: .5rem;
    line-height: 1;
    color: var(--lp-pelicula-marca);
    font-family: var(--lp-borde);
    font-size: .72rem;
    font-weight: 700;
    pointer-events: none;
}

    .lp-revela__cuadro-numero::after {
        content: "▸";
        margin-left: .25rem;
    }

.lp-revela__cuadro-nombre {
    padding: .5rem .35rem .2rem;
    color: var(--lp-papel-suave);
    font-family: var(--lp-titular);
    font-stretch: condensed;
    font-size: .98rem;
    font-weight: 700;
    line-height: 1.25;
}

.lp-revela__cuadro:hover .lp-revela__cuadro-foto {
    filter: brightness(.95) saturate(.95);
}

.lp-revela__cuadro:has(:checked) .lp-revela__cuadro-foto {
    filter: none;
}

.lp-revela__cuadro:has(:checked) .lp-revela__ovalo {
    stroke-dashoffset: 0;
}

.lp-revela__cuadro:has(:checked) .lp-revela__cuadro-nombre {
    color: var(--lp-papel-lapiz);
}

.lp-revela__cuadro:has(:focus-visible) {
    outline: 3px solid var(--lp-papel-lapiz);
    outline-offset: -3px;
}

/* La octava toma está sin exponer: película velada y una invitación. */
.lp-revela__cuadro--virgen .lp-revela__cuadro-ventana::before {
    content: "";
    display: block;
    aspect-ratio: 3 / 2;
    border: 1.5px dashed var(--lp-pelicula-marca);
    border-radius: .15rem;
    background: var(--lp-pelicula-velada);
}

.lp-revela__cuadro-virgen-texto {
    position: absolute;
    inset: 1.1rem .3rem 1.95rem;
    display: grid;
    place-items: center;
    padding: .5rem;
    color: var(--lp-pelicula-tinta);
    font-family: var(--lp-titular);
    font-stretch: condensed;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.lp-revela__cuadro--virgen .lp-revela__cuadro-nombre {
    color: var(--lp-papel-lapiz);
    text-decoration: underline;
    text-underline-offset: .2em;
}

.lp-revela__cuadro--virgen:hover .lp-revela__cuadro-ventana::before {
    background: var(--lp-pelicula-borde);
}

/* La lupa: un visor con su lente redonda de borde metálico, que enseña la toma
   marcada aumentada, y la ficha de la puerta. */
.lp-revela__lupa {
    padding: 1.3rem 1.3rem 1.5rem;
    border: 1px solid var(--lp-pelicula-borde);
    border-radius: 1rem;
    background: var(--lp-pelicula-alta);
}

.lp-revela__lente {
    display: block;
    width: min(70%, 13rem);
    aspect-ratio: 1;
    margin: 0 auto 1.2rem;
    overflow: hidden;
    border: .8rem solid var(--lp-cromo);
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px var(--lp-cromo-sombra), 0 .8rem 1.6rem -.6rem var(--lp-sombra-honda);
}

    .lp-revela__lente img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        scale: 1.35;
    }

.lp-revela__ampliacion-antetitulo {
    color: var(--lp-pelicula-marca);
    font-family: var(--lp-borde);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.lp-revela__ampliacion-titulo {
    margin-top: .3rem;
    font-family: var(--lp-titular);
    font-stretch: condensed;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.15;
}

.lp-revela__ampliacion-texto {
    margin-top: .5rem;
    color: var(--lp-sup-suave);
}

.lp-revela__ampliacion-datos {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-top: .9rem;
    border-top: 1px solid var(--lp-pelicula-borde);
}

    .lp-revela__ampliacion-datos dt {
        margin-top: .6rem;
        color: var(--lp-pelicula-marca);
        font-family: var(--lp-borde);
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
    }

    .lp-revela__ampliacion-datos dd {
        line-height: 1.45;
    }

.lp-revela__carreras {
    margin-top: 1rem;
}

.lp-revela__carreras-boton {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem 0;
    color: var(--lp-accion-clara);
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}

    .lp-revela__carreras-boton::-webkit-details-marker {
        display: none;
    }

    .lp-revela__carreras-boton::after {
        content: "+";
        display: inline-grid;
        place-items: center;
        width: 1.3rem;
        height: 1.3rem;
        border: 1.5px solid currentColor;
        border-radius: 50%;
        font-family: var(--lp-borde);
        line-height: 1;
        transition: rotate .3s ease;
    }

.lp-revela__carreras[open] .lp-revela__carreras-boton::after {
    rotate: 45deg;
}

/* Dos columnas solo si cada una mide al menos 11rem: en móvil la lista va en
   una, y «Ingeniería de las Telecomunicaciones» no se sale. */
.lp-revela__carreras-lista {
    columns: 11rem 2;
    column-gap: 1.25rem;
    margin-top: .6rem;
    font-size: .93rem;
    line-height: 1.45;
}

    .lp-revela__carreras-lista li {
        padding: .15rem 0;
        break-inside: avoid;
    }

.lp-revela__carreras-grupos {
    margin-top: .6rem;
    font-size: .93rem;
    line-height: 1.45;
}

    .lp-revela__carreras-grupos dt {
        margin-top: .55rem;
        font-weight: 700;
    }

    .lp-revela__carreras-grupos dd {
        color: var(--lp-sup-suave);
    }

.lp-revela__ampliacion .lp-revela__boton {
    margin-top: 1.25rem;
}

@supports selector(:has(a)) {
    .lp-revela__ampliacion {
        display: none;
    }

    .lp-revela__contactos:has(#lp-revela-puerta-1:checked) [data-puerta="1"],
    .lp-revela__contactos:has(#lp-revela-puerta-2:checked) [data-puerta="2"],
    .lp-revela__contactos:has(#lp-revela-puerta-3:checked) [data-puerta="3"],
    .lp-revela__contactos:has(#lp-revela-puerta-4:checked) [data-puerta="4"],
    .lp-revela__contactos:has(#lp-revela-puerta-5:checked) [data-puerta="5"],
    .lp-revela__contactos:has(#lp-revela-puerta-6:checked) [data-puerta="6"],
    .lp-revela__contactos:has(#lp-revela-puerta-7:checked) [data-puerta="7"] {
        display: block;
    }
}

/* Sin :has() las siete fichas se leen seguidas. */
@supports not selector(:has(a)) {
    .lp-revela__ampliacion + .lp-revela__ampliacion {
        margin-top: 2rem;
        padding-top: 2rem;
        border-top: 1px solid var(--lp-pelicula-borde);
    }
}

@media (prefers-reduced-motion: no-preference) {
    /* La ficha entra con la lente ampliándose, como al acercar el ojo. */
    .lp-revela--animada .lp-revela__ampliacion {
        animation: lp-revela-aparecer .45s ease-out both;
    }

    .lp-revela--animada .lp-revela__ampliacion .lp-revela__lente {
        animation: lp-revela-acercar .6s cubic-bezier(.2, .8, .3, 1.1) both;
    }
}

@keyframes lp-revela-aparecer {
    from {
        opacity: 0;
        translate: 0 .6rem;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@keyframes lp-revela-acercar {
    from {
        scale: .6;
        opacity: .2;
    }

    to {
        scale: 1;
        opacity: 1;
    }
}

/* ═══ Toma 3 · La fórmula del revelador ════════════════════════════════════ */
.lp-revela__formula {
    display: grid;
    gap: 2rem;
    align-items: center;
}

@media (min-width: 992px) {
    .lp-revela__formula {
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
        grid-template-areas: "unidades probetas" "cronometro probetas";
        column-gap: 3rem;
    }

    .lp-revela__unidades {
        grid-area: unidades;
        align-self: end;
    }

    .lp-revela__probetas {
        grid-area: probetas;
    }

    .lp-revela__cronometro {
        grid-area: cronometro;
        align-self: start;
    }
}

.lp-revela__unidades {
    display: grid;
    gap: .6rem;
}

.lp-revela__unidades-titulo {
    margin-bottom: .1rem;
    font-family: var(--lp-titular);
    font-stretch: condensed;
    font-size: 1.3rem;
    font-weight: 700;
}

/* Cada opción es una etiqueta con su casilla: la marcada se ve como un rótulo
   pegado, negro sobre la mesa. */
.lp-revela__unidad {
    position: relative;
    padding: .8rem 1rem .8rem 2.9rem;
    border: 1.5px solid var(--lp-sup-linea);
    border-radius: .5rem;
    background: var(--lp-mesa-panel);
    font-weight: 700;
    line-height: 1.35;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

    .lp-revela__unidad::before {
        content: "";
        position: absolute;
        top: .85rem;
        left: 1rem;
        width: 1.15rem;
        height: 1.15rem;
        border: 2px solid currentColor;
        border-radius: .2rem;
    }

    .lp-revela__unidad:hover {
        border-color: var(--lp-sup-tinta);
    }

    .lp-revela__unidad:has(:checked) {
        border-color: var(--lp-tinta);
        background: var(--lp-tinta);
        color: var(--lp-mesa);
    }

        .lp-revela__unidad:has(:checked)::before {
            background: var(--lp-lapiz);
            box-shadow: inset 0 0 0 3px var(--lp-tinta);
        }

    .lp-revela__unidad:has(:focus-visible) {
        outline: 3px solid var(--lp-foco);
        outline-offset: 2px;
    }

/* Tres probetas graduadas de 0 a 50 %: la marca cada 20 % del alto es un 10 % de
   la nota. El líquido sube hasta su --nivel, en puntos de la nota. */
/* Las tres probetas miden lo mismo y se alinean arriba: así sus fondos quedan a
   la misma altura aunque los rótulos de abajo ocupen más o menos líneas. */
.lp-revela__probetas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}

.lp-revela__probeta {
    display: grid;
    justify-items: center;
    gap: .35rem;
    text-align: center;
    hyphens: auto;
}

.lp-revela__probeta--lectura {
    --lp-liquido: var(--lp-liquido-lectura);
    --nivel: 32;
}

.lp-revela__probeta--matematica {
    --lp-liquido: var(--lp-liquido-matematica);
    --nivel: 48;
}

.lp-revela__probeta--colegio {
    --lp-liquido: var(--lp-liquido-colegio);
    --nivel: 20;
}

.lp-revela__vaso {
    position: relative;
    width: min(calc(100% - .9rem), 5.4rem);
    height: clamp(11rem, 26vw, 16rem);
    margin-bottom: .5rem;
    border: 2px solid var(--lp-vidrio-borde);
    border-top: 0;
    border-radius: 0 0 1.4rem 1.4rem;
    background-color: var(--lp-vidrio);
    background-image: repeating-linear-gradient(to top, transparent 0 calc(20% - 2px), var(--lp-graduacion) calc(20% - 2px) 20%);
    background-size: 38% 100%;
    background-repeat: no-repeat;
    background-position: left bottom;
}

    /* El labio de la probeta. */
    .lp-revela__vaso::before {
        content: "";
        position: absolute;
        top: -2px;
        left: -.45rem;
        right: -.45rem;
        height: .45rem;
        border: 2px solid var(--lp-vidrio-borde);
        border-radius: .3rem;
        background: var(--lp-vidrio);
    }

.lp-revela__liquido {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: calc(var(--nivel) * 2%);
    border-radius: 0 0 1.25rem 1.25rem;
    background: var(--lp-liquido);
    transition: height .9s cubic-bezier(.3, 1.2, .5, 1);
}

    /* El menisco: una elipse clara en la superficie del líquido. */
    .lp-revela__liquido::before {
        content: "";
        position: absolute;
        top: -.3rem;
        left: 0;
        right: 0;
        height: .6rem;
        border-radius: 50%;
        background: var(--lp-liquido);
        box-shadow: inset 0 .15rem 0 var(--lp-liquido-brillo);
    }

.lp-revela__probeta-nombre {
    font-family: var(--lp-titular);
    font-stretch: condensed;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
}

.lp-revela__probeta-dato {
    color: var(--lp-sup-suave);
    font-size: .9rem;
    line-height: 1.35;
}

.lp-revela__probetas [data-en-unidad="demas"] {
    display: none;
}

/* En 320 px cada probeta tiene unos 90 px: los rótulos bajan un punto para que
   «Comprensión» quepa entera. */
@media (max-width: 399.98px) {
    .lp-revela__probetas {
        gap: .5rem;
    }

    .lp-revela__probeta-nombre {
        font-size: .92rem;
    }

    .lp-revela__probeta-dato {
        font-size: .8rem;
    }
}

@supports selector(:has(a)) {
    .lp-revela__formula:has(#lp-revela-unidad-demas:checked) [data-en-unidad="ciencias"] {
        display: none;
    }

    .lp-revela__formula:has(#lp-revela-unidad-demas:checked) [data-en-unidad="demas"] {
        display: inline;
    }

    .lp-revela__formula:has(#lp-revela-unidad-demas:checked) .lp-revela__probeta--lectura,
    .lp-revela__formula:has(#lp-revela-unidad-demas:checked) .lp-revela__probeta--matematica {
        --nivel: 40;
    }
}

.lp-revela__cronometro {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .9rem;
    max-width: 30rem;
    padding: .9rem 1.1rem;
    border: 1.5px dashed var(--lp-sup-linea);
    border-radius: .6rem;
    color: var(--lp-sup-suave);
}

    /* Un reloj de revelado en miniatura hecho con un degradado cónico. */
    .lp-revela__cronometro::before {
        content: "";
        flex: none;
        width: 2.6rem;
        height: 2.6rem;
        border: 3px solid var(--lp-sup-tinta);
        border-radius: 50%;
        background: conic-gradient(var(--lp-lapiz) 0 75%, transparent 75%);
        box-shadow: inset 0 0 0 4px var(--lp-mesa);
    }

    .lp-revela__cronometro strong {
        color: var(--lp-sup-tinta);
    }

@media (prefers-reduced-motion: no-preference) {
    /* Las probetas se llenan cuando entran en pantalla, una tras otra. */
    .lp-revela--animada .lp-revela__probetas:not(.lp-revela--visible) .lp-revela__liquido {
        height: 0;
    }

    .lp-revela--animada .lp-revela__probeta:nth-child(2) .lp-revela__liquido {
        transition-delay: .15s;
    }

    .lp-revela--animada .lp-revela__probeta:nth-child(3) .lp-revela__liquido {
        transition-delay: .3s;
    }
}

/* ═══ Toma 4 · El revelado ═════════════════════════════════════════════════ */
.lp-revela__revelado {
    display: grid;
    gap: 2rem;
    align-items: center;
}

@media (min-width: 992px) {
    .lp-revela__revelado {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
        gap: 3rem;
    }
}

.lp-revela__cubetas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
}

/* Cada cubeta: plástico oscuro con un borde grueso, un líquido rojizo y la copia
   dentro. Cuanto más avanzado el baño, más revelada está la copia. */
.lp-revela__cubeta {
    position: relative;
    display: grid;
    gap: .15rem;
    padding: .6rem .6rem .75rem;
    border: 2px solid var(--lp-cubeta-borde);
    border-radius: .7rem;
    background: var(--lp-cubeta);
    box-shadow: inset 0 .4rem .9rem var(--lp-sombra-honda);
    cursor: pointer;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.lp-revela__cubeta-liquido {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: .35rem;
}

    /* El reflejo del líquido: un velo rojo con dos ondas suaves. */
    .lp-revela__cubeta-liquido::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 40% 12% at 30% 30%, var(--lp-reflejo), transparent 70%), radial-gradient(ellipse 30% 10% at 70% 70%, var(--lp-reflejo-suave), transparent 70%), var(--lp-cubeta-liquido);
    }

.lp-revela__cubeta-copia {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border: .25rem solid var(--lp-papel);
    transition: filter 1.2s ease, opacity 1.2s ease;
}

.lp-revela__cubeta--1 .lp-revela__cubeta-copia {
    filter: grayscale(1) brightness(2.3) contrast(.22);
}

.lp-revela__cubeta--2 .lp-revela__cubeta-copia {
    filter: grayscale(.85) brightness(1.55) contrast(.5);
}

.lp-revela__cubeta--3 .lp-revela__cubeta-copia {
    filter: grayscale(.4) brightness(1.18) contrast(.82);
}

.lp-revela__cubeta-numero {
    margin-top: .45rem;
    color: var(--lp-seguridad-suave);
    font-family: var(--lp-borde);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.lp-revela__cubeta-nombre {
    font-family: var(--lp-titular);
    font-stretch: condensed;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
}

.lp-revela__cubeta:hover {
    border-color: var(--lp-seguridad-suave);
}

.lp-revela__cubeta:has(:checked) {
    border-color: var(--lp-accion-clara);
    box-shadow: inset 0 .4rem .9rem var(--lp-sombra-honda), 0 0 0 3px var(--lp-accion-clara), 0 0 1.8rem -.2rem var(--lp-seguridad-luz);
}

    .lp-revela__cubeta:has(:checked) .lp-revela__cubeta-nombre {
        color: var(--lp-accion-clara);
    }

.lp-revela__cubeta:has(:focus-visible) {
    outline: 3px solid var(--lp-foco);
    outline-offset: 4px;
}

/* La ficha del baño: papel claro con un reloj de revelado que marca cuánto del
   semestre llevas hasta ese baño (--giro). */
.lp-revela__ficha {
    position: relative;
    padding: 1.3rem 1.3rem 1.4rem;
    border-radius: .5rem;
    background: var(--lp-papel);
    color: var(--lp-papel-tinta);
    box-shadow: 0 1.2rem 2.4rem -1.2rem var(--lp-sombra-honda);
    --lp-foco: var(--lp-papel-lapiz);
}

.lp-revela__ficha[data-etapa="1"] {
    --giro: 90deg;
}

.lp-revela__ficha[data-etapa="2"] {
    --giro: 198deg;
}

.lp-revela__ficha[data-etapa="3"] {
    --giro: 288deg;
}

.lp-revela__ficha[data-etapa="4"] {
    --giro: 360deg;
}

.lp-revela__reloj {
    position: relative;
    float: right;
    width: 4.6rem;
    height: 4.6rem;
    margin: 0 0 .6rem 1rem;
    border: 3px solid var(--lp-papel-tinta);
    border-radius: 50%;
    background: radial-gradient(circle, var(--lp-papel) 54%, transparent 55%), conic-gradient(var(--lp-lapiz) 0 var(--giro), var(--lp-papel-borde) var(--giro) 360deg);
}

    /* Las doce marcas de la esfera. */
    .lp-revela__reloj::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: repeating-conic-gradient(var(--lp-papel-tinta) 0 1.5deg, transparent 1.5deg 30deg);
        -webkit-mask: radial-gradient(circle, transparent 74%, #000 75%);
        mask: radial-gradient(circle, transparent 74%, #000 75%);
    }

.lp-revela__reloj-aguja {
    position: absolute;
    top: 14%;
    left: calc(50% - 1.5px);
    width: 3px;
    height: 36%;
    border-radius: 2px;
    background: var(--lp-papel-tinta);
    transform-origin: 50% 100%;
    rotate: var(--giro);
}

.lp-revela__ficha-antetitulo {
    color: var(--lp-papel-lapiz);
    font-family: var(--lp-borde);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.lp-revela__ficha-titulo {
    margin-top: .35rem;
    font-family: var(--lp-titular);
    font-stretch: condensed;
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.15;
}

.lp-revela__ficha-cuando {
    display: grid;
    gap: .1rem;
    margin-top: .6rem;
    font-family: var(--lp-borde);
    font-size: .88rem;
}

.lp-revela__ficha-semanas {
    font-weight: 700;
}

.lp-revela__ficha-texto {
    clear: both;
    margin-top: .8rem;
}

@supports selector(:has(a)) {
    .lp-revela__ficha {
        display: none;
    }

    .lp-revela__revelado:has(#lp-revela-bano-1:checked) .lp-revela__ficha[data-etapa="1"],
    .lp-revela__revelado:has(#lp-revela-bano-2:checked) .lp-revela__ficha[data-etapa="2"],
    .lp-revela__revelado:has(#lp-revela-bano-3:checked) .lp-revela__ficha[data-etapa="3"],
    .lp-revela__revelado:has(#lp-revela-bano-4:checked) .lp-revela__ficha[data-etapa="4"] {
        display: block;
    }
}

@supports not selector(:has(a)) {
    .lp-revela__ficha + .lp-revela__ficha {
        margin-top: 1rem;
    }
}

@media (prefers-reduced-motion: no-preference) {
    /* Al entrar la sección, cada copia pasa de papel en blanco a su punto de
       revelado, una cubeta tras otra. La aguja del reloj corre hasta su sitio
       cada vez que aparece una ficha. */
    .lp-revela--animada .lp-revela__cubetas:not(.lp-revela--visible) .lp-revela__cubeta-copia {
        filter: grayscale(1) brightness(3) contrast(.1);
        opacity: .6;
    }

    .lp-revela--animada .lp-revela__cubeta--2 .lp-revela__cubeta-copia {
        transition-delay: .3s;
    }

    .lp-revela--animada .lp-revela__cubeta--3 .lp-revela__cubeta-copia {
        transition-delay: .6s;
    }

    .lp-revela--animada .lp-revela__cubeta--4 .lp-revela__cubeta-copia {
        transition-delay: .9s;
    }

    .lp-revela--animada .lp-revela__ficha {
        animation: lp-revela-aparecer .45s ease-out both;
    }

    .lp-revela--animada .lp-revela__reloj-aguja {
        animation: lp-revela-girar 1s cubic-bezier(.3, 1.1, .5, 1) .15s both;
    }
}

@keyframes lp-revela-girar {
    from {
        rotate: 0deg;
    }

    to {
        rotate: var(--giro);
    }
}

/* ═══ Toma 5 · Diapositivas ════════════════════════════════════════════════
   Flex y no rejilla: la última fila, si queda incompleta, se centra. */
.lp-revela__diapos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem 1.5rem;
}

.lp-revela__diapo {
    flex: 1 1 13rem;
    max-width: 17rem;
}

@media (max-width: 575.98px) {
    .lp-revela__diapo {
        max-width: none;
    }
}

/* El marco de cartón blanco con su ventana: la transparencia de color deja pasar
   la luz de la mesa. El rótulo va escrito en el borde inferior del marco. */
.lp-revela__diapo-marco {
    position: relative;
    display: grid;
    place-items: center;
    width: min(100%, 12rem);
    aspect-ratio: 1;
    margin: 0 auto 1.1rem;
    padding: 1.3rem 1.3rem 2.1rem;
    border-radius: .55rem;
    background: var(--lp-papel);
    box-shadow: 0 1rem 1.8rem -1.1rem var(--lp-sombra), inset 0 0 0 1px var(--lp-papel-borde);
    transition: translate .3s ease, rotate .3s ease;
}

.lp-revela__diapo-ventana {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: .3rem;
    background: var(--lp-diapo-color, var(--lp-diapo-1));
    box-shadow: inset 0 0 0 1px var(--lp-diapo-filete);
}

.lp-revela__diapo-dibujo {
    width: 58%;
    height: 58%;
    --lp-dibujo-trazo: var(--lp-diapo-trazo);
    --lp-dibujo-relleno: var(--lp-diapo-relleno);
    --lp-dibujo-grosor: 1.8px;
}

.lp-revela__diapo-rotulo {
    position: absolute;
    right: .6rem;
    bottom: .55rem;
    left: .6rem;
    color: var(--lp-papel-suave);
    font-family: var(--lp-borde);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lp-revela__diapo:nth-child(1) {
    --lp-diapo-color: var(--lp-diapo-1);
}

.lp-revela__diapo:nth-child(2) {
    --lp-diapo-color: var(--lp-diapo-2);
}

.lp-revela__diapo:nth-child(3) {
    --lp-diapo-color: var(--lp-diapo-3);
}

.lp-revela__diapo:nth-child(4) {
    --lp-diapo-color: var(--lp-diapo-4);
}

.lp-revela__diapo:nth-child(5) {
    --lp-diapo-color: var(--lp-diapo-5);
}

.lp-revela__diapo-nombre {
    font-family: var(--lp-titular);
    font-stretch: condensed;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2;
}

.lp-revela__diapo-datos {
    margin-top: .5rem;
    font-size: .93rem;
    line-height: 1.45;
}

    .lp-revela__diapo-datos dt {
        margin-top: .45rem;
        color: var(--lp-accion);
        font-family: var(--lp-borde);
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
    }

    .lp-revela__diapo-datos dd {
        color: var(--lp-sup-suave);
    }

@media (prefers-reduced-motion: no-preference) {
    .lp-revela__diapo:hover .lp-revela__diapo-marco {
        translate: 0 -.35rem;
        rotate: -2deg;
    }

    .lp-revela--animada .lp-revela__diapo:nth-child(2) { transition-delay: .08s; }
    .lp-revela--animada .lp-revela__diapo:nth-child(3) { transition-delay: .16s; }
    .lp-revela--animada .lp-revela__diapo:nth-child(4) { transition-delay: .24s; }
    .lp-revela--animada .lp-revela__diapo:nth-child(5) { transition-delay: .32s; }
}

/* ═══ Toma 6 · Los diales ══════════════════════════════════════════════════ */
.lp-revela__diales {
    display: grid;
    gap: 0 2rem;
}

@media (min-width: 768px) {
    .lp-revela__diales {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .lp-revela__diales {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.lp-revela__dial {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "perilla ajuste" "perilla titulo" "texto texto";
    column-gap: 1.1rem;
    align-content: start;
    padding: 1.4rem 0 1.5rem;
    border-top: 1px solid var(--lp-camara-linea);
}

/* La perilla: canto moleteado (un degradado cónico repetido), tapa de metal con
   brillo y una marca roja que señala el ajuste. */
.lp-revela__perilla {
    grid-area: perilla;
    position: relative;
    display: block;
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 50%;
    background: repeating-conic-gradient(var(--lp-cromo) 0 5deg, var(--lp-cromo-sombra) 5deg 10deg);
    box-shadow: 0 .5rem .9rem var(--lp-sombra-honda);
}

.lp-revela__perilla-marca {
    position: absolute;
    inset: 17%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--lp-cromo-alto), var(--lp-cromo) 55%, var(--lp-cromo-sombra));
    rotate: var(--lp-giro-perilla, 0deg);
    transition: rotate 1s cubic-bezier(.3, 1.3, .5, 1);
}

    .lp-revela__perilla-marca::after {
        content: "";
        position: absolute;
        top: 8%;
        left: calc(50% - 2px);
        width: 4px;
        height: 30%;
        border-radius: 2px;
        background: var(--lp-lapiz);
    }

.lp-revela__dial--1 {
    --lp-giro-final: 40deg;
}

.lp-revela__dial--2 {
    --lp-giro-final: -60deg;
}

.lp-revela__dial--3 {
    --lp-giro-final: 120deg;
}

.lp-revela__dial--4 {
    --lp-giro-final: -30deg;
}

.lp-revela__dial--5 {
    --lp-giro-final: 75deg;
}

.lp-revela__dial--6 {
    --lp-giro-final: -105deg;
}

.lp-revela__dial .lp-revela__perilla-marca {
    --lp-giro-perilla: var(--lp-giro-final);
}

.lp-revela__dial-ajuste {
    grid-area: ajuste;
    align-self: end;
    color: var(--lp-accion-clara);
    font-family: var(--lp-borde);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.lp-revela__dial-titulo {
    grid-area: titulo;
    font-family: var(--lp-titular);
    font-stretch: condensed;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2;
}

.lp-revela__dial-texto {
    grid-area: texto;
    margin-top: .8rem;
    color: var(--lp-sup-suave);
}

@media (prefers-reduced-motion: no-preference) {
    /* Antes de verse las perillas están en cero; al aparecer giran a su ajuste.
       Al pasar el puntero, la perilla da un cuarto de vuelta más. */
    .lp-revela--animada .lp-revela__dial:not(.lp-revela--visible) .lp-revela__perilla-marca {
        --lp-giro-perilla: 0deg;
    }

    .lp-revela__dial:hover .lp-revela__perilla-marca {
        --lp-giro-perilla: calc(var(--lp-giro-final) + 90deg);
    }

    .lp-revela--animada .lp-revela__dial:nth-child(2) { transition-delay: .07s; }
    .lp-revela--animada .lp-revela__dial:nth-child(3) { transition-delay: .14s; }
    .lp-revela--animada .lp-revela__dial:nth-child(4) { transition-delay: .21s; }
    .lp-revela--animada .lp-revela__dial:nth-child(5) { transition-delay: .28s; }
    .lp-revela--animada .lp-revela__dial:nth-child(6) { transition-delay: .35s; }
}

/* ═══ Toma 7 · Negativos de la historia ════════════════════════════════════
   Un negativo de color: base naranja oscura, tomas un poco más claras y los
   dibujos en el celeste invertido. Se desliza de lado mientras no quepa; desde
   1200 px las seis tomas caben y se reparten el ancho. */
.lp-revela__tira-historia {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    border-radius: .3rem;
    box-shadow: 0 1.2rem 2rem -1.4rem var(--lp-sombra);
}

.lp-revela__negativos {
    display: flex;
    gap: .3rem;
    min-width: max-content;
    padding: 1.3rem .5rem;
    background-color: var(--lp-negativo-base);
    background-image: radial-gradient(ellipse .3rem .22rem at 50% 50%, var(--lp-perforacion) 92%, transparent 100%), radial-gradient(ellipse .3rem .22rem at 50% 50%, var(--lp-perforacion) 92%, transparent 100%);
    background-size: 1.1rem .6rem, 1.1rem .6rem;
    background-position: 0 .35rem, 0 calc(100% - .35rem);
    background-repeat: repeat-x;
    counter-reset: lp-negativo;
}

.lp-revela__negativo {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: .3rem;
    width: 12.5rem;
    padding: 1.1rem .9rem 1.4rem;
    border-radius: .2rem;
    background: var(--lp-negativo-cuadro);
    color: var(--lp-negativo-tinta);
    text-align: center;
    scroll-snap-align: start;
    counter-increment: lp-negativo;
}

    /* El número de toma impreso en el borde, como en un negativo real. */
    .lp-revela__negativo::after {
        content: counter(lp-negativo) "A";
        position: absolute;
        bottom: .3rem;
        right: .5rem;
        color: var(--lp-pelicula-marca);
        font-family: var(--lp-borde);
        font-size: .66rem;
        font-weight: 700;
    }

.lp-revela__negativo-dibujo {
    width: 3.6rem;
    height: 3.6rem;
    --lp-dibujo-trazo: var(--lp-negativo-dibujo);
    --lp-dibujo-relleno: var(--lp-negativo-relleno);
    --lp-dibujo-grosor: 1.8px;
}

.lp-revela__negativo-dibujo--ancho {
    width: 4.2rem;
}

.lp-revela__negativo-cifra {
    font-family: var(--lp-titular);
    font-stretch: condensed;
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1;
}

.lp-revela__negativo-texto {
    color: var(--lp-negativo-suave);
    font-size: .92rem;
    line-height: 1.4;
}

@media (min-width: 1200px) {
    .lp-revela__negativos {
        min-width: 0;
    }

    .lp-revela__negativo {
        flex: 1 1 0;
        width: auto;
    }
}

/* ═══ Toma 8 · Fotomatón ═══════════════════════════════════════════════════ */
.lp-revela__fotomaton {
    display: grid;
    gap: 2.5rem;
    align-items: center;
}

@media (min-width: 992px) {
    .lp-revela__fotomaton {
        grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
        gap: 3.5rem;
    }

    .lp-revela__tira-cabina {
        width: min(100%, 15.5rem);
    }
}

/* La tira del fotomatón: papel blanco, tres tomas cuadradas y el pie impreso. */
.lp-revela__tira-cabina {
    position: relative;
    width: min(100%, 13rem);
    margin-inline: auto;
    padding: .55rem .55rem 2.4rem;
    background: var(--lp-papel);
    box-shadow: 0 1.6rem 2.6rem -1.4rem var(--lp-sombra-honda);
    rotate: -2.5deg;
}

.lp-revela__cabina-tomas {
    display: grid;
    gap: .55rem;
}

.lp-revela__cabina-toma img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.lp-revela__cabina-pie {
    position: absolute;
    right: .6rem;
    bottom: .75rem;
    left: .6rem;
    color: var(--lp-papel-suave);
    font-family: var(--lp-borde);
    font-size: .72rem;
    letter-spacing: .08em;
    text-align: center;
    text-transform: uppercase;
}

.lp-revela__destello {
    position: absolute;
    inset: 0;
    background: var(--lp-papel);
    opacity: 0;
    pointer-events: none;
}

/* Los pasos con el contador de fotos de una cámara: 01, 02, 03… */
.lp-revela__pasos {
    display: grid;
    gap: 1.15rem;
    counter-reset: lp-paso;
}

.lp-revela__paso {
    position: relative;
    padding-left: 3.6rem;
    counter-increment: lp-paso;
}

    .lp-revela__paso::before {
        content: counter(lp-paso, decimal-leading-zero);
        position: absolute;
        top: 0;
        left: 0;
        display: grid;
        place-items: center;
        width: 2.7rem;
        height: 2rem;
        border-radius: .3rem;
        background: var(--lp-pelicula);
        color: var(--lp-pelicula-marca);
        font-family: var(--lp-borde);
        font-weight: 700;
        box-shadow: inset 0 0 0 1px var(--lp-pelicula-borde);
    }

.lp-revela__paso-titulo {
    font-family: var(--lp-titular);
    font-stretch: condensed;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
}

.lp-revela__paso-texto {
    margin-top: .15rem;
    color: var(--lp-sup-suave);
}

@media (prefers-reduced-motion: no-preference) {
    /* Tres destellos, uno por toma: cada foto aparece justo después de su
       destello. */
    .lp-revela--animada .lp-revela__cabina-toma {
        opacity: 0;
    }

    .lp-revela--animada .lp-revela__tira-cabina.lp-revela--visible .lp-revela__cabina-toma {
        animation: lp-revela-mostrar .2s ease-out both;
    }

    .lp-revela--animada .lp-revela__tira-cabina.lp-revela--visible .lp-revela__cabina-toma:nth-child(1) { animation-delay: .45s; }
    .lp-revela--animada .lp-revela__tira-cabina.lp-revela--visible .lp-revela__cabina-toma:nth-child(2) { animation-delay: 1.15s; }
    .lp-revela--animada .lp-revela__tira-cabina.lp-revela--visible .lp-revela__cabina-toma:nth-child(3) { animation-delay: 1.85s; }

    .lp-revela--animada .lp-revela__tira-cabina.lp-revela--visible .lp-revela__destello {
        animation: lp-revela-destello .7s ease-out .25s 3;
    }
}

@keyframes lp-revela-mostrar {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes lp-revela-destello {
    0% {
        opacity: 0;
    }

    12% {
        opacity: .95;
    }

    55%,
    100% {
        opacity: 0;
    }
}

/* ═══ Toma 9 · Sobres de negativos ═════════════════════════════════════════ */
.lp-revela__archivo {
    display: grid;
    gap: .8rem;
    counter-reset: lp-sobre;
}

/* El sobre de papel cristal: casi blanco, una trama finísima y la casilla del
   número de rollo a la izquierda del rótulo. Claro en los dos temas. */
.lp-revela__sobre {
    border: 1px solid var(--lp-cristal-linea);
    border-radius: .25rem;
    background-color: var(--lp-cristal);
    background-image: repeating-linear-gradient(135deg, var(--lp-cristal-trama) 0 1px, transparent 1px 5px);
    color: var(--lp-papel-tinta);
    box-shadow: 0 .6rem 1.2rem -1rem var(--lp-sombra);
    counter-increment: lp-sobre;
    --lp-foco: var(--lp-papel-lapiz);
}

.lp-revela__sobre-pregunta {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .9rem;
    align-items: center;
    padding: .85rem 1rem;
    border-radius: .25rem;
    font-weight: 700;
    line-height: 1.4;
    list-style: none;
    cursor: pointer;
}

    .lp-revela__sobre-pregunta::-webkit-details-marker {
        display: none;
    }

    .lp-revela__sobre-pregunta::before {
        content: "N.º " counter(lp-sobre, decimal-leading-zero);
        padding: .2rem .45rem;
        border: 1.5px solid var(--lp-papel-tinta);
        border-radius: .15rem;
        font-family: var(--lp-borde);
        font-size: .72rem;
        letter-spacing: .04em;
        white-space: nowrap;
    }

    .lp-revela__sobre-pregunta::after {
        content: "+";
        display: grid;
        place-items: center;
        width: 1.6rem;
        height: 1.6rem;
        border: 1.5px solid currentColor;
        border-radius: 50%;
        font-family: var(--lp-borde);
        font-weight: 700;
        line-height: 1;
        transition: rotate .3s ease;
    }

    /* El foco se dibuja por dentro: el borde del sobre no lo recorta. */
    .lp-revela__sobre-pregunta:focus-visible {
        outline-offset: -4px;
    }

.lp-revela__sobre[open] .lp-revela__sobre-pregunta::after {
    rotate: 45deg;
}

.lp-revela__sobre-respuesta {
    padding: .2rem 1.1rem 1.15rem;
    color: var(--lp-papel-suave);
}

@media (max-width: 399.98px) {
    .lp-revela__sobre-pregunta {
        grid-template-columns: minmax(0, 1fr) auto;
    }

        .lp-revela__sobre-pregunta::before {
            display: none;
        }
}

/* ═══ Toma 10 · El tendedero ═══════════════════════════════════════════════ */
.lp-revela__cierre {
    overflow: clip;
    text-align: center;
}

.lp-revela__tendedero {
    position: relative;
    height: clamp(9.8rem, 4.5rem + 18vw, 15rem);
    max-width: 52rem;
    margin: 0 auto 2.5rem;
}

.lp-revela__cuerda {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5rem;
    overflow: visible;
}

.lp-revela__cuerda-linea {
    fill: none;
    stroke: var(--lp-seguridad-linea);
    stroke-width: 2px;
    vector-effect: non-scaling-stroke;
}

.lp-revela__cuerda-clavo {
    fill: var(--lp-seguridad-suave);
}

/* Cada copia cuelga de su pinza desde el punto de la cuerda que le toca: la
   cuerda es una parábola de 5rem de alto, así que el centro cae más bajo. */
.lp-revela__colgada {
    position: absolute;
    width: 26%;
    max-width: 13rem;
    padding: .35rem .35rem 1.3rem;
    background: var(--lp-papel);
    box-shadow: 0 1rem 1.6rem -1rem var(--lp-sombra-honda);
    transform-origin: 50% -.6rem;
}

    .lp-revela__colgada img {
        width: 100%;
        aspect-ratio: 3 / 2;
        object-fit: cover;
    }

.lp-revela__colgada--1 {
    top: 3.2rem;
    left: 9%;
    rotate: -3deg;
}

.lp-revela__colgada--2 {
    top: 3.7rem;
    left: 37%;
    rotate: 1.5deg;
}

.lp-revela__colgada--3 {
    top: 3.2rem;
    left: 65%;
    rotate: 4deg;
}

/* La pinza de madera, con su resorte. */
.lp-revela__pinza {
    position: absolute;
    top: -1.05rem;
    left: calc(50% - .35rem);
    width: .7rem;
    height: 1.7rem;
    border-radius: .15rem;
    background: linear-gradient(90deg, var(--lp-pinza) 0 45%, var(--lp-pinza-sombra) 45% 55%, var(--lp-pinza) 55%);
}

    .lp-revela__pinza::after {
        content: "";
        position: absolute;
        top: .5rem;
        left: -.12rem;
        right: -.12rem;
        height: .3rem;
        border-radius: .15rem;
        background: var(--lp-cromo-sombra);
    }

.lp-revela__cierre-texto {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    max-width: 46rem;
    margin-inline: auto;
}

    .lp-revela__cierre-texto .lp-revela__antetitulo {
        justify-content: center;
        margin-bottom: 0;
    }

    .lp-revela__cierre-texto .lp-revela__bajada {
        margin-top: 0;
        font-size: 1.15rem;
    }

.lp-revela__independencia {
    max-width: 34rem;
    color: var(--lp-sup-suave);
    font-size: .88rem;
}

@media (prefers-reduced-motion: no-preference) {
    /* Las copias llegan a la cuerda y se mecen tres veces antes de quedarse
       quietas. */
    .lp-revela--animada .lp-revela__tendedero.lp-revela--visible .lp-revela__colgada {
        animation: lp-revela-mecer 2.4s ease-out both;
    }

    .lp-revela--animada .lp-revela__tendedero.lp-revela--visible .lp-revela__colgada--2 {
        animation-delay: .25s;
    }

    .lp-revela--animada .lp-revela__tendedero.lp-revela--visible .lp-revela__colgada--3 {
        animation-delay: .5s;
    }

    .lp-revela--animada .lp-revela__tendedero:not(.lp-revela--visible) .lp-revela__colgada {
        opacity: 0;
    }

    .lp-revela--animada .lp-revela__cierre-texto {
        opacity: 0;
        translate: 0 1.5rem;
        transition: opacity .8s ease-out, translate .8s ease-out;
    }

    .lp-revela--animada .lp-revela__cierre-texto.lp-revela--visible {
        opacity: 1;
        translate: 0 0;
    }
}

@keyframes lp-revela-mecer {
    0% {
        opacity: 0;
        transform: translateY(-1.5rem) rotate(-14deg);
    }

    15% {
        opacity: 1;
    }

    30% {
        transform: rotate(9deg);
    }

    50% {
        transform: rotate(-5deg);
    }

    70% {
        transform: rotate(2.5deg);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

/* ═══ Botón flotante ═══════════════════════════════════════════════════════
   Escondido se aparta hacia abajo y deja de recibir foco: visibility cambia
   al final de la transición para que la salida se vea.

   Va en la esquina inferior IZQUIERDA: la derecha es la de la mascota del sitio,
   que se dibuja por encima y lo taparía. */
.lp-revela__flotante {
    position: fixed;
    z-index: 1030;
    left: 1rem;
    bottom: 1rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 3rem;
    padding: .75rem 1.3rem;
    border: 2px solid var(--lp-accion-tinta);
    border-radius: .5rem;
    background: var(--lp-accion);
    color: var(--lp-accion-tinta);
    font-family: var(--lp-titular);
    font-stretch: condensed;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: 0 .9rem 1.8rem -.7rem var(--lp-sombra-flotante);
    --lp-foco: var(--lp-accion);
    transition: translate .35s ease, opacity .35s ease, visibility 0s linear 0s;
}

    .lp-revela__flotante:hover {
        background: var(--lp-accion-alta);
        color: var(--lp-accion-tinta);
    }

.lp-revela__flotante--oculto {
    opacity: 0;
    translate: 0 150%;
    visibility: hidden;
    pointer-events: none;
    transition: translate .35s ease, opacity .35s ease, visibility 0s linear .35s;
}

/* En el teléfono el botón ocupa el ancho entre márgenes. Por la derecha se
   detiene donde empieza la esquina de la mascota del sitio, con la reserva que
   publica el marco; sin mascota la variable no existe y el margen vuelve a ser
   el de la izquierda. Al quedar más estrecho, relleno y letra bajan un punto, y
   si aun así el texto se parte, va centrado. */
@media (max-width: 575.98px) {
    .lp-revela__flotante {
        right: var(--edu-landing-reserva-mascota, 1rem);
        left: 1rem;
        justify-content: center;
        padding-inline: 1rem;
        font-size: .95rem;
        text-align: center;
    }
}

/* Por debajo de 360px el texto en mayúsculas ya no cabe en una línea junto al
   diafragma: el icono, que es adorno, cede su sitio y la letra baja otro punto,
   para que el botón no doble su alto. */
@media (max-width: 359.98px) {
    .lp-revela__flotante {
        font-size: .9rem;
    }

    .lp-revela__flotante .lp-revela__boton-icono {
        display: none;
    }
}

/* ═══ Movimiento reducido ══════════════════════════════════════════════════
   Por si alguna regla futura escapa de los bloques no-preference: sin movimiento
   nada se anima ni transiciona. */
@media (prefers-reduced-motion: reduce) {
    .lp-revela *,
    .lp-revela *::before,
    .lp-revela *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ═══ Colores forzados ═════════════════════════════════════════════════════
   Con los colores del sistema los fondos desaparecen: los estados marcados se
   señalan con contornos y los iconos se pintan con el color del texto. */
@media (forced-colors: active) {
    .lp-revela {
        --lp-dibujo-trazo: CanvasText;
    }

    .lp-revela__boton,
    .lp-revela__flotante,
    .lp-revela__unidad,
    .lp-revela__cubeta,
    .lp-revela__cuadro {
        border: 2px solid ButtonText;
    }

        .lp-revela__unidad:has(:checked),
        .lp-revela__cubeta:has(:checked),
        .lp-revela__cuadro:has(:checked) {
            outline: 3px solid Highlight;
            outline-offset: 2px;
        }

    .lp-revela__liquido {
        background: Highlight;
    }

    .lp-revela__vaso {
        border-color: CanvasText;
    }
}