/* Landing del Ciclo Semestral — Universidad Nacional Pedro Ruiz Gallo.

   TODO cuelga de .lp-adobe. 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: adobe a adobe. Con el tema claro es el patio de una obra de barro a
   pleno sol; con el oscuro, la misma obra de noche. Los adobes, las láminas de
   papel, los estratos de la excavación y el cielo del cierre son objetos: no
   cambian con el tema, como no cambia un adobe al caer la tarde.

   SIETE FAMILIAS DE COLOR, Y NO SE MEZCLAN:
     · LA UNIVERSIDAD (--lp-uni-*): azul y oro de la franja superior, la
       identidad común de las landings de la UNPRG.
     · EL SUELO (--lp-suelo-*, --lp-tinta-*, --lp-panel-*, --lp-acento): el fondo
       de las secciones y sus textos; lo único que cambia con el tema.
     · EL ADOBE (--lp-adobe-*): barro, canto, junta y la tinta que se escribe
       encima. Igual en los dos temas.
     · LOS GRUPOS (--lp-g-*): un color fuerte y uno tenue por grupo académico,
       para los sellos y el muro.
     · LA LÁMINA Y LAS ÁREAS (--lp-lamina-*, --lp-area-*): el papel claro donde se
       dibujan la pirámide del examen, la jornada y la planilla, y los seis
       colores de las áreas del examen. Iguales en los dos temas.
     · LOS ESTRATOS Y LA NOCHE (--lp-estrato-*, --lp-noche-*, --lp-sol-*): las
       capas de tierra y el amanecer del cierre, oscuros o claros por sí mismos.
     · LA ACCIÓN (--lp-accion-*): botones de adobe cocido sobre el suelo y
       --lp-accion-clara-* sobre las superficies oscuras fijas.

   Cada superficie fija además unas variables locales (--lp-sup-tinta,
   --lp-sup-suave, --lp-sup-linea, --lp-sup-acento y --lp-foco) para que las
   piezas comunes 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-adobe {
    /* ── La universidad ─────────────────────────────────────────────────── */
    --lp-uni: #0F2B5C;
    --lp-uni-oro: #E8BE5A;
    --lp-uni-oro-bajo: #B98A2E;
    --lp-uni-tinta: #F3E9D2;
    --lp-uni-suave: #C9D6EE;
    /* ── El suelo: cambia con el tema ───────────────────────────────────── */
    --lp-suelo: #F6EBD6;
    --lp-suelo-bajo: #EEDDBE;
    --lp-grano: rgba(140, 95, 50, .13);
    --lp-resplandor: rgba(255, 190, 110, .5);
    --lp-tinta: #2A1A10;
    --lp-tinta-suave: #5A4232;
    --lp-linea: #D6BF98;
    --lp-acento: #983E21;
    --lp-panel: #FFF9EE;
    --lp-panel-borde: #E2CDA6;
    --lp-junta-muro: #E8D4B0;
    --lp-sombra: rgba(70, 40, 15, .18);
    --lp-sombra-honda: rgba(60, 30, 10, .34);
    --lp-sombra-flotante: rgba(0, 0, 0, .38);
    /* ── El adobe, igual en los dos temas ───────────────────────────────── */
    --lp-adobe: #D3A274;
    --lp-adobe-alto: #E2BA8E;
    --lp-adobe-bajo: #B07A4A;
    --lp-adobe-canto: #8A5A33;
    --lp-adobe-luz: rgba(255, 240, 215, .55);
    --lp-adobe-tinta: #2A160B;
    --lp-adobe-suave: #4A2D1C;
    --lp-adobe-marca: #6E4223;
    --lp-adobe-textura:
        radial-gradient(circle at 20% 30%, rgba(110, 66, 35, .2) 0 1px, transparent 1.6px) 0 0 / 9px 11px,
        radial-gradient(circle at 70% 60%, rgba(255, 240, 215, .3) 0 1px, transparent 1.6px) 0 0 / 13px 7px;
    /* ── Los grupos académicos: fuerte y tenue ──────────────────────────── */
    --lp-g-a: #B4462F;
    --lp-g-a-tenue: #F6DACE;
    --lp-g-b: #2F5F9E;
    --lp-g-b-tenue: #DBE5F4;
    --lp-g-c: #8C630A;
    --lp-g-c-tenue: #F4E4B9;
    --lp-g-d: #7A4A95;
    --lp-g-d-tenue: #EADCF1;
    --lp-g-e: #1D7A73;
    --lp-g-e-tenue: #D3EEEA;
    --lp-g-f: #557822;
    --lp-g-f-tenue: #E2ECCC;
    --lp-g-tinta: #22150C;
    --lp-g-blanco: #FFFFFF;
    /* ── La lámina y las áreas del examen, iguales en los dos temas ─────── */
    --lp-lamina: #FCF6EA;
    --lp-lamina-tinta: #2A1A10;
    --lp-lamina-suave: #5A4232;
    --lp-lamina-linea: #E2D0AE;
    --lp-lamina-resalte: #F3DFB3;
    --lp-area-hab: #8E3B24;
    --lp-area-mat: #2F64A8;
    --lp-area-com: #9C6D05;
    --lp-area-per: #6C4A9B;
    --lp-area-soc: #4B7C28;
    --lp-area-cie: #11797F;
    --lp-area-vacia: #EBDCC0;
    --lp-area-vacia-borde: #C7AB80;
    --lp-marca-color: rgba(255, 246, 230, .92);
    --lp-marca-hab: radial-gradient(circle, var(--lp-marca-color) 0 26%, transparent 29%);
    --lp-marca-mat: linear-gradient(90deg, transparent 41%, var(--lp-marca-color) 41% 59%, transparent 59%);
    --lp-marca-com: linear-gradient(transparent 39%, var(--lp-marca-color) 39% 61%, transparent 61%);
    --lp-marca-per: linear-gradient(45deg, transparent 40%, var(--lp-marca-color) 40% 60%, transparent 60%);
    --lp-marca-soc: radial-gradient(circle, transparent 0 20%, var(--lp-marca-color) 23% 38%, transparent 41%);
    --lp-marca-cie: radial-gradient(circle at 27% 50%, var(--lp-marca-color) 0 17%, transparent 20%), radial-gradient(circle at 73% 50%, var(--lp-marca-color) 0 17%, transparent 20%);
    /* ── Los estratos y la noche del cierre, fijos ──────────────────────── */
    --lp-estrato-1: #EAD5AC;
    --lp-estrato-2: #D2AC7A;
    --lp-estrato-3: #7D512F;
    --lp-estrato-4: #683F27;
    --lp-estrato-5: #3B2215;
    --lp-estrato-tinta-clara: #FBF1E0;
    --lp-estrato-suave-clara: #EAD8BD;
    --lp-estrato-tinta-oscura: #26170D;
    --lp-estrato-suave-oscura: #4A3020;
    --lp-noche: #17163A;
    --lp-noche-alto: #3A2B5F;
    --lp-noche-horizonte: #B75C35;
    --lp-noche-tinta: #FBF1E2;
    --lp-noche-suave: #DCCFE8;
    --lp-noche-huaca: #2A1810;
    --lp-noche-junta: #4A2C1C;
    --lp-sol: #F4B04A;
    --lp-sol-claro: #FFE7A8;
    --lp-sol-halo: rgba(244, 176, 74, .45);
    /* ── La acción ──────────────────────────────────────────────────────── */
    --lp-accion: #A13E1E;
    --lp-accion-alta: #B54C27;
    --lp-accion-tinta: #FFF7EC;
    --lp-accion-canto: #66240F;
    --lp-accion-clara: #F0B25E;
    --lp-accion-clara-alta: #F6C57F;
    --lp-accion-clara-tinta: #2A140A;
    --lp-accion-clara-canto: #A3661C;
    /* ── Letras ─────────────────────────────────────────────────────────── */
    --lp-bloque: "Rockwell", "Rockwell Nova", "Roboto Slab", "Zilla Slab", "Arvo", "Josefin Slab", Georgia, "Times New Roman", serif;
    --lp-texto: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --lp-ancho: 74rem;
    /* ── Lo que leen las piezas comunes; cada superficie lo reasigna ────── */
    --lp-sup-tinta: var(--lp-tinta);
    --lp-sup-suave: var(--lp-tinta-suave);
    --lp-sup-linea: var(--lp-linea);
    --lp-sup-acento: var(--lp-acento);
    --lp-foco: var(--lp-acento);
    position: relative;
    background: var(--lp-suelo);
    color: var(--lp-tinta);
    font-family: var(--lp-texto);
    font-size: 1rem;
    line-height: 1.6;
    color-scheme: light;
}

/* Tema oscuro del sitio: la obra de noche. El atributo lo pone Akcadmia en un
   ancestro, también cuando el tema se hereda del navegador; aquí solo se
   reasignan variables, nunca reglas. Adobes, láminas, estratos y noche no
   cambian. */
