/* Landing del Ciclo Verano — Universidad Nacional del Callao.

   TODO cuelga de .lp-pixel. 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 videojuego de aventura en pixel art. Con el tema claro se juega
   de día (cielo celeste, pasto verde, arena de playa) y con el oscuro, de noche
   (cielo azul con luna y estrellas, pasto y arena en penumbra). La pantalla del
   juego —las ventanas, el marcador y las secciones oscuras— es igual en los dos
   temas, como la interfaz de un juego.

   SEIS FAMILIAS DE COLOR, Y NO SE MEZCLAN:
     · LA UNIVERSIDAD (--lp-uni-*): azul marino y dorado de la franja superior,
       la identidad de las landings de la UNAC.
     · EL MUNDO (--lp-cielo-*, --lp-pasto-*, --lp-arena-*, --lp-suelo-*,
       --lp-toldo-*): cambia con el tema; de día y de noche.
     · LA INTERFAZ (--lp-pantalla-*, --lp-ventana-*, --lp-casilla-*,
       --lp-marcador-*): fija en los dos temas.
     · LAS ESTADÍSTICAS (--lp-stat-*): un color por curso del examen.
     · LOS SPRITES (--lp-t-*): la paleta de los dibujos. Cada color de un sprite
       es una clase lp-pixel__t-*; así ningún color vive en el marcado.
     · LA ACCIÓN (--lp-moneda-*): el dorado de moneda de todas las llamadas a
       inscribirse, que en la plataforma se paga justamente con monedas.

   Cada superficie fija además tres variables locales (--lp-suave,
   --lp-sombra-titular y --lp-foco) para que las piezas comunes se lean bien
   encima de cualquiera de ellas.

   El movimiento va a saltos (steps), como en un juego de 8 bits; solo existe con
   prefers-reduced-motion: no-preference y ninguna animación se repite sin fin. */
.lp-pixel {
    /* ── Identidad de la universidad ───────────────────────────────────── */
    --lp-uni: #0E2240;
    --lp-uni-alto: #17325A;
    --lp-uni-oro: #D9A93F;
    --lp-uni-tinta: #FFFFFF;
    --lp-uni-plata: #C9D3E0;
    /* ── El mundo de día: cambia con el tema ───────────────────────────── */
    --lp-cielo-alto: #5EB8F2;
    --lp-cielo-bajo: #C4ECFF;
    --lp-cielo-tinta: #0F1E48;
    --lp-cielo-suave: #23386B;
    --lp-cielo-sombra: #FFFFFF;
    --lp-cielo-panel: rgba(255, 255, 255, .82);
    --lp-sol-visible: block;
    --lp-luna-visible: none;
    --lp-estrellas-visibles: 0;
    --lp-estrella: #FFFFFF;
    --lp-pasto: #7CCB52;
    --lp-pasto-alto: #9BDC6A;
    --lp-pasto-mata: rgba(31, 94, 30, .24);
    --lp-pasto-tinta: #0E2A10;
    --lp-pasto-suave: #1D4A1F;
    --lp-pasto-sombra: #C8F0A6;
    --lp-mapa: #A6E07A;
    --lp-camino: #F3D48B;
    --lp-arena: #F6E3B4;
    --lp-arena-grano: rgba(160, 110, 40, .16);
    --lp-arena-tinta: #3A2408;
    --lp-arena-suave: #6A4A1E;
    --lp-arena-sombra: #FFFFFF;
    --lp-suelo-pasto: #6DBE45;
    --lp-suelo-pasto-alto: #8FD65B;
    --lp-suelo-tierra: #9A5E30;
    --lp-suelo-tierra-oscura: #7A4521;
    --lp-colina: #58B947;
    --lp-colina-lejos: #93D873;
    --lp-toldo-a: #E23E3A;
    --lp-toldo-b: #FFF5E6;
    --lp-foco-mundo: #0F1E48;
    /* ── La interfaz del juego: igual en los dos temas ─────────────────── */
    --lp-pantalla: #12143A;
    --lp-pantalla-alta: #242870;
    --lp-pantalla-linea: rgba(255, 255, 255, .035);
    --lp-pantalla-tinta: #F4F2FF;
    --lp-pantalla-suave: #C3C6EE;
    --lp-pantalla-sombra: #4B2FC4;
    --lp-ventana: #1A1D4E;
    --lp-ventana-alta: #262B6E;
    --lp-ventana-borde: #F4EBD0;
    --lp-ventana-contorno: #0B0C24;
    --lp-ventana-tinta: #FFFFFF;
    --lp-ventana-suave: #CDD0F5;
    --lp-ventana-sombra: rgba(11, 12, 36, .3);
    --lp-casilla: #0F1133;
    --lp-casilla-activa: #2E3486;
    --lp-casilla-borde: #3B3F86;
    --lp-marcador: rgba(15, 17, 51, .86);
    --lp-marcador-tinta: #FFFFFF;
    --lp-especial: #8FE8FF;
    --lp-estrella-apagada: rgba(255, 255, 255, .14);
    --lp-ok: #5BE08A;
    --lp-ok-tinta: #0C2A16;
    /* ── Las estadísticas del examen ───────────────────────────────────── */
    --lp-stat-mate: #FF6B5E;
    --lp-stat-ciencias: #52C8FF;
    --lp-stat-letras: #FFC928;
    --lp-stat-aptitud: #5BE08A;
    /* ── La acción: el dorado de moneda ────────────────────────────────── */
    --lp-moneda: #FFC928;
    --lp-moneda-alta: #FFE37A;
    --lp-moneda-sombra: #C98A06;
    --lp-moneda-tinta: #231600;
    --lp-contorno: #1C1A2E;
    /* ── Paleta de los sprites ─────────────────────────────────────────── */
    --lp-t-contorno: #1C1A2E;
    --lp-t-blanco: #FFFFFF;
    --lp-t-oro: #FFC928;
    --lp-t-oro-claro: #FFEFA0;
    --lp-t-naranja: #F07F2D;
    --lp-t-naranja-oscuro: #B8561A;
    --lp-t-rojo: #E23E3A;
    --lp-t-rojo-oscuro: #9A2530;
    --lp-t-verde: #3DAA4A;
    --lp-t-verde-claro: #8CDA5B;
    --lp-t-turquesa: #1FB3A5;
    --lp-t-turquesa-oscuro: #12776F;
    --lp-t-azul: #3A78DC;
    --lp-t-azul-oscuro: #24479A;
    --lp-t-celeste: #A8E6FF;
    --lp-t-morado: #7A4FD3;
    --lp-t-piel: #C68B59;
    --lp-t-piel-sombra: #9C6A3F;
    --lp-t-pelo: #2A1A12;
    --lp-t-gris-claro: #D3D8E0;
    --lp-t-gris: #7D8697;
    --lp-t-madera: #8B5A2B;
    --lp-t-madera-clara: #C28A4E;
    --lp-t-nube: #FFFFFF;
    --lp-t-nube-sombra: #CFEFFF;
    /* La estrella de las estadísticas, como máscara: el color lo pone el fondo. */
    --lp-mascara-estrella: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath d='M4 0h1v1h-1zM4 1h1v1h-1zM3 2h3v1h-3zM0 3h9v1h-9zM1 4h7v1h-7zM2 5h5v1h-5zM2 6h2v1h-2zM5 6h2v1h-2zM1 7h2v1h-2zM6 7h2v1h-2zM1 8h1v1h-1zM7 8h1v1h-1z'/%3E%3C/svg%3E");
    /* ── Medidas y letras ──────────────────────────────────────────────── */
    --lp-ancho: 76rem;
    --lp-titular: "Arial Black", "Segoe UI Black", "Helvetica Neue", Arial, system-ui, sans-serif;
    --lp-texto: "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
    --lp-consola: "Lucida Console", Monaco, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;
    margin: 0;
    background: var(--lp-pantalla);
    color: var(--lp-pantalla-tinta);
    font-family: var(--lp-texto);
    font-size: 1rem;
    line-height: 1.6;
    color-scheme: light;
}

/* Tema oscuro del sitio: se juega de noche. El atributo lo pone Akcadmia en un
   ancestro; aquí solo se reasignan variables, nunca reglas. Hasta qué astro se
   ve en el cielo sale de una variable. */
