/* Landing del Ciclo Semestral — Universidad Nacional Federico Villarreal.

   TODO cuelga de .lp-diario. 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. De ahí el prefijo propio, el bloque de
   neutralización y los !important de la costura con la cabecera.

   CONCEPTO: la landing es un diario impreso. Papel crema, tinta casi negra,
   titulares condensados, cuerpo con serifa, reglas dobles y trama de puntos en
   las fotos. En el tema oscuro sale la "edición nocturna": papel oscuro y tinta
   clara. La imprenta del cierre es oscura en los dos temas.

   TRES FAMILIAS DE COLOR, Y NO SE MEZCLAN:
     · LA UNIVERSIDAD (--lp-uni-*): negro y naranja. Es la franja superior y es
       idéntica en las landings de la Villarreal.
     · EL DIARIO (--lp-papel-*, --lp-tinta-*, --lp-regla-*): se invierten con el
       tema. --lp-acento es el naranja que se usa como texto; --lp-naranja, el de
       los fondos, siempre con texto casi negro encima.
     · LAS MARCAS (--lp-marcador, --lp-sello): el resaltador amarillo y el sello
       rojo. Sobre el amarillo el texto es oscuro en los dos temas.

   Todo el movimiento respeta la preferencia de menos movimiento del sistema. */
.lp-diario {
    /* ── Identidad de la universidad ───────────────────────────────────── */
    --lp-uni: #141414;
    --lp-uni-alto: #262626;
    --lp-uni-naranja: #F26B1D;
    --lp-uni-tinta: #FFFFFF;
    --lp-uni-plata: #D6D6D6;
    --lp-uni-tipo: "Trebuchet MS", "Segoe UI", sans-serif;
    /* ── Papel, tinta y reglas ─────────────────────────────────────────── */
    --lp-papel: #F3EEE2;
    --lp-papel-alto: #FBF8F1;
    --lp-papel-hondo: #E8E1CF;
    --lp-tinta: #1A1814;
    --lp-tinta-suave: #54504A;
    --lp-regla: #1A1814;
    --lp-regla-suave: rgba(26, 24, 20, .22);
    --lp-regla-tenue: rgba(26, 24, 20, .1);
    --lp-grano: rgba(26, 24, 20, .045);
    --lp-sombra: rgba(26, 24, 20, .14);
    --lp-sombra-fuerte: rgba(26, 24, 20, .32);
    --lp-rodillo: #2B2723;
    --lp-rodillo-brillo: #8C8479;
    /* ── Acción y acento ───────────────────────────────────────────────── */
    --lp-naranja: #E4621A;
    --lp-naranja-vivo: #F07A32;
    --lp-naranja-tinta: #160800;
    --lp-acento: #A3420B;
    --lp-acento-inverso: #FF9A55;
    --lp-acento-suave: rgba(228, 98, 26, .14);
    --lp-acento-medio: rgba(228, 98, 26, .34);
    /* ── Marcas: resaltador, sello y trazos del pupiletras ────────────── */
    --lp-marcador: #FFE45C;
    --lp-marcador-tinta: #1A1814;
    --lp-sello: #C4231B;
    --lp-sello-en-marcador: #A8160E;
    --lp-hallado: rgba(228, 98, 26, .4);
    --lp-revelado: rgba(26, 24, 20, .28);
    /* ── Fotografías ───────────────────────────────────────────────────── */
    --lp-foto-trama: rgba(0, 0, 0, .38);
    /* ── Imprenta: el cierre, oscuro en los dos temas ─────────────────── */
    --lp-imprenta: #141210;
    --lp-imprenta-alto: #221E1A;
    --lp-imprenta-tinta: #F4EFE4;
    --lp-imprenta-suave: rgba(244, 239, 228, .76);
    --lp-imprenta-brillo: rgba(228, 98, 26, .3);
    --lp-imprenta-linea: rgba(244, 239, 228, .03);
    --lp-imprenta-sombra: rgba(0, 0, 0, .55);
    --lp-hoja: #F6F1E6;
    --lp-hoja-tinta: #1A1814;
    --lp-hoja-suave: #54504A;
    --lp-hoja-titular: #B51F17;
    /* ── Medidas y tipografías ─────────────────────────────────────────── */
    --lp-ancho: 80rem;
    --lp-texto: Georgia, "Times New Roman", Cambria, serif;
    --lp-cabecera-tipo: Georgia, "Times New Roman", "Bodoni MT", serif;
    --lp-titular: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", "Arial Narrow", "Helvetica Neue", "Roboto Condensed", "sans-serif-condensed", Arial, sans-serif;
    --lp-rotulo: "Segoe UI", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
    --lp-mono: Consolas, "Cascadia Mono", "Courier New", monospace;
    --lp-impacto: Impact, Haettenschweiler, "Franklin Gothic Heavy", "Arial Black", sans-serif;
    margin: 0;
    background: var(--lp-papel);
    color: var(--lp-tinta);
    font-family: var(--lp-texto);
    font-size: 1rem;
    line-height: 1.6;
    color-scheme: light;
}

/* Tema oscuro del sitio: la edición nocturna. El atributo lo pone Akcadmia en un
   ancestro; aquí solo se reasignan las variables, nunca las reglas. */
[data-tema="oscuro"] .lp-diario {
    --lp-uni: #0C0C0C;
    --lp-uni-alto: #1E1E1E;
    --lp-uni-naranja: #FF7A2E;
    --lp-uni-plata: #E3E3E3;
    --lp-papel: #1B1A17;
    --lp-papel-alto: #24221E;
    --lp-papel-hondo: #141311;
    --lp-tinta: #ECE6D8;
    --lp-tinta-suave: #B5AE9F;
    --lp-regla: #ECE6D8;
    --lp-regla-suave: rgba(236, 230, 216, .24);
    --lp-regla-tenue: rgba(236, 230, 216, .1);
    --lp-grano: rgba(236, 230, 216, .03);
    --lp-sombra: rgba(0, 0, 0, .42);
    --lp-sombra-fuerte: rgba(0, 0, 0, .62);
    --lp-rodillo: #5A544B;
    --lp-rodillo-brillo: #C9C1B3;
    --lp-naranja: #FF7A2E;
    --lp-naranja-vivo: #FF8E4D;
    --lp-acento: #FF9A55;
    --lp-acento-inverso: #A3420B;
    --lp-acento-suave: rgba(255, 122, 46, .16);
    --lp-acento-medio: rgba(255, 122, 46, .36);
    --lp-marcador: #E8C93A;
    --lp-sello: #FF6B5E;
    --lp-hallado: rgba(255, 122, 46, .44);
    --lp-revelado: rgba(236, 230, 216, .26);
    --lp-foto-trama: rgba(0, 0, 0, .5);
    --lp-imprenta: #0B0A09;
    --lp-imprenta-alto: #17140F;
    --lp-imprenta-brillo: rgba(255, 122, 46, .22);
    --lp-imprenta-sombra: rgba(0, 0, 0, .7);
    --lp-hoja: #E6DFCF;
    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 distinga. El color va escrito porque aquí se pinta un ancestro
   de .lp-diario, que no ve sus variables. */
body:has(> .lp-diario) {
    margin: 0 !important;
    padding: 0 !important;
    background-color: #141414;
}

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

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

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

/* ═══ Neutralización de los estilos del sitio ══════════════════════════════
   :where aporta cero especificidad: solo derrota las reglas de elemento del sitio
   y queda por debajo de las clases de esta hoja. */
.lp-diario :where(h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, a, span, strong, small, em, label, summary, button, output, aside, article, figure, figcaption, blockquote, caption, table, th, td, input, select, option, optgroup, details, nav) {
    color: inherit;
    font-family: inherit;
}

.lp-diario,
.lp-diario *,
.lp-diario *::before,
.lp-diario *::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-diario [hidden] {
    display: none !important;
}

/* Sin guion no se escribe ninguna fecha: lo que depende de ellas no se enseña
   para no dejar etiquetas con el hueco vacío. */
.lp-diario:not(.lp-diario--animada) [data-depende-fechas] {
    display: none !important;
}

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

.lp-diario__ancho {
    width: min(100% - 2.5rem, var(--lp-ancho));
    margin-inline: auto;
}

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

.lp-diario svg {
    fill: currentColor;
}

.lp-diario__icono {
    width: 1.25em;
    height: 1.25em;
    flex: 0 0 auto;
}

/* Un dato que va después de un texto lleva su punto medio solo si el guion lo
   ha rellenado: sin guion no queda un separador colgando. */
.lp-diario__separado:not(:empty)::before {
    content: " · ";
}

/* Texto que solo leen los lectores de pantalla. */
.lp-diario__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;
}

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

/* ═══ Aparición al desplazar ═══════════════════════════════════════════════
   La clase que oculta la pone el guion: sin él todo se ve desde el principio. */
.lp-diario--animada [data-revelar] {
    opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}

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

/* ═══ Franja institucional ═════════════════════════════════════════════════ */
.lp-diario__institucional {
    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-naranja);
}

.lp-diario__institucional-contenido {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1.25rem;
    padding: .7rem 0 .8rem;
}

.lp-diario__emblema {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: .5rem;
    background: var(--lp-uni-naranja);
    color: var(--lp-uni);
}

    .lp-diario__emblema svg {
        width: 1.5rem;
        height: 1.5rem;
    }

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

.lp-diario__uni-nombre {
    display: block;
    font-family: var(--lp-uni-tipo);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .02em;
}

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

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

/* ═══ Páginas del diario ═══════════════════════════════════════════════════
   El papel lleva un grano de puntos muy tenue. overflow-x: clip recorta lo que
   sobresale sin crear un contenedor de desplazamiento. */
