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

   TODO cuelga de .lp-placa. 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: una placa de circuito impreso. La placa verde (portada, chips y
   cierre) y el panel de instrumentos (banco de medición y orgullo) son oscuros en
   los dos temas, como los objetos reales. El papel de esquemas, el tapete
   antiestático, el aluminio del tablero y el folleto cambian con el tema.

   SIETE 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.
     · LA PLACA (--lp-mascara-*, --lp-cobre-*, --lp-serigrafia-*, --lp-epoxi-*):
       máscara verde, pistas de cobre, rótulos blancos y chips negros.
     · LA LUZ (--lp-led-*, --lp-lcd-*): leds, pantallas y displays.
     · EL INSTRUMENTAL (--lp-panel-*, --lp-mate, --lp-ciencias, --lp-letras,
       --lp-aptitud): el panel oscuro y los cuatro colores de los medidores.
     · LAS SUPERFICIES CLARAS (--lp-papel-*, --lp-tapete-*, --lp-aluminio-*,
       --lp-folleto-*): cambian con el tema.
     · LA PINTURA DE LOS APARATOS (--lp-instrumento-*, --lp-cuadrante-*): se ven
       igual de día y de noche.
     · LA ACCIÓN (--lp-encendido-*): el verde lima del botón de encendido, en
       todas las llamadas a inscribirse.

   Cada superficie fija además cinco variables locales (--lp-suave, --lp-acento,
   --lp-acento-tinta, --lp-borde y --lp-foco) para que las piezas comunes se
   pinten bien sobre cualquiera de ellas.

   El movimiento solo existe con prefers-reduced-motion: no-preference; ninguna
   animación se repite sin fin. */
.lp-placa {
    /* ── Identidad de la universidad ───────────────────────────────────── */
    --lp-uni: #0E2240;
    --lp-uni-alto: #17325A;
    --lp-uni-oro: #D9A93F;
    --lp-uni-tinta: #FFFFFF;
    --lp-uni-plata: #C9D3E0;
    /* ── La placa: igual en los dos temas ──────────────────────────────── */
    --lp-mascara: #0D3F2C;
    --lp-mascara-alta: #145A3E;
    --lp-mascara-baja: #072518;
    --lp-mascara-modulo: #0A3222;
    --lp-mascara-punto: rgba(243, 246, 241, .07);
    --lp-cobre: #C8894B;
    --lp-cobre-claro: #F2C088;
    --lp-cobre-oscuro: #8A5A2B;
    --lp-estano: #CDD3D8;
    --lp-estano-oscuro: #8E979F;
    --lp-serigrafia: #F3F6F1;
    --lp-serigrafia-suave: rgba(243, 246, 241, .8);
    --lp-serigrafia-linea: rgba(243, 246, 241, .22);
    --lp-serigrafia-velo: rgba(243, 246, 241, .08);
    --lp-chispa: #FFF1B8;
    --lp-epoxi: #17191D;
    --lp-epoxi-alto: #2B2F36;
    --lp-epoxi-tinta: #E8EBEE;
    --lp-epoxi-suave: #AEB5BD;
    --lp-sombra-honda: rgba(0, 0, 0, .55);
    --lp-sombra-media: rgba(0, 0, 0, .35);
    --lp-brillo: rgba(255, 255, 255, .08);
    /* ── La luz ─────────────────────────────────────────────────────────── */
    --lp-led-verde: #4DF08A;
    --lp-led-rojo: #FF5D52;
    --lp-led-ambar: #FFB224;
    --lp-led-azul: #4CC9FF;
    --lp-led-apagado: rgba(243, 246, 241, .14);
    --lp-lcd: #A6C23A;
    --lp-lcd-celda: rgba(27, 38, 5, .08);
    --lp-lcd-tinta: #1B2605;
    /* ── El instrumental: oscuro en los dos temas ──────────────────────── */
    --lp-panel: #14181E;
    --lp-panel-alto: #1D232B;
    --lp-panel-hondo: #0B0E12;
    --lp-panel-borde: rgba(255, 255, 255, .1);
    --lp-panel-tinta: #EEF2F6;
    --lp-panel-suave: #B4BDC7;
    --lp-perilla-alta: #5B6572;
    --lp-perilla-baja: #353C45;
    --lp-mate: #FF5D52;
    --lp-ciencias: #4CC9FF;
    --lp-letras: #FFB224;
    --lp-aptitud: #4DF08A;
    /* ── El papel de esquemas: cambia con el tema ──────────────────────── */
    --lp-papel: #F5F8FC;
    --lp-papel-cuadro: rgba(30, 90, 168, .07);
    --lp-papel-cuadro-mayor: rgba(30, 90, 168, .13);
    --lp-papel-tinta: #14233A;
    --lp-papel-suave: #4A5A70;
    --lp-papel-acento: #1E5AA8;
    --lp-papel-acento-tinta: #FFFFFF;
    --lp-papel-borde: rgba(20, 35, 58, .16);
    --lp-papel-tarjeta: #FFFFFF;
    --lp-papel-sombra: rgba(20, 35, 58, .14);
    --lp-canal-1: #0B7A52;
    --lp-canal-2: #1E5AA8;
    --lp-canal-3: #A8580F;
    --lp-canal-4: #B42338;
    /* ── El tapete antiestático: cambia con el tema ────────────────────── */
    --lp-tapete: #D7E2EA;
    --lp-tapete-cuadro: rgba(18, 55, 85, .08);
    --lp-tapete-tinta: #12283A;
    --lp-tapete-suave: #40576A;
    --lp-tapete-tarjeta: #F3F7FA;
    --lp-tapete-escena: #E3EBF1;
    --lp-tapete-borde: rgba(18, 40, 58, .16);
    --lp-tapete-sombra: rgba(18, 40, 58, .18);
    --lp-tapete-acento: #0E5E8C;
    /* ── El aluminio del tablero: cambia con el tema ───────────────────── */
    --lp-aluminio: #E3E7EB;
    --lp-aluminio-alto: #F4F6F8;
    --lp-aluminio-veta: rgba(28, 37, 48, .035);
    --lp-aluminio-tinta: #1B2430;
    --lp-aluminio-suave: #4B5867;
    --lp-aluminio-borde: rgba(27, 36, 48, .18);
    --lp-aluminio-acento: #2B5C8A;
    --lp-aluminio-hendidura: rgba(27, 36, 48, .14);
    --lp-aluminio-led: rgba(27, 36, 48, .22);
    --lp-aluminio-sombra: rgba(27, 36, 48, .2);
    /* ── El folleto: cambia con el tema ────────────────────────────────── */
    --lp-folleto: #FFFFFF;
    --lp-folleto-tinta: #1C2632;
    --lp-folleto-suave: #4E5A67;
    --lp-folleto-linea: rgba(28, 38, 50, .16);
    --lp-folleto-acento: #0E5E8C;
    /* ── Pintura de los aparatos: igual de día y de noche ──────────────── */
    --lp-instrumento-amarillo: #F3C331;
    --lp-instrumento-amarillo-oscuro: #A3800F;
    --lp-instrumento-gris: #3A414B;
    --lp-instrumento-gris-alto: #56606C;
    --lp-instrumento-negro: #1C2026;
    --lp-instrumento-cable: #C8372D;
    --lp-instrumento-plata: #DDE2E6;
    --lp-fosforo: #0B2419;
    --lp-fosforo-reticula: rgba(102, 255, 176, .14);
    --lp-traza: #66FFB0;
    --lp-cuadrante: #F4F1E6;
    --lp-cuadrante-tinta: #1E2226;
    --lp-cuadrante-arco: #7EAA16;
    /* ── Acción: igual en los dos temas ────────────────────────────────── */
    --lp-encendido: #C6F432;
    --lp-encendido-alto: #DAFF6E;
    --lp-encendido-tinta: #142000;
    --lp-encendido-borde: #3C5006;
    --lp-encendido-sombra: #4E6A09;
    --lp-encendido-halo: rgba(198, 244, 50, .42);
    /* ── Foco ───────────────────────────────────────────────────────────── */
    --lp-foco-oscuro: #FFF1B8;
    --lp-foco-claro: #1E5AA8;
    /* ── Medidas y letras ──────────────────────────────────────────────── */
    --lp-ancho: 76rem;
    --lp-titular: Inter, "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
    --lp-texto: "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
    --lp-mono: "JetBrains Mono", "Cascadia Mono", "Cascadia Code", Consolas, "SF Mono", Menlo, "DejaVu Sans Mono", "Liberation Mono", monospace;
    margin: 0;
    background: var(--lp-papel);
    color: var(--lp-papel-tinta);
    font-family: var(--lp-texto);
    font-size: 1rem;
    line-height: 1.6;
    color-scheme: light;
}

/* Tema oscuro del sitio. El atributo lo pone Akcadmia en un ancestro; aquí solo
   se reasignan variables, nunca reglas. La placa, la luz, el instrumental y la
   pintura no cambian: son objetos. */