[data-tema="oscuro"] .lp-adobe {
    --lp-uni: #0A1F47;
    --lp-uni-oro: #EDC468;
    --lp-uni-oro-bajo: #B98A2E;
    --lp-suelo: #19120D;
    --lp-suelo-bajo: #211812;
    --lp-grano: rgba(230, 190, 140, .06);
    --lp-resplandor: rgba(237, 164, 91, .14);
    --lp-tinta: #F3E5CF;
    --lp-tinta-suave: #CDB99D;
    --lp-linea: #4A3829;
    --lp-acento: #F0A57A;
    --lp-panel: #2A1F17;
    --lp-panel-borde: #4B3A2B;
    --lp-junta-muro: #3A2A1E;
    --lp-sombra: rgba(0, 0, 0, .45);
    --lp-sombra-honda: rgba(0, 0, 0, .66);
    --lp-sombra-flotante: rgba(0, 0, 0, .62);
    --lp-accion: #EDA45B;
    --lp-accion-alta: #F4BA7D;
    --lp-accion-tinta: #241006;
    --lp-accion-canto: #9C5C1C;
    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-adobe, que no ve sus variables. */
body:has(> .lp-adobe) {
    margin: 0 !important;
    padding: 0 !important;
    background-color: #0F2B5C;
}

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

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

    body > :has(+ .lp-adobe) > :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-adobe :where(h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, a, span, strong, small, b, label, legend, summary, details, figure, figcaption, section, table, caption, th, td, output) {
    color: inherit;
    font-family: inherit;
}

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

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

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

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

.lp-adobe :where(dt, th) {
    font-weight: inherit;
}

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

.lp-adobe,
.lp-adobe *,
.lp-adobe *::before,
.lp-adobe *::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-adobe [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. Con guion, lo
   que solo sirve sin él (el ejemplo escrito de la jornada) se retira. */
.lp-adobe:not(.lp-adobe--animada) :is([data-depende-fechas], [data-requiere-guion]) {
    display: none !important;
}

.lp-adobe.lp-adobe--animada [data-sin-guion] {
    display: none;
}

/* Las anclas no quedan tapadas por una cabecera fija del sitio. */
.lp-adobe [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-adobe :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-adobe :where(a, summary, input, [tabindex]):focus-visible {
    outline: 3px solid var(--lp-foco);
    outline-offset: 3px;
}

/* Texto solo para lectores de pantalla. También esconde los radios y las
   casillas: siguen en el orden del teclado y su pieza visible enseña el foco con
   el combinador de hermanos. */
.lp-adobe__oculto {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.lp-adobe__simbolos {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* Los trazos de los dibujos leen variables: un <use> no deja que un selector de
   descendiente entre en su copia, pero las variables sí se heredan. */
.lp-adobe__t-linea {
    fill: none;
    stroke: var(--lp-dibujo-trazo, currentColor);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lp-adobe__t-relleno {
    fill: var(--lp-dibujo-relleno, currentColor);
}

.lp-adobe__t-visto {
    fill: none;
    stroke: var(--lp-visto, currentColor);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lp-adobe__t-emblema-sol,
.lp-adobe__t-emblema-huaca {
    fill: var(--lp-uni-oro);
}

.lp-adobe__t-emblema-junta {
    fill: none;
    stroke: var(--lp-uni);
    stroke-width: .9;
}

.lp-adobe__t-emblema-rampa {
    fill: var(--lp-uni-oro-bajo);
}

/* ═══ Textos comunes ═══════════════════════════════════════════════════════ */
.lp-adobe__ancho {
    width: min(100% - 2rem, var(--lp-ancho));
    margin-inline: auto;
}

.lp-adobe__cabecera {
    margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}

/* El rótulo lleva delante un tramo de muro de dos adobes. */
.lp-adobe__rotulo {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--lp-sup-acento);
    font-family: var(--lp-bloque);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1.3;
    text-transform: uppercase;
}

    .lp-adobe__rotulo::before {
        content: "";
        flex: none;
        width: 1.35rem;
        height: .7rem;
        border-radius: 1px;
        background:
            linear-gradient(90deg, transparent calc(50% - 1px), var(--lp-sup-linea) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
            var(--lp-adobe);
        box-shadow: inset 0 -2px 0 var(--lp-adobe-bajo);
    }

.lp-adobe__h1 {
    color: var(--lp-sup-tinta);
    font-family: var(--lp-bloque);
    font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.4rem);
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.02;
    margin-top: 1rem;
}

.lp-adobe__h1-linea {
    display: block;
}

.lp-adobe__h1-linea--fina {
    margin-block: .3rem .15rem;
    color: var(--lp-sup-suave);
    font-family: var(--lp-texto);
    font-size: .42em;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.2;
}

/* La marca se asienta sobre una hilada de adobes dibujada bajo cada línea del
   texto: en línea y clonando la decoración, la hilada mide lo que la palabra
   aunque el nombre se parta en dos renglones. */
.lp-adobe__h1-linea--marca {
    display: inline;
    padding-bottom: .16em;
    color: var(--lp-sup-acento);
    background:
        repeating-linear-gradient(90deg, var(--lp-adobe) 0 1.6em, transparent 1.6em 1.68em) left bottom / 100% .12em no-repeat;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.lp-adobe__h2 {
    color: var(--lp-sup-tinta);
    font-family: var(--lp-bloque);
    font-size: clamp(1.9rem, 1.35rem + 2.3vw, 3rem);
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.1;
    margin-top: .85rem;
    text-wrap: balance;
}

.lp-adobe__h3 {
    font-family: var(--lp-bloque);
    font-size: clamp(1.4rem, 1.15rem + 1vw, 1.8rem);
    font-weight: 700;
    line-height: 1.15;
}

.lp-adobe__bajada {
    max-width: 44rem;
    margin-top: 1rem;
    color: var(--lp-sup-suave);
    font-size: clamp(1rem, .95rem + .25vw, 1.12rem);
}

.lp-adobe__bajada--fechas {
    color: var(--lp-sup-tinta);
    font-weight: 700;
}

.lp-adobe__introduccion {
    max-width: 36rem;
    margin-top: 1.4rem;
    color: var(--lp-sup-suave);
    font-size: clamp(1.02rem, .97rem + .25vw, 1.15rem);
}

.lp-adobe__nota {
    max-width: 44rem;
    margin-top: 1.4rem;
    color: var(--lp-sup-suave);
    font-size: .92rem;
}

.lp-adobe__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .9rem 1rem;
    margin-top: 1.8rem;
}

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

/* Por debajo de 576 px los botones de un grupo ocupan cada uno su fila. */
@media (max-width: 575.98px) {
    .lp-adobe__acciones .lp-adobe__boton {
        flex: 1 1 100%;
    }
}

/* ═══ Botones ══════════════════════════════════════════════════════════════
   Adobes cocidos: rectángulos de barro rojo con su canto oscuro abajo. Al
   pasar se levantan un poco y al pulsar se hunden en la hilada. */
.lp-adobe__boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 3rem;
    padding: .7rem 1.35rem .75rem;
    border: 0;
    border-radius: .3rem;
    background: var(--lp-accion);
    color: var(--lp-accion-tinta);
    font-family: var(--lp-bloque);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: 0 .3rem 0 var(--lp-accion-canto), 0 .7rem 1.1rem -.5rem var(--lp-sombra-honda);
    transition: translate .15s ease, box-shadow .15s ease, background-color .2s ease;
    --lp-foco: var(--lp-accion);
    --lp-dibujo-relleno: currentColor;
}

    .lp-adobe__boton:hover {
        background: var(--lp-accion-alta);
        color: var(--lp-accion-tinta);
        translate: 0 -2px;
        box-shadow: 0 .42rem 0 var(--lp-accion-canto), 0 .9rem 1.2rem -.5rem var(--lp-sombra-honda);
    }

    .lp-adobe__boton:active {
        translate: 0 .2rem;
        box-shadow: 0 .1rem 0 var(--lp-accion-canto), 0 .3rem .5rem -.3rem var(--lp-sombra-honda);
    }

.lp-adobe__boton-icono {
    flex: none;
    width: 1.35rem;
    height: .9rem;
}

/* De línea: solo el contorno, del color del texto de la superficie. */
.lp-adobe__boton--linea {
    background: transparent;
    color: var(--lp-sup-tinta);
    box-shadow: inset 0 0 0 2px var(--lp-sup-tinta);
    --lp-foco: var(--lp-sup-tinta);
}

    .lp-adobe__boton--linea:hover {
        background: transparent;
        color: var(--lp-sup-acento);
        box-shadow: inset 0 0 0 2px var(--lp-sup-acento);
    }

    .lp-adobe__boton--linea:active {
        box-shadow: inset 0 0 0 2px var(--lp-sup-acento);
    }

/* Claro: para los estratos hondos y la noche, que son oscuros en los dos temas. */
.lp-adobe__boton--claro {
    background: var(--lp-accion-clara);
    color: var(--lp-accion-clara-tinta);
    box-shadow: 0 .3rem 0 var(--lp-accion-clara-canto), 0 .7rem 1.1rem -.5rem rgba(0, 0, 0, .55);
    --lp-foco: var(--lp-accion-clara);
}

    .lp-adobe__boton--claro:hover {
        background: var(--lp-accion-clara-alta);
        color: var(--lp-accion-clara-tinta);
        box-shadow: 0 .42rem 0 var(--lp-accion-clara-canto), 0 .9rem 1.2rem -.5rem rgba(0, 0, 0, .55);
    }

    .lp-adobe__boton--claro:active {
        box-shadow: 0 .1rem 0 var(--lp-accion-clara-canto);
    }

.lp-adobe__boton--grande {
    min-height: 3.6rem;
    padding-inline: 2rem;
    font-size: 1.12rem;
}

.lp-adobe__boton--pequeno {
    min-height: 2.6rem;
    padding: .5rem 1rem .55rem;
    font-size: .88rem;
}

/* ═══ Superficies ══════════════════════════════════════════════════════════
   El suelo cambia con el tema y lleva un grano de tierra muy suave. */
.lp-adobe__suelo,
.lp-adobe__suelo-bajo {
    padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem);
    background-image: radial-gradient(var(--lp-grano) 1px, transparent 1.4px);
    background-size: 22px 22px;
    color: var(--lp-tinta);
    --lp-sup-tinta: var(--lp-tinta);
    --lp-sup-suave: var(--lp-tinta-suave);
    --lp-sup-linea: var(--lp-linea);
    --lp-sup-acento: var(--lp-acento);
    --lp-foco: var(--lp-acento);
}

.lp-adobe__suelo {
    background-color: var(--lp-suelo);
}

.lp-adobe__suelo-bajo {
    background-color: var(--lp-suelo-bajo);
}

/* La lámina: papel claro en los dos temas, con su propia tinta. */
.lp-adobe__examen,
.lp-adobe__jornada-panel,
.lp-adobe__planilla {
    border-radius: .5rem;
    background-color: var(--lp-lamina);
    color: var(--lp-lamina-tinta);
    box-shadow: inset 0 0 0 1px var(--lp-lamina-linea), 0 1.3rem 2rem -1.4rem var(--lp-sombra-honda);
    --lp-sup-tinta: var(--lp-lamina-tinta);
    --lp-sup-suave: var(--lp-lamina-suave);
    --lp-sup-linea: var(--lp-lamina-linea);
    --lp-sup-acento: var(--lp-area-hab);
    --lp-foco: var(--lp-area-hab);
}

/* ═══ Franja de la universidad ═════════════════════════════════════════════ */
.lp-adobe__franja {
    background: var(--lp-uni);
    border-bottom: 3px solid var(--lp-uni-oro);
    color: var(--lp-uni-tinta);
    --lp-foco: var(--lp-uni-oro);
}

.lp-adobe__franja-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .9rem;
    min-height: 3.25rem;
    padding-block: .55rem;
}

.lp-adobe__franja-emblema {
    flex: none;
    width: 2.6rem;
    height: 1.86rem;
}

.lp-adobe__franja-nombre {
    font-family: var(--lp-bloque);
    font-size: clamp(.92rem, .82rem + .4vw, 1.06rem);
    font-weight: 700;
    line-height: 1.25;
}

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

.lp-adobe__franja-sello {
    margin-left: auto;
    padding: .18rem .7rem .22rem;
    border: 1px solid var(--lp-uni-oro);
    border-radius: .2rem;
    color: var(--lp-uni-oro);
    font-family: var(--lp-bloque);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* ═══ Portada ══════════════════════════════════════════════════════════════
   El sol de la tarde se abre detrás de la huaca. */
.lp-adobe__portada {
    position: relative;
    overflow: hidden;
    padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(3rem, 2rem + 4vw, 5.5rem);
    background-image:
        radial-gradient(ellipse 70% 60% at 85% 18%, var(--lp-resplandor), transparent 70%),
        radial-gradient(var(--lp-grano) 1px, transparent 1.4px);
    background-size: auto, 22px 22px;
}

.lp-adobe__portada-rejilla {
    display: grid;
    align-items: center;
    gap: clamp(2.25rem, 1rem + 3vw, 3.5rem);
}

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

/* La ficha del ciclo: adobes apilados que se reparten la fila. */
.lp-adobe__ficha {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    max-width: 34rem;
    margin-top: 2.2rem;
}

.lp-adobe__dato {
    flex: 1 1 9.5rem;
    padding: .55rem .85rem .65rem;
    border-radius: .2rem;
    background: var(--lp-adobe-textura), var(--lp-adobe);
    color: var(--lp-adobe-tinta);
    box-shadow: inset 0 2px 0 var(--lp-adobe-luz), inset 0 -3px 0 var(--lp-adobe-bajo), 0 2px 0 var(--lp-adobe-canto);
}

    .lp-adobe__dato dt {
        color: var(--lp-adobe-suave);
        font-family: var(--lp-bloque);
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

    .lp-adobe__dato dd {
        margin-top: .1rem;
        font-size: .95rem;
        font-weight: 600;
        line-height: 1.35;
    }

/* La huaca: la foto recortada con cuatro plataformas y el contorno de barro que
   le dibujan las sombras del marco, que siguen el recorte. */
.lp-adobe__huaca {
    position: relative;
    padding-top: clamp(1.5rem, 4vw, 3rem);
}

.lp-adobe__sol {
    position: absolute;
    top: 0;
    right: 9%;
    width: clamp(5rem, 15vw, 9rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, var(--lp-sol-claro) 0 45%, var(--lp-sol) 70%);
    box-shadow: 0 0 3rem 1rem var(--lp-sol-halo);
}

.lp-adobe__huaca-marco {
    position: relative;
    display: block;
    filter:
        drop-shadow(2px 0 0 var(--lp-adobe-bajo))
        drop-shadow(-2px 0 0 var(--lp-adobe-bajo))
        drop-shadow(0 -2px 0 var(--lp-adobe-bajo))
        drop-shadow(0 1.1rem 1.2rem var(--lp-sombra-honda));
}

.lp-adobe__huaca-foto {
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    clip-path: polygon(0 100%, 0 78%, 8% 78%, 8% 56%, 16% 56%, 16% 34%, 24% 34%, 24% 12%, 76% 12%, 76% 34%, 84% 34%, 84% 56%, 92% 56%, 92% 78%, 100% 78%, 100% 100%);
}

/* La hilada de base sobre la que se asienta la huaca. */
.lp-adobe__huaca-base {
    display: block;
    height: clamp(.9rem, 1.8vw, 1.25rem);
    border-radius: 0 0 .2rem .2rem;
    background:
        repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 2px), var(--lp-adobe-canto) calc(12.5% - 2px) 12.5%),
        var(--lp-adobe-textura),
        var(--lp-adobe-bajo);
    box-shadow: inset 0 2px 0 var(--lp-adobe-luz);
}

.lp-adobe__huaca-pie {
    margin-top: .9rem;
    color: var(--lp-sup-suave);
    font-size: .93rem;
    font-style: italic;
    text-align: center;
}

/* ═══ La obra: sellos, muro y examen ═══════════════════════════════════════ */

/* Los sellos del adobero: uno por grupo, tres por fila hasta que caben seis. */
.lp-adobe__sellos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin-bottom: 1.75rem;
}

@media (min-width: 992px) {
    .lp-adobe__sellos {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.lp-adobe__sello {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    padding: .85rem .45rem .95rem;
    border: 1px solid var(--lp-panel-borde);
    border-radius: .35rem;
    background: var(--lp-panel);
    color: var(--lp-sup-tinta);
    text-align: center;
    cursor: pointer;
    box-shadow: 0 .25rem 0 var(--lp-panel-borde);
    transition: translate .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}

    .lp-adobe__sello:hover {
        translate: 0 -2px;
    }

.lp-adobe__sello--a {
    --lp-g: var(--lp-g-a);
    --lp-g-tenue: var(--lp-g-a-tenue);
}

.lp-adobe__sello--b {
    --lp-g: var(--lp-g-b);
    --lp-g-tenue: var(--lp-g-b-tenue);
}

.lp-adobe__sello--c {
    --lp-g: var(--lp-g-c);
    --lp-g-tenue: var(--lp-g-c-tenue);
}

.lp-adobe__sello--d {
    --lp-g: var(--lp-g-d);
    --lp-g-tenue: var(--lp-g-d-tenue);
}

.lp-adobe__sello--e {
    --lp-g: var(--lp-g-e);
    --lp-g-tenue: var(--lp-g-e-tenue);
}

.lp-adobe__sello--f {
    --lp-g: var(--lp-g-f);
    --lp-g-tenue: var(--lp-g-f-tenue);
}

/* La letra va hundida en el barro, como un sello sobre adobe fresco. */
.lp-adobe__sello-letra {
    display: grid;
    place-items: center;
    width: 3rem;
    aspect-ratio: 1;
    border: 2px solid var(--lp-g);
    border-radius: .3rem;
    background: var(--lp-g-tenue);
    color: var(--lp-g-tinta);
    font-family: var(--lp-bloque);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: inset 0 .2rem .35rem rgba(0, 0, 0, .14);
    transition: background-color .2s ease, color .2s ease;
}

.lp-adobe__sello-nombre {
    font-size: clamp(.78rem, .7rem + .3vw, .9rem);
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: anywhere;
    hyphens: auto;
}

/* Marcado: la letra se llena del color del grupo. Va con el combinador de
   hermanos para funcionar también sin :has(). */
.lp-adobe__sello input:checked + .lp-adobe__sello-letra {
    background: var(--lp-g);
    color: var(--lp-g-blanco);
}

.lp-adobe__sello input:focus-visible + .lp-adobe__sello-letra {
    outline: 3px solid var(--lp-foco);
    outline-offset: 3px;
}

/* Con :has(), el sello entero queda hundido y teñido. */
.lp-adobe__sello:has(:checked) {
    border-color: var(--lp-g);
    background: var(--lp-g-tenue);
    color: var(--lp-g-tinta);
    translate: 0 .2rem;
    box-shadow: 0 .05rem 0 var(--lp-g), inset 0 .15rem .45rem rgba(0, 0, 0, .12);
}

/* El muro: un adobe por programa, con la junta del color del mortero. */
.lp-adobe__muro {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem;
    padding: clamp(.6rem, 1.5vw, 1.1rem);
    border-radius: .4rem;
    background: var(--lp-junta-muro);
    box-shadow: inset 0 0 0 1px var(--lp-sombra);
}

.lp-adobe__adobe {
    --lp-retraso: 0ms;
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    min-height: 2.75rem;
    padding: .45rem .85rem .5rem 1.35rem;
    border-radius: .18rem;
    background: var(--lp-adobe-textura), var(--lp-adobe);
    color: var(--lp-adobe-tinta);
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    box-shadow: inset 0 2px 0 var(--lp-adobe-luz), inset 0 -3px 0 var(--lp-adobe-bajo);
    transition: opacity .5s ease var(--lp-retraso), translate .5s ease var(--lp-retraso), background-color .3s ease, box-shadow .3s ease, color .3s ease;
}

    /* La marca del grupo, un punto grabado en la esquina. */
    .lp-adobe__adobe::before {
        content: "";
        position: absolute;
        top: 50%;
        left: .5rem;
        width: .45rem;
        aspect-ratio: 1;
        border-radius: 50%;
        background: var(--lp-g);
        translate: 0 -50%;
    }

:is(.lp-adobe__adobe, .lp-adobe__friso-foto)[data-grupo="a"] {
    --lp-g: var(--lp-g-a);
    --lp-g-tenue: var(--lp-g-a-tenue);
}

:is(.lp-adobe__adobe, .lp-adobe__friso-foto)[data-grupo="b"] {
    --lp-g: var(--lp-g-b);
    --lp-g-tenue: var(--lp-g-b-tenue);
}

:is(.lp-adobe__adobe, .lp-adobe__friso-foto)[data-grupo="c"] {
    --lp-g: var(--lp-g-c);
    --lp-g-tenue: var(--lp-g-c-tenue);
}

:is(.lp-adobe__adobe, .lp-adobe__friso-foto)[data-grupo="d"] {
    --lp-g: var(--lp-g-d);
    --lp-g-tenue: var(--lp-g-d-tenue);
}

:is(.lp-adobe__adobe, .lp-adobe__friso-foto)[data-grupo="e"] {
    --lp-g: var(--lp-g-e);
    --lp-g-tenue: var(--lp-g-e-tenue);
}

:is(.lp-adobe__adobe, .lp-adobe__friso-foto)[data-grupo="f"] {
    --lp-g: var(--lp-g-f);
    --lp-g-tenue: var(--lp-g-f-tenue);
}

/* El orden de llegada al levantar el muro: un patrón que se repite cada cinco
   adobes para que no caigan todos a la vez ni en fila. */
.lp-adobe__adobe:nth-child(5n + 2) {
    --lp-retraso: 90ms;
}

.lp-adobe__adobe:nth-child(5n + 3) {
    --lp-retraso: 200ms;
}

.lp-adobe__adobe:nth-child(5n + 4) {
    --lp-retraso: 40ms;
}

.lp-adobe__adobe:nth-child(5n) {
    --lp-retraso: 150ms;
}

/* En móvil el muro se aprieta: letra y relleno menores para que quepan más
   adobes por hilada y la lista de 44 no se haga interminable. */
@media (max-width: 575.98px) {
    .lp-adobe__muro {
        gap: .3rem;
    }

    .lp-adobe__adobe {
        min-height: 2.3rem;
        padding: .32rem .6rem .38rem 1.1rem;
        font-size: .8rem;
    }

        .lp-adobe__adobe::before {
            left: .4rem;
            width: .38rem;
        }
}

.lp-adobe__adobe-familia {
    display: block;
    color: var(--lp-adobe-suave);
    font-family: var(--lp-bloque);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.lp-adobe__adobe-nombre {
    overflow-wrap: anywhere;
}

/* El friso: cuatro adobes grandes con foto, asentados bajo el muro con el
   mismo mortero. Dos por fila en móvil y cuatro desde 768 px. */
.lp-adobe__friso {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .4rem;
    margin-top: .4rem;
    padding: clamp(.6rem, 1.5vw, 1.1rem);
    border-radius: .4rem;
    background: var(--lp-junta-muro);
    box-shadow: inset 0 0 0 1px var(--lp-sombra);
}

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

.lp-adobe__friso-foto {
    padding: .35rem .35rem .5rem;
    border-radius: .2rem;
    background: var(--lp-adobe-textura), var(--lp-adobe);
    color: var(--lp-adobe-tinta);
    box-shadow: inset 0 2px 0 var(--lp-adobe-luz), inset 0 -3px 0 var(--lp-adobe-bajo);
    transition: background-color .3s ease, box-shadow .3s ease, color .3s ease;
}

.lp-adobe__friso-imagen {
    width: 100%;
    aspect-ratio: 2 / 1;
    border-radius: .12rem;
    object-fit: cover;
    box-shadow: 0 0 0 1px var(--lp-adobe-canto);
}

.lp-adobe__friso-pie {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: .1rem .6rem;
    margin-top: .45rem;
    padding-inline: .2rem;
    font-size: .85rem;
    line-height: 1.25;
}

.lp-adobe__friso-carrera {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.lp-adobe__friso-grupo {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--lp-adobe-suave);
    font-family: var(--lp-bloque);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}

    .lp-adobe__friso-grupo::before {
        content: "";
        width: .45rem;
        aspect-ratio: 1;
        border-radius: 50%;
        background: var(--lp-g);
    }

/* El grupo elegido: sus adobes y sus fotos toman el color tenue del sello y se
   rodean del fuerte. Los demás no se apagan, para que todo el muro se siga
   leyendo. */
.lp-adobe__obra:has(#lp-adobe-grupo-a:checked) :is(.lp-adobe__adobe, .lp-adobe__friso-foto)[data-grupo="a"],
.lp-adobe__obra:has(#lp-adobe-grupo-b:checked) :is(.lp-adobe__adobe, .lp-adobe__friso-foto)[data-grupo="b"],
.lp-adobe__obra:has(#lp-adobe-grupo-c:checked) :is(.lp-adobe__adobe, .lp-adobe__friso-foto)[data-grupo="c"],
.lp-adobe__obra:has(#lp-adobe-grupo-d:checked) :is(.lp-adobe__adobe, .lp-adobe__friso-foto)[data-grupo="d"],
.lp-adobe__obra:has(#lp-adobe-grupo-e:checked) :is(.lp-adobe__adobe, .lp-adobe__friso-foto)[data-grupo="e"],
.lp-adobe__obra:has(#lp-adobe-grupo-f:checked) :is(.lp-adobe__adobe, .lp-adobe__friso-foto)[data-grupo="f"] {
    background: var(--lp-g-tenue);
    color: var(--lp-g-tinta);
    box-shadow: inset 0 0 0 2px var(--lp-g), 0 .25rem 0 var(--lp-g);
}

    .lp-adobe__obra:has(#lp-adobe-grupo-a:checked) [data-grupo="a"] :is(.lp-adobe__adobe-familia, .lp-adobe__friso-grupo),
    .lp-adobe__obra:has(#lp-adobe-grupo-b:checked) [data-grupo="b"] :is(.lp-adobe__adobe-familia, .lp-adobe__friso-grupo),
    .lp-adobe__obra:has(#lp-adobe-grupo-c:checked) [data-grupo="c"] :is(.lp-adobe__adobe-familia, .lp-adobe__friso-grupo),
    .lp-adobe__obra:has(#lp-adobe-grupo-d:checked) [data-grupo="d"] :is(.lp-adobe__adobe-familia, .lp-adobe__friso-grupo),
    .lp-adobe__obra:has(#lp-adobe-grupo-e:checked) [data-grupo="e"] :is(.lp-adobe__adobe-familia, .lp-adobe__friso-grupo),
    .lp-adobe__obra:has(#lp-adobe-grupo-f:checked) [data-grupo="f"] :is(.lp-adobe__adobe-familia, .lp-adobe__friso-grupo) {
        color: var(--lp-g-tinta);
    }

/* Las llamadas del grupo: sin elegir se ve la general; al elegir, la del grupo. */
.lp-adobe__obra-accion {
    margin-top: 2rem;
}

.lp-adobe__obra-cta:not([data-grupo-cta=""]) {
    display: none;
}

.lp-adobe__obra:has([data-grupo-radio]:checked) .lp-adobe__obra-cta[data-grupo-cta=""] {
    display: none;
}

.lp-adobe__obra:has(#lp-adobe-grupo-a:checked) .lp-adobe__obra-cta[data-grupo-cta="a"],
.lp-adobe__obra:has(#lp-adobe-grupo-b:checked) .lp-adobe__obra-cta[data-grupo-cta="b"],
.lp-adobe__obra:has(#lp-adobe-grupo-c:checked) .lp-adobe__obra-cta[data-grupo-cta="c"],
.lp-adobe__obra:has(#lp-adobe-grupo-d:checked) .lp-adobe__obra-cta[data-grupo-cta="d"],
.lp-adobe__obra:has(#lp-adobe-grupo-e:checked) .lp-adobe__obra-cta[data-grupo-cta="e"],
.lp-adobe__obra:has(#lp-adobe-grupo-f:checked) .lp-adobe__obra-cta[data-grupo-cta="f"] {
    display: inline-flex;
}

/* El examen: lámina con el texto, la pirámide y la tabla. En pantalla ancha la
   pirámide y la tabla van lado a lado. */
.lp-adobe__examen {
    display: grid;
    grid-template-areas: "texto" "piramide" "reparto" "nota";
    gap: 1.6rem 2.75rem;
    margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
    padding: clamp(1.25rem, .9rem + 2vw, 2.25rem);
}

@media (min-width: 992px) {
    .lp-adobe__examen {
        grid-template-areas: "texto texto" "piramide reparto" "nota nota";
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        align-items: center;
    }
}

.lp-adobe__examen-texto {
    grid-area: texto;
}

.lp-adobe__examen-entrada {
    max-width: 46rem;
    margin-top: .6rem;
    color: var(--lp-sup-suave);
}

.lp-adobe__examen-pista {
    margin-top: .8rem;
    color: var(--lp-sup-acento);
    font-weight: 700;
}

.lp-adobe__obra:has([data-grupo-radio]:checked) .lp-adobe__examen-pista {
    display: none;
}

.lp-adobe__examen-nota {
    grid-area: nota;
    color: var(--lp-sup-suave);
    font-size: .93rem;
}

/* La pirámide: diez hiladas en un solo contenedor flexible que se llena de abajo
   arriba (wrap-reverse) y centra cada hilada. Un salto de ancho completo cierra
   cada hilada; los adobes miden un diecinueveavo del ancho, menos la junta. */
.lp-adobe__piramide {
    grid-area: piramide;
    --lp-junta: clamp(2px, .4vw, 4px);
}

.lp-adobe__piezas {
    display: flex;
    flex-wrap: wrap-reverse;
    justify-content: center;
    padding-bottom: .4rem;
    border-bottom: 3px solid var(--lp-adobe-canto);
}

.lp-adobe__salto {
    flex-basis: 100%;
    height: 0;
}

.lp-adobe__pieza {
    --lp-fila: 0;
    --lp-retraso-fila: calc(var(--lp-fila) * 55ms);
    position: relative;
    width: calc((100% - 19 * var(--lp-junta)) / 19 - .1px);
    margin: calc(var(--lp-junta) / 2);
    aspect-ratio: 3 / 2;
    border-radius: 2px;
    background-color: var(--lp-pieza, var(--lp-area-vacia));
    box-shadow: inset 0 0 0 1px var(--lp-pieza-borde, var(--lp-area-vacia-borde));
    transition: background-color .45s ease var(--lp-retraso-fila), box-shadow .45s ease var(--lp-retraso-fila), opacity .45s ease var(--lp-retraso-fila), translate .45s ease var(--lp-retraso-fila);
}

    /* La marca del área, grabada en cada adobe cuando hay sitio para verla. */
    .lp-adobe__pieza::after {
        content: "";
        position: absolute;
        inset: 18%;
        background: var(--lp-marca, none);
        opacity: 0;
        transition: opacity .3s ease var(--lp-retraso-fila);
    }

@media (min-width: 768px) {
    .lp-adobe__pieza::after {
        opacity: 1;
    }
}

/* Hiladas, de la base a la cima: el retraso de cada una para que el cambio de
   grupo suba como se levanta un muro. */
.lp-adobe__pieza:nth-of-type(n + 20) {
    --lp-fila: 1;
}

.lp-adobe__pieza:nth-of-type(n + 37) {
    --lp-fila: 2;
}

.lp-adobe__pieza:nth-of-type(n + 52) {
    --lp-fila: 3;
}

.lp-adobe__pieza:nth-of-type(n + 65) {
    --lp-fila: 4;
}

.lp-adobe__pieza:nth-of-type(n + 76) {
    --lp-fila: 5;
}

.lp-adobe__pieza:nth-of-type(n + 85) {
    --lp-fila: 6;
}

.lp-adobe__pieza:nth-of-type(n + 92) {
    --lp-fila: 7;
}

.lp-adobe__pieza:nth-of-type(n + 97) {
    --lp-fila: 8;
}

.lp-adobe__pieza:nth-of-type(100) {
    --lp-fila: 9;
}

/* La base: las 30 de habilidades, iguales en todos los grupos. */
.lp-adobe__pieza:nth-of-type(-n + 30) {
    --lp-pieza: var(--lp-area-hab);
    --lp-pieza-borde: transparent;
    --lp-marca: var(--lp-marca-hab);
}

/* Con un grupo elegido, las 70 de conocimientos se reparten por rangos: cada
   regla pinta desde el primer adobe de su área hasta la cima, y la siguiente,
   más abajo en la hoja, le quita el tramo que sigue. Los cortes salen de la
   tabla del prospecto: versión A (grupo A), B-C-D y E-F. */
.lp-adobe__obra:has([data-grupo-radio]:checked) .lp-adobe__pieza {
    --lp-pieza-borde: transparent;
}

.lp-adobe__obra:has(#lp-adobe-grupo-a:checked) .lp-adobe__pieza:nth-of-type(n + 31) {
    --lp-pieza: var(--lp-area-mat);
    --lp-marca: var(--lp-marca-mat);
}

.lp-adobe__obra:has(#lp-adobe-grupo-a:checked) .lp-adobe__pieza:nth-of-type(n + 47) {
    --lp-pieza: var(--lp-area-com);
    --lp-marca: var(--lp-marca-com);
}

.lp-adobe__obra:has(#lp-adobe-grupo-a:checked) .lp-adobe__pieza:nth-of-type(n + 53) {
    --lp-pieza: var(--lp-area-per);
    --lp-marca: var(--lp-marca-per);
}

.lp-adobe__obra:has(#lp-adobe-grupo-a:checked) .lp-adobe__pieza:nth-of-type(n + 60) {
    --lp-pieza: var(--lp-area-soc);
    --lp-marca: var(--lp-marca-soc);
}

.lp-adobe__obra:has(#lp-adobe-grupo-a:checked) .lp-adobe__pieza:nth-of-type(n + 72) {
    --lp-pieza: var(--lp-area-cie);
    --lp-marca: var(--lp-marca-cie);
}

.lp-adobe__obra:has(:is(#lp-adobe-grupo-b, #lp-adobe-grupo-c, #lp-adobe-grupo-d):checked) .lp-adobe__pieza:nth-of-type(n + 31) {
    --lp-pieza: var(--lp-area-mat);
    --lp-marca: var(--lp-marca-mat);
}

.lp-adobe__obra:has(:is(#lp-adobe-grupo-b, #lp-adobe-grupo-c, #lp-adobe-grupo-d):checked) .lp-adobe__pieza:nth-of-type(n + 45) {
    --lp-pieza: var(--lp-area-com);
    --lp-marca: var(--lp-marca-com);
}

.lp-adobe__obra:has(:is(#lp-adobe-grupo-b, #lp-adobe-grupo-c, #lp-adobe-grupo-d):checked) .lp-adobe__pieza:nth-of-type(n + 59) {
    --lp-pieza: var(--lp-area-per);
    --lp-marca: var(--lp-marca-per);
}

.lp-adobe__obra:has(:is(#lp-adobe-grupo-b, #lp-adobe-grupo-c, #lp-adobe-grupo-d):checked) .lp-adobe__pieza:nth-of-type(n + 67) {
    --lp-pieza: var(--lp-area-soc);
    --lp-marca: var(--lp-marca-soc);
}

.lp-adobe__obra:has(:is(#lp-adobe-grupo-b, #lp-adobe-grupo-c, #lp-adobe-grupo-d):checked) .lp-adobe__pieza:nth-of-type(n + 89) {
    --lp-pieza: var(--lp-area-cie);
    --lp-marca: var(--lp-marca-cie);
}

.lp-adobe__obra:has(:is(#lp-adobe-grupo-e, #lp-adobe-grupo-f):checked) .lp-adobe__pieza:nth-of-type(n + 31) {
    --lp-pieza: var(--lp-area-mat);
    --lp-marca: var(--lp-marca-mat);
}

.lp-adobe__obra:has(:is(#lp-adobe-grupo-e, #lp-adobe-grupo-f):checked) .lp-adobe__pieza:nth-of-type(n + 55) {
    --lp-pieza: var(--lp-area-com);
    --lp-marca: var(--lp-marca-com);
}

.lp-adobe__obra:has(:is(#lp-adobe-grupo-e, #lp-adobe-grupo-f):checked) .lp-adobe__pieza:nth-of-type(n + 62) {
    --lp-pieza: var(--lp-area-per);
    --lp-marca: var(--lp-marca-per);
}

.lp-adobe__obra:has(:is(#lp-adobe-grupo-e, #lp-adobe-grupo-f):checked) .lp-adobe__pieza:nth-of-type(n + 68) {
    --lp-pieza: var(--lp-area-soc);
    --lp-marca: var(--lp-marca-soc);
}

.lp-adobe__obra:has(:is(#lp-adobe-grupo-e, #lp-adobe-grupo-f):checked) .lp-adobe__pieza:nth-of-type(n + 80) {
    --lp-pieza: var(--lp-area-cie);
    --lp-marca: var(--lp-marca-cie);
}

/* La tabla por área: muestra el color y la marca de cada una, y resalta la
   columna de la versión del grupo elegido. */
.lp-adobe__reparto-marco {
    grid-area: reparto;
    overflow-x: auto;
}

.lp-adobe__reparto {
    width: 100%;
    min-width: 15rem;
    border-collapse: collapse;
    font-size: .95rem;
    line-height: 1.3;
}

    .lp-adobe__reparto th,
    .lp-adobe__reparto td {
        padding: .55rem .45rem;
        border-bottom: 1px solid var(--lp-lamina-linea);
        text-align: center;
        transition: background-color .3s ease;
    }

    .lp-adobe__reparto thead th {
        color: var(--lp-lamina-suave);
        font-family: var(--lp-bloque);
        font-size: .82rem;
        font-weight: 700;
        letter-spacing: .05em;
        vertical-align: bottom;
    }

    .lp-adobe__reparto th[scope="row"] {
        font-weight: 600;
        text-align: left;
    }

    .lp-adobe__reparto td {
        font-family: var(--lp-bloque);
        font-size: 1.05rem;
        font-variant-numeric: tabular-nums;
    }

.lp-adobe__reparto-total th,
.lp-adobe__reparto-total td {
    border-bottom: 0;
    font-weight: 700;
}

.lp-adobe__muestra {
    position: relative;
    display: inline-block;
    width: 1.35rem;
    aspect-ratio: 3 / 2;
    margin-right: .55rem;
    border-radius: 2px;
    vertical-align: -.2em;
    background-color: var(--lp-muestra);
}

    .lp-adobe__muestra::after {
        content: "";
        position: absolute;
        inset: 18%;
        background: var(--lp-marca);
    }

.lp-adobe__muestra--hab {
    --lp-muestra: var(--lp-area-hab);
    --lp-marca: var(--lp-marca-hab);
}

.lp-adobe__muestra--mat {
    --lp-muestra: var(--lp-area-mat);
    --lp-marca: var(--lp-marca-mat);
}

.lp-adobe__muestra--com {
    --lp-muestra: var(--lp-area-com);
    --lp-marca: var(--lp-marca-com);
}

.lp-adobe__muestra--per {
    --lp-muestra: var(--lp-area-per);
    --lp-marca: var(--lp-marca-per);
}

.lp-adobe__muestra--soc {
    --lp-muestra: var(--lp-area-soc);
    --lp-marca: var(--lp-marca-soc);
}

.lp-adobe__muestra--cie {
    --lp-muestra: var(--lp-area-cie);
    --lp-marca: var(--lp-marca-cie);
}

.lp-adobe__obra:has(#lp-adobe-grupo-a:checked) .lp-adobe__reparto [data-version="a"],
.lp-adobe__obra:has(:is(#lp-adobe-grupo-b, #lp-adobe-grupo-c, #lp-adobe-grupo-d):checked) .lp-adobe__reparto [data-version="bcd"],
.lp-adobe__obra:has(:is(#lp-adobe-grupo-e, #lp-adobe-grupo-f):checked) .lp-adobe__reparto [data-version="ef"] {
    background: var(--lp-lamina-resalte);
    color: var(--lp-lamina-tinta);
    font-weight: 700;
}

/* ═══ La jornada ═══════════════════════════════════════════════════════════ */
.lp-adobe__jornada-rejilla {
    display: grid;
    gap: 2rem;
}

@media (min-width: 992px) {
    .lp-adobe__jornada-rejilla {
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
        align-items: center;
        gap: 3.5rem;
    }

        .lp-adobe__jornada-rejilla .lp-adobe__cabecera {
            margin-bottom: 0;
        }
}

.lp-adobe__jornada-panel {
    padding: clamp(1.25rem, .9rem + 2vw, 2rem);
}

.lp-adobe__mandos {
    display: grid;
    gap: 1.3rem;
}

.lp-adobe__mando-etiqueta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: .25rem 1rem;
    font-weight: 600;
}

.lp-adobe__mando-valor {
    color: var(--lp-area-hab);
    font-family: var(--lp-bloque);
    font-size: 1.3rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Las barras: un surco de barro y un adobe por perilla. */
.lp-adobe__barra {
    display: block;
    width: 100%;
    height: 1.8rem;
    margin: .4rem 0 0;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

    .lp-adobe__barra::-webkit-slider-runnable-track {
        height: .55rem;
        border-radius: .3rem;
        background: var(--lp-lamina-linea);
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18);
    }

    .lp-adobe__barra::-webkit-slider-thumb {
        width: 2.2rem;
        height: 1.3rem;
        margin-top: -.375rem;
        border: 0;
        border-radius: .2rem;
        background: var(--lp-adobe-textura), var(--lp-adobe);
        box-shadow: inset 0 2px 0 var(--lp-adobe-luz), inset 0 -3px 0 var(--lp-adobe-bajo), 0 2px 0 var(--lp-adobe-canto);
        -webkit-appearance: none;
        appearance: none;
    }

    .lp-adobe__barra::-moz-range-track {
        height: .55rem;
        border-radius: .3rem;
        background: var(--lp-lamina-linea);
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18);
    }

    .lp-adobe__barra::-moz-range-progress {
        height: .55rem;
        border-radius: .3rem;
        background: var(--lp-area-hab);
    }

    .lp-adobe__barra::-moz-range-thumb {
        width: 2.2rem;
        height: 1.3rem;
        border: 0;
        border-radius: .2rem;
        background: var(--lp-adobe-textura), var(--lp-adobe);
        box-shadow: inset 0 2px 0 var(--lp-adobe-luz), inset 0 -3px 0 var(--lp-adobe-bajo), 0 2px 0 var(--lp-adobe-canto);
    }

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

/* El camino del examen: tres tramos con el ancho de su tiempo, que el guion fija
   en --lp-tramo-*. Por defecto, el ejemplo de 45, 120 y 15 minutos. */
.lp-adobe__camino {
    margin-top: 1.6rem;
}

.lp-adobe__camino-franja {
    display: flex;
    gap: 2px;
    height: 2.4rem;
    padding: 2px;
    border-radius: .3rem;
    background: var(--lp-adobe-canto);
}

.lp-adobe__tramo {
    min-width: 0;
    height: 100%;
    border-radius: .15rem;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .22);
    transition: flex-basis .45s ease;
}

.lp-adobe__tramo--habilidades {
    flex: 0 1 var(--lp-tramo-habilidades, 25%);
    background: var(--lp-area-hab);
}

.lp-adobe__tramo--conocimientos {
    flex: 0 1 var(--lp-tramo-conocimientos, 66.667%);
    background: var(--lp-area-mat);
}

.lp-adobe__tramo--repaso {
    flex: 0 1 var(--lp-tramo-repaso, 8.333%);
    background: var(--lp-area-com);
}

.lp-adobe__camino-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.3rem;
    margin-top: .8rem;
    font-size: .95rem;
}

.lp-adobe__camino-item {
    display: flex;
    align-items: center;
    gap: .45rem;
}

    .lp-adobe__camino-item::before {
        content: "";
        flex: none;
        width: .95rem;
        height: .65rem;
        border-radius: 2px;
        background: var(--lp-tramo-color);
    }

    .lp-adobe__camino-item strong {
        font-family: var(--lp-bloque);
        font-weight: 700;
    }

.lp-adobe__camino-item--habilidades {
    --lp-tramo-color: var(--lp-area-hab);
}

.lp-adobe__camino-item--conocimientos {
    --lp-tramo-color: var(--lp-area-mat);
}

.lp-adobe__camino-item--repaso {
    --lp-tramo-color: var(--lp-area-com);
}

.lp-adobe__resultado {
    margin-top: 1.4rem;
    padding-top: 1.1rem;
    border-top: 1px dashed var(--lp-lamina-linea);
    font-size: 1.05rem;
}

.lp-adobe__resultado-cifra {
    display: block;
    color: var(--lp-area-hab);
    font-family: var(--lp-bloque);
    font-size: clamp(1.9rem, 1.45rem + 1.6vw, 2.6rem);
    font-weight: 700;
    line-height: 1.15;
}

.lp-adobe__ejemplo {
    font-size: 1.05rem;
}

/* ═══ Cuatro plataformas ═══════════════════════════════════════════════════
   En móvil una lista; desde 992 px, cuatro escalones que suben hacia la derecha
   sobre su propia masa de adobes. */
.lp-adobe__plataformas {
    display: grid;
    gap: 1rem;
}

.lp-adobe__plataforma {
    --lp-escalon: 2.4rem;
    position: relative;
    padding: 1.25rem 1.25rem 1.35rem 4.75rem;
    border: 1px solid var(--lp-panel-borde);
    border-radius: .4rem;
    background: var(--lp-panel);
    box-shadow: 0 .3rem 0 var(--lp-panel-borde);
}

.lp-adobe__plataforma--1 {
    --lp-nivel: 0;
}

.lp-adobe__plataforma--2 {
    --lp-nivel: 1;
}

.lp-adobe__plataforma--3 {
    --lp-nivel: 2;
}

.lp-adobe__plataforma--4 {
    --lp-nivel: 3;
}

.lp-adobe__plataforma-nivel {
    position: absolute;
    top: 1.25rem;
    left: 1.15rem;
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 1.8rem;
    border-radius: .18rem;
    background: var(--lp-adobe-textura), var(--lp-adobe);
    color: var(--lp-adobe-tinta);
    font-family: var(--lp-bloque);
    font-size: 1.05rem;
    font-weight: 700;
    box-shadow: inset 0 2px 0 var(--lp-adobe-luz), inset 0 -3px 0 var(--lp-adobe-bajo), 0 2px 0 var(--lp-adobe-canto);
}

.lp-adobe__plataforma-nombre {
    color: var(--lp-sup-acento);
    font-family: var(--lp-bloque);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.lp-adobe__plataforma-titulo {
    margin-top: .2rem;
    font-family: var(--lp-bloque);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.15;
}

.lp-adobe__plataforma-cuando {
    display: flex;
    flex-direction: column;
    margin-top: .5rem;
    font-size: .9rem;
    line-height: 1.45;
}

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

.lp-adobe__plataforma-fechas {
    color: var(--lp-sup-suave);
}

.lp-adobe__plataforma-texto {
    margin-top: .55rem;
    color: var(--lp-sup-suave);
    font-size: .95rem;
}

@media (min-width: 992px) {
    .lp-adobe__plataformas {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: end;
        gap: 0 .9rem;
        padding-bottom: .5rem;
    }

    .lp-adobe__plataforma {
        margin-bottom: calc(var(--lp-nivel) * var(--lp-escalon));
        padding: 4rem 1.2rem 1.35rem;
    }

    .lp-adobe__plataforma-nivel {
        top: 1.2rem;
        left: 1.2rem;
    }

        /* La masa del escalón: los adobes que lo sostienen hasta el suelo. */
        .lp-adobe__plataforma::after {
            content: "";
            position: absolute;
            top: calc(100% + .3rem);
            right: -1px;
            left: -1px;
            height: calc(var(--lp-nivel) * var(--lp-escalon));
            border-radius: 0 0 .2rem .2rem;
            background:
                repeating-linear-gradient(0deg, var(--lp-adobe-canto) 0 2px, transparent 2px .8rem),
                repeating-linear-gradient(90deg, transparent 0 calc(25% - 2px), var(--lp-adobe-canto) calc(25% - 2px) 25%),
                var(--lp-adobe-textura),
                var(--lp-adobe);
        }
}

/* ═══ Estratos ═════════════════════════════════════════════════════════════
   Cada capa se monta sobre la anterior con un borde superior irregular, y cuanto
   más honda, más oscura. Colores fijos con su propia tinta. */
.lp-adobe__estratos-seccion {
    padding-top: clamp(3.5rem, 2.5rem + 4vw, 6rem);
    background-color: var(--lp-suelo);
    background-image: radial-gradient(var(--lp-grano) 1px, transparent 1.4px);
    background-size: 22px 22px;
    color: var(--lp-tinta);
    --lp-sup-tinta: var(--lp-tinta);
    --lp-sup-suave: var(--lp-tinta-suave);
    --lp-sup-linea: var(--lp-linea);
    --lp-sup-acento: var(--lp-acento);
    --lp-foco: var(--lp-acento);
}

.lp-adobe__estratos-cabecera .lp-adobe__cabecera {
    margin-bottom: clamp(2rem, 1.5rem + 2vw, 2.75rem);
}

.lp-adobe__estrato {
    position: relative;
    margin-top: -1.1rem;
    padding-block: clamp(2.6rem, 2rem + 2vw, 3.4rem) clamp(2rem, 1.6rem + 2vw, 2.8rem);
    color: var(--lp-sup-tinta);
    clip-path: polygon(0 1.1rem, 7% .45rem, 15% .95rem, 24% .2rem, 33% .8rem, 45% .3rem, 56% 1rem, 66% .25rem, 77% .85rem, 88% .3rem, 95% .75rem, 100% .4rem, 100% 100%, 0 100%);
}

    .lp-adobe__estrato:nth-child(even) {
        clip-path: polygon(0 .35rem, 9% .9rem, 19% .25rem, 30% 1rem, 41% .4rem, 52% .85rem, 63% .2rem, 74% .95rem, 85% .35rem, 94% .9rem, 100% .3rem, 100% 100%, 0 100%);
    }

.lp-adobe__estrato--1 {
    background:
        radial-gradient(rgba(120, 80, 40, .22) 1px, transparent 1.5px) 0 0 / 12px 12px,
        var(--lp-estrato-1);
    --lp-sup-tinta: var(--lp-estrato-tinta-oscura);
    --lp-sup-suave: var(--lp-estrato-suave-oscura);
    --lp-sup-acento: var(--lp-estrato-tinta-oscura);
}

.lp-adobe__estrato--2 {
    background:
        radial-gradient(circle at 30% 40%, rgba(90, 55, 25, .28) 0 2px, transparent 2.6px) 0 0 / 38px 30px,
        radial-gradient(circle at 70% 70%, rgba(90, 55, 25, .2) 0 3px, transparent 3.6px) 0 0 / 52px 44px,
        var(--lp-estrato-2);
    --lp-sup-tinta: var(--lp-estrato-tinta-oscura);
    --lp-sup-suave: var(--lp-estrato-suave-oscura);
    --lp-sup-acento: var(--lp-estrato-tinta-oscura);
}

.lp-adobe__estrato--3 {
    background:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, .1) 0 2px, transparent 2px 15px),
        var(--lp-estrato-3);
    --lp-sup-tinta: var(--lp-estrato-tinta-clara);
    --lp-sup-suave: var(--lp-estrato-suave-clara);
    --lp-sup-acento: var(--lp-estrato-tinta-clara);
}

.lp-adobe__estrato--4 {
    background:
        radial-gradient(ellipse 5px 3px at 40% 50%, rgba(255, 220, 180, .14) 0 99%, transparent) 0 0 / 46px 34px,
        radial-gradient(ellipse 4px 3px at 60% 30%, rgba(0, 0, 0, .22) 0 99%, transparent) 0 0 / 34px 28px,
        var(--lp-estrato-4);
    --lp-sup-tinta: var(--lp-estrato-tinta-clara);
    --lp-sup-suave: var(--lp-estrato-suave-clara);
    --lp-sup-acento: var(--lp-estrato-tinta-clara);
}

/* La capa más honda guarda adobes antiguos, apenas visibles. */
.lp-adobe__estrato--5 {
    background:
        repeating-linear-gradient(0deg, rgba(255, 220, 180, .07) 0 2px, transparent 2px 1.6rem),
        repeating-linear-gradient(90deg, rgba(255, 220, 180, .07) 0 2px, transparent 2px 3.2rem),
        var(--lp-estrato-5);
    --lp-sup-tinta: var(--lp-estrato-tinta-clara);
    --lp-sup-suave: var(--lp-estrato-suave-clara);
    --lp-sup-acento: var(--lp-estrato-tinta-clara);
}

.lp-adobe__estrato-fila {
    display: grid;
    gap: .35rem;
}

@media (min-width: 768px) {
    .lp-adobe__estrato-fila {
        grid-template-columns: 9.5rem minmax(0, 15rem) minmax(0, 1fr);
        align-items: baseline;
        gap: 1.5rem 2rem;
    }
}

.lp-adobe__estrato-epoca {
    color: var(--lp-sup-acento);
    font-family: var(--lp-bloque);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.lp-adobe__estrato-cifra {
    font-family: var(--lp-bloque);
    font-size: clamp(2.3rem, 1.7rem + 2.4vw, 3.4rem);
    font-weight: 700;
    line-height: 1;
}

.lp-adobe__estrato-unidad {
    display: block;
    margin-top: .35rem;
    font-size: .95rem;
    letter-spacing: .03em;
    line-height: 1.2;
}

.lp-adobe__estrato-texto {
    max-width: 40rem;
    color: var(--lp-sup-suave);
}

/* El pie sigue en la capa más honda, con el botón claro de las salas oscuras. */
.lp-adobe__estratos-pie {
    width: auto;
    max-width: none;
    margin: -1px 0 0;
    padding: .5rem 1rem clamp(3rem, 2rem + 3vw, 4.5rem);
    background: var(--lp-estrato-5);
    --lp-sup-tinta: var(--lp-estrato-tinta-clara);
    --lp-foco: var(--lp-accion-clara);
}

    .lp-adobe__estratos-pie .lp-adobe__acciones {
        margin-top: 0;
    }

/* ═══ Seis entradas ════════════════════════════════════════════════════════
   Adobes grandes con su marca grabada: el trazo oscuro lleva debajo un filo de
   luz, como una incisión en el barro. */
.lp-adobe__entradas {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.1rem;
}

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

@media (min-width: 992px) {
    .lp-adobe__entradas {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.4rem;
    }
}

.lp-adobe__entrada {
    position: relative;
    padding: 1.35rem 1.3rem 1.4rem;
    border-radius: .3rem;
    background: var(--lp-adobe-textura), var(--lp-adobe);
    color: var(--lp-adobe-tinta);
    box-shadow: inset 0 3px 0 var(--lp-adobe-luz), inset 0 -5px 0 var(--lp-adobe-bajo), 0 .35rem 0 var(--lp-adobe-canto), 0 1rem 1.4rem -1rem var(--lp-sombra-honda);
    --lp-sup-tinta: var(--lp-adobe-tinta);
    --lp-sup-suave: var(--lp-adobe-suave);
}

.lp-adobe__entrada-marca {
    display: block;
    width: 3.2rem;
    height: 3.2rem;
    filter: drop-shadow(0 1.5px 0 var(--lp-adobe-luz));
    --lp-dibujo-trazo: var(--lp-adobe-marca);
}

.lp-adobe__entrada-titulo {
    margin-top: .6rem;
    font-family: var(--lp-bloque);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2;
}

.lp-adobe__entrada-datos dt {
    margin-top: .75rem;
    color: var(--lp-adobe-suave);
    font-family: var(--lp-bloque);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.lp-adobe__entrada-datos dd {
    margin-top: .15rem;
    font-size: .95rem;
    line-height: 1.45;
}

/* ═══ La receta ════════════════════════════════════════════════════════════ */
.lp-adobe__receta {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    counter-reset: lp-adobe-paso;
}

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

@media (min-width: 992px) {
    .lp-adobe__receta {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.25rem;
    }
}

.lp-adobe__paso {
    position: relative;
    padding: 1.3rem 1.25rem 1.4rem;
    border: 1px solid var(--lp-panel-borde);
    border-radius: .4rem;
    background: var(--lp-panel);
    counter-increment: lp-adobe-paso;
}

    /* El número del paso, grande y en segundo plano. */
    .lp-adobe__paso::after {
        content: counter(lp-adobe-paso) / "";
        position: absolute;
        top: .8rem;
        right: 1.1rem;
        color: var(--lp-sup-linea);
        font-family: var(--lp-bloque);
        font-size: 2.4rem;
        font-weight: 700;
        line-height: 1;
    }

.lp-adobe__paso-icono {
    display: grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 50%;
    background: var(--lp-adobe-textura), var(--lp-adobe);
    box-shadow: inset 0 2px 0 var(--lp-adobe-luz), inset 0 -3px 0 var(--lp-adobe-bajo), 0 2px 0 var(--lp-adobe-canto);
    --lp-dibujo-trazo: var(--lp-adobe-tinta);
}

    .lp-adobe__paso-icono svg {
        width: 2.15rem;
        height: 2.15rem;
    }

.lp-adobe__paso-ingrediente {
    margin-top: .9rem;
    color: var(--lp-sup-acento);
    font-family: var(--lp-bloque);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.lp-adobe__paso-titulo {
    margin-top: .2rem;
    font-family: var(--lp-bloque);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2;
}

.lp-adobe__paso-texto {
    margin-top: .45rem;
    color: var(--lp-sup-suave);
    font-size: .95rem;
}

/* Del barro fresco al adobe seco: los extremos llevan cada uno la tinta que se
   lee sobre su color. */
.lp-adobe__secado {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.6rem;
    padding: .6rem .95rem;
    border-radius: .3rem;
    background: linear-gradient(90deg, #4E311C 0%, #7A4E2C 30%, #B9875A 65%, #E6C298 100%);
    font-family: var(--lp-bloque);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.lp-adobe__secado-extremo:first-child {
    color: #FBF1E0;
}

.lp-adobe__secado-extremo:last-child {
    color: #26170D;
}

/* ═══ La faena ═════════════════════════════════════════════════════════════
   El contador cuenta las casillas marcadas sin guion: cada una suma al contador
   de la planilla y el número se escribe después de la lista. */
.lp-adobe__faena-rejilla {
    display: grid;
    gap: 2rem;
}

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

        .lp-adobe__faena-rejilla .lp-adobe__cabecera {
            margin-bottom: 0;
        }
}

.lp-adobe__planilla {
    position: relative;
    padding: clamp(1.25rem, .9rem + 2vw, 2rem);
    counter-reset: lp-adobe-faena;
}

.lp-adobe__planilla-titulo {
    padding-bottom: .6rem;
    border-bottom: 2px solid var(--lp-lamina-tinta);
    font-family: var(--lp-bloque);
    font-size: 1.25rem;
    font-weight: 700;
}

.lp-adobe__tareas {
    display: grid;
    margin-top: .5rem;
}

.lp-adobe__tarea {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: .7rem .25rem;
    border-bottom: 1px dashed var(--lp-lamina-linea);
    cursor: pointer;
}

.lp-adobe__tarea-casilla:checked {
    counter-increment: lp-adobe-faena;
}

/* La casilla es un hueco de adobe: al marcarla, el adobe ocupa su sitio. */
.lp-adobe__tarea-adobe {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.2rem;
    height: 1.45rem;
    margin-top: .05rem;
    border-radius: .18rem;
    box-shadow: inset 0 0 0 2px var(--lp-adobe-bajo);
    --lp-visto: var(--lp-adobe-tinta);
    transition: background-color .25s ease, box-shadow .25s ease;
}

    .lp-adobe__tarea-adobe svg {
        width: 1.1rem;
        height: 1.1rem;
        opacity: 0;
        transition: opacity .2s ease;
    }

.lp-adobe__tarea-casilla:checked + .lp-adobe__tarea-adobe {
    background: var(--lp-adobe-textura), var(--lp-adobe);
    box-shadow: inset 0 2px 0 var(--lp-adobe-luz), inset 0 -3px 0 var(--lp-adobe-bajo), 0 2px 0 var(--lp-adobe-canto);
}

    .lp-adobe__tarea-casilla:checked + .lp-adobe__tarea-adobe svg {
        opacity: 1;
    }

.lp-adobe__tarea-casilla:focus-visible + .lp-adobe__tarea-adobe {
    outline: 3px solid var(--lp-foco);
    outline-offset: 3px;
}

.lp-adobe__tarea-texto {
    font-weight: 600;
    line-height: 1.45;
}

.lp-adobe__planilla-cuenta {
    margin-top: 1rem;
    font-family: var(--lp-bloque);
    font-weight: 700;
}

    .lp-adobe__planilla-numero::before {
        content: counter(lp-adobe-faena);
    }

/* La invitación aparece cuando ya no queda ninguna casilla sin marcar. */
.lp-adobe__planilla-lista {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
    margin-top: .9rem;
    padding: .85rem 1rem;
    border-radius: .3rem;
    background: var(--lp-lamina-resalte);
}

.lp-adobe__planilla:not(:has(.lp-adobe__tarea-casilla:not(:checked))) .lp-adobe__planilla-lista {
    display: flex;
}

.lp-adobe__planilla-lista-texto {
    font-weight: 700;
}

/* ═══ Al pie de la huaca ═══════════════════════════════════════════════════ */
.lp-adobe__preguntas-rejilla {
    display: grid;
    gap: 2rem;
}

@media (min-width: 992px) {
    .lp-adobe__preguntas-rejilla {
        grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr);
        align-items: start;
        gap: 3.5rem;
    }
}

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

.lp-adobe__consulta {
    border: 1px solid var(--lp-panel-borde);
    border-radius: .35rem;
    background: var(--lp-panel);
}

.lp-adobe__consulta-pregunta {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .95rem 1.1rem;
    font-family: var(--lp-bloque);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    list-style: none;
    cursor: pointer;
}

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

    /* Un adobe tendido que se para cuando la pregunta se abre. */
    .lp-adobe__consulta-pregunta::before {
        content: "";
        flex: none;
        width: 1.5rem;
        height: 1rem;
        border-radius: 2px;
        background: var(--lp-adobe-textura), var(--lp-adobe);
        box-shadow: inset 0 2px 0 var(--lp-adobe-luz), inset 0 -2px 0 var(--lp-adobe-bajo);
        transition: rotate .3s ease;
    }

.lp-adobe__consulta[open] > .lp-adobe__consulta-pregunta::before {
    rotate: 90deg;
}

.lp-adobe__consulta-respuesta {
    padding: 0 1.1rem 1.15rem 3.5rem;
    color: var(--lp-sup-suave);
}

/* ═══ Desde la cima ════════════════════════════════════════════════════════
   El cielo se dibuja después del texto: la pirámide queda abajo, sobre el
   horizonte, y el sol sale detrás de ella. */
.lp-adobe__cierre {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-top: clamp(3.5rem, 2.5rem + 4vw, 6rem);
    background:
        radial-gradient(1.5px 1.5px at 12% 18%, rgba(255, 255, 255, .7), transparent),
        radial-gradient(1.5px 1.5px at 27% 9%, rgba(255, 255, 255, .55), transparent),
        radial-gradient(1px 1px at 46% 22%, rgba(255, 255, 255, .6), transparent),
        radial-gradient(1.5px 1.5px at 68% 12%, rgba(255, 255, 255, .6), transparent),
        radial-gradient(1px 1px at 83% 26%, rgba(255, 255, 255, .5), transparent),
        radial-gradient(1.5px 1.5px at 92% 7%, rgba(255, 255, 255, .65), transparent),
        linear-gradient(180deg, var(--lp-noche) 0%, var(--lp-noche) 35%, var(--lp-noche-alto) 70%, var(--lp-noche-horizonte) 100%);
    color: var(--lp-noche-tinta);
    text-align: center;
    --lp-sup-tinta: var(--lp-noche-tinta);
    --lp-sup-suave: var(--lp-noche-suave);
    --lp-sup-linea: rgba(255, 255, 255, .25);
    --lp-sup-acento: var(--lp-sol);
    --lp-foco: var(--lp-sol);
}

.lp-adobe__cierre .lp-adobe__rotulo {
    justify-content: center;
}

.lp-adobe__cierre-texto {
    position: relative;
    z-index: 1;
}

    .lp-adobe__cierre-texto .lp-adobe__h2 {
        max-width: 46rem;
        margin-inline: auto;
    }

.lp-adobe__cierre-entrada {
    max-width: 34rem;
    margin: 1rem auto 0;
    color: var(--lp-sup-suave);
    font-size: 1.08rem;
}

.lp-adobe__independiente {
    max-width: 34rem;
    margin: 1.5rem auto 0;
    color: var(--lp-sup-suave);
    font-size: .88rem;
}

.lp-adobe__cielo {
    position: relative;
    order: 2;
    height: clamp(9rem, 6rem + 12vw, 15rem);
    margin-top: 2.5rem;
}

.lp-adobe__cierre-sol {
    position: absolute;
    bottom: 22%;
    left: 50%;
    width: clamp(6rem, 4rem + 8vw, 10rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, var(--lp-sol-claro) 0 45%, var(--lp-sol) 72%);
    box-shadow: 0 0 4rem 1.5rem var(--lp-sol-halo);
    translate: -50% 0;
}

/* La silueta de la huaca: cinco plataformas de adobe oscuro con sus juntas. */
.lp-adobe__cierre-huaca {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: min(100%, 46rem);
    height: 72%;
    background:
        repeating-linear-gradient(0deg, var(--lp-noche-junta) 0 2px, transparent 2px 1.1rem),
        repeating-linear-gradient(90deg, var(--lp-noche-junta) 0 2px, transparent 2px 2.4rem),
        var(--lp-noche-huaca);
    clip-path: polygon(0 100%, 0 80%, 9% 80%, 9% 60%, 18% 60%, 18% 40%, 27% 40%, 27% 20%, 36% 20%, 36% 0, 64% 0, 64% 20%, 73% 20%, 73% 40%, 82% 40%, 82% 60%, 91% 60%, 91% 80%, 100% 80%, 100% 100%);
    translate: -50% 0;
}

/* ═══ 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-adobe__flotante {
    position: fixed;
    z-index: 1030;
    left: 1rem;
    bottom: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 3.1rem;
    padding: .65rem 1.3rem .7rem;
    border-radius: .3rem;
    background: var(--lp-accion);
    color: var(--lp-accion-tinta);
    font-family: var(--lp-bloque);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: 0 .3rem 0 var(--lp-accion-canto), 0 1rem 1.8rem -.6rem var(--lp-sombra-flotante);
    --lp-foco: var(--lp-accion);
    --lp-dibujo-relleno: currentColor;
    transition: translate .35s ease, opacity .35s ease, visibility 0s linear 0s, background-color .2s ease;
}

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

.lp-adobe__flotante-icono {
    width: 1.35rem;
    height: .9rem;
}

.lp-adobe__flotante--oculto {
    opacity: 0;
    translate: 0 160%;
    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, letra y espaciado bajan
   un punto, y si aun así el texto se parte, va centrado. */
@media (max-width: 575.98px) {
    .lp-adobe__flotante {
        right: var(--edu-landing-reserva-mascota, 1rem);
        left: 1rem;
        padding-inline: 1rem;
        font-size: .95rem;
        letter-spacing: .03em;
        text-align: center;
    }
}

/* Por debajo de 360px el texto en mayúsculas ya no cabe en una línea junto a
   los ladrillos: el icono, que es adorno, cede su sitio, para que el botón no
   doble su alto. */
@media (max-width: 359.98px) {
    .lp-adobe__flotante-icono {
        display: none;
    }
}

/* ═══ 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. --lp-orden escalona los hermanos. */
.lp-adobe [data-revelar]:nth-child(2) {
    --lp-orden: 1;
}

.lp-adobe [data-revelar]:nth-child(3) {
    --lp-orden: 2;
}

.lp-adobe [data-revelar]:nth-child(4) {
    --lp-orden: 3;
}

.lp-adobe [data-revelar]:nth-child(5) {
    --lp-orden: 4;
}

.lp-adobe [data-revelar]:nth-child(6) {
    --lp-orden: 5;
}

.lp-adobe [data-revelar]:nth-child(n + 7) {
    --lp-orden: 6;
}

@media (prefers-reduced-motion: no-preference) {
    .lp-adobe--animada [data-revelar] {
        transition: opacity .75s ease-out, translate .75s cubic-bezier(.2, .7, .3, 1);
        transition-delay: calc(var(--lp-orden, 0) * 85ms);
    }

        .lp-adobe--animada [data-revelar]:not(.lp-adobe--visible) {
            opacity: 0;
            translate: 0 1.5rem;
        }

    /* Los adobes sueltos caen desde arriba, como se asientan en la hilada. */
    .lp-adobe--animada :is(.lp-adobe__entrada, .lp-adobe__paso)[data-revelar]:not(.lp-adobe--visible) {
        translate: 0 -1.25rem;
        rotate: -2deg;
    }

    .lp-adobe--animada :is(.lp-adobe__entrada, .lp-adobe__paso)[data-revelar] {
        transition: opacity .6s ease-out, translate .6s cubic-bezier(.3, 1.35, .5, 1), rotate .6s cubic-bezier(.3, 1.35, .5, 1);
        transition-delay: calc(var(--lp-orden, 0) * 85ms);
    }

    /* El muro se levanta adobe por adobe, sin mover el mortero. */
    .lp-adobe--animada .lp-adobe__muro[data-revelar]:not(.lp-adobe--visible) {
        opacity: 1;
        translate: 0 0;
    }

    .lp-adobe--animada .lp-adobe__muro:not(.lp-adobe--visible) .lp-adobe__adobe {
        opacity: 0;
        translate: 0 -.8rem;
    }

    /* La pirámide se arma de la base a la cima al entrar en pantalla. */
    .lp-adobe--animada .lp-adobe__piramide:not(.lp-adobe--visible) .lp-adobe__pieza {
        opacity: 0;
        translate: 0 -.6rem;
    }

    /* El secado avanza de izquierda a derecha. */
    .lp-adobe--animada .lp-adobe__secado[data-revelar] {
        clip-path: inset(0 0 0 0 round .3rem);
        transition: clip-path 1.6s cubic-bezier(.4, 0, .2, 1);
    }

        .lp-adobe--animada .lp-adobe__secado[data-revelar]:not(.lp-adobe--visible) {
            opacity: 1;
            translate: 0 0;
            clip-path: inset(0 100% 0 0 round .3rem);
        }

    /* El sol del cierre sale detrás de la huaca. */
    .lp-adobe--animada .lp-adobe__cierre-sol {
        transition: translate 2.4s cubic-bezier(.25, .8, .3, 1) .2s;
    }

    .lp-adobe--animada .lp-adobe__cielo:not(.lp-adobe--visible) .lp-adobe__cierre-sol {
        translate: -50% 85%;
    }

    /* La huaca de la portada se levanta hilada por hilada al cargar, y el sol sube
       detrás de ella. */
    .lp-adobe--animada .lp-adobe__huaca-foto {
        animation: lp-adobe-levantar 2.4s .25s both;
    }

    .lp-adobe--animada .lp-adobe__sol {
        animation: lp-adobe-amanecer 2.2s cubic-bezier(.25, .8, .3, 1) .6s both;
    }

    /* El adobe de una tarea recién marcada se asienta con un pequeño rebote. */
    .lp-adobe__tarea-casilla:checked + .lp-adobe__tarea-adobe {
        animation: lp-adobe-asentar .45s cubic-bezier(.3, 1.6, .5, 1);
    }
}

/* Cuatro saltos, uno por plataforma: cada fotograma sube una hilada más del
   recorte, con los mismos 16 vértices para que el navegador pueda interpolar. */
@keyframes lp-adobe-levantar {
    0% {
        clip-path: polygon(0 100%, 0 100%, 8% 100%, 8% 100%, 16% 100%, 16% 100%, 24% 100%, 24% 100%, 76% 100%, 76% 100%, 84% 100%, 84% 100%, 92% 100%, 92% 100%, 100% 100%, 100% 100%);
        animation-timing-function: cubic-bezier(.3, .9, .4, 1);
    }

    25% {
        clip-path: polygon(0 100%, 0 78%, 8% 78%, 8% 78%, 16% 78%, 16% 78%, 24% 78%, 24% 78%, 76% 78%, 76% 78%, 84% 78%, 84% 78%, 92% 78%, 92% 78%, 100% 78%, 100% 100%);
        animation-timing-function: cubic-bezier(.3, .9, .4, 1);
    }

    50% {
        clip-path: polygon(0 100%, 0 78%, 8% 78%, 8% 56%, 16% 56%, 16% 56%, 24% 56%, 24% 56%, 76% 56%, 76% 56%, 84% 56%, 84% 56%, 92% 56%, 92% 78%, 100% 78%, 100% 100%);
        animation-timing-function: cubic-bezier(.3, .9, .4, 1);
    }

    75% {
        clip-path: polygon(0 100%, 0 78%, 8% 78%, 8% 56%, 16% 56%, 16% 34%, 24% 34%, 24% 34%, 76% 34%, 76% 34%, 84% 34%, 84% 56%, 92% 56%, 92% 78%, 100% 78%, 100% 100%);
        animation-timing-function: cubic-bezier(.3, .9, .4, 1);
    }

    100% {
        clip-path: polygon(0 100%, 0 78%, 8% 78%, 8% 56%, 16% 56%, 16% 34%, 24% 34%, 24% 12%, 76% 12%, 76% 34%, 84% 34%, 84% 56%, 92% 56%, 92% 78%, 100% 78%, 100% 100%);
    }
}

@keyframes lp-adobe-amanecer {
    from {
        opacity: 0;
        translate: 0 3rem;
    }

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

@keyframes lp-adobe-asentar {
    0% {
        translate: 0 -.5rem;
    }

    100% {
        translate: 0 0;
    }
}

/* ═══ 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-adobe *,
    .lp-adobe *::before,
    .lp-adobe *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ═══ Colores forzados ═════════════════════════════════════════════════════
   Con los colores del sistema los fondos desaparecen: los adobes se dibujan con
   contornos. La pirámide, sus muestras y la franja de la jornada conservan sus
   colores, porque ahí el color es el dato. */
@media (forced-colors: active) {
    .lp-adobe {
        --lp-dibujo-trazo: CanvasText;
        --lp-dibujo-relleno: CanvasText;
        --lp-visto: CanvasText;
    }

    .lp-adobe__boton,
    .lp-adobe__flotante,
    .lp-adobe__dato,
    .lp-adobe__sello,
    .lp-adobe__sello-letra,
    .lp-adobe__adobe,
    .lp-adobe__examen,
    .lp-adobe__jornada-panel,
    .lp-adobe__planilla,
    .lp-adobe__plataforma,
    .lp-adobe__plataforma-nivel,
    .lp-adobe__estrato,
    .lp-adobe__entrada,
    .lp-adobe__paso,
    .lp-adobe__paso-icono,
    .lp-adobe__consulta,
    .lp-adobe__tarea-adobe {
        border: 2px solid CanvasText;
    }

    .lp-adobe__sello input:checked + .lp-adobe__sello-letra {
        background: Highlight;
        color: HighlightText;
    }

    .lp-adobe__obra:has(#lp-adobe-grupo-a:checked) :is(.lp-adobe__adobe, .lp-adobe__friso-foto)[data-grupo="a"],
    .lp-adobe__obra:has(#lp-adobe-grupo-b:checked) :is(.lp-adobe__adobe, .lp-adobe__friso-foto)[data-grupo="b"],
    .lp-adobe__obra:has(#lp-adobe-grupo-c:checked) :is(.lp-adobe__adobe, .lp-adobe__friso-foto)[data-grupo="c"],
    .lp-adobe__obra:has(#lp-adobe-grupo-d:checked) :is(.lp-adobe__adobe, .lp-adobe__friso-foto)[data-grupo="d"],
    .lp-adobe__obra:has(#lp-adobe-grupo-e:checked) :is(.lp-adobe__adobe, .lp-adobe__friso-foto)[data-grupo="e"],
    .lp-adobe__obra:has(#lp-adobe-grupo-f:checked) :is(.lp-adobe__adobe, .lp-adobe__friso-foto)[data-grupo="f"] {
        outline: 3px solid Highlight;
        outline-offset: 1px;
    }

    .lp-adobe__piramide,
    .lp-adobe__muestra,
    .lp-adobe__camino-franja,
    .lp-adobe__camino-item::before {
        forced-color-adjust: none;
    }
}