.lp-diario__pagina,
.lp-diario__portada {
    position: relative;
    overflow-x: clip;
    background-color: var(--lp-papel);
    background-image: radial-gradient(var(--lp-grano) 1px, transparent 1.2px);
    background-size: 5px 5px;
}

.lp-diario__pagina {
    padding: clamp(3rem, 7vw, 5.5rem) 0;
    border-top: 1px solid var(--lp-regla-suave);
}

.lp-diario__pagina--honda {
    background-color: var(--lp-papel-hondo);
}

/* El folio corre arriba de cada página, entre una regla doble y una simple. */
.lp-diario__folio {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .2rem 1rem;
    margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
    padding: .45rem 0;
    border-top: 3px double var(--lp-regla);
    border-bottom: 1px solid var(--lp-regla);
    font-family: var(--lp-rotulo);
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lp-tinta-suave);
}

.lp-diario__encabezado {
    max-width: 50rem;
    margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

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

/* El antetítulo es un cintillo de sección: tinta con letras de papel. */
.lp-diario__antetitulo {
    display: inline-block;
    margin: 0 0 .75rem;
    padding: .22rem .65rem;
    background: var(--lp-tinta);
    color: var(--lp-papel);
    font-family: var(--lp-rotulo);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.lp-diario__antetitulo--luz {
    background: var(--lp-naranja);
    color: var(--lp-naranja-tinta);
}

.lp-diario__h2 {
    margin: 0 0 .8rem;
    font-family: var(--lp-titular);
    font-size: clamp(1.9rem, 4.6vw, 3.2rem);
    font-stretch: condensed;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.01em;
    text-wrap: balance;
}

.lp-diario__h3 {
    margin: 0 0 .6rem;
    font-family: var(--lp-titular);
    font-size: clamp(1.3rem, 2.6vw, 1.7rem);
    font-stretch: condensed;
    font-weight: 700;
    line-height: 1.12;
    text-wrap: balance;
}

.lp-diario__entrada {
    margin: 0 0 .5rem;
    font-size: clamp(1.05rem, 1.8vw, 1.2rem);
    line-height: 1.55;
    color: var(--lp-tinta-suave);
}

.lp-diario__entrada--fechas {
    color: var(--lp-tinta);
}

.lp-diario__parrafo {
    margin: 0 0 1rem;
}

.lp-diario__aclaracion {
    margin: .75rem 0 0;
    font-size: .9rem;
    font-style: italic;
    line-height: 1.5;
    color: var(--lp-tinta-suave);
}

.lp-diario__nota-pie {
    margin: 1.75rem 0 0;
    font-size: .88rem;
    font-style: italic;
    color: var(--lp-tinta-suave);
}

/* ═══ Botones ══════════════════════════════════════════════════════════════
   Bloques de imprenta: borde de tinta y sombra dura que se levanta al pasar el
   puntero y se hunde al pulsar. Los :hover repiten color y subrayado porque el
   sitio puede tener reglas a:hover más específicas que una clase sola. */
.lp-diario__boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 3rem;
    padding: .75rem 1.4rem;
    border: 2px solid var(--lp-regla);
    border-radius: 0;
    background: var(--lp-papel-alto);
    color: var(--lp-tinta);
    font-family: var(--lp-rotulo);
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .06em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: 4px 4px 0 var(--lp-regla);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

    .lp-diario__boton:hover {
        color: var(--lp-tinta);
        text-decoration: none;
        transform: translate(-2px, -2px);
        box-shadow: 6px 6px 0 var(--lp-regla);
    }

    .lp-diario__boton:active {
        transform: translate(2px, 2px);
        box-shadow: 2px 2px 0 var(--lp-regla);
    }

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

.lp-diario__boton--naranja {
    background: var(--lp-naranja);
    color: var(--lp-naranja-tinta);
}

    .lp-diario__boton--naranja:hover {
        background: var(--lp-naranja-vivo);
        color: var(--lp-naranja-tinta);
    }

.lp-diario__boton--tinta {
    background: var(--lp-tinta);
    color: var(--lp-papel);
    box-shadow: 4px 4px 0 var(--lp-naranja);
}

    .lp-diario__boton--tinta:hover {
        color: var(--lp-papel);
        box-shadow: 6px 6px 0 var(--lp-naranja);
    }

    .lp-diario__boton--tinta:active {
        box-shadow: 2px 2px 0 var(--lp-naranja);
    }

.lp-diario__boton--linea {
    background: transparent;
}

.lp-diario__boton--ancho {
    width: 100%;
}

/* Llamada a inscribirse al pie de una página. */
.lp-diario__accion-pie {
    margin-top: 2rem;
}

.lp-diario__boton--chico {
    min-height: 2.6rem;
    padding: .5rem 1rem;
    font-size: .8rem;
    box-shadow: 3px 3px 0 var(--lp-regla);
}

.lp-diario__boton--grande {
    min-height: 3.5rem;
    padding: 1rem 2rem;
    font-size: 1.05rem;
}

/* ═══ Fotografías ══════════════════════════════════════════════════════════
   Trama de puntos de periódico encima de cada foto. Las que aparecen al
   desplazar salen en blanco y negro y se colorean cuando entran en pantalla:
   la tinta se seca. */
.lp-diario__foto {
    position: relative;
    display: block;
    margin: 0;
    overflow: hidden;
    background: var(--lp-papel-hondo);
}

    .lp-diario__foto img {
        width: 100%;
    }

    .lp-diario__foto::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image: radial-gradient(circle, var(--lp-foto-trama) 0 .8px, transparent 1.1px);
        background-size: 4px 4px;
        mix-blend-mode: multiply;
        opacity: .16;
    }

.lp-diario--animada [data-revelar] .lp-diario__foto img {
    filter: grayscale(1) contrast(1.15);
    transition: filter 1.6s ease .4s;
}

.lp-diario--animada [data-revelar] .lp-diario__foto::after {
    opacity: .6;
    transition: opacity 1.6s ease .4s;
}

.lp-diario--animada .lp-diario--visible .lp-diario__foto img {
    filter: none;
}

.lp-diario--animada .lp-diario--visible .lp-diario__foto::after {
    opacity: .16;
}

.lp-diario__figura {
    margin: 0;
}

.lp-diario__pie-foto {
    margin: 0;
    padding: .5rem 0 .6rem;
    border-bottom: 1px solid var(--lp-regla-suave);
    font-family: var(--lp-rotulo);
    font-size: .8rem;
    line-height: 1.45;
    color: var(--lp-tinta-suave);
}

/* ═══ PÁGINA 1 · PORTADA ═══════════════════════════════════════════════════ */
.lp-diario__portada {
    padding: clamp(1.25rem, 3vw, 2rem) 0 clamp(2.75rem, 6vw, 4.5rem);
}

/* El cabezal: el nombre al centro y dos orejas a los lados. En pantalla estrecha
   las orejas bajan juntas debajo del nombre. */
.lp-diario__cabezal {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
        "nombre nombre"
        "izquierda derecha"
        "pie pie";
    align-items: center;
    gap: .75rem;
    text-align: center;
}

.lp-diario__cabecera {
    grid-area: nombre;
    margin: 0;
    font-family: var(--lp-cabecera-tipo);
    font-size: clamp(2.1rem, 9vw, 4.6rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    text-wrap: balance;
}

.lp-diario__cabecera-del {
    font-size: .62em;
    font-style: italic;
    font-weight: 400;
}

.lp-diario__oreja {
    margin: 0;
    padding: .45rem .6rem;
    border: 1px solid var(--lp-regla);
    font-family: var(--lp-rotulo);
    font-size: .72rem;
    line-height: 1.35;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.lp-diario__oreja--izquierda {
    grid-area: izquierda;
}

.lp-diario__oreja--derecha {
    grid-area: derecha;
}

.lp-diario__oreja-titulo {
    display: block;
    font-weight: 800;
    color: var(--lp-acento);
}

.lp-diario__cabezal-pie {
    grid-area: pie;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .2rem 1.4rem;
    margin: 0;
    padding: .45rem 0;
    border-top: 1px solid var(--lp-regla);
    border-bottom: 3px double var(--lp-regla);
    font-family: var(--lp-rotulo);
    font-size: .7rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* El cintillo de última hora. Sin guion muestra todas las noticias en línea; con
   él, la máquina de escribir ocupa su sitio y la lista queda para los lectores de
   pantalla. La altura mínima reserva las líneas que ocupará la noticia más larga
   para que la página no salte mientras se teclea. */
.lp-diario__cintillo {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin: 1rem 0 clamp(1.5rem, 3vw, 2.25rem);
    background: var(--lp-tinta);
    color: var(--lp-papel);
}

.lp-diario__cintillo-rotulo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin: 0;
    padding: .45rem .9rem;
    background: var(--lp-naranja);
    color: var(--lp-naranja-tinta);
    font-family: var(--lp-rotulo);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.lp-diario__cintillo-lista {
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 18rem;
    gap: .25rem 1.5rem;
    margin: 0;
    padding: .55rem 1rem;
    list-style: none;
    font-size: .92rem;
    line-height: 1.45;
}

.lp-diario__cintillo--maquina .lp-diario__cintillo-lista {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.lp-diario__cintillo-maquina {
    flex: 1 1 0;
    min-width: 0;
    min-height: calc(1.5em * 3 + 1.1rem);
    overflow-wrap: anywhere;
    margin: 0;
    padding: .55rem 1rem;
    font-family: var(--lp-mono);
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.5;
}

.lp-diario__cursor {
    display: inline-block;
    width: .55em;
    height: 1.05em;
    margin-left: .1em;
    vertical-align: -.15em;
    background: var(--lp-naranja);
    animation: lp-diario-parpadeo 1s steps(1) infinite;
}

.lp-diario__cintillo--quieto .lp-diario__cursor {
    animation: none;
}

@keyframes lp-diario-parpadeo {
    50% {
        opacity: 0;
    }
}

.lp-diario__cintillo-pausa {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2.9rem;
    min-height: 2.75rem;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--lp-regla-suave);
    border-radius: 0;
    background: transparent;
    color: var(--lp-papel);
    cursor: pointer;
}

    .lp-diario__cintillo-pausa:hover {
        background: var(--lp-acento-medio);
    }

    .lp-diario__cintillo-pausa:focus-visible {
        outline: 3px solid var(--lp-naranja);
        outline-offset: -3px;
    }

    .lp-diario__cintillo-pausa .lp-diario__icono--seguir,
    .lp-diario__cintillo-pausa[aria-pressed="true"] .lp-diario__icono--pausa {
        display: none;
    }

    .lp-diario__cintillo-pausa[aria-pressed="true"] .lp-diario__icono--seguir {
        display: block;
    }

/* La rejilla de portada. En móvil: nota, dato y sumario. En tableta la nota
   ocupa el ancho y los recuadros se reparten debajo. En escritorio, tres
   columnas separadas por reglas, como una primera plana. */
.lp-diario__portada-rejilla {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "nota"
        "dato"
        "sumario";
    gap: 2.25rem;
}

.lp-diario__nota {
    grid-area: nota;
    min-width: 0;
}

.lp-diario__dato {
    grid-area: dato;
    min-width: 0;
}

.lp-diario__sumario {
    grid-area: sumario;
    min-width: 0;
}

.lp-diario__titular {
    position: relative;
    margin: 0 0 1rem;
    font-family: var(--lp-titular);
    font-size: clamp(2.3rem, 6.4vw, 4.5rem);
    font-stretch: condensed;
    font-weight: 800;
    line-height: .98;
    letter-spacing: -.015em;
}

.lp-diario__titular-tinta {
    display: block;
    text-wrap: balance;
}

/* El rodillo de imprenta: una banda metálica cruza el titular y deja la tinta a
   su paso. El recorte va en el texto y el rodillo en su padre, así el rodillo no
   se recorta a sí mismo. */
.lp-diario--animada .lp-diario__titular-tinta {
    animation: lp-diario-imprimir 1.2s cubic-bezier(.6, .05, .3, 1) .2s both;
}

.lp-diario--animada .lp-diario__titular::after {
    content: "";
    position: absolute;
    top: -.12em;
    bottom: -.08em;
    left: 0;
    width: 100%;
    background: linear-gradient(90deg, transparent 0, var(--lp-rodillo) .12em, var(--lp-rodillo-brillo) .3em, var(--lp-rodillo) .48em, transparent .6em);
    background-repeat: no-repeat;
    pointer-events: none;
    animation: lp-diario-rodillo 1.2s cubic-bezier(.6, .05, .3, 1) .2s both;
}

@keyframes lp-diario-imprimir {
    from {
        clip-path: inset(-.25em 100% -.25em 0);
    }

    to {
        clip-path: inset(-.25em -.1em -.25em 0);
    }
}

@keyframes lp-diario-rodillo {
    from {
        transform: translateX(-.3em);
        opacity: 1;
    }

    88% {
        opacity: 1;
    }

    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.lp-diario__bajada {
    margin: 0 0 .9rem;
    font-size: clamp(1.08rem, 1.9vw, 1.24rem);
    line-height: 1.55;
    color: var(--lp-tinta-suave);
}

.lp-diario__firma {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 1.1rem;
    font-family: var(--lp-rotulo);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

    .lp-diario__firma::before {
        content: "";
        width: 2rem;
        height: 2px;
        background: var(--lp-naranja);
    }

.lp-diario__figura--portada .lp-diario__foto img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.lp-diario__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
}

/* Recuadros laterales: el dato y el sumario. */
.lp-diario__recuadro-titulo {
    margin: 0 0 .9rem;
    padding-bottom: .4rem;
    border-bottom: 3px solid var(--lp-regla);
    font-family: var(--lp-rotulo);
    font-size: .95rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.lp-diario__ficha {
    margin: 0 0 1.4rem;
}

.lp-diario__ficha-fila {
    padding: .55rem 0;
    border-bottom: 1px dotted var(--lp-regla-suave);
}

    .lp-diario__ficha-fila dt {
        font-family: var(--lp-rotulo);
        font-size: .7rem;
        font-weight: 700;
        line-height: 1.3;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--lp-acento);
    }

    .lp-diario__ficha-fila dd {
        margin: .15rem 0 0;
        font-size: 1rem;
        line-height: 1.4;
    }

.lp-diario__sumario-lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .lp-diario__sumario-lista li {
        border-bottom: 1px solid var(--lp-regla-tenue);
    }

    .lp-diario__sumario-lista a {
        display: flex;
        align-items: center;
        gap: .75rem;
        padding: .55rem 0;
        color: var(--lp-tinta);
        font-size: .98rem;
        font-weight: 700;
        line-height: 1.35;
        text-decoration: none;
        transition: color .15s ease, padding-left .2s ease;
    }

        .lp-diario__sumario-lista a:hover {
            padding-left: .35rem;
            color: var(--lp-acento);
            text-decoration: none;
        }

        .lp-diario__sumario-lista a:focus-visible {
            outline: 3px solid var(--lp-naranja);
            outline-offset: 2px;
        }

.lp-diario__sumario-pagina {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2rem;
    height: 2rem;
    background: var(--lp-tinta);
    color: var(--lp-papel);
    font-family: var(--lp-titular);
    font-size: .95rem;
    font-weight: 800;
    line-height: 1;
}

@media (min-width: 48rem) {
    .lp-diario__cintillo-maquina {
        min-height: calc(1.5em * 2 + 1.1rem);
    }

    .lp-diario__portada-rejilla {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "nota nota"
            "dato sumario";
        column-gap: 2.5rem;
    }
}

@media (min-width: 62rem) {
    .lp-diario__cintillo-maquina {
        min-height: calc(1.5em + 1.1rem);
    }

    /* Las orejas suben a los lados del nombre solo cuando hay sitio para las
       tres piezas; el nombre se ajusta al ancho para no montarse sobre ellas. */
    .lp-diario__cabezal {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        grid-template-areas:
            "izquierda nombre derecha"
            "pie pie pie";
        column-gap: 1.5rem;
    }

    .lp-diario__cabecera {
        font-size: clamp(3.4rem, 5.6vw, 5.6rem);
    }

    .lp-diario__oreja {
        max-width: 11rem;
        padding: .55rem .8rem;
    }

    .lp-diario__oreja--izquierda {
        justify-self: start;
    }

    .lp-diario__oreja--derecha {
        justify-self: end;
    }

    .lp-diario__portada-rejilla {
        grid-template-columns: minmax(0, 3fr) minmax(0, 6.2fr) minmax(0, 3fr);
        grid-template-areas: "sumario nota dato";
        column-gap: 0;
    }

    .lp-diario__sumario {
        padding-right: 1.6rem;
        border-right: 1px solid var(--lp-regla-suave);
    }

    .lp-diario__nota {
        padding-inline: 1.9rem;
    }

    .lp-diario__dato {
        padding-left: 1.6rem;
        border-left: 1px solid var(--lp-regla-suave);
    }
}

/* ═══ PÁGINA 2 · EL EXAMEN ═════════════════════════════════════════════════
   Los lomos son los bordes de las secciones dobladas de un diario. El elegido se
   entinta y apunta con una muesca a la hoja que se despliega debajo. */
.lp-diario__lomos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    margin-bottom: 1.5rem;
}

.lp-diario__lomo {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .1rem;
    min-height: 5rem;
    padding: .55rem .7rem .7rem;
    border: 1px solid var(--lp-regla-suave);
    border-top: 4px solid var(--lp-regla);
    border-radius: 0;
    background: var(--lp-papel-alto);
    color: var(--lp-tinta);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform .18s ease, background-color .18s ease, color .18s ease;
}

    .lp-diario__lomo:hover {
        transform: translateY(-3px);
    }

    .lp-diario__lomo:focus-visible {
        outline: 3px solid var(--lp-naranja);
        outline-offset: 2px;
    }

    .lp-diario__lomo[aria-selected="true"] {
        border-color: var(--lp-tinta);
        border-top-color: var(--lp-naranja);
        background: var(--lp-tinta);
        color: var(--lp-papel);
        transform: none;
    }

        .lp-diario__lomo[aria-selected="true"]::after {
            content: none;
            position: absolute;
            left: 1rem;
            bottom: -.6rem;
            border: .6rem solid transparent;
            border-bottom: 0;
            border-top-color: var(--lp-tinta);
        }

.lp-diario__lomo-bloque {
    font-family: var(--lp-rotulo);
    font-size: .6rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .8;
}

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

.lp-diario__lomo-curso {
    font-size: .76rem;
    font-style: italic;
    line-height: 1.25;
}

/* Sin guion las hojas van una debajo de otra; con él solo se ve la elegida. */
.lp-diario__seccion-hojas {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
}

/* Cada hoja lleva detrás dos hojas más, dibujadas con sombras sólidas. */
.lp-diario__seccion-panel {
    display: grid;
    background: var(--lp-papel-alto);
    border: 1px solid var(--lp-regla);
    box-shadow: 5px 5px 0 -1px var(--lp-papel-alto), 5px 5px 0 0 var(--lp-regla-suave), 10px 10px 0 -1px var(--lp-papel-alto), 10px 10px 0 0 var(--lp-regla-suave);
}

    .lp-diario__seccion-panel:focus-visible {
        outline: 3px solid var(--lp-naranja);
        outline-offset: 4px;
    }

.lp-diario__foto--seccion img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.lp-diario__seccion-texto {
    padding: clamp(1.25rem, 3vw, 2rem);
}

.lp-diario__seccion-rotulo {
    margin: 0 0 .7rem;
    padding-bottom: .4rem;
    border-bottom: 2px solid var(--lp-regla);
    font-family: var(--lp-rotulo);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lp-acento);
}

.lp-diario__temas {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: 0 0 1.2rem;
    padding: 0;
    list-style: none;
}

    .lp-diario__temas li {
        padding: .25rem .65rem;
        border: 1px solid var(--lp-regla);
        background: var(--lp-papel);
        font-family: var(--lp-rotulo);
        font-size: .84rem;
        font-weight: 600;
        line-height: 1.3;
    }

.lp-diario__consejo {
    margin: 0;
    padding: .8rem 1rem;
    border-left: 4px solid var(--lp-naranja);
    background: var(--lp-acento-suave);
    font-size: .95rem;
    line-height: 1.5;
}

    .lp-diario__consejo strong {
        display: block;
        margin-bottom: .2rem;
        font-family: var(--lp-rotulo);
        font-size: .72rem;
        letter-spacing: .1em;
        text-transform: uppercase;
    }

.lp-diario__seccion-panel--entra {
    animation: lp-diario-sacar .5s cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes lp-diario-sacar {
    from {
        opacity: 0;
        transform: translateY(1.25rem) rotate(-.6deg);
    }

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

@media (min-width: 36rem) {
    .lp-diario__lomos {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 48rem) {
    .lp-diario__seccion-panel {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }

    .lp-diario__foto--seccion {
        height: 100%;
    }

        .lp-diario__foto--seccion img {
            height: 100%;
            min-height: 20rem;
            aspect-ratio: auto;
        }
}

@media (min-width: 62rem) {
    .lp-diario__lomos {
        grid-template-columns: repeat(8, minmax(0, 1fr));
        gap: .4rem;
    }

        .lp-diario__lomo[aria-selected="true"]::after {
            content: "";
        }
}

/* ═══ PÁGINA 3 · LAS EDICIONES ═════════════════════════════════════════════
   Arriba, las cinco portadillas en fila (con desplazamiento lateral en pantalla
   estrecha). Debajo, el atril con la edición abierta, que entra pasando la hoja
   en tres dimensiones. */
.lp-diario__portadillas {
    display: grid;
    grid-auto-columns: minmax(9.5rem, 1fr);
    grid-auto-flow: column;
    gap: .75rem;
    margin: 0 -.35rem 1.25rem;
    padding: .5rem .35rem 1rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
}

.lp-diario__portadilla {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
    padding: .65rem .8rem .8rem;
    border: 1px solid var(--lp-regla-suave);
    border-radius: 0;
    background: var(--lp-papel-alto);
    color: var(--lp-tinta);
    box-shadow: 3px 3px 0 var(--lp-regla-suave);
    font: inherit;
    text-align: left;
    cursor: pointer;
    scroll-snap-align: start;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

    .lp-diario__portadilla:hover {
        transform: translateY(-3px) rotate(-.6deg);
    }

    .lp-diario__portadilla:focus-visible {
        outline: 3px solid var(--lp-naranja);
        outline-offset: 2px;
    }

    .lp-diario__portadilla[aria-selected="true"] {
        border-color: var(--lp-regla);
        box-shadow: 4px 4px 0 var(--lp-naranja);
        transform: translateY(-4px);
    }

.lp-diario__portadilla-cabecera {
    width: 100%;
    padding-bottom: .2rem;
    border-bottom: 3px double var(--lp-regla);
    font-family: var(--lp-cabecera-tipo);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.1;
}

.lp-diario__portadilla-numero {
    margin-top: .3rem;
    font-family: var(--lp-titular);
    font-size: 1.6rem;
    font-stretch: condensed;
    font-weight: 800;
    line-height: 1;
}

.lp-diario__portadilla-nombre {
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.2;
}

.lp-diario__portadilla-semanas {
    font-family: var(--lp-rotulo);
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lp-acento);
}

.lp-diario__atril {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.25rem;
    perspective: 1800px;
}

.lp-diario__edicion {
    position: relative;
    padding: clamp(1rem, 3vw, 2rem);
    border: 1px solid var(--lp-regla);
    background: var(--lp-papel-alto);
    box-shadow: 5px 5px 0 -1px var(--lp-papel-alto), 5px 5px 0 0 var(--lp-regla-suave), 10px 10px 0 -1px var(--lp-papel-alto), 10px 10px 0 0 var(--lp-regla-suave);
    transform-origin: left center;
}

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

.lp-diario__edicion-cabezal {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .3rem 1rem;
    margin-bottom: 1.1rem;
    padding-bottom: .5rem;
    border-bottom: 3px double var(--lp-regla);
}

.lp-diario__edicion-cabecera {
    margin: 0;
    font-family: var(--lp-cabecera-tipo);
    font-size: clamp(1.3rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1;
}

.lp-diario__edicion-datos {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem 1rem;
    margin: 0;
    font-family: var(--lp-rotulo);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--lp-tinta-suave);
}

.lp-diario__edicion-cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

.lp-diario__foto--edicion img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.lp-diario__edicion-titular {
    margin: 0 0 .6rem;
    font-family: var(--lp-titular);
    font-size: clamp(1.6rem, 3.6vw, 2.4rem);
    font-stretch: condensed;
    font-weight: 800;
    line-height: 1.05;
    text-wrap: balance;
}

.lp-diario__edicion-fechas {
    margin: 0 0 .8rem;
    font-size: .98rem;
    font-style: italic;
    line-height: 1.4;
    color: var(--lp-acento);
}

.lp-diario__edicion-lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .lp-diario__edicion-lista li {
        position: relative;
        padding: .45rem 0 .45rem 1.6rem;
        border-top: 1px dotted var(--lp-regla-suave);
    }

        .lp-diario__edicion-lista li::before {
            content: "";
            position: absolute;
            left: .2rem;
            top: .95rem;
            width: .55rem;
            height: .55rem;
            background: var(--lp-naranja);
            transform: rotate(45deg);
        }

.lp-diario__edicion--adelante {
    animation: lp-diario-hoja-adelante .7s cubic-bezier(.2, .7, .2, 1) both;
}

.lp-diario__edicion--atras {
    transform-origin: right center;
    animation: lp-diario-hoja-atras .7s cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes lp-diario-hoja-adelante {
    from {
        opacity: .2;
        transform: rotateY(-72deg);
    }

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

@keyframes lp-diario-hoja-atras {
    from {
        opacity: .2;
        transform: rotateY(72deg);
    }

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

.lp-diario__pasar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: .75rem;
    margin-top: 1.75rem;
}

    .lp-diario__pasar > :last-child {
        justify-self: end;
    }

.lp-diario__pasar-boton {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: .35rem;
    min-height: 2.75rem;
    padding: .5rem .9rem;
    border: 2px solid var(--lp-regla);
    border-radius: 0;
    background: var(--lp-papel-alto);
    color: var(--lp-tinta);
    box-shadow: 3px 3px 0 var(--lp-regla);
    font-family: var(--lp-rotulo);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}

    .lp-diario__pasar-boton:hover:not(:disabled) {
        transform: translate(-2px, -2px);
        box-shadow: 5px 5px 0 var(--lp-regla);
    }

    .lp-diario__pasar-boton:focus-visible {
        outline: 3px solid var(--lp-naranja);
        outline-offset: 3px;
    }

    .lp-diario__pasar-boton:disabled {
        opacity: .42;
        box-shadow: none;
        cursor: not-allowed;
    }

.lp-diario__pasar-estado {
    margin: 0;
    font-family: var(--lp-titular);
    font-size: 1.05rem;
    font-stretch: condensed;
    font-weight: 800;
    white-space: nowrap;
}

/* La tira: una celda por semana del ciclo. Las ya pasadas en tinta suave, las de
   la edición abierta en naranja. */
.lp-diario__tira {
    margin-top: 1.5rem;
}

.lp-diario__tira-texto {
    margin: 0 0 .5rem;
    font-family: var(--lp-rotulo);
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.4;
}

.lp-diario__tira-semanas {
    display: flex;
    gap: 3px;
}

.lp-diario__tira-semana {
    flex: 1 1 0;
    min-width: 0;
    height: .8rem;
    border: 1px solid var(--lp-regla-suave);
    transition: background-color .35s ease, border-color .35s ease;
}

.lp-diario__tira-semana--hecha {
    border-color: var(--lp-tinta-suave);
    background: var(--lp-tinta-suave);
}

.lp-diario__tira-semana--actual {
    border-color: var(--lp-naranja);
    background: var(--lp-naranja);
}

@media (min-width: 48rem) {
    .lp-diario__edicion-cuerpo {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
        gap: 1.75rem;
    }

    .lp-diario__portadillas {
        grid-auto-columns: minmax(0, 1fr);
        overflow: visible;
    }
}

/* ═══ PÁGINA 4 · CLASIFICADOS ══════════════════════════════════════════════
   Los avisos corren en columnas de periódico. En escritorio la bandeja de
   recortes acompaña fija a la derecha. */
.lp-diario__rubros-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.25rem;
    margin-bottom: 1.75rem;
}

.lp-diario__rubros {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.lp-diario__rubro {
    min-height: 2.5rem;
    padding: .4rem .85rem;
    border: 1px solid var(--lp-regla);
    border-radius: 0;
    background: var(--lp-papel-alto);
    color: var(--lp-tinta);
    font-family: var(--lp-rotulo);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

    .lp-diario__rubro:hover {
        background: var(--lp-acento-suave);
    }

    .lp-diario__rubro:focus-visible {
        outline: 3px solid var(--lp-naranja);
        outline-offset: 2px;
    }

    .lp-diario__rubro[aria-pressed="true"],
    .lp-diario__rubro[aria-pressed="true"]:hover {
        background: var(--lp-tinta);
        color: var(--lp-papel);
    }

.lp-diario__rubros-cuenta {
    margin: 0;
    font-size: .92rem;
    font-style: italic;
    color: var(--lp-tinta-suave);
}

.lp-diario__ir-bandeja {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 2.5rem;
    padding: .35rem .8rem;
    border: 2px dashed var(--lp-acento);
    color: var(--lp-acento);
    font-family: var(--lp-rotulo);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-decoration: none;
}

    .lp-diario__ir-bandeja:hover {
        color: var(--lp-acento);
        background: var(--lp-acento-suave);
        text-decoration: none;
    }

    .lp-diario__ir-bandeja:focus-visible {
        outline: 3px solid var(--lp-naranja);
        outline-offset: 2px;
    }

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

.lp-diario__avisos {
    column-count: 1;
    column-gap: 1.25rem;
    column-rule: 1px solid var(--lp-regla-suave);
}

.lp-diario__aviso {
    position: relative;
    margin: 0 0 1.25rem;
    padding: 1rem 1rem 1.1rem;
    border: 1px solid var(--lp-regla-suave);
    background: var(--lp-papel-alto);
    break-inside: avoid;
    transition: transform .3s ease, box-shadow .3s ease;
}

.lp-diario__aviso--recuadro {
    border: 4px double var(--lp-regla);
}

.lp-diario__aviso--negativo {
    border-color: var(--lp-tinta);
    background: var(--lp-tinta);
    color: var(--lp-papel);
}

.lp-diario__aviso--destacado {
    border: 2px solid var(--lp-regla);
    box-shadow: inset 0 6px 0 var(--lp-naranja);
    padding-top: 1.3rem;
}

.lp-diario__aviso-rubro {
    margin: 0 0 .35rem;
    font-family: var(--lp-rotulo);
    font-size: .64rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--lp-acento);
}

.lp-diario__aviso--negativo .lp-diario__aviso-rubro {
    color: var(--lp-acento-inverso);
}

.lp-diario__aviso-titulo {
    margin: 0 0 .35rem;
    font-size: 1.12rem;
    font-style: italic;
    font-weight: 700;
    line-height: 1.2;
}

.lp-diario__aviso-busca {
    display: block;
    font-family: var(--lp-impacto);
    font-size: 1.75rem;
    font-style: normal;
    font-weight: 700;
    font-synthesis: none;
    line-height: 1;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.lp-diario__aviso-facultad {
    margin: .5rem 0 .35rem;
    font-family: var(--lp-rotulo);
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.lp-diario__aviso-texto {
    margin: 0 0 .6rem;
    font-size: .95rem;
    line-height: 1.5;
}

.lp-diario__aviso-carreras {
    margin: 0 0 .85rem;
    padding: .5rem 0 0;
    border-top: 1px dotted currentColor;
    list-style: none;
    font-size: .88rem;
    line-height: 1.5;
}

    .lp-diario__aviso-carreras li {
        display: inline;
    }

        .lp-diario__aviso-carreras li:not(:last-child)::after {
            content: " · ";
            content: " · " / "";
            font-weight: 700;
        }

.lp-diario__recortar {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 2.4rem;
    padding: .3rem .75rem;
    border: 1px dashed currentColor;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-family: var(--lp-rotulo);
    font-size: .74rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

    .lp-diario__recortar:hover {
        background: var(--lp-acento-suave);
    }

    .lp-diario__recortar:focus-visible {
        outline: 3px solid var(--lp-naranja);
        outline-offset: 2px;
    }

    .lp-diario__recortar--activo,
    .lp-diario__recortar--activo:hover {
        border-style: solid;
        border-color: var(--lp-naranja);
        background: var(--lp-naranja);
        color: var(--lp-naranja-tinta);
    }

/* El aviso recortado se despega del papel: contorno punteado, un leve giro y unas
   tijeras que recorren el borde superior una sola vez. */
.lp-diario__aviso--recortado {
    outline: 2px dashed var(--lp-acento);
    outline-offset: 5px;
    transform: rotate(-.7deg);
    box-shadow: 6px 8px 0 var(--lp-sombra);
}

.lp-diario__aviso--destacado.lp-diario__aviso--recortado {
    box-shadow: inset 0 6px 0 var(--lp-naranja), 6px 8px 0 var(--lp-sombra);
}

.lp-diario__aviso--tijeras::before {
    content: "✂";
    content: "✂" / "";
    position: absolute;
    top: calc(-7px - .6em);
    left: -.4rem;
    font-family: var(--lp-rotulo);
    font-size: 1.15rem;
    line-height: 1;
    color: var(--lp-acento);
    pointer-events: none;
    animation: lp-diario-tijeras .9s linear both;
}

@keyframes lp-diario-tijeras {
    from {
        left: -.4rem;
        opacity: 1;
    }

    85% {
        opacity: 1;
    }

    to {
        left: calc(100% - .6rem);
        opacity: 0;
    }
}

.lp-diario__bandeja {
    padding: 1.1rem;
    border: 2px dashed var(--lp-regla);
    background: var(--lp-papel-alto);
}

.lp-diario__bandeja-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: 0 0 .75rem;
    font-family: var(--lp-titular);
    font-size: 1.35rem;
    font-stretch: condensed;
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
}

    .lp-diario__bandeja-titulo:focus {
        outline: none;
    }

    .lp-diario__bandeja-titulo:focus-visible {
        outline: 3px solid var(--lp-naranja);
        outline-offset: 3px;
    }

.lp-diario__bandeja-cuenta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    height: 2.1rem;
    padding: 0 .45rem;
    border-radius: 999px;
    background: var(--lp-naranja);
    color: var(--lp-naranja-tinta);
    font-family: var(--lp-rotulo);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
}

.lp-diario__bandeja-cuenta--salta {
    animation: lp-diario-salto .45s ease;
}

@keyframes lp-diario-salto {
    40% {
        transform: scale(1.35);
    }
}

.lp-diario__bandeja-vacia {
    margin: 0 0 1rem;
    font-size: .92rem;
    font-style: italic;
    line-height: 1.5;
    color: var(--lp-tinta-suave);
}

.lp-diario__bandeja-lista {
    display: grid;
    gap: .45rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.lp-diario__recorte {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .35rem .35rem .35rem .7rem;
    border: 1px solid var(--lp-regla-suave);
    background: var(--lp-papel);
    font-family: var(--lp-rotulo);
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.3;
    animation: lp-diario-pegar .35s ease both;
}

@keyframes lp-diario-pegar {
    from {
        opacity: 0;
        transform: translateX(-.75rem) rotate(-2deg);
    }

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

.lp-diario__recorte-quitar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--lp-tinta-suave);
    cursor: pointer;
}

    .lp-diario__recorte-quitar:hover {
        color: var(--lp-sello);
    }

    .lp-diario__recorte-quitar:focus-visible {
        outline: 3px solid var(--lp-naranja);
        outline-offset: -3px;
    }

    .lp-diario__recorte-quitar svg {
        width: 1.1rem;
        height: 1.1rem;
    }

.lp-diario__bandeja-texto {
    margin: 0 0 1rem;
    font-size: .92rem;
    line-height: 1.5;
}

@media (min-width: 36rem) {
    .lp-diario__avisos {
        column-count: 2;
    }
}

@media (min-width: 62rem) {
    .lp-diario__clasificados-cuerpo {
        grid-template-columns: minmax(0, 1fr) 17rem;
        align-items: start;
    }

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

    .lp-diario__ir-bandeja {
        display: none;
    }
}

@media (min-width: 75rem) {
    .lp-diario__avisos {
        column-count: 3;
    }
}

/* ═══ PÁGINA 5 · PASATIEMPOS ═══════════════════════════════════════════════
   La rejilla es cuadrada: doce columnas de celdas cuadradas. El dibujo de los
   trazos es un SVG de 12 × 12 unidades montado debajo de las letras, así una
   celda mide una unidad y el trazo escala con la rejilla. */
.lp-diario__pupiletras {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

.lp-diario__sopa-marco {
    justify-self: center;
    width: 100%;
    max-width: 36rem;
    padding: clamp(.4rem, 2vw, 1rem);
    border: 2px solid var(--lp-regla);
    background: var(--lp-papel-alto);
    box-shadow: 6px 6px 0 var(--lp-regla);
}

.lp-diario__sopa {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.lp-diario__sopa-fila {
    display: contents;
}

    .lp-diario__sopa-fila > span,
    .lp-diario__letra {
        display: flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 1;
        font-family: var(--lp-mono);
        font-size: clamp(.82rem, 3.4vw, 1.3rem);
        font-weight: 700;
        line-height: 1;
        text-transform: uppercase;
    }

.lp-diario__letra {
    position: relative;
    z-index: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: .3rem;
    background: transparent;
    color: var(--lp-tinta);
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease, transform .12s ease;
}

    .lp-diario__letra:hover {
        background: var(--lp-acento-suave);
    }

    .lp-diario__letra:focus-visible {
        z-index: 2;
        outline: 2px solid var(--lp-naranja);
        outline-offset: -2px;
    }

.lp-diario__letra--trazo {
    background: var(--lp-acento-suave);
}

.lp-diario__letra--inicio,
.lp-diario__letra--inicio:hover {
    background: var(--lp-naranja);
    color: var(--lp-naranja-tinta);
    transform: scale(1.08);
}

.lp-diario__sopa-trazos {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.lp-diario__sopa-trazo {
    fill: none;
    stroke: var(--lp-hallado);
    stroke-width: .8;
    stroke-linecap: round;
}

.lp-diario__sopa-trazo--nuevo {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: lp-diario-trazar .55s ease forwards;
}

@keyframes lp-diario-trazar {
    to {
        stroke-dashoffset: 0;
    }
}

.lp-diario__sopa-trazo--revelado {
    stroke: var(--lp-revelado);
    stroke-dasharray: .3 .22;
}

.lp-diario__sopa-trazo--previa {
    stroke: var(--lp-acento-medio);
    stroke-width: .66;
}

.lp-diario__sopa-ayuda {
    margin: 0 0 1rem;
    font-family: var(--lp-rotulo);
    font-size: .84rem;
    line-height: 1.45;
    color: var(--lp-tinta-suave);
}

.lp-diario__palabras {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .3rem 1rem;
    margin: 0 0 1.1rem;
    padding: 0;
    list-style: none;
}

.lp-diario__palabra {
    position: relative;
    padding: .4rem .3rem .4rem 1.9rem;
    border-bottom: 1px dotted var(--lp-regla-suave);
    font-family: var(--lp-rotulo);
    font-size: .98rem;
    font-weight: 700;
    line-height: 1.3;
    transition: color .3s ease;
}

    .lp-diario__palabra::before {
        content: "";
        position: absolute;
        left: .25rem;
        top: 50%;
        width: 1.1rem;
        height: 1.1rem;
        margin-top: -.55rem;
        border: 2px solid var(--lp-regla);
        transition: background-color .3s ease, border-color .3s ease;
    }

.lp-diario__palabra--hallada,
.lp-diario__palabra--revelada {
    color: var(--lp-tinta-suave);
    text-decoration: line-through;
    text-decoration-thickness: 3px;
    text-decoration-color: var(--lp-naranja);
}

.lp-diario__palabra--revelada {
    text-decoration-style: dotted;
    text-decoration-color: var(--lp-tinta-suave);
}

    .lp-diario__palabra--hallada::before {
        border-color: var(--lp-naranja);
        background: var(--lp-naranja);
    }

    .lp-diario__palabra--hallada::after {
        content: "";
        position: absolute;
        left: .6rem;
        top: 50%;
        width: .38rem;
        height: .7rem;
        margin-top: -.45rem;
        border-right: 2px solid var(--lp-naranja-tinta);
        border-bottom: 2px solid var(--lp-naranja-tinta);
        transform: rotate(45deg);
    }

.lp-diario__sopa-cuenta {
    margin: 0 0 .25rem;
    font-family: var(--lp-titular);
    font-size: 1.15rem;
    font-stretch: condensed;
    font-weight: 800;
}

.lp-diario__sopa-estado {
    min-height: 3em;
    margin: 0 0 1rem;
    font-size: .95rem;
    font-style: italic;
    line-height: 1.5;
    color: var(--lp-tinta-suave);
}

.lp-diario__sopa-botones {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.4rem;
}

/* El pupiletras completo se celebra con un recuadro resaltado. Sobre el amarillo
   las reglas pasan a tinta oscura en los dos temas. */
.lp-diario__sopa-final {
    --lp-regla: var(--lp-marcador-tinta);
    padding: 1.2rem;
    border: 2px solid var(--lp-marcador-tinta);
    background: var(--lp-marcador);
    color: var(--lp-marcador-tinta);
    animation: lp-diario-aparecer-final .5s cubic-bezier(.3, 1.4, .5, 1) both;
}

@keyframes lp-diario-aparecer-final {
    from {
        opacity: 0;
        transform: scale(.9) rotate(-1.5deg);
    }

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

.lp-diario__sopa-final-titulo {
    margin: 0 0 .4rem;
    font-family: var(--lp-titular);
    font-size: 1.6rem;
    font-stretch: condensed;
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
}

@media (max-width: 22.5rem) {
    .lp-diario__sopa-marco {
        width: calc(100% + 1rem);
        max-width: none;
        margin-inline: -.5rem;
    }
}

@media (min-width: 62rem) {
    .lp-diario__pupiletras {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: 3rem;
    }
}

/* ═══ PÁGINA 6 · LA LISTA ══════════════════════════════════════════════════
   La tabla va en un marco con desplazamiento lateral: en pantalla estrecha se
   mueve la tabla, no la página. La fila del visitante se resalta con un
   marcador que la recorre de izquierda a derecha y termina con un sello. */
.lp-diario__lista {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
}

.lp-diario__lista-lado,
.lp-diario__lista-principal {
    min-width: 0;
}

.lp-diario__lista-lado {
    order: 2;
}

.lp-diario__nota-regla {
    margin: 1rem 0 0;
    padding: .8rem 1rem;
    border: 1px solid var(--lp-regla);
    background: var(--lp-papel-alto);
    font-size: .92rem;
    line-height: 1.5;
}

.lp-diario__probar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.lp-diario__etiqueta {
    display: block;
    margin-bottom: .35rem;
    font-family: var(--lp-rotulo);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.lp-diario__campo {
    display: block;
    width: 100%;
    min-height: 3rem;
    padding: .6rem .8rem;
    border: 2px solid var(--lp-regla);
    border-radius: 0;
    background: var(--lp-papel-alto);
    color: var(--lp-tinta);
    font-family: var(--lp-rotulo);
    font-size: 1rem;
    line-height: 1.3;
}

    .lp-diario__campo:focus {
        outline: 3px solid var(--lp-naranja);
        outline-offset: 1px;
    }

.lp-diario__tabla-marco {
    margin-bottom: 1rem;
    overflow-x: auto;
    border: 2px solid var(--lp-regla);
    background: var(--lp-papel-alto);
}

    .lp-diario__tabla-marco:focus-visible {
        outline: 3px solid var(--lp-naranja);
        outline-offset: 2px;
    }

.lp-diario__tabla {
    width: 100%;
    min-width: 32rem;
    border-collapse: collapse;
    font-family: var(--lp-mono);
    font-size: .92rem;
    line-height: 1.4;
}

.lp-diario__tabla-leyenda {
    caption-side: top;
    padding: .75rem .9rem;
    border-bottom: 2px solid var(--lp-regla);
    font-family: var(--lp-rotulo);
    font-size: .95rem;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: .05em;
    text-align: left;
    text-transform: uppercase;
    color: var(--lp-tinta);
}

.lp-diario__tabla-marca {
    display: inline-block;
    margin-right: .5rem;
    padding: .05rem .45rem;
    border: 2px solid var(--lp-sello);
    color: var(--lp-sello);
    font-size: .7rem;
    letter-spacing: .12em;
    transform: rotate(-3deg);
}

.lp-diario__tabla th,
.lp-diario__tabla td {
    padding: .6rem .9rem;
    border-bottom: 1px solid var(--lp-regla-tenue);
    text-align: left;
    vertical-align: middle;
}

.lp-diario__tabla thead th {
    background: var(--lp-papel);
    font-family: var(--lp-rotulo);
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lp-tinta-suave);
}

.lp-diario__tabla tbody tr:last-child > * {
    border-bottom: 0;
}

.lp-diario__fila-tuya td {
    background-image: linear-gradient(var(--lp-marcador), var(--lp-marcador));
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: var(--lp-marcador-tinta);
    font-weight: 700;
}

.lp-diario--animada .lp-diario__fila-tuya td {
    background-size: 0 100%;
    color: inherit;
    transition: background-size .28s linear, color .2s ease;
}

    .lp-diario--animada .lp-diario__fila-tuya td:nth-child(2) {
        transition-delay: .28s;
    }

    .lp-diario--animada .lp-diario__fila-tuya td:nth-child(3) {
        transition-delay: .56s;
    }

    .lp-diario--animada .lp-diario__fila-tuya td:nth-child(4) {
        transition-delay: .84s;
    }

.lp-diario--animada .lp-diario__fila-tuya.lp-diario--visible td {
    background-size: 100% 100%;
    color: var(--lp-marcador-tinta);
}

.lp-diario__tu-nombre {
    font-weight: 800;
    letter-spacing: .02em;
    overflow-wrap: anywhere;
}

.lp-diario__sello {
    display: inline-block;
    padding: .12rem .55rem;
    border: 2px solid var(--lp-sello-en-marcador);
    border-radius: .2rem;
    color: var(--lp-sello-en-marcador);
    font-family: var(--lp-rotulo);
    font-size: .78rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .14em;
    text-transform: uppercase;
    transform: rotate(-7deg);
}

.lp-diario--animada .lp-diario__fila-tuya .lp-diario__sello {
    opacity: 0;
}

.lp-diario--animada .lp-diario__fila-tuya.lp-diario--visible .lp-diario__sello {
    animation: lp-diario-sellar .5s cubic-bezier(.3, 1.6, .5, 1) 1.15s both;
}

/* Dos nombres de animación iguales para volver a sellar cada vez que cambia la
   carrera: al cambiar el nombre, el navegador la arranca de nuevo. */
.lp-diario--animada .lp-diario__fila-tuya.lp-diario--visible .lp-diario__sello--golpe-a {
    animation: lp-diario-resellar-a .5s cubic-bezier(.3, 1.6, .5, 1) both;
}

.lp-diario--animada .lp-diario__fila-tuya.lp-diario--visible .lp-diario__sello--golpe-b {
    animation: lp-diario-resellar-b .5s cubic-bezier(.3, 1.6, .5, 1) both;
}

@keyframes lp-diario-sellar {
    from {
        opacity: 0;
        transform: scale(2.4) rotate(-16deg);
    }

    70% {
        opacity: 1;
        transform: scale(.92) rotate(-6deg);
    }

    to {
        opacity: 1;
        transform: rotate(-7deg);
    }
}

@keyframes lp-diario-resellar-a {
    from {
        opacity: 0;
        transform: scale(2.4) rotate(-16deg);
    }

    70% {
        opacity: 1;
        transform: scale(.92) rotate(-6deg);
    }

    to {
        opacity: 1;
        transform: rotate(-7deg);
    }
}

@keyframes lp-diario-resellar-b {
    from {
        opacity: 0;
        transform: scale(2.4) rotate(-16deg);
    }

    70% {
        opacity: 1;
        transform: scale(.92) rotate(-6deg);
    }

    to {
        opacity: 1;
        transform: rotate(-7deg);
    }
}

.lp-diario__lista-principal .lp-diario__aclaracion {
    margin: 0 0 1.25rem;
}

@media (min-width: 36rem) {
    .lp-diario__probar {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@media (min-width: 62rem) {
    .lp-diario__lista {
        grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
        align-items: start;
        gap: 2.75rem;
    }

    .lp-diario__lista-lado {
        order: 0;
    }
}

/* ═══ PÁGINA 7 · EDITORIAL ═════════════════════════════════════════════════ */
.lp-diario__editorial {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
}

.lp-diario__columnas {
    column-count: 1;
    column-gap: 2.25rem;
    column-rule: 1px solid var(--lp-regla-suave);
}

    .lp-diario__columnas .lp-diario__parrafo {
        font-size: 1.04rem;
        line-height: 1.7;
        hyphens: auto;
    }

.lp-diario__parrafo--capitular::first-letter {
    float: left;
    margin: .06em .12em 0 0;
    font-family: var(--lp-cabecera-tipo);
    font-size: 4.2em;
    font-weight: 700;
    line-height: .8;
    color: var(--lp-acento);
}

.lp-diario__cita {
    margin: 1.25rem 0 1.5rem;
    padding: 1.1rem 0;
    border-top: 3px solid var(--lp-regla);
    border-bottom: 1px solid var(--lp-regla);
    text-align: center;
    column-span: all;
}

    .lp-diario__cita p {
        margin: 0;
        font-family: var(--lp-cabecera-tipo);
        font-size: clamp(1.35rem, 3vw, 2rem);
        font-style: italic;
        font-weight: 700;
        line-height: 1.25;
        text-wrap: balance;
    }

        .lp-diario__cita p::before {
            content: "«";
            color: var(--lp-acento);
        }

        .lp-diario__cita p::after {
            content: "»";
            color: var(--lp-acento);
        }

.lp-diario__editorial-lado {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-content: start;
}

.lp-diario__figura--editorial .lp-diario__foto img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.lp-diario__cifras {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    margin: 0;
    border: 2px solid var(--lp-regla);
    background: var(--lp-papel-alto);
}

.lp-diario__cifra {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: .25rem;
    padding: .9rem 1rem;
    border-right: 1px solid var(--lp-regla-suave);
    border-bottom: 1px solid var(--lp-regla-suave);
}

    .lp-diario__cifra:nth-child(2n) {
        border-right: 0;
    }

    .lp-diario__cifra:nth-last-child(-n + 2) {
        border-bottom: 0;
    }

    .lp-diario__cifra dt {
        font-family: var(--lp-rotulo);
        font-size: .7rem;
        font-weight: 700;
        line-height: 1.3;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--lp-tinta-suave);
    }

.lp-diario__cifra-numero {
    margin: 0;
    font-family: var(--lp-titular);
    font-size: clamp(2rem, 4vw, 2.6rem);
    font-stretch: condensed;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--lp-acento);
}

@media (min-width: 48rem) {
    .lp-diario__columnas {
        column-count: 2;
    }

    .lp-diario__editorial-lado {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }
}

@media (min-width: 62rem) {
    .lp-diario__columnas .lp-diario__parrafo {
        text-align: justify;
    }

    .lp-diario__editorial {
        grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
        align-items: start;
        gap: 3rem;
    }

    .lp-diario__editorial-lado {
        grid-template-columns: minmax(0, 1fr);
        padding-left: 2rem;
        border-left: 1px solid var(--lp-regla-suave);
    }
}

/* ═══ PÁGINA 8 · TARIFAS Y AVISO A LA FAMILIA ══════════════════════════════
   La pegatina de precio se pega de golpe cuando aparece la columna. */
.lp-diario__tarifas {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
}

.lp-diario__tarifas-principal {
    position: relative;
    min-width: 0;
}

.lp-diario__etiqueta-precio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 8.5rem;
    height: 8.5rem;
    margin: .75rem 0 1.75rem .5rem;
    border-radius: 50%;
    background: var(--lp-naranja);
    color: var(--lp-naranja-tinta);
    box-shadow: 0 0 0 4px var(--lp-papel-hondo), 0 0 0 6px var(--lp-naranja), 5px 8px 0 6px var(--lp-sombra);
    text-align: center;
    transform: rotate(-10deg);
}

.lp-diario--animada .lp-diario__tarifas-principal.lp-diario--visible .lp-diario__etiqueta-precio {
    animation: lp-diario-pegatina .55s cubic-bezier(.3, 1.5, .5, 1) .35s both;
}

@keyframes lp-diario-pegatina {
    from {
        opacity: 0;
        transform: scale(1.8) rotate(-30deg);
    }

    to {
        opacity: 1;
        transform: rotate(-10deg);
    }
}

.lp-diario__etiqueta-precio-monto {
    font-family: var(--lp-impacto);
    font-size: 2.4rem;
    font-weight: 700;
    font-synthesis: none;
    line-height: 1;
}

.lp-diario__etiqueta-precio-texto {
    margin-top: .2rem;
    font-family: var(--lp-rotulo);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* Dos columnas de texto que se parten bien: el tarifario cabe en cualquier
   ancho y no necesita desplazarse. */
.lp-diario__tabla--tarifas {
    min-width: 0;
    font-family: var(--lp-texto);
    font-size: .98rem;
}

    .lp-diario__tabla--tarifas tbody th {
        width: 38%;
        font-family: var(--lp-rotulo);
        font-size: .86rem;
        font-weight: 700;
        line-height: 1.35;
    }

    .lp-diario__tabla--tarifas tbody tr:nth-child(-n + 2) td {
        font-weight: 700;
        color: var(--lp-acento);
    }

.lp-diario__familia {
    border: 2px solid var(--lp-regla);
    background: var(--lp-papel-alto);
    box-shadow: 6px 6px 0 var(--lp-regla);
}

.lp-diario__foto--familia img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.lp-diario__familia-texto {
    padding: 1.25rem 1.4rem 1.5rem;
}

.lp-diario__familia-rotulo {
    display: inline-block;
    margin: 0 0 .5rem;
    padding: .15rem .55rem;
    background: var(--lp-tinta);
    color: var(--lp-papel);
    font-family: var(--lp-rotulo);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.lp-diario__familia-lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .lp-diario__familia-lista li {
        position: relative;
        padding: .55rem 0 .55rem 1.75rem;
        border-top: 1px dotted var(--lp-regla-suave);
        line-height: 1.5;
    }

        .lp-diario__familia-lista li::before {
            content: "";
            position: absolute;
            left: .35rem;
            top: .85rem;
            width: .4rem;
            height: .75rem;
            border-right: 3px solid var(--lp-acento);
            border-bottom: 3px solid var(--lp-acento);
            transform: rotate(45deg);
        }

@media (min-width: 48rem) {
    .lp-diario__tarifas-principal .lp-diario__h2 {
        padding-right: 10rem;
    }

    .lp-diario__etiqueta-precio {
        position: absolute;
        top: -.5rem;
        right: .5rem;
        margin: 0;
    }

    .lp-diario__familia {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }

    .lp-diario__foto--familia {
        height: 100%;
    }

        .lp-diario__foto--familia img {
            height: 100%;
            aspect-ratio: auto;
        }
}

@media (min-width: 62rem) {
    .lp-diario__tarifas {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        align-items: start;
        gap: 3rem;
    }

    .lp-diario__familia {
        display: block;
    }

    .lp-diario__foto--familia {
        height: auto;
    }

        .lp-diario__foto--familia img {
            height: auto;
            aspect-ratio: 4 / 3;
        }
}

/* ═══ PÁGINA 9 · CARTAS A LA REDACCIÓN ═════════════════════════════════════
   El marcador del summary se reemplaza por una flecha hecha con dos bordes que
   gira media vuelta al abrir. */
.lp-diario__cartas {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .9rem;
}

.lp-diario__carta {
    border: 1px solid var(--lp-regla-suave);
    border-left: 5px solid var(--lp-regla);
    background: var(--lp-papel-alto);
    transition: border-color .2s ease, box-shadow .2s ease;
}

    .lp-diario__carta[open] {
        border-left-color: var(--lp-naranja);
        box-shadow: 5px 5px 0 var(--lp-sombra);
    }

.lp-diario__carta-pregunta {
    position: relative;
    display: block;
    padding: 1rem 3.4rem 1rem 1.1rem;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.4;
    list-style: none;
    cursor: pointer;
}

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

    .lp-diario__carta-pregunta::marker {
        content: "";
    }

    .lp-diario__carta-pregunta::after {
        content: "";
        position: absolute;
        right: 1.3rem;
        top: 50%;
        width: .7rem;
        height: .7rem;
        margin-top: -.5rem;
        border-right: 3px solid var(--lp-acento);
        border-bottom: 3px solid var(--lp-acento);
        transform: rotate(45deg);
        transition: transform .25s ease, margin-top .25s ease;
    }

    .lp-diario__carta-pregunta:focus-visible {
        outline: 3px solid var(--lp-naranja);
        outline-offset: -3px;
    }

.lp-diario__carta[open] > .lp-diario__carta-pregunta::after {
    margin-top: -.15rem;
    transform: rotate(-135deg);
}

.lp-diario__carta-numero {
    display: block;
    margin-bottom: .2rem;
    font-family: var(--lp-rotulo);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--lp-acento);
}

.lp-diario__carta-respuesta {
    margin: 0;
    padding: 0 1.3rem 1.2rem 1.1rem;
    line-height: 1.6;
}

/* ═══ PÁGINA 10 · EDICIÓN EXTRAORDINARIA ═══════════════════════════════════
   La imprenta de noche. Dentro, las reglas pasan a tinta clara para que bordes y
   sombras de los botones se vean sobre el fondo oscuro. */
.lp-diario__cierre {
    --lp-regla: var(--lp-imprenta-tinta);
    position: relative;
    padding: clamp(3.5rem, 8vw, 6.5rem) 0;
    overflow: clip;
    background-color: var(--lp-imprenta);
    background-image: radial-gradient(ellipse 55% 60% at 28% 45%, var(--lp-imprenta-brillo), transparent 70%), repeating-linear-gradient(90deg, var(--lp-imprenta-linea) 0 2px, transparent 2px 9px);
    color: var(--lp-imprenta-tinta);
}

.lp-diario__cierre-rejilla {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 3.25rem;
}

.lp-diario__extra {
    position: relative;
    container-type: inline-size;
    justify-self: center;
    width: 100%;
    max-width: 30rem;
    padding: 1.1rem 1.1rem 1.25rem;
    background: var(--lp-hoja);
    color: var(--lp-hoja-tinta);
    box-shadow: 0 1.5rem 3rem var(--lp-imprenta-sombra);
    transform: rotate(-3deg);
}

.lp-diario--animada .lp-diario__extra {
    opacity: 0;
}

    .lp-diario--animada .lp-diario__extra.lp-diario--visible {
        animation: lp-diario-girar 1.3s cubic-bezier(.2, .75, .25, 1) both;
    }

@keyframes lp-diario-girar {
    from {
        opacity: 0;
        transform: scale(.06) rotate(-1080deg);
    }

    30% {
        opacity: 1;
    }

    to {
        opacity: 1;
        transform: rotate(-3deg);
    }
}

.lp-diario__extra-cabecera {
    margin: 0;
    padding-bottom: .35rem;
    border-bottom: 3px double currentColor;
    font-family: var(--lp-cabecera-tipo);
    font-size: clamp(1.3rem, 4vw, 1.9rem);
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
}

.lp-diario__extra-rotulo {
    margin: .4rem 0 .5rem;
    font-family: var(--lp-rotulo);
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .14em;
    text-align: center;
    text-transform: uppercase;
    color: var(--lp-hoja-suave);
}

.lp-diario__extra-titular {
    margin: 0 0 .7rem;
    font-family: var(--lp-impacto);
    font-size: min(10.5cqi, 5.4rem);
    font-weight: 700;
    font-synthesis: none;
    white-space: nowrap;
    line-height: .95;
    letter-spacing: .01em;
    text-align: center;
    text-transform: uppercase;
    color: var(--lp-hoja-titular);
}

.lp-diario__foto--extra img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.lp-diario__extra-bajada {
    margin: .7rem 0 0;
    font-size: 1rem;
    font-style: italic;
    line-height: 1.4;
    text-align: center;
}

.lp-diario__cierre-texto .lp-diario__entrada {
    margin-bottom: 1.75rem;
    color: var(--lp-imprenta-suave);
}

.lp-diario__cierre-nota {
    margin: 1.5rem 0 0;
    font-size: .88rem;
    line-height: 1.5;
    color: var(--lp-imprenta-suave);
}

@media (min-width: 62rem) {
    .lp-diario__cierre-rejilla {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 4.5rem;
    }
}

/* ═══ FOLIO FLOTANTE ═══════════════════════════════════════════════════════
   Fijo, no pegajoso: así no reserva hueco en el flujo. Se esconde bajando fuera
   de la pantalla y con visibility, para que tampoco reciba el foco.

   Va centrado, y su ancho máximo descuenta a cada lado la esquina inferior
   derecha, que es la de la mascota del sitio, con la reserva que publica el
   marco: por largo que sea el nombre de la sección, que se recorta con puntos
   suspensivos, nunca llega a ella. Sin mascota la variable no existe y queda el
   margen de siempre. */
.lp-diario__folio-flotante {
    position: fixed;
    z-index: 1020;
    left: 50%;
    bottom: max(1rem, env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: .75rem;
    max-width: calc(100% - 2 * var(--edu-landing-reserva-mascota, 1rem));
    padding: .35rem .4rem .35rem 1rem;
    border: 2px solid var(--lp-regla);
    background: var(--lp-papel-alto);
    color: var(--lp-tinta);
    box-shadow: 4px 4px 0 var(--lp-regla);
    visibility: hidden;
    transform: translate(-50%, calc(100% + 2rem));
    transition: transform .35s ease, visibility 0s linear .35s;
}

.lp-diario__folio-flotante--visible {
    visibility: visible;
    transform: translate(-50%, 0);
    transition: transform .35s ease, visibility 0s;
}

.lp-diario__folio-flotante-pagina {
    font-family: var(--lp-titular);
    font-size: 1rem;
    font-stretch: condensed;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.lp-diario__folio-flotante-seccion {
    min-width: 0;
    overflow: hidden;
    font-family: var(--lp-rotulo);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .06em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.lp-diario__folio-flotante-boton {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 2.5rem;
    padding: .45rem .95rem;
    border: 2px solid var(--lp-regla);
    background: var(--lp-naranja);
    color: var(--lp-naranja-tinta);
    font-family: var(--lp-rotulo);
    font-size: .8rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .06em;
    text-decoration: none;
    text-transform: uppercase;
}

    .lp-diario__folio-flotante-boton:hover {
        background: var(--lp-naranja-vivo);
        color: var(--lp-naranja-tinta);
        text-decoration: none;
    }

    .lp-diario__folio-flotante-boton:focus-visible {
        outline: 3px solid var(--lp-naranja);
        outline-offset: 3px;
    }

@media (max-width: 35.99rem) {
    .lp-diario__acciones .lp-diario__boton,
    .lp-diario__accion-pie .lp-diario__boton {
        width: 100%;
    }

    /* El nombre del diario ya está en el cabezal: el folio se queda con la
       página y la sección para caber en una línea. */
    .lp-diario__folio > :first-child {
        display: none;
    }

    /* El rótulo de última hora encabeza el cintillo y la noticia usa todo el
       ancho. */
    .lp-diario__cintillo-rotulo {
        flex-basis: 100%;
        padding-block: .3rem;
    }

    /* Los rubros se desplazan en una sola fila en vez de ocupar cuatro. */
    .lp-diario__rubros {
        flex-wrap: nowrap;
        width: calc(100% + 2.5rem);
        margin-inline: -1.25rem;
        padding: .15rem 1.25rem .55rem;
        overflow-x: auto;
        scroll-padding-inline: 1.25rem;
    }

        .lp-diario__rubro {
            flex: 0 0 auto;
        }

    /* En el teléfono los avisos se pasan de lado, uno tras otro, en vez de formar
       una columna de dieciocho. El siguiente asoma para invitar a deslizar; el
       relleno de arriba deja sitio a las tijeras y al contorno del recorte. */
    .lp-diario__avisos {
        display: flex;
        align-items: stretch;
        gap: .9rem;
        width: calc(100% + 2.5rem);
        margin-inline: -1.25rem;
        padding: 1.5rem 1.25rem 1.25rem;
        overflow-x: auto;
        column-count: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 1.25rem;
    }

        .lp-diario__aviso {
            flex: 0 0 min(84%, 20rem);
            margin: 0;
            scroll-snap-align: start;
        }

    /* En móvil el folio ocupa el ancho entre márgenes, pero por la derecha se
       detiene donde empieza la esquina de la mascota; sin mascota la variable no
       existe y el margen vuelve a ser el de la izquierda. */
    .lp-diario__folio-flotante {
        left: 1rem;
        right: var(--edu-landing-reserva-mascota, 1rem);
        justify-content: space-between;
        max-width: none;
        transform: translateY(calc(100% + 2rem));
    }

    .lp-diario__folio-flotante--visible {
        transform: none;
    }

    .lp-diario__pasar-boton {
        padding-inline: .7rem;
        font-size: .72rem;
    }
}

/* Por debajo de 26.25rem, descontada la esquina de la mascota, al nombre de la
   sección le quedarían unos pocos píxeles y solo se leería el corte: se retira,
   y el folio se queda con la página y la llamada. */
@media (max-width: 26.24rem) {
    .lp-diario__folio-flotante-seccion {
        display: none;
    }
}

/* ═══ Menos movimiento ═════════════════════════════════════════════════════
   Sin animaciones ni transiciones, y todo lo que esperaba su aparición ya está
   en su sitio: fotos en color, titular impreso, fila resaltada y periódico sin
   girar. */
@media (prefers-reduced-motion: reduce) {
    .lp-diario *,
    .lp-diario *::before,
    .lp-diario *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

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

    .lp-diario--animada [data-revelar] .lp-diario__foto img {
        filter: none;
    }

    .lp-diario--animada [data-revelar] .lp-diario__foto::after {
        opacity: .16;
    }

    .lp-diario--animada .lp-diario__titular::after {
        content: none;
    }

    .lp-diario--animada .lp-diario__fila-tuya td {
        background-size: 100% 100%;
        color: var(--lp-marcador-tinta);
    }

    .lp-diario--animada .lp-diario__fila-tuya .lp-diario__sello,
    .lp-diario--animada .lp-diario__extra {
        opacity: 1;
    }

    .lp-diario__lomo:hover,
    .lp-diario__portadilla:hover,
    .lp-diario__boton:hover,
    .lp-diario__pasar-boton:hover:not(:disabled) {
        transform: none;
    }
}