[data-tema="oscuro"] .lp-placa {
    --lp-uni: #081629;
    --lp-uni-alto: #10254A;
    --lp-uni-oro: #E7BB57;
    --lp-uni-plata: #D8E0EA;
    --lp-papel: #0C1A2E;
    --lp-papel-cuadro: rgba(127, 178, 255, .06);
    --lp-papel-cuadro-mayor: rgba(127, 178, 255, .12);
    --lp-papel-tinta: #E3ECFA;
    --lp-papel-suave: #A9BBD4;
    --lp-papel-acento: #7FB2FF;
    --lp-papel-acento-tinta: #0C1A2E;
    --lp-papel-borde: rgba(227, 236, 250, .16);
    --lp-papel-tarjeta: #12243D;
    --lp-papel-sombra: rgba(0, 0, 0, .45);
    --lp-canal-1: #45D39A;
    --lp-canal-2: #7FB2FF;
    --lp-canal-3: #FFB25C;
    --lp-canal-4: #FF7F90;
    --lp-tapete: #16212B;
    --lp-tapete-cuadro: rgba(170, 210, 240, .05);
    --lp-tapete-tinta: #E3EDF5;
    --lp-tapete-suave: #A6B8C7;
    --lp-tapete-tarjeta: #1D2A36;
    --lp-tapete-escena: #16212B;
    --lp-tapete-borde: rgba(227, 237, 245, .14);
    --lp-tapete-sombra: rgba(0, 0, 0, .45);
    --lp-tapete-acento: #6FC3F2;
    --lp-aluminio: #1A2027;
    --lp-aluminio-alto: #232A33;
    --lp-aluminio-veta: rgba(230, 235, 240, .025);
    --lp-aluminio-tinta: #E6EBF0;
    --lp-aluminio-suave: #A8B3BF;
    --lp-aluminio-borde: rgba(230, 235, 240, .16);
    --lp-aluminio-acento: #8CC0F0;
    --lp-aluminio-hendidura: rgba(0, 0, 0, .4);
    --lp-aluminio-led: rgba(0, 0, 0, .55);
    --lp-aluminio-sombra: rgba(0, 0, 0, .5);
    --lp-folleto: #172230;
    --lp-folleto-tinta: #E6ECF2;
    --lp-folleto-suave: #A9B6C4;
    --lp-folleto-linea: rgba(230, 236, 242, .16);
    --lp-folleto-acento: #6FC3F2;
    --lp-foco-claro: #7FB2FF;
    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-placa, que no ve sus variables. */
body:has(> .lp-placa) {
    margin: 0 !important;
    padding: 0 !important;
    background-color: #0E2240;
}

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

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

    body > :has(+ .lp-placa) > :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. Márgenes y listas se ponen a
   cero aquí para que cada pieza declare solo los suyos. */
.lp-placa :where(h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, a, span, strong, small, em, label, legend, summary, button, input, details, fieldset, article, section) {
    color: inherit;
    font-family: inherit;
}

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

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

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

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

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

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

/* Las anclas no quedan tapadas por una cabecera fija del sitio. */
.lp-placa [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-placa :where(img) {
    display: block;
    max-width: 100%;
    height: auto;
}

.lp-placa :where(svg) {
    fill: currentColor;
}

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

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

.lp-placa__icono {
    width: 1.2em;
    height: 1.2em;
    flex: 0 0 auto;
}

/* Los iconos de trazo (el de encendido) se dibujan con su línea, sin relleno. */
.lp-placa .lp-placa__icono--trazo {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ═══ Aparición al desplazar ═══════════════════════════════════════════════
   La clase --animada la pone el guion: sin él, o con menos movimiento, todo se
   ve desde el principio. El panel entra inclinado desde arriba, como una placa
   que se encaja en su ranura. */
@media (prefers-reduced-motion: no-preference) {
    .lp-placa--animada [data-revelar] {
        opacity: 0;
        transform: perspective(60rem) rotateX(9deg) translateY(1.25rem);
        transform-origin: 50% 0;
        transition: opacity .55s ease, transform .8s cubic-bezier(.16, .84, .3, 1);
    }

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

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

.lp-placa__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-placa__emblema svg {
        width: 1.5rem;
        height: 1.5rem;
    }

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

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

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

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

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

/* ═══ Superficies ══════════════════════════════════════════════════════════
   Cada sección es una de cinco superficies. El overflow-x: clip recorta lo
   dibujado que sobresale sin crear un contenedor con desplazamiento. */
.lp-placa__verde,
.lp-placa__papel,
.lp-placa__instrumental,
.lp-placa__tapete,
.lp-placa__aluminio {
    position: relative;
    padding-block: clamp(3.5rem, 8vw, 6.25rem);
    overflow-x: clip;
}

.lp-placa__verde {
    --lp-suave: var(--lp-serigrafia-suave);
    --lp-acento: var(--lp-cobre-claro);
    --lp-borde: var(--lp-serigrafia-linea);
    --lp-foco: var(--lp-foco-oscuro);
    background:
        radial-gradient(circle, var(--lp-mascara-punto) 0 1.5px, transparent 2px) 0 0 / 1.6rem 1.6rem,
        radial-gradient(120% 80% at 15% 0%, var(--lp-mascara-alta), transparent 60%),
        linear-gradient(160deg, var(--lp-mascara), var(--lp-mascara-baja));
    color: var(--lp-serigrafia);
}

.lp-placa__papel {
    --lp-suave: var(--lp-papel-suave);
    --lp-acento: var(--lp-papel-acento);
    --lp-acento-tinta: var(--lp-papel-acento-tinta);
    --lp-borde: var(--lp-papel-borde);
    --lp-foco: var(--lp-foco-claro);
    background:
        linear-gradient(var(--lp-papel-cuadro-mayor) 1px, transparent 1px) 0 0 / 5rem 5rem,
        linear-gradient(90deg, var(--lp-papel-cuadro-mayor) 1px, transparent 1px) 0 0 / 5rem 5rem,
        linear-gradient(var(--lp-papel-cuadro) 1px, transparent 1px) 0 0 / 1rem 1rem,
        linear-gradient(90deg, var(--lp-papel-cuadro) 1px, transparent 1px) 0 0 / 1rem 1rem,
        var(--lp-papel);
    color: var(--lp-papel-tinta);
}

.lp-placa__instrumental {
    --lp-suave: var(--lp-panel-suave);
    --lp-acento: var(--lp-led-verde);
    --lp-borde: var(--lp-panel-borde);
    --lp-foco: var(--lp-foco-oscuro);
    background: linear-gradient(180deg, var(--lp-panel-alto), var(--lp-panel) 35%, var(--lp-panel-hondo));
    color: var(--lp-panel-tinta);
}

.lp-placa__tapete {
    --lp-suave: var(--lp-tapete-suave);
    --lp-acento: var(--lp-tapete-acento);
    --lp-borde: var(--lp-tapete-borde);
    --lp-foco: var(--lp-foco-claro);
    background:
        linear-gradient(var(--lp-tapete-cuadro) 1px, transparent 1px) 0 0 / 2.5rem 2.5rem,
        linear-gradient(90deg, var(--lp-tapete-cuadro) 1px, transparent 1px) 0 0 / 2.5rem 2.5rem,
        var(--lp-tapete);
    color: var(--lp-tapete-tinta);
}

.lp-placa__aluminio {
    --lp-suave: var(--lp-aluminio-suave);
    --lp-acento: var(--lp-aluminio-acento);
    --lp-borde: var(--lp-aluminio-borde);
    --lp-foco: var(--lp-foco-claro);
    background:
        repeating-linear-gradient(0deg, var(--lp-aluminio-veta) 0 1px, transparent 1px 3px),
        linear-gradient(180deg, var(--lp-aluminio-alto), var(--lp-aluminio));
    color: var(--lp-aluminio-tinta);
}

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

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

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

.lp-placa__cabecera--centro {
    margin-inline: auto;
    text-align: center;
}

/* El antetítulo es un rótulo de serigrafía con su pad de soldadura delante. */
.lp-placa__antetitulo {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: 1rem;
    padding: .3rem .8rem;
    border: 1px solid currentColor;
    border-radius: .25rem;
    color: var(--lp-acento);
    font-family: var(--lp-mono);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.4;
    text-transform: uppercase;
}

    .lp-placa__antetitulo::before {
        content: "";
        width: .5rem;
        height: .5rem;
        flex: 0 0 auto;
        border-radius: 1px;
        background: currentColor;
    }

.lp-placa__antetitulo--led::before {
    border-radius: 50%;
    background: var(--lp-led-verde);
    box-shadow: 0 0 .5rem var(--lp-led-verde);
}

.lp-placa__antetitulo--serigrafia {
    color: var(--lp-serigrafia);
}

/* 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. Sin
   contenedor, cqi se mide con la pantalla, que también sirve. */
.lp-placa__h2 {
    margin-bottom: .9rem;
    font-family: var(--lp-titular);
    font-size: min(max(1.95rem, 4.3vw), 3.3rem, 10.5cqi);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.02em;
    text-wrap: balance;
}

.lp-placa__h3 {
    margin-bottom: .45rem;
    font-family: var(--lp-titular);
    font-size: clamp(1.2rem, 2.2vw, 1.45rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.01em;
}

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

.lp-placa__cabecera--centro .lp-placa__entrada {
    margin-inline: auto;
}

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

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

/* ── Botones ──────────────────────────────────────────────────────────── */
.lp-placa__boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    min-height: 3rem;
    padding: .7rem 1.35rem;
    border: 2px solid transparent;
    border-radius: 999px;
    font-family: var(--lp-titular);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

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

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

.lp-placa__boton--encendido,
.lp-placa__boton--encendido:hover,
.lp-placa__boton--encendido:focus {
    border-color: var(--lp-encendido-borde);
    background: linear-gradient(180deg, var(--lp-encendido-alto), var(--lp-encendido));
    color: var(--lp-encendido-tinta);
}

.lp-placa__boton--encendido {
    box-shadow: 0 .25rem 0 var(--lp-encendido-sombra), 0 .6rem 1.4rem -.4rem var(--lp-encendido-halo);
}

    .lp-placa__boton--encendido:hover {
        box-shadow: 0 .35rem 0 var(--lp-encendido-sombra), 0 .9rem 1.8rem -.4rem var(--lp-encendido-halo);
    }

    .lp-placa__boton--encendido:active {
        box-shadow: 0 .1rem 0 var(--lp-encendido-sombra), 0 .4rem 1rem -.4rem var(--lp-encendido-halo);
    }

.lp-placa__boton--contorno,
.lp-placa__boton--contorno:hover,
.lp-placa__boton--contorno:focus {
    border-color: var(--lp-serigrafia-suave);
    color: var(--lp-serigrafia);
}

.lp-placa__boton--contorno {
    background: transparent;
}

    .lp-placa__boton--contorno:hover {
        background: var(--lp-serigrafia-velo);
    }

/* El circulito oscuro con el símbolo de encendido, pegado al borde del botón. */
.lp-placa__boton-icono {
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    flex: 0 0 auto;
    margin-left: -.55rem;
    border-radius: 50%;
    background: var(--lp-encendido-tinta);
    color: var(--lp-encendido);
}

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

.lp-placa__accion--centro {
    justify-content: center;
    text-align: center;
}

.lp-placa__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-placa__accion .lp-placa__boton,
    .lp-placa__acciones .lp-placa__boton {
        flex: 1 1 100%;
    }
}

/* ═══ Displays de siete segmentos ══════════════════════════════════════════
   Cada dígito son siete <i> en el orden clásico a, b, c, d, e, f y g. Qué
   segmentos se encienden lo decide data-digito; así el mismo marcado sirve para
   las cifras fijas y para las que escribe el guion. */
.lp-placa__display {
    --lp-alto-digito: 2.4rem;
    --lp-segmento: var(--lp-led-rojo);
    --lp-t: calc(var(--lp-alto-digito) * .12);
    display: inline-flex;
    gap: calc(var(--lp-alto-digito) * .16);
    filter: drop-shadow(0 0 .3rem color-mix(in srgb, var(--lp-segmento) 55%, transparent));
}

.lp-placa__digito {
    position: relative;
    width: calc(var(--lp-alto-digito) * .56);
    height: var(--lp-alto-digito);
    flex: 0 0 auto;
    transform: skewX(-6deg);
}

    .lp-placa__digito i {
        position: absolute;
        background: color-mix(in srgb, var(--lp-segmento) 11%, transparent);
    }

        /* a, d y g: horizontales, con las puntas en bisel. */
        .lp-placa__digito i:nth-child(1),
        .lp-placa__digito i:nth-child(4),
        .lp-placa__digito i:nth-child(7) {
            left: calc(var(--lp-t) * .55);
            right: calc(var(--lp-t) * .55);
            height: var(--lp-t);
            clip-path: polygon(0 50%, calc(var(--lp-t) / 2) 0, calc(100% - var(--lp-t) / 2) 0, 100% 50%, calc(100% - var(--lp-t) / 2) 100%, calc(var(--lp-t) / 2) 100%);
        }

        .lp-placa__digito i:nth-child(1) {
            top: 0;
        }

        .lp-placa__digito i:nth-child(7) {
            top: calc(50% - var(--lp-t) / 2);
        }

        .lp-placa__digito i:nth-child(4) {
            bottom: 0;
        }

        /* b, c, e y f: verticales. */
        .lp-placa__digito i:nth-child(2),
        .lp-placa__digito i:nth-child(3),
        .lp-placa__digito i:nth-child(5),
        .lp-placa__digito i:nth-child(6) {
            width: var(--lp-t);
            height: calc(50% - var(--lp-t) * .55);
            clip-path: polygon(50% 0, 100% calc(var(--lp-t) / 2), 100% calc(100% - var(--lp-t) / 2), 50% 100%, 0 calc(100% - var(--lp-t) / 2), 0 calc(var(--lp-t) / 2));
        }

        .lp-placa__digito i:nth-child(2) {
            top: calc(var(--lp-t) * .55);
            right: 0;
        }

        .lp-placa__digito i:nth-child(3) {
            right: 0;
            bottom: calc(var(--lp-t) * .55);
        }

        .lp-placa__digito i:nth-child(5) {
            bottom: calc(var(--lp-t) * .55);
            left: 0;
        }

        .lp-placa__digito i:nth-child(6) {
            top: calc(var(--lp-t) * .55);
            left: 0;
        }

.lp-placa__digito:is([data-digito="0"], [data-digito="2"], [data-digito="3"], [data-digito="5"], [data-digito="6"], [data-digito="7"], [data-digito="8"], [data-digito="9"]) i:nth-child(1),
.lp-placa__digito:is([data-digito="0"], [data-digito="1"], [data-digito="2"], [data-digito="3"], [data-digito="4"], [data-digito="7"], [data-digito="8"], [data-digito="9"]) i:nth-child(2),
.lp-placa__digito:is([data-digito="0"], [data-digito="1"], [data-digito="3"], [data-digito="4"], [data-digito="5"], [data-digito="6"], [data-digito="7"], [data-digito="8"], [data-digito="9"]) i:nth-child(3),
.lp-placa__digito:is([data-digito="0"], [data-digito="2"], [data-digito="3"], [data-digito="5"], [data-digito="6"], [data-digito="8"], [data-digito="9"]) i:nth-child(4),
.lp-placa__digito:is([data-digito="0"], [data-digito="2"], [data-digito="6"], [data-digito="8"]) i:nth-child(5),
.lp-placa__digito:is([data-digito="0"], [data-digito="4"], [data-digito="5"], [data-digito="6"], [data-digito="8"], [data-digito="9"]) i:nth-child(6),
.lp-placa__digito:is([data-digito="2"], [data-digito="3"], [data-digito="4"], [data-digito="5"], [data-digito="6"], [data-digito="8"], [data-digito="9"]) i:nth-child(7) {
    background: var(--lp-segmento);
}

/* ═══ Portada: la placa encendiéndose ══════════════════════════════════════ */
.lp-placa__portada {
    padding-block: clamp(3rem, 7vw, 5.5rem) clamp(4.25rem, 8vw, 6.25rem);
    isolation: isolate;
}

.lp-placa__pistas {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
}

.lp-placa__pistas-cobre path {
    fill: none;
    stroke: var(--lp-cobre);
    stroke-opacity: .34;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lp-placa__pistas-vias circle {
    fill: var(--lp-mascara-baja);
    stroke: var(--lp-cobre);
    stroke-opacity: .55;
    stroke-width: 4;
}

.lp-placa__pistas-pads rect {
    fill: var(--lp-estano);
    fill-opacity: .26;
}

.lp-placa__pistas-rotulos text {
    fill: var(--lp-serigrafia);
    fill-opacity: .3;
    font-family: var(--lp-mono);
    font-size: 16px;
    letter-spacing: .1em;
}

/* Cada pulso es un trazo corto que recorre su pista entera: con pathLength="100"
   el patrón «7 encendido, 100 apagado» se mide igual en cualquier pista. Parte
   escondido antes del inicio (desfase 7) y termina escondido después del final
   (desfase −100), así que en reposo no se ve. El resplandor es una copia gruesa
   y translúcida del mismo trazo, que corre a la par: un filtro de desenfoque
   haría repintar toda la portada en cada cuadro. */
.lp-placa__pulso {
    fill: none;
    stroke: var(--lp-chispa);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 7 100;
    stroke-dashoffset: 7;
}

.lp-placa__pulso--halo {
    stroke-width: 13;
    stroke-opacity: .28;
}

@media (prefers-reduced-motion: no-preference) {
    .lp-placa--animada .lp-placa__pulso {
        animation: lp-placa-corriente 2.8s cubic-bezier(.45, 0, .55, 1) .5s 3 both;
    }

    .lp-placa--animada .lp-placa__pulso--2 {
        animation-delay: 1.1s;
    }

    .lp-placa--animada .lp-placa__pulso--3 {
        animation-delay: 1.6s;
    }

    .lp-placa--animada .lp-placa__pulso--4 {
        animation-delay: .8s;
    }

    .lp-placa--animada .lp-placa__pulso--5 {
        animation-delay: 2s;
    }

    .lp-placa--animada .lp-placa__pulso--6 {
        animation-delay: 1.35s;
    }
}

@keyframes lp-placa-corriente {
    from {
        stroke-dashoffset: 7;
    }

    to {
        stroke-dashoffset: -100;
    }
}

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

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

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

.lp-placa__rotulo {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .55rem;
    margin-bottom: 1.15rem;
    padding: .35rem .8rem;
    border: 1px dashed var(--lp-serigrafia-linea);
    border-radius: .3rem;
    color: var(--lp-serigrafia-suave);
    font-family: var(--lp-mono);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.lp-placa__rotulo-led {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--lp-led-verde);
    box-shadow: 0 0 .5rem var(--lp-led-verde);
}

/* Tope de 15cqi: «Enciende» es la palabra más larga y cabe entera incluso con
   la letra de reserva más ancha. */
.lp-placa__h1 {
    margin-bottom: 1.15rem;
    color: var(--lp-serigrafia);
    font-family: var(--lp-titular);
    font-size: min(max(2.6rem, 6.2vw), 5.1rem, 15cqi);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.035em;
    text-wrap: balance;
}

.lp-placa__h1-cobre {
    background: linear-gradient(100deg, var(--lp-cobre-claro), var(--lp-uni-oro) 45%, var(--lp-cobre) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

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

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

    .lp-placa__specs li {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        padding: .25rem .65rem;
        border: 1px solid var(--lp-serigrafia-linea);
        border-radius: .25rem;
        color: var(--lp-serigrafia-suave);
        font-family: var(--lp-mono);
        font-size: .72rem;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

        .lp-placa__specs li::before {
            content: "";
            width: .4rem;
            height: .4rem;
            border-radius: 50%;
            background: var(--lp-cobre-claro);
        }

/* ── El módulo: una placa pequeña atornillada encima de la grande ─────── */
/* En una sola columna el módulo no pasa de 36rem: a lo ancho de una tableta la
   foto crecería más que el titular. */
.lp-placa__modulo {
    position: relative;
    justify-self: center;
    width: 100%;
    max-width: 36rem;
    padding: clamp(1.1rem, 2.5vw, 1.6rem);
    border: 1px solid var(--lp-mascara-baja);
    border-radius: 1rem;
    background: linear-gradient(160deg, var(--lp-mascara-alta), var(--lp-mascara-modulo));
    box-shadow: inset 0 1px 0 var(--lp-brillo), 0 1.5rem 3rem -1rem var(--lp-sombra-honda);
}

@media (min-width: 992px) {
    .lp-placa__modulo {
        max-width: none;
    }
}

.lp-placa__modulo-tornillo {
    position: absolute;
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    background: radial-gradient(circle, var(--lp-mascara-baja) 0 32%, var(--lp-estano) 36% 62%, var(--lp-estano-oscuro) 66%);
}

.lp-placa__modulo-tornillo--1 {
    top: .35rem;
    left: .35rem;
}

.lp-placa__modulo-tornillo--2 {
    top: .35rem;
    right: .35rem;
}

.lp-placa__modulo-tornillo--3 {
    bottom: .35rem;
    left: .35rem;
}

.lp-placa__modulo-tornillo--4 {
    right: .35rem;
    bottom: .35rem;
}

.lp-placa__pantalla {
    position: relative;
    padding: .55rem;
    border-radius: .6rem;
    background: var(--lp-epoxi);
    box-shadow: inset 0 0 0 1px var(--lp-brillo), 0 .4rem 1rem var(--lp-sombra-media);
}

.lp-placa__pantalla-foto {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: .3rem;
}

.lp-placa__pantalla-brillo {
    position: absolute;
    inset: .55rem;
    border-radius: .3rem;
    background: linear-gradient(125deg, var(--lp-brillo), transparent 42%);
    pointer-events: none;
}

/* La pantalla se enciende con un destello: la foto nunca está invisible, solo
   sobreexpuesta un instante, para no retrasar su pintado. */
@media (prefers-reduced-motion: no-preference) {
    .lp-placa--animada .lp-placa__pantalla-foto {
        animation: lp-placa-destello 1.1s ease-out .2s both;
    }
}

@keyframes lp-placa-destello {
    from {
        filter: brightness(1.9) saturate(.2);
    }

    to {
        filter: none;
    }
}

.lp-placa__lecturas {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: .75rem;
    margin-top: .9rem;
}

/* La pantalla de 16 × 2: cada celda es un carácter, dibujada con un degradado
   que se repite cada 1ch de la misma letra monoespaciada. */
.lp-placa__lcd {
    display: grid;
    flex: 1 1 auto;
    align-content: center;
    gap: .1rem;
    padding: .55rem .75rem;
    border: .35rem solid var(--lp-epoxi);
    border-radius: .45rem;
    background: repeating-linear-gradient(90deg, var(--lp-lcd-celda) 0 .9ch, transparent .9ch 1ch) content-box, var(--lp-lcd);
    background-clip: border-box;
    box-shadow: inset 0 0 1.1rem var(--lp-sombra-media);
    color: var(--lp-lcd-tinta);
    font-family: var(--lp-mono);
    font-size: clamp(.8rem, 3.1vw, 1.05rem);
    font-weight: 700;
    line-height: 1.35;
}

.lp-placa__lcd-linea {
    display: block;
    width: 16ch;
    overflow: hidden;
    white-space: pre;
}

@media (prefers-reduced-motion: no-preference) {
    .lp-placa--animada .lp-placa__lcd-linea {
        animation: lp-placa-teclear 1s steps(16, end) .9s both;
    }

        .lp-placa--animada .lp-placa__lcd-linea[data-lcd="2"] {
            animation-delay: 2s;
        }
}

@keyframes lp-placa-teclear {
    from {
        width: 0;
    }

    to {
        width: 16ch;
    }
}

.lp-placa__contador {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .55rem .8rem;
    border-radius: .45rem;
    background: var(--lp-epoxi);
}

.lp-placa__contador-rotulo {
    color: var(--lp-epoxi-suave);
    font-family: var(--lp-mono);
    font-size: .64rem;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.lp-placa__display--semanas {
    --lp-alto-digito: 2.1rem;
}

.lp-placa__leds {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.1rem;
    margin-top: 1rem;
}

.lp-placa__led {
    --lp-color-led: var(--lp-led-verde);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--lp-serigrafia-suave);
    font-family: var(--lp-mono);
    font-size: .66rem;
    letter-spacing: .12em;
}

    .lp-placa__led::before {
        content: "";
        width: .6rem;
        height: .6rem;
        border-radius: 50%;
        background: var(--lp-color-led);
        box-shadow: 0 0 .55rem var(--lp-color-led);
    }

.lp-placa__led--ambar {
    --lp-color-led: var(--lp-led-ambar);
}

.lp-placa__led--azul {
    --lp-color-led: var(--lp-led-azul);
}

.lp-placa__led--rojo {
    --lp-color-led: var(--lp-led-rojo);
}

/* Al arrancar, cada led parpadea dos veces por segundo, cuatro veces, y se queda
   encendido: muy por debajo del límite de destellos. */
@media (prefers-reduced-motion: no-preference) {
    .lp-placa--animada .lp-placa__led::before {
        animation: lp-placa-parpadeo .5s steps(2, jump-none) .3s 4 both;
    }

    .lp-placa--animada .lp-placa__led:nth-child(2)::before {
        animation-delay: .55s;
    }

    .lp-placa--animada .lp-placa__led:nth-child(3)::before {
        animation-delay: .8s;
    }

    .lp-placa--animada .lp-placa__led:nth-child(4)::before {
        animation-delay: 1.05s;
    }
}

@keyframes lp-placa-parpadeo {
    from {
        opacity: .2;
        box-shadow: none;
    }

    to {
        opacity: 1;
    }
}

/* El peine de contactos dorados del borde de la placa. */
.lp-placa__peine {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: min(100% - 2.5rem, 40rem);
    height: .9rem;
    border-radius: .2rem .2rem 0 0;
    background: repeating-linear-gradient(90deg, var(--lp-uni-oro) 0 .9rem, transparent .9rem 1.35rem);
    opacity: .85;
    translate: -50% 0;
}

.lp-placa__peine--arriba {
    top: 0;
    bottom: auto;
    border-radius: 0 0 .2rem .2rem;
}

/* ═══ Diagrama de tiempos ══════════════════════════════════════════════════
   Los extremos de cada pulso son fracciones del ciclo (--lp-d1…--lp-h4). Los
   valores de aquí son los de un semestre de 25 semanas; con fechas válidas el
   guion escribe los reales. La columna de nombres mide --lp-col en todas las
   filas, así las pistas, las marcas, el eje y la cota quedan alineados. */
.lp-placa__analizador {
    --lp-d1: 0;
    --lp-h1: .16;
    --lp-d2: .16;
    --lp-h2: .52;
    --lp-d3: .52;
    --lp-h3: .84;
    --lp-d4: .84;
    --lp-h4: 1;
    --lp-col: 8.4rem;
    padding: clamp(1rem, 2.5vw, 1.6rem);
    border: 1px solid var(--lp-papel-borde);
    border-radius: .9rem;
    background: var(--lp-papel-tarjeta);
    box-shadow: 0 1rem 2.2rem -1.2rem var(--lp-papel-sombra);
}

@media (min-width: 768px) {
    .lp-placa__analizador {
        --lp-col: 12.5rem;
    }
}

.lp-placa__analizador-titulo {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .25rem 1rem;
    margin-bottom: 1.35rem;
    padding-bottom: .6rem;
    border-bottom: 1px dashed var(--lp-papel-borde);
    color: var(--lp-papel-suave);
    font-family: var(--lp-mono);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.lp-placa__analizador-estado {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--lp-canal-1);
    font-weight: 700;
}

    .lp-placa__analizador-estado::before {
        content: "";
        width: .5rem;
        height: .5rem;
        border-radius: 50%;
        background: currentColor;
    }

.lp-placa__analizador-cuerpo {
    position: relative;
    display: grid;
    gap: .35rem;
}

.lp-placa__marcas {
    position: absolute;
    top: -1.05rem;
    right: .35rem;
    bottom: 0;
    left: var(--lp-col);
    pointer-events: none;
}

.lp-placa__marca {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--lp-h1) * 100%);
    padding-left: .2rem;
    border-left: 1px dashed var(--lp-papel-borde);
    color: var(--lp-papel-suave);
    font-family: var(--lp-mono);
    font-size: .62rem;
    line-height: 1;
    white-space: nowrap;
}

.lp-placa__marca--2 {
    left: calc(var(--lp-h2) * 100%);
}

.lp-placa__marca--3 {
    left: calc(var(--lp-h3) * 100%);
}

.lp-placa__canales {
    position: relative;
    display: grid;
    gap: .35rem;
}

.lp-placa__canal {
    --lp-color: var(--lp-canal-1);
    --lp-desde: var(--lp-d1);
    --lp-hasta: var(--lp-h1);
    position: relative;
    display: grid;
    grid-template-columns: var(--lp-col) minmax(0, 1fr);
    min-height: 3.1rem;
    border-radius: .5rem;
    color: var(--lp-color);
    cursor: pointer;
    transition: background-color .2s ease;
}

.lp-placa__canal--2 {
    --lp-color: var(--lp-canal-2);
    --lp-desde: var(--lp-d2);
    --lp-hasta: var(--lp-h2);
}

.lp-placa__canal--3 {
    --lp-color: var(--lp-canal-3);
    --lp-desde: var(--lp-d3);
    --lp-hasta: var(--lp-h3);
}

.lp-placa__canal--4 {
    --lp-color: var(--lp-canal-4);
    --lp-desde: var(--lp-d4);
    --lp-hasta: var(--lp-h4);
}

    .lp-placa__canal:hover {
        background: color-mix(in srgb, var(--lp-color) 6%, transparent);
    }

    .lp-placa__canal:has(:checked) {
        background: color-mix(in srgb, var(--lp-color) 10%, transparent);
    }

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

/* El botón de radio queda en el árbol de accesibilidad y recibe el foco con las
   flechas; lo que se ve es la fila entera. */
.lp-placa__canal-radio,
.lp-placa__selector-radio,
.lp-placa__interruptor-control {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.lp-placa__canal-nombre {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    padding: .35rem .6rem .35rem .35rem;
    color: var(--lp-papel-tinta);
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.2;
}

.lp-placa__canal-id {
    flex: 0 0 auto;
    padding: .15rem .35rem;
    border-radius: .25rem;
    background: var(--lp-color);
    color: var(--lp-papel-tarjeta);
    font-family: var(--lp-mono);
    font-size: .68rem;
    letter-spacing: .06em;
}

/* La pista es la línea en nivel bajo; el pulso, una caja sin borde inferior cuyo
   fondo opaco tapa esa línea mientras la señal está arriba. */
.lp-placa__canal-pista {
    position: relative;
    margin-block: .45rem;
    margin-right: .35rem;
    background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat;
    opacity: .5;
    transition: opacity .25s ease, background-size .9s ease;
}

.lp-placa__canal:has(:checked) .lp-placa__canal-pista {
    opacity: 1;
}

.lp-placa__canal-pulso {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--lp-desde) * 100%);
    width: calc((var(--lp-hasta) - var(--lp-desde)) * 100%);
    border: 2px solid currentColor;
    border-bottom: 0;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(color-mix(in srgb, currentColor 9%, transparent), color-mix(in srgb, currentColor 9%, transparent)), var(--lp-papel-tarjeta);
    transition: left .5s ease, width .5s ease, box-shadow .25s ease, clip-path .9s ease;
}

.lp-placa__canal:has(:checked) .lp-placa__canal-pulso {
    background: linear-gradient(color-mix(in srgb, currentColor 24%, transparent), color-mix(in srgb, currentColor 24%, transparent)), var(--lp-papel-tarjeta);
    box-shadow: 0 0 .9rem -.15rem color-mix(in srgb, currentColor 55%, transparent);
}

/* Al aparecer, cada señal se traza de izquierda a derecha, un canal tras otro. */
@media (prefers-reduced-motion: no-preference) {
    .lp-placa--animada .lp-placa__analizador:not(.lp-placa--visible) .lp-placa__canal-pista {
        background-size: 0 2px;
    }

    .lp-placa--animada .lp-placa__analizador:not(.lp-placa--visible) .lp-placa__canal-pulso {
        clip-path: inset(-1rem 100% -1rem -1rem);
    }

    .lp-placa--animada .lp-placa__analizador .lp-placa__canal-pulso {
        clip-path: inset(-1rem);
    }

    /* Los retrasos siguen el orden de cada lista de transition: en la pista
       (opacity, background-size) y en el pulso (left, width, box-shadow,
       clip-path) solo se retrasa el trazado. */
    .lp-placa__canal--2 .lp-placa__canal-pista {
        transition-delay: 0s, .15s;
    }

    .lp-placa__canal--3 .lp-placa__canal-pista {
        transition-delay: 0s, .3s;
    }

    .lp-placa__canal--4 .lp-placa__canal-pista {
        transition-delay: 0s, .45s;
    }

    .lp-placa__canal--2 .lp-placa__canal-pulso {
        transition-delay: 0s, 0s, 0s, .15s;
    }

    .lp-placa__canal--3 .lp-placa__canal-pulso {
        transition-delay: 0s, 0s, 0s, .3s;
    }

    .lp-placa__canal--4 .lp-placa__canal-pulso {
        transition-delay: 0s, 0s, 0s, .45s;
    }
}

/* El eje de meses lo arma el guion con las fechas. */
.lp-placa__eje {
    position: relative;
    height: 1.5rem;
    margin-left: var(--lp-col);
    margin-right: .35rem;
    border-top: 1px solid var(--lp-papel-borde);
}

.lp-placa__mes {
    position: absolute;
    top: 0;
    left: calc(var(--lp-x, 0) * 100%);
    padding-top: .35rem;
    color: var(--lp-papel-suave);
    font-family: var(--lp-mono);
    font-size: .64rem;
    letter-spacing: .06em;
    line-height: 1;
    translate: -50% 0;
}

    .lp-placa__mes::before {
        content: "";
        position: absolute;
        top: -1px;
        left: 50%;
        width: 1px;
        height: .3rem;
        background: var(--lp-papel-suave);
    }

/* La cota: una línea de medida bajo la etapa elegida, con cuántas semanas dura.
   Se alinea a la izquierda en la primera etapa y a la derecha en la última para
   que su texto no se salga del diagrama. */
.lp-placa__medida {
    position: relative;
    height: 2.4rem;
    margin-left: var(--lp-col);
    margin-right: .35rem;
}

.lp-placa__analizador:has(#lp-placa-canal-1:checked) {
    --lp-m-desde: var(--lp-d1);
    --lp-m-hasta: var(--lp-h1);
    --lp-m-color: var(--lp-canal-1);
    --lp-m-alinear: flex-start;
}

.lp-placa__analizador:has(#lp-placa-canal-2:checked) {
    --lp-m-desde: var(--lp-d2);
    --lp-m-hasta: var(--lp-h2);
    --lp-m-color: var(--lp-canal-2);
    --lp-m-alinear: center;
}

.lp-placa__analizador:has(#lp-placa-canal-3:checked) {
    --lp-m-desde: var(--lp-d3);
    --lp-m-hasta: var(--lp-h3);
    --lp-m-color: var(--lp-canal-3);
    --lp-m-alinear: center;
}

.lp-placa__analizador:has(#lp-placa-canal-4:checked) {
    --lp-m-desde: var(--lp-d4);
    --lp-m-hasta: var(--lp-h4);
    --lp-m-color: var(--lp-canal-4);
    --lp-m-alinear: flex-end;
}

.lp-placa__medida-cota {
    position: absolute;
    top: .3rem;
    left: calc(var(--lp-m-desde, 0) * 100%);
    display: flex;
    justify-content: var(--lp-m-alinear, flex-start);
    width: calc((var(--lp-m-hasta, 0) - var(--lp-m-desde, 0)) * 100%);
    height: .65rem;
    border-inline: 2px solid var(--lp-m-color, currentColor);
    background: linear-gradient(var(--lp-m-color, currentColor), var(--lp-m-color, currentColor)) 0 50% / 100% 2px no-repeat;
    transition: left .5s ease, width .5s ease;
}

.lp-placa__medida-texto {
    display: none;
    margin-top: .85rem;
    color: var(--lp-m-color, currentColor);
    font-family: var(--lp-mono);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.lp-placa__analizador:has(#lp-placa-canal-1:checked) [data-medida="1"],
.lp-placa__analizador:has(#lp-placa-canal-2:checked) [data-medida="2"],
.lp-placa__analizador:has(#lp-placa-canal-3:checked) [data-medida="3"],
.lp-placa__analizador:has(#lp-placa-canal-4:checked) [data-medida="4"] {
    display: block;
}

/* La lectura de la etapa elegida, debajo del analizador. */
.lp-placa__lectura {
    margin-top: 1.25rem;
}

.lp-placa__etapa {
    --lp-color: var(--lp-canal-1);
    padding: 1.25rem 1.35rem 1.3rem 1.5rem;
    border: 1px solid var(--lp-papel-borde);
    border-left: .4rem solid var(--lp-color);
    border-radius: .75rem;
    background: var(--lp-papel-tarjeta);
    box-shadow: 0 .8rem 1.8rem -1.2rem var(--lp-papel-sombra);
}

.lp-placa__etapa--2 {
    --lp-color: var(--lp-canal-2);
}

.lp-placa__etapa--3 {
    --lp-color: var(--lp-canal-3);
}

.lp-placa__etapa--4 {
    --lp-color: var(--lp-canal-4);
}

.lp-placa__tiempos:has(#lp-placa-canal-1:checked) .lp-placa__etapa:not(.lp-placa__etapa--1),
.lp-placa__tiempos:has(#lp-placa-canal-2:checked) .lp-placa__etapa:not(.lp-placa__etapa--2),
.lp-placa__tiempos:has(#lp-placa-canal-3:checked) .lp-placa__etapa:not(.lp-placa__etapa--3),
.lp-placa__tiempos:has(#lp-placa-canal-4:checked) .lp-placa__etapa:not(.lp-placa__etapa--4) {
    display: none;
}

@media (prefers-reduced-motion: no-preference) {
    .lp-placa__etapa {
        animation: lp-placa-asoma .35s ease both;
    }
}

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

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

.lp-placa__etapa-canal {
    margin-bottom: .3rem;
    color: var(--lp-color);
    font-family: var(--lp-mono);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

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

    .lp-placa__etapa-tiempo span {
        padding: .25rem .6rem;
        border: 1px solid var(--lp-papel-borde);
        border-radius: .3rem;
        color: var(--lp-papel-tinta);
        font-family: var(--lp-mono);
        font-size: .78rem;
        line-height: 1.4;
    }

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

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

/* ═══ Banco de medición ════════════════════════════════════════════════════ */
.lp-placa__banco {
    padding: clamp(1.1rem, 3vw, 2rem);
    border: 1px solid var(--lp-panel-borde);
    border-radius: 1.1rem;
    background: linear-gradient(180deg, var(--lp-panel-alto), var(--lp-panel));
    box-shadow: inset 0 1px 0 var(--lp-brillo), 0 1.5rem 3rem -1.5rem var(--lp-sombra-honda);
}

.lp-placa__selector {
    margin-bottom: 1.75rem;
}

.lp-placa__selector-leyenda {
    margin-bottom: .75rem;
    color: var(--lp-panel-suave);
    font-family: var(--lp-mono);
    font-size: .74rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* El riel del conmutador: la perilla se desliza a la posición marcada. */
.lp-placa__selector-riel {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: .35rem;
    border-radius: .9rem;
    background: var(--lp-panel-hondo);
    box-shadow: inset 0 .2rem .6rem var(--lp-sombra-honda);
}

.lp-placa__selector-perilla {
    position: absolute;
    top: .35rem;
    bottom: .35rem;
    left: .35rem;
    width: calc((100% - .7rem) / 3);
    border-radius: .65rem;
    background: linear-gradient(180deg, var(--lp-perilla-alta), var(--lp-perilla-baja));
    box-shadow: inset 0 1px 0 var(--lp-brillo), 0 .35rem .8rem var(--lp-sombra-honda);
    transition: translate .35s cubic-bezier(.3, 1.3, .5, 1);
}

    .lp-placa__selector-perilla::before {
        content: "";
        position: absolute;
        top: .45rem;
        left: 50%;
        width: .45rem;
        height: .45rem;
        border-radius: 50%;
        background: var(--lp-led-verde);
        box-shadow: 0 0 .5rem var(--lp-led-verde);
        translate: -50% 0;
    }

.lp-placa__banco:has(#lp-placa-bloque-2:checked) .lp-placa__selector-perilla {
    translate: 100% 0;
}

.lp-placa__banco:has(#lp-placa-bloque-3:checked) .lp-placa__selector-perilla {
    translate: 200% 0;
}

.lp-placa__selector-posicion {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: .25rem;
    min-height: 4.6rem;
    padding: 1.35rem .4rem .6rem;
    color: var(--lp-panel-suave);
    text-align: center;
    cursor: pointer;
    transition: color .2s ease;
}

    .lp-placa__selector-posicion:has(:checked) {
        color: var(--lp-panel-tinta);
    }

    .lp-placa__selector-posicion:has(:focus-visible) {
        border-radius: .65rem;
        outline: 3px solid var(--lp-foco);
        outline-offset: -3px;
    }

/* En pantallas muy estrechas «Empresariales» no cabe en un tercio del ancho:
   el conmutador se pone de pie y la perilla baja en vez de correr. */
@media (max-width: 419.98px) {
    .lp-placa__selector-riel {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: 1fr;
    }

    .lp-placa__selector-perilla {
        bottom: auto;
        width: calc(100% - .7rem);
        height: calc((100% - .7rem) / 3);
    }

        .lp-placa__selector-perilla::before {
            top: 50%;
            left: .75rem;
            translate: 0 -50%;
        }

    .lp-placa__banco:has(#lp-placa-bloque-2:checked) .lp-placa__selector-perilla {
        translate: 0 100%;
    }

    .lp-placa__banco:has(#lp-placa-bloque-3:checked) .lp-placa__selector-perilla {
        translate: 0 200%;
    }

    .lp-placa__selector-posicion {
        grid-template-columns: 2.4rem minmax(0, 1fr);
        align-items: center;
        justify-items: start;
        min-height: 3.3rem;
        padding: .55rem .9rem .55rem 1.75rem;
        text-align: left;
    }
}

.lp-placa__selector-numero {
    font-family: var(--lp-titular);
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1;
}

.lp-placa__selector-nombre {
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.25;
}

/* ── Los cuatro medidores de segmentos ────────────────────────────────── */
.lp-placa__medidores {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem .9rem;
}

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

/* Veinte segmentos de 2 puntos: el tubo lleno son 40. El paso se mide en
   longitud y no en porcentaje para que el relleno, que es más bajo que el tubo,
   repita su patrón exactamente encima de los segmentos apagados. */
.lp-placa__medidor {
    --lp-alto-tubo: 10rem;
    --lp-paso: calc(var(--lp-alto-tubo) / 20);
    --lp-segmentos: 10;
    --lp-color: var(--lp-mate);
    display: grid;
    justify-items: center;
    align-content: start;
    gap: .6rem;
    text-align: center;
}

@media (min-width: 768px) {
    .lp-placa__medidor {
        --lp-alto-tubo: 12rem;
    }
}

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

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

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

.lp-placa:has(#lp-placa-bloque-1:checked) .lp-placa__medidor--mate,
.lp-placa:has(#lp-placa-bloque-2:checked) .lp-placa__medidor--letras {
    --lp-segmentos: 20;
}

.lp-placa:has(#lp-placa-bloque-3:checked) :is(.lp-placa__medidor--ciencias, .lp-placa__medidor--letras) {
    --lp-segmentos: 15;
}

.lp-placa__medidor-lectura {
    color: var(--lp-color);
    font-family: var(--lp-mono);
    font-size: clamp(1.3rem, 3vw, 1.7rem);
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 0 .6rem color-mix(in srgb, var(--lp-color) 55%, transparent);
}

    .lp-placa__medidor-lectura small {
        color: var(--lp-panel-suave);
        font-size: .55em;
        text-shadow: none;
    }

.lp-placa__medidor-tubo {
    position: relative;
    display: block;
    width: min(4.2rem, 100%);
    height: var(--lp-alto-tubo);
    overflow: hidden;
    border-radius: .4rem;
    background:
        repeating-linear-gradient(to top, color-mix(in srgb, var(--lp-color) 13%, transparent) 0 calc(var(--lp-paso) - 3px), transparent calc(var(--lp-paso) - 3px) var(--lp-paso)),
        var(--lp-panel-hondo);
    box-shadow: inset 0 0 0 1px var(--lp-panel-borde);
}

    .lp-placa__medidor-tubo::before {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: calc(var(--lp-segmentos) * var(--lp-paso));
        background: repeating-linear-gradient(to top, var(--lp-color) 0 calc(var(--lp-paso) - 3px), transparent calc(var(--lp-paso) - 3px) var(--lp-paso));
        filter: drop-shadow(0 0 .35rem var(--lp-color));
        transition: height .6s cubic-bezier(.2, .9, .3, 1.15);
    }

@media (prefers-reduced-motion: no-preference) {
    .lp-placa--animada .lp-placa__medidores:not(.lp-placa--visible) .lp-placa__medidor-tubo::before {
        height: 0;
    }

    .lp-placa__medidor--ciencias .lp-placa__medidor-tubo::before {
        transition-delay: .08s;
    }

    .lp-placa__medidor--letras .lp-placa__medidor-tubo::before {
        transition-delay: .16s;
    }

    .lp-placa__medidor--aptitud .lp-placa__medidor-tubo::before {
        transition-delay: .24s;
    }
}

.lp-placa__medidor-nombre {
    display: grid;
    color: var(--lp-panel-tinta);
    font-size: .92rem;
    line-height: 1.25;
}

    .lp-placa__medidor-nombre span {
        color: var(--lp-panel-suave);
        font-size: .8rem;
    }

.lp-placa__medidor-unidad {
    color: var(--lp-panel-suave);
    font-family: var(--lp-mono);
    font-size: .7rem;
    line-height: 1.3;
}

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

.lp-placa__banco-pie {
    display: grid;
    gap: 1.25rem 2rem;
    margin-top: 1.75rem;
    padding-top: 1.35rem;
    border-top: 1px dashed var(--lp-panel-borde);
}

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

.lp-placa__banco-carreras {
    color: var(--lp-panel-suave);
}

    .lp-placa__banco-carreras strong {
        color: var(--lp-panel-tinta);
    }

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

    .lp-placa__reglas li {
        display: grid;
        grid-template-columns: 3.6rem minmax(0, 1fr);
        align-items: baseline;
        gap: .75rem;
        color: var(--lp-panel-suave);
        font-size: .95rem;
        line-height: 1.45;
    }

    .lp-placa__reglas strong {
        color: var(--lp-led-ambar);
        font-family: var(--lp-mono);
        text-align: right;
    }

/* ═══ Los chips de las facultades ══════════════════════════════════════════ */
/* En teléfono, una fila que se desliza de lado con parada en cada chip; el
   relleno vertical deja sitio al giro para que no lo recorte el desplazamiento. */
.lp-placa__zocalos {
    display: grid;
    grid-auto-columns: min(82%, 18rem);
    grid-auto-flow: column;
    gap: 1.1rem;
    padding-block: .35rem 1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    counter-reset: lp-zocalo;
}

@media (min-width: 576px) {
    .lp-placa__zocalos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-flow: row;
        padding-block: 0;
        overflow-x: visible;
    }
}

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

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

/* El zócalo es el contorno serigrafiado donde va soldado el chip, con su
   referencia U1…U12. */
.lp-placa__zocalo {
    position: relative;
    display: flex;
    padding: 1.6rem .55rem .7rem;
    border: 1px dashed var(--lp-serigrafia-linea);
    border-radius: .6rem;
    counter-increment: lp-zocalo;
    scroll-snap-align: start;
}

    .lp-placa__zocalo::before {
        content: "U" counter(lp-zocalo);
        content: "U" counter(lp-zocalo) / "";
        position: absolute;
        top: .35rem;
        left: .6rem;
        color: var(--lp-serigrafia-suave);
        font-family: var(--lp-mono);
        font-size: .64rem;
        letter-spacing: .1em;
    }

@media (prefers-reduced-motion: no-preference) {
    .lp-placa__zocalo:nth-child(4n + 2) {
        transition-delay: .06s;
    }

    .lp-placa__zocalo:nth-child(4n + 3) {
        transition-delay: .12s;
    }

    .lp-placa__zocalo:nth-child(4n + 4) {
        transition-delay: .18s;
    }
}

.lp-placa__deslizar {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .35rem;
    color: var(--lp-serigrafia-suave);
    font-family: var(--lp-mono);
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

    .lp-placa__deslizar::after {
        content: "";
        width: 2.2rem;
        height: 2px;
        background: linear-gradient(90deg, var(--lp-cobre-claro), transparent);
    }

@media (min-width: 576px) {
    .lp-placa__deslizar {
        display: none;
    }
}

.lp-placa__chip {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    width: 100%;
    perspective: 70rem;
}

/* Sin guion las dos caras se apilan y se leen las dos. */
.lp-placa__chip-giro {
    position: relative;
    display: grid;
    flex: 1 1 auto;
    gap: .75rem;
}

.lp-placa__chip-cara {
    position: relative;
    margin-inline: .6rem;
    padding: 1.1rem 1.15rem 1.15rem;
    border-radius: .5rem;
}

/* El encapsulado negro, con la muesca arriba y las patillas a los lados: una sola
   pseudocapa con dos degradados, uno por lado, que sobresale del cuerpo. */
.lp-placa__chip-cara--frente {
    min-height: 10.5rem;
    background: linear-gradient(145deg, var(--lp-epoxi-alto), var(--lp-epoxi) 58%);
    box-shadow: inset 0 1px 0 var(--lp-brillo), 0 .6rem 1.2rem -.4rem var(--lp-sombra-honda);
    color: var(--lp-epoxi-tinta);
    transition: box-shadow .3s ease;
}

    .lp-placa__chip-cara--frente::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        width: 1.5rem;
        height: .7rem;
        border-radius: 0 0 .75rem .75rem;
        background: var(--lp-mascara-baja);
        translate: -50% 0;
    }

    .lp-placa__chip-cara--frente::after {
        content: "";
        position: absolute;
        top: .9rem;
        right: -.6rem;
        bottom: .9rem;
        left: -.6rem;
        background:
            linear-gradient(180deg, transparent 0 30%, var(--lp-estano) 30% 70%, transparent 70%) 0 0 / .6rem 1.15rem,
            linear-gradient(180deg, transparent 0 30%, var(--lp-estano) 30% 70%, transparent 70%) 100% 0 / .6rem 1.15rem;
        /* round estira el tramo lo justo para que quepa un número entero de
           patillas: ninguna queda cortada al final. */
        background-repeat: no-repeat round;
        pointer-events: none;
    }

.lp-placa__chip-led {
    position: absolute;
    top: .85rem;
    right: .9rem;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: var(--lp-led-apagado);
    transition: background-color .3s ease, box-shadow .3s ease;
}

.lp-placa:has(#lp-placa-bloque-1:checked) .lp-placa__chip[data-bloque="1"] .lp-placa__chip-led,
.lp-placa:has(#lp-placa-bloque-2:checked) .lp-placa__chip[data-bloque="2"] .lp-placa__chip-led,
.lp-placa:has(#lp-placa-bloque-3:checked) .lp-placa__chip[data-bloque="3"] .lp-placa__chip-led {
    background: var(--lp-led-verde);
    box-shadow: 0 0 .6rem var(--lp-led-verde);
}

.lp-placa:has(#lp-placa-bloque-1:checked) .lp-placa__chip[data-bloque="1"] .lp-placa__chip-cara--frente,
.lp-placa:has(#lp-placa-bloque-2:checked) .lp-placa__chip[data-bloque="2"] .lp-placa__chip-cara--frente,
.lp-placa:has(#lp-placa-bloque-3:checked) .lp-placa__chip[data-bloque="3"] .lp-placa__chip-cara--frente {
    box-shadow: inset 0 1px 0 var(--lp-brillo), inset 0 0 0 1px color-mix(in srgb, var(--lp-led-verde) 45%, transparent), 0 .6rem 1.2rem -.4rem var(--lp-sombra-honda);
}

/* El código de la facultad, con el punto que marca la patilla 1 delante. */
.lp-placa__chip-codigo {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .35rem 0 .5rem;
    font-family: var(--lp-mono);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .08em;
}

    .lp-placa__chip-codigo::before {
        content: "";
        width: .5rem;
        height: .5rem;
        flex: 0 0 auto;
        border-radius: 50%;
        background: var(--lp-epoxi);
        box-shadow: inset 0 1px 1px var(--lp-sombra-honda), 0 1px 0 var(--lp-brillo);
    }

.lp-placa__chip-nombre {
    margin-bottom: .7rem;
    font-family: var(--lp-titular);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: break-word;
}

.lp-placa__chip-bloque {
    display: inline-block;
    padding: .15rem .5rem;
    border: 1px solid var(--lp-epoxi-suave);
    border-radius: .25rem;
    color: var(--lp-epoxi-suave);
    font-family: var(--lp-mono);
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* El dorso es la hoja de datos del chip: papel, y cambia con el tema. */
.lp-placa__chip-cara--dorso {
    border: 1px solid var(--lp-papel-borde);
    background: var(--lp-papel-tarjeta);
    box-shadow: 0 .6rem 1.2rem -.4rem var(--lp-sombra-honda);
    color: var(--lp-papel-tinta);
}

.lp-placa__chip-lema {
    margin-bottom: .75rem;
    color: var(--lp-papel-suave);
    font-size: .9rem;
    line-height: 1.4;
}

.lp-placa__chip-pines {
    display: grid;
    gap: .4rem;
    margin-bottom: .8rem;
    counter-reset: lp-pin;
}

    .lp-placa__chip-pines li {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: baseline;
        gap: .5rem;
        font-weight: 700;
        line-height: 1.3;
        counter-increment: lp-pin;
    }

        .lp-placa__chip-pines li::before {
            content: counter(lp-pin, decimal-leading-zero);
            content: counter(lp-pin, decimal-leading-zero) / "";
            padding: .1rem .3rem;
            border-radius: .2rem;
            background: var(--lp-papel-acento);
            color: var(--lp-papel-acento-tinta);
            font-family: var(--lp-mono);
            font-size: .68rem;
        }

.lp-placa__chip-postula {
    color: var(--lp-papel-suave);
    font-family: var(--lp-mono);
    font-size: .72rem;
    line-height: 1.4;
}

/* Con guion: las dos caras ocupan la misma celda y la de atrás espera girada.
   La celda toma el alto de la cara más alta, así el giro no mueve la rejilla. */
.lp-placa--chips-giran .lp-placa__chip-giro {
    gap: 0;
    transform-style: preserve-3d;
    transition: transform .7s cubic-bezier(.3, .9, .3, 1);
}

.lp-placa--chips-giran .lp-placa__chip-cara {
    grid-area: 1 / 1;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.lp-placa--chips-giran .lp-placa__chip-cara--dorso {
    transform: rotateY(180deg);
}

.lp-placa--chips-giran .lp-placa__chip--volteado .lp-placa__chip-giro {
    transform: rotateY(180deg);
}

.lp-placa__chip-boton {
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: .5rem;
    min-height: 2.6rem;
    padding: .45rem 1rem;
    border: 1px solid var(--lp-serigrafia-linea);
    border-radius: 999px;
    background: var(--lp-mascara-baja);
    color: var(--lp-serigrafia);
    font-family: var(--lp-mono);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .2s ease;
}

    .lp-placa__chip-boton::before {
        content: "";
        width: .5rem;
        height: .5rem;
        border-radius: 50%;
        background: var(--lp-estano-oscuro);
        transition: background-color .2s ease, box-shadow .2s ease;
    }

    .lp-placa__chip-boton:hover {
        border-color: var(--lp-serigrafia-suave);
    }

    .lp-placa__chip-boton[aria-pressed="true"]::before {
        background: var(--lp-led-ambar);
        box-shadow: 0 0 .5rem var(--lp-led-ambar);
    }

/* ═══ La hoja de datos del profe ═══════════════════════════════════════════
   En móvil: el chip arriba y los ocho pines en lista. Desde 992px: el chip al
   centro y los pines a los lados, cada uno en su patilla. */
.lp-placa__patillaje {
    --lp-ancho-ic: 11rem;
    position: relative;
    display: grid;
    justify-items: center;
    gap: 1.5rem;
}

.lp-placa__ic {
    position: relative;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: .25rem;
    width: var(--lp-ancho-ic);
    min-height: 7rem;
    padding: 1.25rem 1rem;
    border-radius: .6rem;
    background: linear-gradient(145deg, var(--lp-epoxi-alto), var(--lp-epoxi) 60%);
    box-shadow: inset 0 1px 0 var(--lp-brillo), 0 1rem 2rem -1rem var(--lp-papel-sombra);
    color: var(--lp-epoxi-tinta);
    text-align: center;
}

    .lp-placa__ic::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        width: 1.6rem;
        height: .8rem;
        border-radius: 0 0 .8rem .8rem;
        background: var(--lp-papel);
        translate: -50% 0;
    }

    .lp-placa__ic::after {
        content: "";
        position: absolute;
        top: 1rem;
        left: 1rem;
        width: .55rem;
        height: .55rem;
        border-radius: 50%;
        background: var(--lp-epoxi);
        box-shadow: inset 0 1px 1px var(--lp-sombra-honda), 0 1px 0 var(--lp-brillo);
    }

.lp-placa__ic-nombre {
    font-family: var(--lp-mono);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: .08em;
}

.lp-placa__ic-sub {
    color: var(--lp-epoxi-suave);
    font-size: .78rem;
}

.lp-placa__pines {
    display: grid;
    gap: .75rem;
    width: 100%;
}

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

.lp-placa__pin {
    --lp-orden: 0;
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "numero nombre"
        "numero texto";
    align-items: center;
    column-gap: .8rem;
    padding: .85rem 1rem;
    border: 1px solid var(--lp-papel-borde);
    border-radius: .7rem;
    background: var(--lp-papel-tarjeta);
    box-shadow: 0 .6rem 1.4rem -1rem var(--lp-papel-sombra);
    transition: opacity .45s ease calc(var(--lp-orden) * 110ms), box-shadow .45s ease calc(var(--lp-orden) * 110ms);
}

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

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

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

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

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

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

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

.lp-placa__pin-numero {
    display: grid;
    grid-area: numero;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: .35rem;
    background: linear-gradient(180deg, var(--lp-estano), var(--lp-estano-oscuro));
    color: var(--lp-epoxi);
    font-family: var(--lp-mono);
    font-weight: 700;
    transition: box-shadow .45s ease calc(var(--lp-orden) * 110ms);
}

.lp-placa__patillaje.lp-placa--visible .lp-placa__pin-numero {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lp-papel-acento) 28%, transparent);
}

.lp-placa__pin-nombre {
    grid-area: nombre;
    color: var(--lp-papel-acento);
    font-family: var(--lp-mono);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.lp-placa__pin-texto {
    grid-area: texto;
    color: var(--lp-papel-tinta);
    font-size: .95rem;
    line-height: 1.4;
}

/* Hasta que el diagrama se ve, los pines esperan apagados; luego se encienden
   uno tras otro, del 1 al 8. */
@media (prefers-reduced-motion: no-preference) {
    .lp-placa--animada .lp-placa__patillaje:not(.lp-placa--visible) .lp-placa__pin {
        opacity: .3;
    }
}

@media (min-width: 992px) {
    .lp-placa__patillaje {
        --lp-ancho-ic: 13rem;
        display: block;
    }

    .lp-placa__ic {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        min-height: 0;
        translate: -50% 0;
    }

    .lp-placa__pines {
        grid-template-columns: minmax(0, 1fr) var(--lp-ancho-ic) minmax(0, 1fr);
        gap: 1rem 0;
    }

    .lp-placa__pin:nth-child(-n + 4) {
        grid-column: 1;
        margin-right: 2.5rem;
    }

    .lp-placa__pin:nth-child(n + 5) {
        grid-column: 3;
        margin-left: 2.5rem;
    }

    .lp-placa__pin:nth-child(1),
    .lp-placa__pin:nth-child(8) {
        grid-row: 1;
    }

    .lp-placa__pin:nth-child(2),
    .lp-placa__pin:nth-child(7) {
        grid-row: 2;
    }

    .lp-placa__pin:nth-child(3),
    .lp-placa__pin:nth-child(6) {
        grid-row: 3;
    }

    .lp-placa__pin:nth-child(4),
    .lp-placa__pin:nth-child(5) {
        grid-row: 4;
    }

    /* La pista de cobre del pin al chip y, en su extremo, la patilla de estaño. */
    .lp-placa__pin::before,
    .lp-placa__pin::after {
        content: "";
        position: absolute;
        top: 50%;
    }

    .lp-placa__pin::after {
        width: 2.5rem;
        height: 2px;
        background: var(--lp-cobre);
    }

    .lp-placa__pin::before {
        width: .75rem;
        height: .6rem;
        border-radius: 1px;
        background: var(--lp-estano-oscuro);
        translate: 0 -50%;
    }

    .lp-placa__pin:nth-child(-n + 4)::after {
        left: 100%;
    }

    .lp-placa__pin:nth-child(-n + 4)::before {
        left: calc(100% + 2.5rem - .75rem);
    }

    .lp-placa__pin:nth-child(n + 5)::after {
        right: 100%;
    }

    .lp-placa__pin:nth-child(n + 5)::before {
        right: calc(100% + 2.5rem - .75rem);
    }
}

/* ═══ El banco de pruebas ══════════════════════════════════════════════════ */
.lp-placa__instrumentos {
    display: grid;
    gap: 1.25rem;
}

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

.lp-placa__instrumento {
    --lp-suave: var(--lp-tapete-suave);
    display: flex;
    flex-direction: column;
    padding: 1.1rem 1.25rem 1.4rem;
    border: 1px solid var(--lp-tapete-borde);
    border-radius: 1rem;
    background: var(--lp-tapete-tarjeta);
    box-shadow: 0 1rem 2rem -1.2rem var(--lp-tapete-sombra);
}

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

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

.lp-placa__dibujo {
    position: relative;
    height: 10rem;
    margin-bottom: 1.1rem;
    overflow: hidden;
    border-radius: .7rem;
    background:
        linear-gradient(var(--lp-tapete-cuadro) 1px, transparent 1px) 0 0 / 1.25rem 1.25rem,
        linear-gradient(90deg, var(--lp-tapete-cuadro) 1px, transparent 1px) 0 0 / 1.25rem 1.25rem,
        var(--lp-tapete-escena);
    box-shadow: inset 0 0 0 1px var(--lp-tapete-borde);
}

.lp-placa__instrumento-tipo {
    margin-bottom: .3rem;
    color: var(--lp-tapete-acento);
    font-family: var(--lp-mono);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* ── La punta lógica: cable, cuerpo con su led y la aguja ─────────────── */
.lp-placa__punta-cable {
    position: absolute;
    top: 58%;
    left: -6%;
    width: 30%;
    height: 42%;
    border: .3rem solid transparent;
    border-top-color: var(--lp-instrumento-cable);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    rotate: -18deg;
}

.lp-placa__punta-cuerpo {
    position: absolute;
    top: 42%;
    left: 18%;
    width: 56%;
    height: 2.2rem;
    border-radius: 1.1rem .5rem .5rem 1.1rem;
    background: linear-gradient(180deg, var(--lp-instrumento-gris-alto), var(--lp-instrumento-negro));
    box-shadow: 0 .5rem .9rem -.3rem var(--lp-sombra-media);
    rotate: -12deg;
}

.lp-placa__punta-led {
    position: absolute;
    top: 50%;
    left: 1.1rem;
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    background: var(--lp-led-verde);
    box-shadow: 0 0 .7rem var(--lp-led-verde), 0 0 1.4rem var(--lp-led-verde);
    translate: 0 -50%;
}

.lp-placa__punta-rotulo {
    position: absolute;
    top: 50%;
    right: .7rem;
    color: var(--lp-instrumento-plata);
    font-family: var(--lp-mono);
    font-size: .6rem;
    letter-spacing: .14em;
    translate: 0 -50%;
}

/* La aguja cuelga del cuerpo, así gira con él. */
.lp-placa__punta-aguja {
    position: absolute;
    top: 50%;
    left: calc(100% - .15rem);
    width: 2.8rem;
    height: 4px;
    background: linear-gradient(90deg, var(--lp-instrumento-plata), var(--lp-estano-oscuro));
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    translate: 0 -50%;
}

/* ── El multímetro: cuerpo amarillo, pantalla, perilla y bornes ───────── */
.lp-placa__multimetro-cuerpo {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: .55rem;
    width: 6.2rem;
    height: 7.8rem;
    padding: .7rem .7rem;
    border-radius: 1rem;
    background: var(--lp-instrumento-gris);
    box-shadow: 0 0 0 .4rem var(--lp-instrumento-amarillo), 0 0 0 .5rem var(--lp-instrumento-amarillo-oscuro), 0 1rem 1.4rem -.4rem var(--lp-sombra-media);
    translate: -50% -50%;
}

.lp-placa__multimetro-pantalla {
    display: grid;
    place-items: center end;
    width: 100%;
    height: 1.7rem;
    padding-inline: .45rem;
    border-radius: .25rem;
    background: var(--lp-lcd);
    color: var(--lp-lcd-tinta);
    font-family: var(--lp-mono);
    font-size: .95rem;
    font-weight: 700;
}

.lp-placa__multimetro-perilla {
    position: relative;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, var(--lp-instrumento-gris-alto), var(--lp-instrumento-negro));
    box-shadow: 0 0 0 .2rem var(--lp-instrumento-negro);
    rotate: 35deg;
}

    .lp-placa__multimetro-perilla::after {
        content: "";
        position: absolute;
        top: .2rem;
        left: 50%;
        width: .22rem;
        height: 1.1rem;
        border-radius: .1rem;
        background: var(--lp-instrumento-plata);
        translate: -50% 0;
    }

.lp-placa__multimetro-bornes {
    display: flex;
    gap: .55rem;
}

    .lp-placa__multimetro-bornes i {
        width: .7rem;
        height: .7rem;
        border-radius: 50%;
        background: var(--lp-instrumento-negro);
        box-shadow: inset 0 0 0 .15rem var(--lp-instrumento-gris-alto);
    }

        .lp-placa__multimetro-bornes i:last-child {
            background: var(--lp-instrumento-cable);
        }

/* ── El osciloscopio: pantalla de fósforo con retícula y su traza ─────── */
.lp-placa__osciloscopio-cuerpo {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    gap: .5rem;
    width: min(88%, 15rem);
    height: 7rem;
    padding: .55rem;
    border-radius: .6rem;
    background: linear-gradient(180deg, var(--lp-instrumento-gris-alto), var(--lp-instrumento-gris));
    box-shadow: 0 1rem 1.4rem -.4rem var(--lp-sombra-media);
    translate: -50% -50%;
}

.lp-placa__osciloscopio-pantalla {
    position: relative;
    flex: 1 1 auto;
    overflow: hidden;
    border-radius: .3rem;
    background:
        linear-gradient(var(--lp-fosforo-reticula) 1px, transparent 1px) 0 0 / 100% 25%,
        linear-gradient(90deg, var(--lp-fosforo-reticula) 1px, transparent 1px) 0 0 / 12.5% 100%,
        var(--lp-fosforo);
}

    .lp-placa__osciloscopio-pantalla svg {
        position: absolute;
        inset: 8% 4%;
        width: 92%;
        height: 84%;
        overflow: visible;
        filter: drop-shadow(0 0 .25rem var(--lp-traza));
    }

.lp-placa__osciloscopio-traza {
    fill: none;
    stroke: var(--lp-traza);
    stroke-width: 3;
    stroke-linejoin: round;
    stroke-dasharray: 100 100;
    stroke-dashoffset: 0;
}

.lp-placa__osciloscopio-mandos {
    display: grid;
    align-content: space-evenly;
    gap: .35rem;
}

    .lp-placa__osciloscopio-mandos i {
        width: 1.25rem;
        height: 1.25rem;
        border-radius: 50%;
        background: radial-gradient(circle at 40% 35%, var(--lp-instrumento-gris-alto), var(--lp-instrumento-negro));
    }

/* Al aparecer: el led de la punta parpadea y se queda encendido, la perilla gira
   a su posición y la traza se dibuja. Todo una sola vez. */
@media (prefers-reduced-motion: no-preference) {
    .lp-placa__instrumento.lp-placa--visible .lp-placa__punta-led {
        animation: lp-placa-parpadeo .45s steps(2, jump-none) .6s 3 both;
    }

    .lp-placa__instrumento.lp-placa--visible .lp-placa__multimetro-perilla {
        animation: lp-placa-perilla 1.2s cubic-bezier(.3, 1.4, .5, 1) .5s both;
    }

    .lp-placa__instrumento.lp-placa--visible .lp-placa__osciloscopio-traza {
        animation: lp-placa-traza 1.6s ease-out .6s both;
    }

    .lp-placa__instrumento.lp-placa--visible .lp-placa__multimetro-pantalla {
        animation: lp-placa-parpadeo .4s steps(2, jump-none) 1.5s 2 both;
    }
}

@keyframes lp-placa-perilla {
    from {
        rotate: -120deg;
    }

    to {
        rotate: 35deg;
    }
}

@keyframes lp-placa-traza {
    from {
        stroke-dashoffset: 100;
    }

    to {
        stroke-dashoffset: 0;
    }
}

/* ═══ El tablero de interruptores ══════════════════════════════════════════ */
.lp-placa__consumo-rejilla {
    display: grid;
    align-items: center;
    gap: clamp(2rem, 5vw, 3.5rem);
}

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

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

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

    .lp-placa__especificaciones li {
        position: relative;
        padding-left: 2.1rem;
        color: var(--lp-aluminio-suave);
        line-height: 1.5;
    }

        /* Cada regla lleva delante la cabeza de un tornillo del panel. */
        .lp-placa__especificaciones li::before {
            content: "";
            position: absolute;
            top: .2rem;
            left: 0;
            width: 1.2rem;
            height: 1.2rem;
            border-radius: 50%;
            background:
                linear-gradient(45deg, transparent 44%, var(--lp-aluminio-tinta) 44% 56%, transparent 56%),
                radial-gradient(circle at 40% 35%, var(--lp-aluminio-alto), var(--lp-aluminio));
            box-shadow: inset 0 0 0 1px var(--lp-aluminio-borde), 0 1px 2px var(--lp-aluminio-hendidura);
        }

    .lp-placa__especificaciones strong {
        color: var(--lp-aluminio-tinta);
    }

.lp-placa__tablero {
    padding: clamp(1.1rem, 3vw, 1.75rem);
    border: 1px solid var(--lp-aluminio-borde);
    border-radius: 1.1rem;
    background: linear-gradient(180deg, var(--lp-aluminio-alto), var(--lp-aluminio));
    box-shadow: inset 0 1px 0 var(--lp-brillo), 0 1.4rem 2.6rem -1.4rem var(--lp-aluminio-sombra);
}

.lp-placa__tablero-leyenda {
    margin-bottom: .9rem;
    color: var(--lp-aluminio-suave);
    font-family: var(--lp-mono);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

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

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

.lp-placa__interruptor {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: .55rem;
    padding: 1.1rem .5rem .8rem;
    border-radius: .8rem;
    background: var(--lp-aluminio);
    box-shadow: inset 0 0 0 1px var(--lp-aluminio-borde), inset 0 .15rem .45rem var(--lp-aluminio-hendidura);
    text-align: center;
    cursor: pointer;
}

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

/* Un balancín: la palanca abajo es apagado y arriba, encendido. El led de encima
   se prende con ella. */
.lp-placa__interruptor-palanca {
    position: relative;
    width: 2.4rem;
    height: 3.6rem;
    margin-top: .6rem;
    border-radius: .45rem;
    background: var(--lp-instrumento-negro);
    box-shadow: inset 0 0 0 .2rem var(--lp-instrumento-gris), 0 .2rem .4rem var(--lp-aluminio-hendidura);
}

    .lp-placa__interruptor-palanca::before {
        content: "";
        position: absolute;
        top: 50%;
        right: .3rem;
        left: .3rem;
        height: calc(50% - .3rem);
        border-radius: .3rem;
        background: linear-gradient(180deg, var(--lp-instrumento-gris-alto), var(--lp-instrumento-gris));
        transition: translate .22s cubic-bezier(.3, 1.4, .5, 1), background .2s ease;
    }

    .lp-placa__interruptor-palanca::after {
        content: "";
        position: absolute;
        top: -.95rem;
        left: 50%;
        width: .5rem;
        height: .5rem;
        border-radius: 50%;
        background: var(--lp-aluminio-led);
        translate: -50% 0;
        transition: background-color .2s ease, box-shadow .2s ease;
    }

.lp-placa__interruptor:has(:checked) .lp-placa__interruptor-palanca::before {
    background: linear-gradient(180deg, var(--lp-encendido-alto), var(--lp-encendido));
    translate: 0 -100%;
}

.lp-placa__interruptor:has(:checked) .lp-placa__interruptor-palanca::after {
    background: var(--lp-led-verde);
    box-shadow: 0 0 .5rem var(--lp-led-verde);
}

.lp-placa__interruptor-nombre {
    color: var(--lp-aluminio-tinta);
    font-size: .85rem;
    font-weight: 700;
    line-height: 1.25;
}

/* ── El medidor de aguja: cuántas clases encendiste ──────────────────── */
.lp-placa__vatimetro {
    --lp-consumo: 0;
    --lp-radio: 5.1rem;
    --lp-pie: 1.65rem;
    position: relative;
    width: 14rem;
    height: 8.65rem;
    margin: 1.5rem auto .75rem;
    border-radius: 7rem 7rem .8rem .8rem;
    background: var(--lp-cuadrante);
    box-shadow: inset 0 0 0 .3rem var(--lp-instrumento-gris), 0 .6rem 1.2rem -.5rem var(--lp-aluminio-sombra);
    color: var(--lp-cuadrante-tinta);
}

    /* El arco: medio anillo hecho con un degradado cónico y una máscara radial. */
    .lp-placa__vatimetro::before {
        content: "";
        position: absolute;
        bottom: calc(var(--lp-pie) - var(--lp-radio) - .6rem);
        left: 50%;
        width: calc((var(--lp-radio) + .6rem) * 2);
        height: calc((var(--lp-radio) + .6rem) * 2);
        border-radius: 50%;
        background: conic-gradient(from -90deg, var(--lp-cuadrante-arco) 0 180deg, transparent 180deg);
        -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - .35rem), #000 calc(100% - .35rem));
        mask: radial-gradient(farthest-side, transparent calc(100% - .35rem), #000 calc(100% - .35rem));
        translate: -50% 0;
    }

.lp-placa__vatimetro-escala i {
    --lp-n: 0;
    position: absolute;
    bottom: calc(var(--lp-pie) + sin(180deg - var(--lp-n) * 30deg) * (var(--lp-radio) - .9rem));
    left: calc(50% + cos(180deg - var(--lp-n) * 30deg) * (var(--lp-radio) - .9rem));
    font-family: var(--lp-mono);
    font-size: .74rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    translate: -50% 50%;
}

    .lp-placa__vatimetro-escala i:nth-child(2) {
        --lp-n: 1;
    }

    .lp-placa__vatimetro-escala i:nth-child(3) {
        --lp-n: 2;
    }

    .lp-placa__vatimetro-escala i:nth-child(4) {
        --lp-n: 3;
    }

    .lp-placa__vatimetro-escala i:nth-child(5) {
        --lp-n: 4;
    }

    .lp-placa__vatimetro-escala i:nth-child(6) {
        --lp-n: 5;
    }

    .lp-placa__vatimetro-escala i:nth-child(7) {
        --lp-n: 6;
    }

.lp-placa__vatimetro-aguja {
    position: absolute;
    bottom: var(--lp-pie);
    left: 50%;
    width: .22rem;
    height: calc(var(--lp-radio) + .25rem);
    margin-left: -.11rem;
    border-radius: .2rem;
    background: var(--lp-instrumento-cable);
    transform-origin: 50% 100%;
    rotate: calc(-90deg + var(--lp-consumo) * 30deg);
    transition: rotate .7s cubic-bezier(.3, 1.5, .5, 1);
}

.lp-placa__vatimetro-eje {
    position: absolute;
    bottom: calc(var(--lp-pie) - .55rem);
    left: 50%;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: var(--lp-instrumento-negro);
    translate: -50% 0;
}

.lp-placa__vatimetro-rotulo {
    position: absolute;
    bottom: .3rem;
    left: 50%;
    font-family: var(--lp-mono);
    font-size: .6rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    translate: -50% 0;
}

.lp-placa__consumo-lectura {
    min-height: 3em;
    color: var(--lp-aluminio-tinta);
    font-weight: 700;
    text-align: center;
}

/* ═══ Orgullo unacino ══════════════════════════════════════════════════════ */
.lp-placa__displays {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
    margin-bottom: 2.25rem;
}

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

/* En el marcado el rótulo (dt) va antes que la cifra (dd), como pide la lista;
   a la vista la cifra va arriba. */
.lp-placa__display-caja {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: .8rem;
    padding: 1.2rem .9rem 1.1rem;
    border: 1px solid var(--lp-panel-borde);
    border-radius: .9rem;
    background: var(--lp-panel-hondo);
    box-shadow: inset 0 .2rem .8rem var(--lp-sombra-honda);
}

.lp-placa__display-valor {
    display: flex;
    justify-content: center;
}

.lp-placa__display-caja .lp-placa__display {
    --lp-alto-digito: clamp(2.1rem, 6.5vw, 3.2rem);
}

.lp-placa__display-caja:nth-child(2) .lp-placa__display {
    --lp-segmento: var(--lp-led-ambar);
}

.lp-placa__display-caja:nth-child(3) .lp-placa__display {
    --lp-segmento: var(--lp-led-verde);
}

.lp-placa__display-caja:nth-child(4) .lp-placa__display {
    --lp-segmento: var(--lp-led-azul);
}

.lp-placa__display-rotulo {
    color: var(--lp-panel-suave);
    font-size: .86rem;
    font-weight: 400;
    line-height: 1.35;
    text-align: center;
}

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

.lp-placa__destacado {
    margin-top: 1.25rem;
    padding-left: 1rem;
    border-left: .3rem solid var(--lp-led-ambar);
    color: var(--lp-panel-tinta);
    font-family: var(--lp-titular);
    font-size: clamp(1.15rem, 2.2vw, 1.4rem);
    font-weight: 800;
    line-height: 1.3;
}

/* ═══ La guía rápida para la familia ═══════════════════════════════════════ */
.lp-placa__folleto {
    display: grid;
    border-radius: .9rem;
    background: var(--lp-folleto);
    box-shadow: 0 1.5rem 3rem -1.5rem var(--lp-tapete-sombra);
    color: var(--lp-folleto-tinta);
    perspective: 80rem;
}

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

.lp-placa__folleto-hoja {
    position: relative;
    padding: clamp(1.4rem, 3.5vw, 2.4rem);
    border-radius: 0 0 .9rem .9rem;
    background: var(--lp-folleto);
    container-type: inline-size;
    transform-origin: 50% 0;
    transition: transform 1s cubic-bezier(.2, .8, .25, 1) .15s;
}

.lp-placa__folleto-hoja--portada {
    border-bottom: 1px dashed var(--lp-folleto-linea);
    border-radius: .9rem .9rem 0 0;
}

@media (min-width: 992px) {
    .lp-placa__folleto-hoja {
        border-radius: 0 .9rem .9rem 0;
        transform-origin: 0 50%;
    }

    .lp-placa__folleto-hoja--portada {
        border-right: 1px dashed var(--lp-folleto-linea);
        border-bottom: 0;
        border-radius: .9rem 0 0 .9rem;
    }
}

/* Plegado hasta que se ve: la segunda hoja se abre sobre su bisagra. */
@media (prefers-reduced-motion: no-preference) {
    .lp-placa--animada .lp-placa__folleto:not(.lp-placa--visible) .lp-placa__folleto-hoja:not(.lp-placa__folleto-hoja--portada) {
        transform: rotateX(-70deg);
    }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 992px) {
    .lp-placa--animada .lp-placa__folleto:not(.lp-placa--visible) .lp-placa__folleto-hoja:not(.lp-placa__folleto-hoja--portada) {
        transform: rotateY(-70deg);
    }
}

.lp-placa__folleto-marca {
    margin-bottom: 1rem;
    padding-bottom: .55rem;
    border-bottom: 2px solid var(--lp-folleto-acento);
    color: var(--lp-folleto-acento);
    font-family: var(--lp-mono);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.lp-placa__h2--folleto {
    font-size: min(max(1.7rem, 3.3vw), 2.5rem, 11cqi);
}

.lp-placa__folleto-foto {
    width: 100%;
    margin-block: 1.25rem 1rem;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: .5rem;
}

.lp-placa__folleto-nota {
    color: var(--lp-folleto-suave);
    font-size: .95rem;
}

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

.lp-placa__paso {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr);
    column-gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--lp-folleto-linea);
    counter-increment: lp-paso;
}

    .lp-placa__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: 2px solid var(--lp-folleto-acento);
        border-radius: 50%;
        color: var(--lp-folleto-acento);
        font-family: var(--lp-mono);
        font-size: 1.05rem;
        font-weight: 700;
    }

.lp-placa__paso-titulo {
    margin-bottom: .2rem;
    font-family: var(--lp-titular);
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.3;
}

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

.lp-placa__folleto .lp-placa__accion {
    margin-top: 1.5rem;
}

/* ═══ Solución de problemas ════════════════════════════════════════════════ */
.lp-placa__fallas {
    display: grid;
    gap: .6rem;
    counter-reset: lp-falla;
}

.lp-placa__falla {
    overflow: hidden;
    border: 1px solid var(--lp-papel-borde);
    border-radius: .7rem;
    background: var(--lp-papel-tarjeta);
    counter-increment: lp-falla;
}

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

.lp-placa__falla-titulo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .9rem;
    padding: 1rem 1.1rem;
    font-weight: 700;
    line-height: 1.35;
    list-style: none;
    cursor: pointer;
}

    .lp-placa__falla-titulo::-webkit-details-marker {
        display: none;
    }

    .lp-placa__falla-titulo::before {
        content: "F-" counter(lp-falla, decimal-leading-zero);
        content: "F-" counter(lp-falla, decimal-leading-zero) / "";
        padding: .2rem .4rem;
        border-radius: .25rem;
        background: var(--lp-papel-acento);
        color: var(--lp-papel-acento-tinta);
        font-family: var(--lp-mono);
        font-size: .7rem;
        font-weight: 700;
    }

    .lp-placa__falla-titulo::after {
        content: "+";
        content: "+" / "";
        color: var(--lp-papel-acento);
        font-family: var(--lp-mono);
        font-size: 1.35rem;
        line-height: 1;
        transition: rotate .25s ease;
    }

    /* La tarjeta recorta lo que sobresale: el foco se dibuja por dentro. */
    .lp-placa__falla-titulo:focus-visible {
        outline-offset: -3px;
    }

    .lp-placa__falla-titulo:hover {
        background: color-mix(in srgb, var(--lp-papel-acento) 6%, transparent);
    }

.lp-placa__falla[open] .lp-placa__falla-titulo::after {
    rotate: 45deg;
}

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

    .lp-placa__falla-respuesta::before {
        content: "Solución";
        content: "Solución" / "";
        display: block;
        margin-bottom: .25rem;
        color: var(--lp-papel-acento);
        font-family: var(--lp-mono);
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .14em;
        text-transform: uppercase;
    }

@media (min-width: 576px) {
    .lp-placa__falla-respuesta {
        padding-left: 4.6rem;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .lp-placa__falla[open] .lp-placa__falla-respuesta {
        animation: lp-placa-asoma .3s ease both;
    }
}

/* ═══ El cierre: el botón de encendido ═════════════════════════════════════ */
.lp-placa__cierre {
    padding-block: clamp(4.5rem, 10vw, 7rem) clamp(3.5rem, 8vw, 5.5rem);
    text-align: center;
}

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

    .lp-placa__cierre-contenido .lp-placa__lema {
        margin-inline: auto;
        margin-bottom: 0;
    }

.lp-placa__interruptor-maestro {
    position: relative;
    display: grid;
    place-items: center;
    width: 15rem;
    height: 15rem;
    margin-block: 1.75rem 1.5rem;
}

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

.lp-placa__anillo i {
    --lp-n: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    width: .7rem;
    height: .7rem;
    margin: -.35rem;
    border-radius: 50%;
    background: var(--lp-encendido);
    box-shadow: 0 0 .6rem var(--lp-encendido);
    transform: rotate(calc(var(--lp-n) * 30deg)) translateY(-7.1rem);
}

    .lp-placa__anillo i:nth-child(2) {
        --lp-n: 1;
    }

    .lp-placa__anillo i:nth-child(3) {
        --lp-n: 2;
    }

    .lp-placa__anillo i:nth-child(4) {
        --lp-n: 3;
    }

    .lp-placa__anillo i:nth-child(5) {
        --lp-n: 4;
    }

    .lp-placa__anillo i:nth-child(6) {
        --lp-n: 5;
    }

    .lp-placa__anillo i:nth-child(7) {
        --lp-n: 6;
    }

    .lp-placa__anillo i:nth-child(8) {
        --lp-n: 7;
    }

    .lp-placa__anillo i:nth-child(9) {
        --lp-n: 8;
    }

    .lp-placa__anillo i:nth-child(10) {
        --lp-n: 9;
    }

    .lp-placa__anillo i:nth-child(11) {
        --lp-n: 10;
    }

    .lp-placa__anillo i:nth-child(12) {
        --lp-n: 11;
    }

/* Apagado hasta que el cierre se ve; luego los doce leds se prenden en ronda y
   se quedan encendidos. */
@media (prefers-reduced-motion: no-preference) {
    .lp-placa--animada .lp-placa__cierre-contenido:not(.lp-placa--visible) .lp-placa__anillo i {
        background: var(--lp-led-apagado);
        box-shadow: none;
    }

    .lp-placa__cierre-contenido.lp-placa--visible .lp-placa__anillo i {
        animation: lp-placa-ronda .45s ease calc(.3s + var(--lp-n) * 90ms) both;
    }
}

@keyframes lp-placa-ronda {
    from {
        background: var(--lp-led-apagado);
        box-shadow: none;
    }

    60% {
        background: var(--lp-encendido-alto);
        box-shadow: 0 0 1.1rem var(--lp-encendido-alto);
    }

    to {
        background: var(--lp-encendido);
        box-shadow: 0 0 .6rem var(--lp-encendido);
    }
}

.lp-placa__encender,
.lp-placa__encender:hover,
.lp-placa__encender:focus {
    color: var(--lp-encendido-tinta);
}

.lp-placa__encender {
    position: relative;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: .45rem;
    width: 11.5rem;
    height: 11.5rem;
    padding: 1.5rem;
    border: .3rem solid var(--lp-encendido-borde);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--lp-encendido-alto), var(--lp-encendido) 58%, var(--lp-encendido-sombra));
    box-shadow: 0 .5rem 0 var(--lp-encendido-borde), 0 0 2.5rem var(--lp-encendido-halo);
    font-family: var(--lp-titular);
    font-weight: 800;
    line-height: 1.15;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

    .lp-placa__encender:hover {
        transform: translateY(-3px);
        box-shadow: 0 .7rem 0 var(--lp-encendido-borde), 0 0 3.2rem var(--lp-encendido-halo);
    }

    .lp-placa__encender:active {
        transform: translateY(4px);
        box-shadow: 0 .15rem 0 var(--lp-encendido-borde), 0 0 2rem var(--lp-encendido-halo);
    }

.lp-placa__encender-icono {
    width: 2.6rem;
    height: 2.6rem;
}

.lp-placa__encender-texto {
    font-size: 1.02rem;
}

.lp-placa__independencia {
    max-width: 32rem;
    color: var(--lp-serigrafia-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-placa__flotante,
.lp-placa__flotante:hover,
.lp-placa__flotante:focus {
    color: var(--lp-encendido-tinta);
}

.lp-placa__flotante {
    --lp-foco: var(--lp-encendido-borde);
    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 .65rem .95rem;
    border: 2px solid var(--lp-encendido-borde);
    border-radius: 999px;
    background: linear-gradient(180deg, var(--lp-encendido-alto), var(--lp-encendido));
    box-shadow: 0 .8rem 1.6rem -.4rem var(--lp-sombra-honda);
    font-family: var(--lp-titular);
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    transition: opacity .3s ease, translate .3s ease, visibility .3s;
}

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

.lp-placa__flotante-led {
    width: .65rem;
    height: .65rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--lp-encendido-tinta);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--lp-encendido-tinta) 22%, transparent);
}

/* En los teléfonos más angostos el botón, que va a la izquierda, se queda casi
   pegado a la mascota del sitio, que ocupa la esquina derecha: se estrecha un
   poco a lo ancho y en la letra, sin perder el alto donde se pulsa. Por debajo
   de 340px el led, que es adorno, cede además su sitio al texto. */
@media (max-width: 359.98px) {
    .lp-placa__flotante {
        gap: .45rem;
        padding-inline: .75rem .9rem;
        font-size: .95rem;
    }
}

@media (max-width: 339.98px) {
    .lp-placa__flotante {
        padding-left: .9rem;
    }

    .lp-placa__flotante-led {
        display: none;
    }
}

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

/* ═══ Colores forzados ═════════════════════════════════════════════════════
   Con un tema de alto contraste del sistema los fondos desaparecen: los botones
   recuperan su borde y los dibujos que dan información (medidores, pulsos y
   segmentos) conservan su color. */
@media (forced-colors: active) {
    .lp-placa__boton,
    .lp-placa__encender,
    .lp-placa__flotante,
    .lp-placa__chip-boton {
        border: 2px solid ButtonText;
    }

    .lp-placa__h1-cobre {
        background: none;
        color: inherit;
    }

    .lp-placa__medidor-tubo,
    .lp-placa__canal-pulso,
    .lp-placa__canal-pista,
    .lp-placa__medida-cota,
    .lp-placa__digito i,
    .lp-placa__interruptor-palanca {
        forced-color-adjust: none;
    }

    .lp-placa__canal:has(:checked),
    .lp-placa__selector-posicion:has(:checked),
    .lp-placa__interruptor:has(:checked) {
        outline: 2px solid Highlight;
    }
}