[data-tema="oscuro"] .lp-pixel {
    --lp-uni: #081629;
    --lp-uni-alto: #10254A;
    --lp-uni-oro: #E7BB57;
    --lp-uni-plata: #D8E0EA;
    --lp-cielo-alto: #0A1238;
    --lp-cielo-bajo: #1D2C6E;
    --lp-cielo-tinta: #F4F6FF;
    --lp-cielo-suave: #C9D2F5;
    --lp-cielo-sombra: #050A24;
    --lp-cielo-panel: rgba(10, 14, 44, .78);
    --lp-sol-visible: none;
    --lp-luna-visible: block;
    --lp-estrellas-visibles: 1;
    --lp-pasto: #1E5634;
    --lp-pasto-alto: #276B41;
    --lp-pasto-mata: rgba(0, 0, 0, .25);
    --lp-pasto-tinta: #EAF8EC;
    --lp-pasto-suave: #BFE3C8;
    --lp-pasto-sombra: #0A2415;
    --lp-mapa: #2B6B45;
    --lp-camino: #8A7A52;
    --lp-arena: #2B2A45;
    --lp-arena-grano: rgba(255, 255, 255, .05);
    --lp-arena-tinta: #F3EEFF;
    --lp-arena-suave: #C9C3E6;
    --lp-arena-sombra: #0E0D22;
    --lp-suelo-pasto: #1F5A36;
    --lp-suelo-pasto-alto: #2A7045;
    --lp-suelo-tierra: #4B2F1A;
    --lp-suelo-tierra-oscura: #36200F;
    --lp-colina: #1F5A36;
    --lp-colina-lejos: #2C4F6E;
    --lp-toldo-a: #9A2530;
    --lp-toldo-b: #D9CFC0;
    --lp-foco-mundo: #FFC928;
    --lp-t-nube: #5B6798;
    --lp-t-nube-sombra: #3B4674;
    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-pixel, que no ve sus variables. */
body:has(> .lp-pixel) {
    margin: 0 !important;
    padding: 0 !important;
    background-color: #0E2240;
}

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

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

    body > :has(+ .lp-pixel) > :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-pixel :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-pixel :where(h1, h2, h3, h4, p, dl, dd, figure) {
    margin: 0;
}

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

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

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

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

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

.lp-pixel,
.lp-pixel *,
.lp-pixel *::before,
.lp-pixel *::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-pixel [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-pixel:not(.lp-pixel--animada) :is([data-depende-fechas], [data-requiere-guion]) {
    display: none !important;
}

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

/* Texto solo para lectores de pantalla. */
.lp-pixel__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;
}

/* ═══ Sprites ══════════════════════════════════════════════════════════════
   La hoja de símbolos no ocupa sitio pero sigue en el documento: con display:
   none algunos navegadores dejarían de pintar los <use>. Los píxeles se dibujan
   con bordes nítidos para que no aparezcan costuras entre tramos. */
.lp-pixel__sprites {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.lp-pixel__sprite {
    display: block;
    overflow: visible;
}

    .lp-pixel__sprite use {
        width: 100%;
        height: 100%;
    }

.lp-pixel__sprites path {
    shape-rendering: crispEdges;
}

.lp-pixel__t-contorno { fill: var(--lp-t-contorno); }
.lp-pixel__t-blanco { fill: var(--lp-t-blanco); }
.lp-pixel__t-oro { fill: var(--lp-t-oro); }
.lp-pixel__t-oro-claro { fill: var(--lp-t-oro-claro); }
.lp-pixel__t-naranja { fill: var(--lp-t-naranja); }
.lp-pixel__t-naranja-oscuro { fill: var(--lp-t-naranja-oscuro); }
.lp-pixel__t-rojo { fill: var(--lp-t-rojo); }
.lp-pixel__t-rojo-oscuro { fill: var(--lp-t-rojo-oscuro); }
.lp-pixel__t-verde { fill: var(--lp-t-verde); }
.lp-pixel__t-verde-claro { fill: var(--lp-t-verde-claro); }
.lp-pixel__t-turquesa { fill: var(--lp-t-turquesa); }
.lp-pixel__t-turquesa-oscuro { fill: var(--lp-t-turquesa-oscuro); }
.lp-pixel__t-azul { fill: var(--lp-t-azul); }
.lp-pixel__t-azul-oscuro { fill: var(--lp-t-azul-oscuro); }
.lp-pixel__t-celeste { fill: var(--lp-t-celeste); }
.lp-pixel__t-morado { fill: var(--lp-t-morado); }
.lp-pixel__t-piel { fill: var(--lp-t-piel); }
.lp-pixel__t-piel-sombra { fill: var(--lp-t-piel-sombra); }
.lp-pixel__t-pelo { fill: var(--lp-t-pelo); }
.lp-pixel__t-gris-claro { fill: var(--lp-t-gris-claro); }
.lp-pixel__t-gris { fill: var(--lp-t-gris); }
.lp-pixel__t-madera { fill: var(--lp-t-madera); }
.lp-pixel__t-madera-clara { fill: var(--lp-t-madera-clara); }
.lp-pixel__t-nube { fill: var(--lp-t-nube); }
.lp-pixel__t-nube-sombra { fill: var(--lp-t-nube-sombra); }

/* ═══ Aparición al desplazar ═══════════════════════════════════════════════
   La clase --animada la pone el guion: sin él, o con menos movimiento, todo se
   ve desde el principio. Aparece a saltos, en cuatro pasos, como un objeto que
   se materializa en un juego de 8 bits. */
@media (prefers-reduced-motion: no-preference) {
    .lp-pixel--animada [data-revelar] {
        opacity: 0;
        transform: scale(.94) translateY(1rem);
        transition: opacity .45s steps(4, end), transform .45s steps(4, end);
    }

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

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

.lp-pixel__institucional-contenido {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1rem;
    padding: .85rem 0 1rem;
}

.lp-pixel__emblema {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    flex: 0 0 auto;
    border: 2px solid var(--lp-uni-oro);
    border-radius: 50%;
    color: var(--lp-uni-oro);
}

    .lp-pixel__emblema svg {
        width: 1.5rem;
        height: 1.5rem;
        fill: currentColor;
    }

.lp-pixel__uni {
    display: grid;
    flex: 1 1 14rem;
    min-width: 0;
    line-height: 1.25;
}

.lp-pixel__uni-nombre {
    font-weight: 700;
    font-size: 1.05rem;
}

.lp-pixel__uni-lema {
    color: var(--lp-uni-plata);
    font-size: .74rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}

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

    /* Sin guion el sello no recibe su texto: se esconde para no dejar un marco vacío. */
    .lp-pixel__uni-sello:empty {
        display: none;
    }

/* ═══ Superficies ══════════════════════════════════════════════════════════
   Cada sección es una de cuatro superficies. El overflow-x: clip recorta lo
   dibujado que sobresale sin crear un contenedor con desplazamiento. */
.lp-pixel__cielo,
.lp-pixel__pasto,
.lp-pixel__arena,
.lp-pixel__pantalla {
    position: relative;
    padding-block: clamp(3.5rem, 8vw, 6rem);
    overflow-x: clip;
}

.lp-pixel__cielo {
    --lp-suave: var(--lp-cielo-suave);
    --lp-sombra-titular: var(--lp-cielo-sombra);
    --lp-foco: var(--lp-foco-mundo);
    --lp-panel: var(--lp-cielo-panel);
    background: linear-gradient(180deg, var(--lp-cielo-alto), var(--lp-cielo-bajo));
    color: var(--lp-cielo-tinta);
}

.lp-pixel__pasto {
    --lp-suave: var(--lp-pasto-suave);
    --lp-sombra-titular: var(--lp-pasto-sombra);
    --lp-foco: var(--lp-foco-mundo);
    background:
        radial-gradient(circle at 30% 30%, var(--lp-pasto-mata) 0 2px, transparent 2.5px) 0 0 / 2.5rem 2.5rem,
        radial-gradient(circle at 70% 70%, var(--lp-pasto-mata) 0 2px, transparent 2.5px) 0 0 / 3.25rem 3.25rem,
        var(--lp-pasto);
    color: var(--lp-pasto-tinta);
}

.lp-pixel__arena {
    --lp-suave: var(--lp-arena-suave);
    --lp-sombra-titular: var(--lp-arena-sombra);
    --lp-foco: var(--lp-foco-mundo);
    background:
        radial-gradient(circle, var(--lp-arena-grano) 0 1px, transparent 1.5px) 0 0 / .8rem .8rem,
        radial-gradient(circle, var(--lp-arena-grano) 0 1px, transparent 1.5px) .4rem .4rem / .8rem .8rem,
        var(--lp-arena);
    color: var(--lp-arena-tinta);
}

/* La pantalla lleva las líneas de barrido de un televisor viejo. */
.lp-pixel__pantalla {
    --lp-suave: var(--lp-pantalla-suave);
    --lp-sombra-titular: var(--lp-pantalla-sombra);
    --lp-foco: var(--lp-moneda);
    background:
        linear-gradient(var(--lp-pantalla-linea) 1px, transparent 1px) 0 0 / 100% 4px,
        radial-gradient(ellipse 90% 70% at 50% 0%, var(--lp-pantalla-alta), var(--lp-pantalla) 72%);
    color: var(--lp-pantalla-tinta);
}

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

.lp-pixel__ancho--estrecho {
    width: min(100% - 2.5rem, 52rem);
}

.lp-pixel__cabecera {
    max-width: 48rem;
    margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
    container-type: inline-size;
}

/* El antetítulo es un letrero del juego: fondo oscuro y letras de moneda sobre
   cualquier superficie, de día o de noche. */
.lp-pixel__antetitulo {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: 1rem;
    padding: .35rem .75rem;
    border: 2px solid var(--lp-contorno);
    background: var(--lp-marcador);
    color: var(--lp-moneda);
    font-family: var(--lp-consola);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.4;
    text-transform: uppercase;
}

    .lp-pixel__antetitulo::before {
        content: "";
        width: .5rem;
        height: .5rem;
        flex: 0 0 auto;
        background: var(--lp-moneda);
        box-shadow: inset -2px -2px 0 var(--lp-moneda-sombra);
    }

/* El tope en cqi, medido con el ancho de la cabecera, garantiza que la palabra
   más larga entre entera aunque el teléfono use una letra de reserva ancha. La
   sombra dura desplazada es la del rótulo de un juego. */
.lp-pixel__h2 {
    margin-bottom: .9rem;
    font-family: var(--lp-titular);
    font-size: min(max(1.9rem, 4.1vw), 3.1rem, 9.5cqi);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -.01em;
    text-shadow: .07em .07em 0 var(--lp-sombra-titular);
    text-wrap: balance;
}

.lp-pixel__h3 {
    margin-bottom: .45rem;
    font-family: var(--lp-titular);
    font-size: clamp(1.15rem, 2.1vw, 1.35rem);
    font-weight: 900;
    line-height: 1.2;
}

.lp-pixel__entrada {
    max-width: 44rem;
    color: var(--lp-suave);
    font-size: clamp(1.02rem, 1.6vw, 1.16rem);
}

.lp-pixel__parrafo {
    color: var(--lp-suave);
}

.lp-pixel__lema {
    max-width: 36rem;
    margin-bottom: 1.75rem;
    color: var(--lp-suave);
    font-size: clamp(1.05rem, 1.7vw, 1.2rem);
}

/* ── Botones ──────────────────────────────────────────────────────────────
   Botón de consola: esquinas rectas, borde oscuro, brillo arriba a la izquierda
   y sombra abajo a la derecha. Al pulsarlo se hunde lo que mide su sombra. */
.lp-pixel__boton {
    --lp-boton-brillo: var(--lp-moneda-alta);
    --lp-boton-sombra: var(--lp-moneda-sombra);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    min-height: 3rem;
    padding: .75rem 1.3rem;
    border: 3px solid var(--lp-contorno);
    border-radius: 0;
    box-shadow: inset -.25rem -.25rem 0 var(--lp-boton-sombra), inset .25rem .25rem 0 var(--lp-boton-brillo), 0 .3rem 0 var(--lp-contorno);
    font-family: var(--lp-consola);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .03em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform .12s steps(2, end), box-shadow .12s steps(2, end);
}

    .lp-pixel__boton:hover {
        transform: translateY(-2px);
    }

    .lp-pixel__boton:active {
        transform: translateY(.3rem);
        box-shadow: inset -.25rem -.25rem 0 var(--lp-boton-sombra), inset .25rem .25rem 0 var(--lp-boton-brillo);
    }

.lp-pixel__boton--start,
.lp-pixel__boton--start:hover,
.lp-pixel__boton--start:focus {
    background: var(--lp-moneda);
    color: var(--lp-moneda-tinta);
}

.lp-pixel__boton--secundario,
.lp-pixel__boton--secundario:hover,
.lp-pixel__boton--secundario:focus {
    background: var(--lp-ventana);
    color: var(--lp-ventana-tinta);
}

.lp-pixel__boton--secundario {
    --lp-boton-brillo: var(--lp-ventana-alta);
    --lp-boton-sombra: var(--lp-ventana-contorno);
}

/* La flecha de «pulsa start»: un triángulo de píxeles recortado. */
.lp-pixel__boton-flecha {
    width: .6rem;
    height: .8rem;
    flex: 0 0 auto;
    background: currentColor;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.lp-pixel__accion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .9rem 1.25rem;
    margin-top: clamp(2rem, 4vw, 2.75rem);
}

.lp-pixel__accion-nota {
    max-width: 30rem;
    color: var(--lp-suave);
    font-size: .92rem;
    line-height: 1.45;
}

/* En teléfono los botones van a lo ancho: más fáciles de tocar y alineados. */
@media (max-width: 575.98px) {
    .lp-pixel__accion .lp-pixel__boton,
    .lp-pixel__acciones .lp-pixel__boton {
        flex: 1 1 100%;
    }
}

/* ── La ventana del juego ─────────────────────────────────────────────────
   Doble borde: crema por dentro y un contorno oscuro por fuera, más una sombra
   dura desplazada. El contorno va en box-shadow y no ocupa sitio: quien pone
   ventanas en fila deja al menos 1rem entre ellas. */
.lp-pixel__ventana {
    --lp-foco: var(--lp-moneda);
    --lp-suave: var(--lp-ventana-suave);
    --lp-sombra-titular: var(--lp-pantalla-sombra);
    --lp-relleno: clamp(1rem, 2.5vw, 1.5rem);
    position: relative;
    padding: var(--lp-relleno);
    border: 4px solid var(--lp-ventana-borde);
    background: linear-gradient(180deg, var(--lp-ventana-alta), var(--lp-ventana) 55%);
    box-shadow: 0 0 0 4px var(--lp-ventana-contorno), .55rem .55rem 0 4px var(--lp-ventana-sombra);
    color: var(--lp-ventana-tinta);
}

.lp-pixel__ventana-barra {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .25rem 1rem;
    margin: calc(-1 * var(--lp-relleno)) calc(-1 * var(--lp-relleno)) var(--lp-relleno);
    padding: .4rem .75rem;
    background: var(--lp-ventana-borde);
    color: var(--lp-ventana);
    font-family: var(--lp-consola);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.lp-pixel__ventana-barra-estado {
    color: var(--lp-ventana-alta);
}

.lp-pixel__ventana-titulo {
    margin-bottom: 1rem;
    color: var(--lp-moneda);
    font-family: var(--lp-consola);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.lp-pixel__foto {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border: 3px solid var(--lp-ventana-contorno);
}

/* Los botones de radio quedan en el árbol de accesibilidad y reciben el foco con
   las flechas; lo que se ve es su etiqueta entera. */
.lp-pixel__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

/* ═══ Portada: la pantalla de título ═══════════════════════════════════════ */
.lp-pixel__portada {
    padding-block: clamp(1rem, 3vw, 1.5rem) clamp(8rem, 13vw, 9.5rem);
    isolation: isolate;
}

.lp-pixel__astros {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.lp-pixel__sol {
    display: var(--lp-sol-visible);
    position: absolute;
    top: 5.5rem;
    right: 5%;
    width: clamp(3.5rem, 7vw, 6rem);
    height: clamp(3.5rem, 7vw, 6rem);
}

.lp-pixel__luna {
    display: var(--lp-luna-visible);
    position: absolute;
    top: 5.5rem;
    right: 6%;
    width: clamp(3rem, 6vw, 5rem);
    height: clamp(3rem, 6vw, 5rem);
}

/* Las estrellas son cuadritos de un píxel repartidos por el cielo; de día su
   opacidad es cero. */
.lp-pixel__estrellas-cielo {
    position: absolute;
    inset: 0 0 35% 0;
    opacity: var(--lp-estrellas-visibles);
    background:
        linear-gradient(var(--lp-estrella), var(--lp-estrella)) 8% 22% / 3px 3px no-repeat,
        linear-gradient(var(--lp-estrella), var(--lp-estrella)) 18% 64% / 3px 3px no-repeat,
        linear-gradient(var(--lp-estrella), var(--lp-estrella)) 27% 12% / 4px 4px no-repeat,
        linear-gradient(var(--lp-estrella), var(--lp-estrella)) 39% 40% / 3px 3px no-repeat,
        linear-gradient(var(--lp-estrella), var(--lp-estrella)) 48% 8% / 3px 3px no-repeat,
        linear-gradient(var(--lp-estrella), var(--lp-estrella)) 57% 58% / 4px 4px no-repeat,
        linear-gradient(var(--lp-estrella), var(--lp-estrella)) 66% 26% / 3px 3px no-repeat,
        linear-gradient(var(--lp-estrella), var(--lp-estrella)) 74% 70% / 3px 3px no-repeat,
        linear-gradient(var(--lp-estrella), var(--lp-estrella)) 83% 44% / 4px 4px no-repeat,
        linear-gradient(var(--lp-estrella), var(--lp-estrella)) 92% 16% / 3px 3px no-repeat,
        linear-gradient(var(--lp-estrella), var(--lp-estrella)) 97% 60% / 3px 3px no-repeat,
        linear-gradient(var(--lp-estrella), var(--lp-estrella)) 3% 82% / 3px 3px no-repeat;
}

.lp-pixel__nube {
    position: absolute;
    width: clamp(5rem, 11vw, 9rem);
    height: clamp(2.2rem, 4.8vw, 3.9rem);
}

.lp-pixel__nube--1 {
    top: 20%;
    left: 3%;
}

.lp-pixel__nube--2 {
    top: 9%;
    left: 44%;
}

.lp-pixel__nube--3 {
    top: 38%;
    right: 12%;
}

/* Las nubes se desplazan un tramo al cargar y se quedan quietas. */
@media (prefers-reduced-motion: no-preference) {
    .lp-pixel--animada .lp-pixel__nube {
        animation: lp-pixel-deriva 9s steps(18, end) .2s both;
    }

    .lp-pixel--animada .lp-pixel__nube--2 {
        animation-duration: 12s;
    }
}

@keyframes lp-pixel-deriva {
    from {
        translate: -2.5rem 0;
    }

    to {
        translate: 0 0;
    }
}

/* El marcador de arriba: vidas, nivel y las fechas del ciclo. */
.lp-pixel__marcador {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .35rem 1.25rem;
    margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
    padding: .55rem .9rem;
    border: 3px solid var(--lp-contorno);
    background: var(--lp-marcador);
    color: var(--lp-marcador-tinta);
    font-family: var(--lp-consola);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.lp-pixel__marcador-dato {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

    .lp-pixel__marcador-dato b {
        color: var(--lp-moneda);
    }

.lp-pixel__vida {
    width: .95rem;
    height: .8rem;
}

.lp-pixel__portada-rejilla {
    display: grid;
    align-items: center;
    gap: clamp(2.25rem, 5vw, 3.5rem);
}

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

.lp-pixel__portada-texto {
    container-type: inline-size;
}

.lp-pixel__rotulo {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .55rem;
    margin-bottom: 1.1rem;
    padding: .3rem .7rem;
    border: 2px solid var(--lp-contorno);
    background: var(--lp-cielo-panel);
    color: var(--lp-cielo-tinta);
    font-family: var(--lp-consola);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* Tope de 14cqi: «nivel» y «rumbo» son las palabras más largas del titular y
   entran enteras incluso con la letra de reserva más ancha. */
.lp-pixel__h1 {
    margin-bottom: 1.15rem;
    color: var(--lp-cielo-tinta);
    font-family: var(--lp-titular);
    font-size: min(max(2.5rem, 5.8vw), 4.6rem, 14cqi);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -.02em;
    text-shadow: .06em .06em 0 var(--lp-cielo-sombra);
    text-wrap: balance;
}

/* «UNAC» va en una placa de moneda, como el logotipo de la pantalla de título. */
.lp-pixel__h1-marca {
    display: inline-block;
    padding: 0 .14em;
    border: .05em solid var(--lp-contorno);
    background: var(--lp-moneda);
    box-shadow: .08em .08em 0 var(--lp-contorno);
    color: var(--lp-moneda-tinta);
    text-shadow: none;
}

.lp-pixel__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.lp-pixel__fichas {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

    .lp-pixel__fichas li {
        padding: .25rem .6rem;
        border: 2px solid var(--lp-contorno);
        background: var(--lp-cielo-panel);
        color: var(--lp-cielo-tinta);
        font-family: var(--lp-consola);
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

.lp-pixel__jugador-uno {
    justify-self: center;
    width: 100%;
    max-width: 34rem;
}

.lp-pixel__ventana-pie {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-top: .8rem;
    color: var(--lp-ventana-suave);
    font-family: var(--lp-consola);
    font-size: .74rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.lp-pixel__moneda-mini {
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 auto;
}

/* El suelo: colinas, una franja de pasto y la tierra en damero de píxeles. */
.lp-pixel__suelo {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    height: 7rem;
}

    .lp-pixel__suelo::before,
    .lp-pixel__suelo::after {
        content: "";
        position: absolute;
        right: 0;
        left: 0;
    }

    .lp-pixel__suelo::before {
        bottom: 2rem;
        height: .75rem;
        background: repeating-linear-gradient(90deg, var(--lp-suelo-pasto) 0 .5rem, var(--lp-suelo-pasto-alto) .5rem 1rem);
    }

    .lp-pixel__suelo::after {
        bottom: 0;
        height: 2rem;
        background: repeating-conic-gradient(var(--lp-suelo-tierra) 0 25%, var(--lp-suelo-tierra-oscura) 0 50%) 0 0 / 1rem 1rem;
    }

.lp-pixel__colinas {
    position: absolute;
    right: 0;
    bottom: 2.7rem;
    left: 0;
    height: 4rem;
    background:
        radial-gradient(ellipse 16% 90% at 14% 100%, var(--lp-colina) 99%, transparent 100%),
        radial-gradient(ellipse 22% 100% at 62% 100%, var(--lp-colina) 99%, transparent 100%),
        radial-gradient(ellipse 20% 120% at 38% 100%, var(--lp-colina-lejos) 99%, transparent 100%),
        radial-gradient(ellipse 18% 110% at 88% 100%, var(--lp-colina-lejos) 99%, transparent 100%);
}

.lp-pixel__caminante {
    position: absolute;
    bottom: 2.7rem;
    left: 7%;
    width: 2.4rem;
    height: 3.6rem;
}

.lp-pixel__caminante-sprite {
    width: 100%;
    height: 100%;
}

/* Entra caminando desde la izquierda a saltitos y se queda quieto. */
@media (prefers-reduced-motion: no-preference) {
    .lp-pixel--animada .lp-pixel__caminante {
        animation: lp-pixel-entrar 2.4s steps(12, end) .4s both;
    }

    .lp-pixel--animada .lp-pixel__caminante-sprite {
        animation: lp-pixel-paso .2s steps(1, end) .4s 12;
    }
}

@keyframes lp-pixel-entrar {
    from {
        translate: -12rem 0;
    }

    to {
        translate: 0 0;
    }
}

@keyframes lp-pixel-paso {
    50% {
        translate: 0 -4px;
    }
}

/* ═══ El mapa del verano ═══════════════════════════════════════════════════
   Los tres niveles se reparten a lo ancho del camino; el jugador se para sobre
   el que está marcado. La posición la decide el CSS con :has(), así que el mapa
   funciona sin guion. */
.lp-pixel__mapa {
    --lp-fila: 60%;
    --lp-x-jugador: 24%;
    position: relative;
    height: clamp(13rem, 27vw, 15.5rem);
    margin-bottom: 1.75rem;
    border: 4px solid var(--lp-contorno);
    background:
        radial-gradient(circle at 30% 30%, var(--lp-pasto-mata) 0 2px, transparent 2.5px) 0 0 / 2rem 2rem,
        var(--lp-mapa);
    box-shadow: .5rem .5rem 0 var(--lp-ventana-sombra);
}

.lp-pixel__mapa:has(#lp-pixel-nivel-2:checked) {
    --lp-x-jugador: 50%;
}

.lp-pixel__mapa:has(#lp-pixel-nivel-3:checked) {
    --lp-x-jugador: 76%;
}

.lp-pixel__mapa-camino {
    position: absolute;
    top: var(--lp-fila);
    right: 5%;
    left: 5%;
    height: .75rem;
    background: repeating-linear-gradient(90deg, var(--lp-camino) 0 1rem, transparent 1rem 1.5rem);
    translate: 0 -50%;
}

.lp-pixel__mapa-salida,
.lp-pixel__mapa-meta {
    position: absolute;
    top: .75rem;
    display: flex;
    align-items: flex-end;
    gap: .3rem;
    padding: .15rem .45rem;
    border: 2px solid var(--lp-contorno);
    background: var(--lp-marcador);
    color: var(--lp-moneda);
    font-family: var(--lp-consola);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.lp-pixel__mapa-salida {
    left: .75rem;
}

.lp-pixel__mapa-meta {
    right: .75rem;
}

.lp-pixel__bandera {
    width: 1rem;
    height: 1.5rem;
}

.lp-pixel__niveles {
    position: absolute;
    inset: 0;
}

.lp-pixel__nivel {
    --lp-x: 24%;
    position: absolute;
    top: var(--lp-fila);
    left: var(--lp-x);
    display: grid;
    justify-items: center;
    gap: .3rem;
    width: max-content;
    max-width: 30%;
    text-align: center;
    cursor: pointer;
    translate: -50% -1.5rem;
}

.lp-pixel__nivel--2 {
    --lp-x: 50%;
}

.lp-pixel__nivel--3 {
    --lp-x: 76%;
}

.lp-pixel__nivel-bloque {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border: 3px solid var(--lp-contorno);
    background: var(--lp-moneda);
    box-shadow: inset -4px -4px 0 var(--lp-moneda-sombra), inset 4px 4px 0 var(--lp-moneda-alta);
    color: var(--lp-moneda-tinta);
    font-family: var(--lp-consola);
    font-size: 1.3rem;
    font-weight: 700;
    transition: transform .2s steps(2, end);
}

.lp-pixel__nivel:has(:checked) .lp-pixel__nivel-bloque {
    background: var(--lp-ventana-borde);
    box-shadow: inset -4px -4px 0 var(--lp-moneda), inset 4px 4px 0 var(--lp-t-blanco);
}

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

.lp-pixel__nivel-nombre {
    padding: .15rem .45rem;
    border: 2px solid var(--lp-contorno);
    background: var(--lp-marcador);
    color: var(--lp-marcador-tinta);
    font-family: var(--lp-consola);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.3;
    text-transform: uppercase;
}

.lp-pixel__nivel:has(:checked) .lp-pixel__nivel-nombre {
    color: var(--lp-moneda);
}

.lp-pixel__nivel-semanas {
    color: var(--lp-pasto-tinta);
    font-family: var(--lp-consola);
    font-size: .7rem;
    font-weight: 700;
}

    .lp-pixel__nivel-semanas:empty {
        display: none;
    }

/* El jugador se para encima del bloque del nivel marcado y salta de uno a otro
   en seis pasos. */
.lp-pixel__mapa-jugador {
    position: absolute;
    top: calc(var(--lp-fila) - 1.5rem - 3.9rem);
    left: var(--lp-x-jugador);
    width: 2.4rem;
    height: 3.6rem;
    translate: -50% 0;
    pointer-events: none;
    transition: left .6s steps(6, end);
}

    .lp-pixel__mapa-jugador .lp-pixel__sprite {
        width: 100%;
        height: 100%;
    }

/* En teléfono los tres nombres no caben a lo ancho del camino: salen de la
   vista pero no del árbol de accesibilidad, porque son el nombre de cada botón de
   radio. La tarjeta de abajo dice el nombre del nivel marcado. */
@media (max-width: 575.98px) {
    .lp-pixel__nivel-nombre {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .lp-pixel__nivel-bloque {
        width: 2.6rem;
        height: 2.6rem;
        font-size: 1.1rem;
    }

    .lp-pixel__mapa-jugador {
        top: calc(var(--lp-fila) - 1.5rem - 3.7rem);
    }
}

/* La tarjeta del nivel marcado, debajo del mapa. */
.lp-pixel__etapa-nivel {
    margin-bottom: .35rem;
    color: var(--lp-moneda);
    font-family: var(--lp-consola);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.lp-pixel__mapa-seccion:has(#lp-pixel-nivel-1:checked) .lp-pixel__etapa:not(.lp-pixel__etapa--1),
.lp-pixel__mapa-seccion:has(#lp-pixel-nivel-2:checked) .lp-pixel__etapa:not(.lp-pixel__etapa--2),
.lp-pixel__mapa-seccion:has(#lp-pixel-nivel-3:checked) .lp-pixel__etapa:not(.lp-pixel__etapa--3) {
    display: none;
}

@media (prefers-reduced-motion: no-preference) {
    .lp-pixel__etapa {
        animation: lp-pixel-aparece .3s steps(3, end) both;
    }
}

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

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

.lp-pixel__etapa-tiempo {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .9rem;
}

    .lp-pixel__etapa-tiempo span {
        padding: .2rem .55rem;
        border: 2px solid var(--lp-casilla-borde);
        background: var(--lp-casilla);
        color: var(--lp-ventana-tinta);
        font-family: var(--lp-consola);
        font-size: .76rem;
        line-height: 1.45;
    }

        /* Una etapa vacía (ciclo demasiado corto) deja sus huecos sin texto. */
        .lp-pixel__etapa-tiempo span:empty {
            display: none;
        }

/* ═══ Elige tu personaje ═══════════════════════════════════════════════════ */
.lp-pixel__seleccion {
    display: grid;
    align-items: start;
    gap: 2rem;
}

@media (min-width: 992px) {
    .lp-pixel__seleccion {
        grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
        align-items: center;
    }
}

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

.lp-pixel__personaje {
    position: relative;
    display: grid;
    align-content: start;
    justify-items: center;
    gap: .4rem;
    padding: 1rem .55rem 1.1rem;
    border: 3px solid var(--lp-casilla-borde);
    background: var(--lp-ventana);
    color: var(--lp-ventana-tinta);
    text-align: center;
    cursor: pointer;
    transition: border-color .15s steps(2, end);
}

    .lp-pixel__personaje:hover {
        border-color: var(--lp-ventana-borde);
    }

    .lp-pixel__personaje:has(:checked) {
        border-color: var(--lp-moneda);
        background: var(--lp-casilla-activa);
        box-shadow: 0 0 0 3px var(--lp-contorno), .4rem .4rem 0 3px var(--lp-ventana-sombra);
    }

        /* El cursor del menú: un triángulo que señala al personaje elegido. */
        .lp-pixel__personaje:has(:checked)::before {
            content: "";
            position: absolute;
            top: -1.1rem;
            left: 50%;
            width: .9rem;
            height: .7rem;
            background: var(--lp-moneda);
            clip-path: polygon(0 0, 100% 0, 50% 100%);
            translate: -50% 0;
        }

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

.lp-pixel__retrato {
    width: 4rem;
    height: 4rem;
}

.lp-pixel__personaje-bloque {
    color: var(--lp-moneda);
    font-family: var(--lp-consola);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.lp-pixel__personaje-nombre {
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.25;
}

.lp-pixel__personaje-carreras {
    color: var(--lp-ventana-suave);
    font-family: var(--lp-consola);
    font-size: .7rem;
}

/* En pantallas estrechas los personajes van en filas: retrato a la izquierda. */
@media (max-width: 479.98px) {
    .lp-pixel__personajes {
        grid-template-columns: minmax(0, 1fr);
        gap: .9rem;
    }

    .lp-pixel__personaje {
        grid-template-columns: 3.2rem minmax(0, 1fr);
        grid-template-areas:
            "retrato bloque"
            "retrato nombre"
            "retrato carreras";
        justify-items: start;
        column-gap: .9rem;
        row-gap: .1rem;
        padding: .75rem .9rem;
        text-align: left;
    }

        .lp-pixel__personaje:has(:checked)::before {
            top: 50%;
            left: -1rem;
            width: .7rem;
            height: .9rem;
            clip-path: polygon(0 0, 100% 50%, 0 100%);
            translate: 0 -50%;
        }

    .lp-pixel__retrato {
        grid-area: retrato;
        width: 3.2rem;
        height: 3.2rem;
        align-self: center;
    }

    .lp-pixel__personaje-bloque {
        grid-area: bloque;
    }

    .lp-pixel__personaje-nombre {
        grid-area: nombre;
    }

    .lp-pixel__personaje-carreras {
        grid-area: carreras;
    }
}

/* ── Las estadísticas: estrellas de 5 puntos ─────────────────────────────
   Dos capas con la misma máscara de estrella: debajo, las ocho apagadas; encima,
   tantas encendidas como --lp-n. El número sale del bloque marcado. */
.lp-pixel__stats {
    display: grid;
    gap: 1rem;
}

.lp-pixel__stat {
    --lp-n: 4;
    --lp-color: var(--lp-stat-mate);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "nombre valor"
        "estrellas estrellas"
        "unidad unidad";
    align-items: baseline;
    gap: .25rem .75rem;
}

.lp-pixel__stat--ciencias {
    --lp-color: var(--lp-stat-ciencias);
}

.lp-pixel__stat--letras {
    --lp-color: var(--lp-stat-letras);
}

.lp-pixel__stat--aptitud {
    --lp-color: var(--lp-stat-aptitud);
}

.lp-pixel:has(#lp-pixel-bloque-1:checked) .lp-pixel__stat--mate,
.lp-pixel:has(#lp-pixel-bloque-2:checked) .lp-pixel__stat--letras {
    --lp-n: 8;
}

.lp-pixel:has(#lp-pixel-bloque-3:checked) :is(.lp-pixel__stat--ciencias, .lp-pixel__stat--letras) {
    --lp-n: 6;
}

.lp-pixel__stat-nombre {
    grid-area: nombre;
    font-weight: 700;
}

    .lp-pixel__stat-nombre small {
        display: inline-block;
        margin-left: .3rem;
        color: var(--lp-ventana-suave);
        font-size: .78rem;
        font-weight: 400;
        white-space: nowrap;
    }

.lp-pixel__stat-valor {
    grid-area: valor;
    color: var(--lp-color);
    font-family: var(--lp-consola);
    font-size: 1.1rem;
    font-weight: 700;
}

.lp-pixel__stat-estrellas {
    position: relative;
    grid-area: estrellas;
    width: min(100%, 12.8rem);
    height: 1.5rem;
}

    .lp-pixel__stat-estrellas::before,
    .lp-pixel__stat-estrellas::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        -webkit-mask: var(--lp-mascara-estrella) 0 0 / 1.6rem 1.5rem repeat-x;
        mask: var(--lp-mascara-estrella) 0 0 / 1.6rem 1.5rem repeat-x;
    }

    .lp-pixel__stat-estrellas::before {
        right: 0;
        background: var(--lp-estrella-apagada);
    }

    .lp-pixel__stat-estrellas::after {
        width: calc(var(--lp-n) * 1.6rem);
        background: var(--lp-color);
        transition: width .5s steps(4, end);
    }

@media (prefers-reduced-motion: no-preference) {
    .lp-pixel--animada .lp-pixel__estadisticas:not(.lp-pixel--visible) .lp-pixel__stat-estrellas::after {
        width: 0;
    }
}

.lp-pixel__stat-unidad {
    grid-area: unidad;
    color: var(--lp-ventana-suave);
    font-family: var(--lp-consola);
    font-size: .72rem;
}

.lp-pixel__stat-nota {
    margin-top: 1.1rem;
    padding-top: .8rem;
    border-top: 2px dashed var(--lp-casilla-borde);
    color: var(--lp-ventana-suave);
    font-family: var(--lp-consola);
    font-size: .72rem;
}

/* Lo que cambia con el bloque: se enseña solo lo del bloque marcado. */
.lp-pixel:has(#lp-pixel-bloque-1:checked) [data-en-bloque]:not([data-en-bloque="1"]),
.lp-pixel:has(#lp-pixel-bloque-2:checked) [data-en-bloque]:not([data-en-bloque="2"]),
.lp-pixel:has(#lp-pixel-bloque-3:checked) [data-en-bloque]:not([data-en-bloque="3"]) {
    display: none;
}

.lp-pixel__reglas-rejilla {
    display: grid;
    gap: 1.25rem 2.5rem;
    margin-top: 2.25rem;
}

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

.lp-pixel__carreras-bloque {
    color: var(--lp-pantalla-suave);
}

    .lp-pixel__carreras-bloque strong {
        color: var(--lp-pantalla-tinta);
    }

.lp-pixel__reglas {
    display: grid;
    gap: .75rem;
}

    .lp-pixel__reglas li {
        display: grid;
        grid-template-columns: 2.6rem minmax(0, 1fr);
        align-items: center;
        gap: .8rem;
        color: var(--lp-pantalla-suave);
        line-height: 1.45;
    }

.lp-pixel__regla-marca {
    display: grid;
    place-items: center;
    height: 2.2rem;
    border: 2px solid var(--lp-casilla-borde);
    background: var(--lp-casilla);
    color: var(--lp-moneda);
    font-family: var(--lp-consola);
    font-weight: 700;
}

/* ═══ El inventario de facultades ══════════════════════════════════════════ */
.lp-pixel__inventario {
    display: grid;
    align-items: start;
    gap: 2rem;
}

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

/* Cuatro por tres en cualquier ancho: en teléfono cada casilla mide un cuarto
   de la ventana y el dibujo se escala con ella. */
.lp-pixel__casillas {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .5rem;
    padding: .75rem;
    border: 4px solid var(--lp-ventana-borde);
    background: var(--lp-ventana);
    box-shadow: 0 0 0 4px var(--lp-ventana-contorno), .55rem .55rem 0 4px var(--lp-ventana-sombra);
}

.lp-pixel__casilla {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: .3rem;
    aspect-ratio: 1;
    min-width: 0;
    padding: .35rem;
    border: 3px solid var(--lp-casilla-borde);
    background: var(--lp-casilla);
    cursor: pointer;
    transition: border-color .15s steps(2, end), background-color .15s steps(2, end);
}

    .lp-pixel__casilla:hover {
        border-color: var(--lp-ventana-borde);
    }

    .lp-pixel__casilla:has(:checked) {
        border-color: var(--lp-moneda);
        background: var(--lp-casilla-activa);
    }

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

.lp-pixel__casilla-icono {
    width: min(3rem, 62%);
    height: auto;
    aspect-ratio: 1;
}

.lp-pixel__casilla-codigo {
    max-width: 100%;
    overflow: hidden;
    color: var(--lp-ventana-suave);
    font-family: var(--lp-consola);
    font-size: clamp(.56rem, 1.9vw, .7rem);
    font-weight: 700;
    letter-spacing: .04em;
    text-overflow: clip;
    white-space: nowrap;
}

.lp-pixel__casilla:has(:checked) .lp-pixel__casilla-codigo {
    color: var(--lp-moneda);
}

/* Solo se ve la ficha de la casilla marcada. El alto mínimo evita que la página
   salte al cambiar de facultad en escritorio. */
.lp-pixel__objeto {
    display: none;
}

@media (min-width: 992px) {
    .lp-pixel__objeto {
        min-height: 17rem;
    }
}

.lp-pixel__inventario:has(#lp-pixel-facultad-1:checked) [data-objeto="1"],
.lp-pixel__inventario:has(#lp-pixel-facultad-2:checked) [data-objeto="2"],
.lp-pixel__inventario:has(#lp-pixel-facultad-3:checked) [data-objeto="3"],
.lp-pixel__inventario:has(#lp-pixel-facultad-4:checked) [data-objeto="4"],
.lp-pixel__inventario:has(#lp-pixel-facultad-5:checked) [data-objeto="5"],
.lp-pixel__inventario:has(#lp-pixel-facultad-6:checked) [data-objeto="6"],
.lp-pixel__inventario:has(#lp-pixel-facultad-7:checked) [data-objeto="7"],
.lp-pixel__inventario:has(#lp-pixel-facultad-8:checked) [data-objeto="8"],
.lp-pixel__inventario:has(#lp-pixel-facultad-9:checked) [data-objeto="9"],
.lp-pixel__inventario:has(#lp-pixel-facultad-10:checked) [data-objeto="10"],
.lp-pixel__inventario:has(#lp-pixel-facultad-11:checked) [data-objeto="11"],
.lp-pixel__inventario:has(#lp-pixel-facultad-12:checked) [data-objeto="12"] {
    display: block;
}

@media (prefers-reduced-motion: no-preference) {
    .lp-pixel__objeto {
        animation: lp-pixel-aparece .3s steps(3, end) both;
    }
}

.lp-pixel__objeto-tipo {
    margin-bottom: .45rem;
    color: var(--lp-moneda);
    font-family: var(--lp-consola);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.lp-pixel__objeto-nombre {
    margin-bottom: .6rem;
    font-family: var(--lp-titular);
    font-size: clamp(1.2rem, 2.2vw, 1.45rem);
    font-weight: 900;
    line-height: 1.2;
}

.lp-pixel__objeto-descripcion {
    margin-bottom: 1rem;
    color: var(--lp-ventana-suave);
}

.lp-pixel__objeto-contiene {
    margin-bottom: .4rem;
    color: var(--lp-ventana-suave);
    font-family: var(--lp-consola);
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.lp-pixel__objeto-carreras {
    display: grid;
    gap: .4rem;
}

    .lp-pixel__objeto-carreras li {
        display: flex;
        align-items: baseline;
        gap: .6rem;
        font-weight: 700;
    }

        .lp-pixel__objeto-carreras li::before {
            content: "";
            width: .55rem;
            height: .55rem;
            flex: 0 0 auto;
            background: var(--lp-moneda);
            box-shadow: inset -2px -2px 0 var(--lp-moneda-sombra);
        }

/* ═══ Tu equipo: la ficha de reclutamiento ═════════════════════════════════ */
.lp-pixel__ficha {
    display: grid;
    align-items: start;
    gap: 1.75rem;
}

@media (min-width: 768px) {
    .lp-pixel__ficha {
        grid-template-columns: 11rem minmax(0, 1fr);
    }
}

.lp-pixel__ficha-retrato {
    display: grid;
    justify-items: center;
    gap: .75rem;
    padding: 1.1rem .75rem;
    border: 3px solid var(--lp-casilla-borde);
    background: var(--lp-casilla);
}

.lp-pixel__silueta {
    width: 4rem;
    height: 6rem;
}

@media (min-width: 768px) {
    .lp-pixel__silueta {
        width: 6rem;
        height: 9rem;
    }
}

.lp-pixel__ficha-rol {
    color: var(--lp-moneda);
    font-family: var(--lp-consola);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-align: center;
    text-transform: uppercase;
}

.lp-pixel__atributos {
    display: grid;
    gap: 1rem 1.75rem;
}

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

.lp-pixel__atributo {
    --lp-orden: 0;
    --lp-color: var(--lp-moneda);
    transition: opacity .3s steps(3, end) calc(var(--lp-orden) * 90ms), transform .3s steps(3, end) calc(var(--lp-orden) * 90ms);
}

    .lp-pixel__atributo dt {
        display: flex;
        align-items: center;
        gap: .55rem;
        color: var(--lp-color);
        font-family: var(--lp-consola);
        font-size: .8rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

        .lp-pixel__atributo dt::before {
            content: "";
            width: .55rem;
            height: .55rem;
            flex: 0 0 auto;
            background: var(--lp-color);
        }

    .lp-pixel__atributo dd {
        margin-top: .2rem;
        color: var(--lp-ventana-suave);
    }

.lp-pixel__atributo--especial {
    --lp-color: var(--lp-especial);
}

.lp-pixel__atributo:nth-child(2) {
    --lp-orden: 1;
}

.lp-pixel__atributo:nth-child(3) {
    --lp-orden: 2;
}

.lp-pixel__atributo:nth-child(4) {
    --lp-orden: 3;
}

.lp-pixel__atributo:nth-child(5) {
    --lp-orden: 4;
}

.lp-pixel__atributo:nth-child(6) {
    --lp-orden: 5;
}

.lp-pixel__atributo:nth-child(7) {
    --lp-orden: 6;
}

.lp-pixel__atributo:nth-child(8) {
    --lp-orden: 7;
}

/* La ficha se «carga» atributo por atributo, una sola vez. */
@media (prefers-reduced-motion: no-preference) {
    .lp-pixel--animada .lp-pixel__ficha:not(.lp-pixel--visible) .lp-pixel__atributo {
        opacity: 0;
        transform: translateX(-.75rem);
    }
}

/* ═══ Misiones ═════════════════════════════════════════════════════════════ */
.lp-pixel__misiones {
    display: grid;
    gap: 1.75rem;
}

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

.lp-pixel__mision {
    --lp-xp: 55%;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

    .lp-pixel__mision:nth-child(2) {
        --lp-xp: 75%;
    }

    .lp-pixel__mision:nth-child(3) {
        --lp-xp: 92%;
    }

@media (prefers-reduced-motion: no-preference) {
    .lp-pixel__mision:nth-child(2) {
        transition-delay: .1s;
    }

    .lp-pixel__mision:nth-child(3) {
        transition-delay: .2s;
    }
}

.lp-pixel__mision-icono {
    width: 3rem;
    height: 3rem;
    margin-bottom: .45rem;
}

.lp-pixel__mision-tipo {
    color: var(--lp-moneda);
    font-family: var(--lp-consola);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* La barra de experiencia es decorativa: se llena a saltos al aparecer. */
.lp-pixel__xp {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: auto;
    padding-top: 1rem;
}

.lp-pixel__xp-barra {
    position: relative;
    flex: 1 1 auto;
    height: 1.1rem;
    border: 3px solid var(--lp-ventana-borde);
    background: var(--lp-casilla);
}

    .lp-pixel__xp-barra::after {
        content: "";
        position: absolute;
        top: 2px;
        bottom: 2px;
        left: 2px;
        width: calc(var(--lp-xp) - 4px);
        background: repeating-linear-gradient(90deg, var(--lp-ok) 0 .5rem, var(--lp-stat-ciencias) .5rem 1rem);
        transition: width 1s steps(10, end) .3s;
    }

@media (prefers-reduced-motion: no-preference) {
    .lp-pixel--animada .lp-pixel__mision:not(.lp-pixel--visible) .lp-pixel__xp-barra::after {
        width: 0;
    }
}

.lp-pixel__xp-texto {
    color: var(--lp-ok);
    font-family: var(--lp-consola);
    font-size: .8rem;
    font-weight: 700;
}

/* ═══ La tienda de monedas ═════════════════════════════════════════════════
   El toldo de la caseta: franjas de dos colores y un fleco de cuadritos. */
.lp-pixel__tienda-seccion {
    padding-top: calc(clamp(3.5rem, 8vw, 6rem) + 2.5rem);
}

.lp-pixel__toldo {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 2.75rem;
    background:
        linear-gradient(90deg, var(--lp-toldo-a) 50%, transparent 50%) 0 100% / 1rem .75rem repeat-x,
        repeating-linear-gradient(90deg, var(--lp-toldo-a) 0 2rem, var(--lp-toldo-b) 2rem 4rem) 0 0 / 100% 2rem no-repeat;
    border-top: 3px solid var(--lp-contorno);
}

.lp-pixel__tienda-rejilla {
    display: grid;
    align-items: center;
    gap: clamp(2rem, 5vw, 3.5rem);
}

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

.lp-pixel__tienda-texto {
    container-type: inline-size;
}

.lp-pixel__reglas-tienda {
    display: grid;
    gap: .85rem;
    margin-top: 1.5rem;
}

    .lp-pixel__reglas-tienda li {
        position: relative;
        padding-left: 2rem;
        color: var(--lp-arena-suave);
        line-height: 1.5;
    }

        .lp-pixel__reglas-tienda li::before {
            content: "";
            position: absolute;
            top: .3rem;
            left: 0;
            width: 1.1rem;
            height: 1.1rem;
            border: 2px solid var(--lp-contorno);
            background: var(--lp-moneda);
            box-shadow: inset -3px -3px 0 var(--lp-moneda-sombra), inset 3px 3px 0 var(--lp-moneda-alta);
        }

    .lp-pixel__reglas-tienda strong {
        color: var(--lp-arena-tinta);
    }

/* La caseta: la billetera a la izquierda, la clase a la derecha y la moneda
   que vuela entre las dos. */
.lp-pixel__caseta-escena {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1rem, 6vw, 2.5rem);
    margin-bottom: 1.25rem;
}

.lp-pixel__billetera,
.lp-pixel__clase-demo {
    display: grid;
    justify-items: center;
    gap: .45rem;
    min-height: 8rem;
    padding: .8rem .6rem;
    border: 3px solid var(--lp-casilla-borde);
    background: var(--lp-casilla);
    text-align: center;
}

.lp-pixel__clase-demo {
    border-style: dashed;
}

.lp-pixel__billetera-nombre,
.lp-pixel__clase-demo-nombre {
    font-weight: 700;
    line-height: 1.25;
}

.lp-pixel__clase-demo-detalle {
    color: var(--lp-ventana-suave);
    font-family: var(--lp-consola);
    font-size: .7rem;
    line-height: 1.3;
}

.lp-pixel__billetera-monedas,
.lp-pixel__clase-demo-cupo {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .25rem;
    min-height: 2rem;
}

.lp-pixel__moneda-pila,
.lp-pixel__moneda-cupo,
.lp-pixel__moneda-vuela {
    width: 1.9rem;
    height: 1.9rem;
}

.lp-pixel__moneda-pila {
    transition: opacity .2s steps(2, end);
}

/* Inscrito: dos monedas se van de la billetera y aparecen en la clase. */
.lp-pixel__caseta--inscrito .lp-pixel__moneda-pila:nth-child(-n + 2) {
    opacity: 0;
}

.lp-pixel__moneda-cupo {
    opacity: 0;
    transition: opacity .2s steps(2, end) .5s;
}

.lp-pixel__caseta--inscrito .lp-pixel__moneda-cupo {
    opacity: 1;
}

.lp-pixel__vuelo {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.lp-pixel__moneda-vuela {
    position: absolute;
    top: 50%;
    left: 25%;
    opacity: 0;
    translate: -50% -50%;
}

@media (prefers-reduced-motion: no-preference) {
    .lp-pixel__caseta--ida .lp-pixel__moneda-vuela {
        animation: lp-pixel-ida .7s steps(7, end) both;
    }

    .lp-pixel__caseta--vuelta .lp-pixel__moneda-vuela {
        animation: lp-pixel-vuelta .7s steps(7, end) both;
    }
}

@keyframes lp-pixel-ida {
    0% {
        top: 50%;
        left: 25%;
        opacity: 1;
    }

    50% {
        top: 8%;
        left: 50%;
    }

    100% {
        top: 50%;
        left: 75%;
        opacity: 0;
    }
}

@keyframes lp-pixel-vuelta {
    0% {
        top: 50%;
        left: 75%;
        opacity: 1;
    }

    50% {
        top: 8%;
        left: 50%;
    }

    100% {
        top: 50%;
        left: 25%;
        opacity: 0;
    }
}

.lp-pixel__boton--caseta {
    width: 100%;
}

    .lp-pixel__boton--caseta[aria-pressed="true"],
    .lp-pixel__boton--caseta[aria-pressed="true"]:hover {
        --lp-boton-brillo: var(--lp-t-blanco);
        --lp-boton-sombra: var(--lp-t-verde);
        background: var(--lp-ok);
        color: var(--lp-ok-tinta);
    }

        .lp-pixel__boton--caseta[aria-pressed="true"]::before {
            content: "";
            width: .9rem;
            height: .6rem;
            flex: 0 0 auto;
            border-bottom: 3px solid currentColor;
            border-left: 3px solid currentColor;
            rotate: -45deg;
            translate: 0 -.15rem;
        }

.lp-pixel__caseta-estado {
    min-height: 3em;
    margin-top: 1rem;
    color: var(--lp-ventana-suave);
    font-size: .95rem;
}

/* ═══ Logros de la UNAC ════════════════════════════════════════════════════ */
.lp-pixel__logros {
    display: grid;
    gap: 1.25rem;
    margin-bottom: 2.25rem;
}

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

.lp-pixel__logro {
    --lp-orden: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "trofeo aviso"
        "trofeo titulo";
    align-items: center;
    column-gap: 1rem;
    padding: .9rem 1.1rem;
    border: 3px solid var(--lp-ventana-borde);
    background: var(--lp-ventana);
    box-shadow: 0 0 0 3px var(--lp-ventana-contorno), .45rem .45rem 0 3px var(--lp-ventana-sombra);
    transition: opacity .35s steps(3, end) calc(var(--lp-orden) * 180ms), transform .35s steps(3, end) calc(var(--lp-orden) * 180ms);
}

    .lp-pixel__logro:nth-child(2) {
        --lp-orden: 1;
    }

    .lp-pixel__logro:nth-child(3) {
        --lp-orden: 2;
    }

    .lp-pixel__logro:nth-child(4) {
        --lp-orden: 3;
    }

@media (prefers-reduced-motion: no-preference) {
    .lp-pixel--animada .lp-pixel__logros:not(.lp-pixel--visible) .lp-pixel__logro {
        opacity: 0;
        transform: translateX(-1.5rem);
    }
}

.lp-pixel__logro-trofeo {
    grid-area: trofeo;
    width: 3rem;
    height: 3rem;
}

.lp-pixel__logro-aviso {
    grid-area: aviso;
    color: var(--lp-moneda);
    font-family: var(--lp-consola);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.lp-pixel__logro-titulo {
    grid-area: titulo;
    font-weight: 700;
    line-height: 1.35;
}

.lp-pixel__logro-anio {
    display: inline-block;
    margin-right: .45rem;
    padding: 0 .35rem;
    background: var(--lp-moneda);
    color: var(--lp-moneda-tinta);
    font-family: var(--lp-consola);
}

.lp-pixel__logros-texto {
    max-width: 48rem;
}

.lp-pixel__destacado {
    margin-top: 1.25rem;
    color: var(--lp-moneda);
    font-family: var(--lp-titular);
    font-size: clamp(1.2rem, 2.3vw, 1.5rem);
    font-weight: 900;
    line-height: 1.3;
}

/* ═══ Modo cooperativo ═════════════════════════════════════════════════════ */
.lp-pixel__cooperativo {
    display: grid;
    align-items: start;
    gap: 2.25rem;
}

@media (min-width: 992px) {
    .lp-pixel__cooperativo {
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    }
}

.lp-pixel__foto--familia {
    aspect-ratio: 4 / 3;
}

.lp-pixel__pareja {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 1.25rem;
    margin-top: 1rem;
}

.lp-pixel__pareja-sprite {
    width: 2.4rem;
    height: 3.6rem;
}

/* Los dos personajes saludan con dos saltitos al aparecer. */
@media (prefers-reduced-motion: no-preference) {
    .lp-pixel__cooperativo-foto.lp-pixel--visible .lp-pixel__pareja-sprite {
        animation: lp-pixel-paso .3s steps(1, end) .5s 4;
    }

    .lp-pixel__cooperativo-foto.lp-pixel--visible .lp-pixel__pareja-sprite + .lp-pixel__pareja-sprite {
        animation-delay: .65s;
    }
}

.lp-pixel__pasos {
    display: grid;
    gap: 1rem;
    counter-reset: lp-paso;
}

/* Cada paso lleva delante un botón de mando con su número. */
.lp-pixel__paso {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr);
    column-gap: 1rem;
    padding: .85rem 1rem;
    border: 3px solid var(--lp-contorno);
    background: var(--lp-panel);
    counter-increment: lp-paso;
}

    .lp-pixel__paso::before {
        content: counter(lp-paso);
        content: counter(lp-paso) / "";
        display: grid;
        grid-row: 1 / span 2;
        place-items: center;
        width: 2.6rem;
        height: 2.6rem;
        border: 3px solid var(--lp-contorno);
        background: var(--lp-moneda);
        box-shadow: inset -3px -3px 0 var(--lp-moneda-sombra), inset 3px 3px 0 var(--lp-moneda-alta);
        color: var(--lp-moneda-tinta);
        font-family: var(--lp-consola);
        font-size: 1.1rem;
        font-weight: 700;
    }

.lp-pixel__paso-titulo {
    margin-bottom: .15rem;
    font-family: var(--lp-titular);
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1.3;
}

.lp-pixel__paso-texto {
    color: var(--lp-suave);
}

/* ═══ Pregúntale al guía ═══════════════════════════════════════════════════ */
.lp-pixel__dialogos {
    display: grid;
    gap: 1.1rem;
}

.lp-pixel__dialogo {
    border: 3px solid var(--lp-ventana-borde);
    background: var(--lp-ventana);
    box-shadow: 0 0 0 3px var(--lp-ventana-contorno);
    color: var(--lp-ventana-tinta);
}

@media (prefers-reduced-motion: no-preference) {
    .lp-pixel__dialogo:nth-child(even) {
        transition-delay: .06s;
    }
}

.lp-pixel__dialogo-pregunta {
    --lp-foco: var(--lp-moneda);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: .8rem;
    padding: .95rem 1.1rem;
    font-weight: 700;
    line-height: 1.4;
    list-style: none;
    cursor: pointer;
}

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

    /* El cursor del diálogo: apunta a la derecha cerrado y hacia abajo abierto. */
    .lp-pixel__dialogo-pregunta::before {
        content: "";
        width: .6rem;
        height: .8rem;
        margin-top: .3rem;
        background: var(--lp-moneda);
        clip-path: polygon(0 0, 100% 50%, 0 100%);
        transition: rotate .2s steps(2, end);
    }

    .lp-pixel__dialogo-pregunta:focus-visible {
        outline-offset: -5px;
    }

    .lp-pixel__dialogo-pregunta:hover {
        background: var(--lp-ventana-alta);
    }

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

.lp-pixel__dialogo-respuesta {
    padding: 0 1.1rem 1rem 2.5rem;
    color: var(--lp-ventana-suave);
}

    /* La flecha de «sigue» de los diálogos de los juegos. */
    .lp-pixel__dialogo-respuesta::after {
        content: "";
        display: block;
        width: .7rem;
        height: .5rem;
        margin: .4rem 0 0 auto;
        background: var(--lp-moneda);
        clip-path: polygon(0 0, 100% 0, 50% 100%);
    }

@media (prefers-reduced-motion: no-preference) {
    .lp-pixel__dialogo[open] .lp-pixel__dialogo-respuesta {
        animation: lp-pixel-aparece .3s steps(3, end) both;
    }

    .lp-pixel__dialogo[open] .lp-pixel__dialogo-respuesta::after {
        animation: lp-pixel-parpadeo .5s steps(2, jump-none) .3s 3 both;
    }
}

/* ═══ Pulsa START ══════════════════════════════════════════════════════════ */
.lp-pixel__cierre {
    padding-block: clamp(4.5rem, 10vw, 7rem) clamp(9rem, 14vw, 10rem);
    isolation: isolate;
    text-align: center;
}

.lp-pixel__estrellas-cielo--siempre {
    z-index: -1;
    opacity: 1;
}

/* Abajo, el suelo del juego con la bandera de meta y el jugador que ya llegó. */
.lp-pixel__suelo--cierre {
    height: 3rem;
}

.lp-pixel__meta-final {
    position: absolute;
    right: 10%;
    bottom: 2.75rem;
    display: flex;
    align-items: flex-end;
    gap: .75rem;
}

.lp-pixel__meta-final-bandera {
    width: 2.8rem;
    height: 4.2rem;
}

.lp-pixel__meta-final-jugador {
    width: 2.4rem;
    height: 3.6rem;
}

.lp-pixel__cierre-contenido {
    display: grid;
    justify-items: center;
    max-width: 46rem;
    container-type: inline-size;
}

    .lp-pixel__cierre-contenido .lp-pixel__lema {
        margin-inline: auto;
        margin-bottom: 0;
    }

.lp-pixel__parpadeo {
    margin-block: 2rem 1.25rem;
    color: var(--lp-moneda);
    font-family: var(--lp-consola);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
}

/* «Pulsa START» parpadea tres veces cuando el cierre aparece y se queda fijo. */
@media (prefers-reduced-motion: no-preference) {
    .lp-pixel__cierre-contenido.lp-pixel--visible .lp-pixel__parpadeo {
        animation: lp-pixel-parpadeo .5s steps(2, jump-none) .3s 6 both;
    }
}

@keyframes lp-pixel-parpadeo {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.lp-pixel__boton--grande {
    min-height: 4rem;
    padding: 1.1rem 2.2rem;
    font-size: 1.25rem;
}

.lp-pixel__independencia {
    max-width: 32rem;
    margin-top: 1.75rem;
    color: var(--lp-pantalla-suave);
    font-size: .85rem;
}

/* ═══ El botón flotante ════════════════════════════════════════════════════
   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-pixel__flotante,
.lp-pixel__flotante:hover,
.lp-pixel__flotante:focus {
    color: var(--lp-moneda-tinta);
}

.lp-pixel__flotante {
    --lp-foco: var(--lp-contorno);
    position: fixed;
    left: 1rem;
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 1030;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-height: 3rem;
    padding: .65rem 1.2rem;
    border: 3px solid var(--lp-contorno);
    background: var(--lp-moneda);
    box-shadow: inset -.25rem -.25rem 0 var(--lp-moneda-sombra), inset .25rem .25rem 0 var(--lp-moneda-alta), .35rem .35rem 0 var(--lp-contorno);
    font-family: var(--lp-consola);
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.2;
    text-decoration: none;
    text-transform: uppercase;
    transition: opacity .3s steps(3, end), translate .3s steps(3, end), visibility .3s;
}

.lp-pixel__flotante--oculto {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    translate: 0 150%;
}

/* ═══ Menos movimiento ═════════════════════════════════════════════════════
   Los estados de espera ya viven dentro de no-preference; aquí solo se apagan
   las transiciones que quedan fuera, para que todo cambie al instante. */
@media (prefers-reduced-motion: reduce) {
    .lp-pixel *,
    .lp-pixel *::before,
    .lp-pixel *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ═══ Colores forzados ═════════════════════════════════════════════════════
   Con un tema de alto contraste del sistema los fondos desaparecen: los botones
   y las ventanas recuperan su borde, y los dibujos que dan información (sprites,
   estrellas y barras) conservan su color. */
@media (forced-colors: active) {
    .lp-pixel__boton,
    .lp-pixel__flotante,
    .lp-pixel__ventana,
    .lp-pixel__dialogo,
    .lp-pixel__logro {
        border: 3px solid CanvasText;
    }

    .lp-pixel__h1-marca {
        border-color: CanvasText;
    }

    .lp-pixel__sprite,
    .lp-pixel__stat-estrellas,
    .lp-pixel__xp-barra,
    .lp-pixel__nivel-bloque,
    .lp-pixel__boton-flecha {
        forced-color-adjust: none;
    }

    .lp-pixel__nivel:has(:checked) .lp-pixel__nivel-nombre,
    .lp-pixel__personaje:has(:checked),
    .lp-pixel__casilla:has(:checked) {
        outline: 3px solid Highlight;
    }
}