/* ==========================================================================
   Interfaz nueva — la piel del rediseño

   Se carga SOLO cuando el portal va con la interfaz nueva, detrás del
   conmutador Portal:Interfaz (o de ?interfaz=nueva para quien entra al panel).
   Con la clásica el navegador no pide este archivo ni el de los tokens, así que
   la portada de siempre sigue siendo byte a byte la de siempre.

   Lo que hay aquí es deliberadamente poco: portal.css deriva el sitio entero de
   cuatro colores y dos familias, así que cambiar la cara es volver a apuntar
   esas seis variables a los tokens de marca. Lo demás —el reparto de zonas, el
   cromo de la página, la escala de rótulos, el logotipo animado, Fuente TV y
   Fuente 60— tiene su paso en el contrato (docs/diseno/) y no se adelanta aquí.

   Por eso tampoco se repiten reglas de portal.css: esta hoja no la sustituye,
   la alimenta.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Los tokens, enchufados a las variables de las que cuelga portal.css

   El acento es el mismo #B03A24 que ya tenía el portal: la marca no cambia de
   color, cambia de tipografía y de blanco. El fondo sí: el portal compone sobre
   un blanco cálido (#F2F1ED) y el rediseño pide papel blanco (--papel), con la
   tinta un punto más cálida (--tinta).

   Se escribe `var(--papel)` y no el hexadecimal porque los tokens redefinen sus
   propios valores en oscuro: apuntando a la variable, el tema oscuro sale solo.
   -------------------------------------------------------------------------- */
:root[data-interfaz="nueva"] {
    --paper: var(--papel);
    --ink: var(--texto);
    --accent: var(--ladrillo);
    --accent-neg: var(--ladrillo-claro);

    /* Titulares en serif, interfaz y cuerpo en la sans. Es la decisión que más
       se nota de todo el rediseño, y la que menos código cuesta. */
    --font-display: var(--serif);
    --font-body: var(--sans);

    /* El ancho de lectura del contrato. El panel también lo puede mover
       (Theme:ReadingWidth); esto es lo que trae la piel nueva de fábrica. */
    --measure: var(--medida);

}

/* --------------------------------------------------------------------------
   Oscuro

   portal.css apaga el sitio con `:root:not([data-theme="light"])`, que tiene la
   misma especificidad que el bloque de arriba y se carga antes: sin estas dos
   reglas, el mapeo de arriba le ganaría al tema oscuro y el portal se quedaría
   en claro con el interruptor en oscuro.

   Solo se repiten las tres variables que el oscuro mueve. Lo demás que portal.css
   calcula ahí —las bandas, el color-scheme— cuelga de var(--paper) y se recoloca
   solo.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    :root[data-interfaz="nueva"]:not([data-theme="light"]) {
        --paper: var(--papel);
        --ink: var(--texto);
        --accent: var(--ladrillo);
    }
}

:root[data-interfaz="nueva"][data-theme="dark"] {
    --paper: var(--papel);
    --ink: var(--texto);
    --accent: var(--ladrillo);
}

/* --------------------------------------------------------------------------
   Los dos tamaños que el contrato nombra con un número

   El resto de la escala (--t-rotulo, --t-secundario, --t-tarjeta) se aplica en
   los pasos que rehacen esos bloques: subir hoy el rótulo de sección de 1rem a
   30px cambiaría el reparto de la portada sin que ningún paso lo haya decidido,
   y el contrato pide que al cerrar este la portada se vea casi igual.

   El antetítulo no está aquí porque ya coincide: el portal lo compone a .68rem,
   que son los 11px de --t-antetitulo.
   -------------------------------------------------------------------------- */

/* La apertura, a los 50px del diseño. Con clamp porque 50px fijos en una
   pantalla de 390 px son cuatro palabras por línea. */
:root[data-interfaz="nueva"] .apertura h2 {
    font-size: clamp(2.1rem, 4.2vw, var(--t-apertura));
    line-height: var(--t-titular-alto);
}

/* El cuerpo de la nota: serif, 19px, interlínea 1.72 y la medida de 68
   caracteres. La familia la pide la decisión D5 y es el único sitio del portal
   donde el serif baja del titular al texto corrido: lo demás —tarjetas,
   antetítulos, metadatos, navegación, pie— se queda en la sans, que es lo que
   `body` hereda de --font-body.

   El tamaño el portal ya lo tenía casi igual (1.12rem / 1.75). La diferencia es
   que ahora sale de los tokens y se cambia en un sitio. */
:root[data-interfaz="nueva"] .nota-cuerpo {
    font-family: var(--serif);
    font-size: var(--t-cuerpo);
    line-height: var(--t-cuerpo-alto);
    max-width: var(--medida);
}

/* --------------------------------------------------------------------------
   Aviso de vista previa

   Sale solo cuando la piel viene del parámetro de la dirección y no del ajuste
   del medio: lo que se está mirando no es lo que ve el lector. Va fijo abajo a
   la derecha, pequeño, y por encima de todo menos de los diálogos.
   -------------------------------------------------------------------------- */
.aviso-vista-previa {
    position: fixed;
    right: var(--e-4);
    bottom: var(--e-4);
    z-index: 60;
    display: flex;
    align-items: center;
    gap: var(--e-2);
    max-width: calc(100vw - var(--e-6));
    padding: var(--e-2) var(--e-3);
    border-radius: var(--r-chapa);
    background: var(--tinta);
    color: var(--texto-inv);
    font-family: var(--sans);
    font-size: var(--t-entradilla);
    line-height: 1.3;
    box-shadow: 0 2px 10px rgb(0 0 0 / 28%);
}

.aviso-vista-previa a {
    color: var(--ladrillo-claro);
    /* El enlace de salida es lo que se pulsa: llega al mínimo táctil sin
       estirar la chapa entera. */
    min-height: var(--toque-min);
    display: inline-flex;
    align-items: center;
    padding-inline: var(--e-1);
}

@media print {
    .aviso-vista-previa { display: none; }
}

/* ==========================================================================
   El cromo de la página (paso 4)

   Todo lo de aquí abajo solo existe con la interfaz nueva: son clases que la
   plantilla no emite con la clásica, así que no hace falta colgarlas del
   atributo. Si alguna acaba necesitando ganarle a portal.css, ahí sí.
   ========================================================================== */

/* --------------------------------------------------------------------------
   La barra de servicio

   Una fila fina sobre la testera, no una segunda cabecera: tipografía de datos,
   un filete abajo y nada que compita con el logotipo. En el teléfono se queda la
   fecha y la cuenta; lo de en medio sobra, porque ahí ya está la barra inferior.
   -------------------------------------------------------------------------- */
/* Negra, como el diseño: esta fila no es parte del periódico, es la zona de
   servicio —buscar, entrar, suscribirse— y el contraste con el papel es lo que
   dice que empieza otra cosa. Es el mismo recurso que usa Fuente TV. */
.barra-servicio {
    background: var(--tinta);
    color: var(--texto-inv);
    border-bottom: 0;
    font-family: var(--sans);
    font-size: var(--t-entradilla);

    /* Y por encima de la barra de navegación, que es `sticky` con z-index 40.
       Las sugerencias del buscador cuelgan de esta fila con z-index 30, así que
       la fila de secciones les pasaba por delante: al escribir, la lista salía
       —se veían asomar los bordes— pero quedaba tapada justo donde se lee. No
       se sube la lista sino la fila entera: el problema es de quién va encima
       de quién, y eso se decide una vez. */
    position: relative;
    z-index: 60;
}

.barra-servicio-fila {
    display: flex;
    align-items: center;
    gap: var(--e-5);
    min-height: 38px;
}

.barra-fecha {
    color: var(--texto-inv-2);
    white-space: nowrap;
}

/* El último vídeo se queda con el espacio sobrante y corta por puntos suspensivos:
   un titular largo no puede empujar la cuenta fuera de la fila. */
.barra-video {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--e-2);
    text-decoration: none;
    color: var(--texto);
}

.barra-video-rotulo {
    flex: none;
    font-size: var(--t-antetitulo);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ladrillo);
}

.barra-video-titulo {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.barra-video:hover .barra-video-titulo { text-decoration: underline; }

/* El triangulito de la entrada a Fuente TV: lo mismo que la chapa del minutaje,
   para que las dos cosas se lean como la misma capa del medio. */
.barra-accion-tv {
    gap: var(--e-2);
    color: var(--texto-inv);
    font-weight: 700;
}

.barra-tv-icono {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 0 4px 7px;
    border-color: transparent transparent transparent var(--ladrillo);
}

.barra-acciones {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--e-4);
}

.barra-accion {
    color: var(--texto-inv);
    background: none;
    border: 0;
    font: inherit;
    cursor: pointer;
    text-decoration: none;
    /* El mínimo táctil se cumple con la altura de la fila; el padding lo reparte
       sin estirar la barra. */
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding-inline: var(--e-1);
}

/* Sobre tinta, el ladrillo pleno no pasa contraste: aquí el que vale es el
   claro, que es el mismo que usa Fuente TV. */
.barra-accion:hover { color: var(--ladrillo-claro); text-decoration: underline; }

.barra-accion:focus-visible {
    outline: 2px solid var(--ladrillo-claro);
    outline-offset: 2px;
}

/* El buscador de la fila: caja oscura sobre el negro, apenas un tono más clara,
   con su lupa pegada. Más ancho que alto porque es lo que se escribe. */
.barra-buscador {
    display: flex;
    align-items: stretch;
    margin-left: auto;
    /* Encoge la caja de escribir, nunca la fila: sin esto, cuando la fila aprieta
       —con sesión abierta son «Mi cuenta» y «Salir» en vez de «Entrar»— el
       buscador empujaba a sus vecinos en vez de estrecharse. */
    min-width: 0;
}

/* La caja se lleva el ancho sobrante hasta su tope, y puede encogerse por debajo
   de su contenido: `min-width: 0` es lo que lo permite en un hijo de flex. */
.barra-buscador .buscador {
    position: relative;
    flex: 0 1 clamp(11rem, 20vw, 17rem);
    min-width: 0;
}

/* Y que se vea. Al 8 % sobre tinta la caja no se distinguía del fondo: lo único
   que delataba que ahí hay un buscador era la palabra «Buscar» en gris. Al 14 %,
   con el filete más claro y algo más ancha, se lee como lo que es. Al escribir
   dentro se aclara un punto más, que es el acuse de recibo de un campo. */
.barra-buscador input {
    width: 100%;
    min-width: 0;
    height: 32px;
    padding: 0 var(--e-3);
    border: 1px solid color-mix(in srgb, var(--texto-inv) 34%, transparent);
    border-right: 0;
    border-radius: var(--r-chapa) 0 0 var(--r-chapa);
    background: color-mix(in srgb, var(--texto-inv) 14%, transparent);
    color: var(--texto-inv);
    font-family: var(--sans);
    font-size: var(--t-entradilla);
    transition: background .2s var(--ease), border-color .2s var(--ease);
}

.barra-buscador input:hover {
    background: color-mix(in srgb, var(--texto-inv) 20%, transparent);
}

.barra-buscador input:focus {
    outline: 0;
    background: color-mix(in srgb, var(--texto-inv) 22%, transparent);
    border-color: var(--ladrillo-claro);
}

.barra-buscador:focus-within .barra-buscador-boton {
    border-color: var(--ladrillo-claro);
}

.barra-buscador input::placeholder {
    color: color-mix(in srgb, var(--texto-inv) 72%, transparent);
}

/* Y la lupa NO se encoge nunca. Era un hijo de flex con un ancho de 36 px y sin
   decirle que no cediera: cuando la fila apretaba, el navegador le quitaba
   píxeles a ella también —es lo que hace de serie— y el botón acababa más
   estrecho que su icono, que es lo que se ve como «la caja tapa la lupa». */
.barra-buscador-boton {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 32px;
    border: 1px solid var(--linea-inv);
    border-radius: 0 var(--r-chapa) var(--r-chapa) 0;
    background: color-mix(in srgb, var(--texto-inv) 14%, transparent);
    color: var(--texto-inv);
    cursor: pointer;
}

.barra-buscador-boton:hover {
    background: var(--ladrillo);
    border-color: var(--ladrillo);
}

/* La lista de sugerencias cae sobre papel, no sobre la barra: es contenido del
   sitio y se lee como tal. */
.barra-buscador .buscador-lista {
    background: var(--papel);
    color: var(--texto);
}

.barra-salir {
    display: inline-flex;
}

/* El único botón relleno de la fila: lo que el medio pide que se haga.

   Y en ladrillo, no en papel. Blanco sobre negro es lo que pinta la maqueta y es
   correcto, pero en esa fila hay ya cinco cosas blancas —fecha, Fuente TV,
   buscador, tema, Entrar— y el botón era una más, solo que con caja. El ladrillo
   es el color de la marca y no lo lleva nada más ahí arriba: con él, la fila
   tiene una sola cosa que mirar. En versalitas y algo más alto, que es lo que
   separa un botón de un enlace con borde. */
.barra-suscribirse {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 var(--e-5);
    border-radius: var(--r-chapa);
    background: var(--ladrillo);
    color: var(--papel);
    font-size: var(--t-antetitulo);
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 1px 0 color-mix(in srgb, var(--papel) 18%, transparent) inset;
    transition: background .2s var(--ease), transform .2s var(--ease);
}

.barra-suscribirse:active {
    transform: translateY(1px);
}

.barra-suscribirse:hover {
    background: var(--ladrillo-claro);
    color: var(--tinta);
}

.barra-suscribirse:focus-visible {
    outline: 2px solid var(--papel);
    outline-offset: 2px;
}

/* Con la fila de servicio llevando buscador, cuenta y suscripción, la testera se
   queda con la marca sola, que es lo que pide el diseño. Por debajo de 1.081 px
   no: ahí la fila esconde su parte de en medio y manda la cabecera. */
@media (min-width: 1081px) {
    :root[data-interfaz="nueva"] .top-header .header-right {
        display: none;
    }
}

@media (max-width: 1080px) {
    /* En el teléfono y en la tableta la fila se queda con la fecha y nada más:
       buscar y suscribirse están en la cabecera, que ahí sí tiene renglón propio
       para ellos, y Fuente TV está en la barra de abajo.

       También el tema y la cuenta, que antes se quedaban. La testera de debajo
       lleva los dos con su icono, así que en una tableta salían **dos veces** el
       interruptor de claro/oscuro y **dos veces** «Entrar», a cuatro centímetros
       uno de otro. Dos puertas iguales no son el doble de puerta. */
    .barra-video,
    .barra-buscador,
    .barra-accion-tv,
    .barra-suscribirse,
    .barra-tema,
    .barra-salir,
    .barra-acciones > .barra-accion { display: none; }

    .barra-acciones { margin-left: auto; }
    .barra-servicio-fila { gap: var(--e-3); }
}

/* --------------------------------------------------------------------------
   El logotipo y su entrada

   El archivo SVG es el de la marca y no se toca por dentro. Lo que se añade es
   cómo entra: un desplazamiento corto, una regla que se traza de izquierda a
   derecha y la bajada después. Se lee como un gesto, no como un parpadeo.
   -------------------------------------------------------------------------- */
.logo { display: inline-block; text-decoration: none; color: inherit; }

.logo-marca {
    display: block;
    transform-origin: left center;
    transition: transform .25s var(--ease);
    animation: logo-entra .7s var(--ease) both;
}

.logo:hover .logo-marca { transform: translateY(-2px); }

.logo-regla {
    display: block;
    height: 3px;
    width: 100%;
    max-width: 368px;
    margin-top: var(--e-2);
    background: var(--ladrillo);
    transform-origin: left center;
    animation: logo-regla .9s var(--ease) .3s both;
}

.logo-bajada {
    display: block;
    margin-top: var(--e-2);
    font-family: var(--sans);
    font-size: var(--t-antetitulo);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--texto-2);
    animation: logo-entra .7s var(--ease) .18s both;
}

@keyframes logo-entra {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes logo-regla {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* Quien pidió menos movimiento no recibe ninguno: ni la entrada, ni la regla, ni
   el levantamiento al pasar el ratón. La marca sale puesta, que es lo que importa. */
@media (prefers-reduced-motion: reduce) {
    .logo-marca,
    .logo-regla,
    .logo-bajada { animation: none; }

    .logo:hover .logo-marca { transform: none; }
}

/* --------------------------------------------------------------------------
   La navegación: Fuente TV y «Más»
   -------------------------------------------------------------------------- */

/* La sección en la que se está, con la regla del diseño debajo. Sin esto la barra
   no decía dónde está el lector, que es la mitad de para lo que sirve. */
:root[data-interfaz="nueva"] .nav-bar .nav-aqui {
    color: var(--texto);
    border-bottom-color: var(--ladrillo);
}

/* Fuente TV no es una sección: el diseño la pinta como una pastilla rosa de alto
   completo con el triángulo delante, el mismo signo que la chapa del minutaje y
   que la entrada de la barra de servicio. No es un color nuevo: es el rosa de la
   franja «en desarrollo», que ya estaba en los tokens. */
:root[data-interfaz="nueva"] .nav-bar .nav-destacado {
    gap: .45rem;
    padding-left: var(--e-4);
    padding-right: var(--e-4);
    background: var(--rosa);
    color: var(--ladrillo);
    font-weight: 700;
}

:root[data-interfaz="nueva"] .nav-bar .nav-destacado:hover {
    color: var(--ladrillo-oscuro);
    border-bottom-color: transparent;
}

.nav-tv-icono {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 0 4px 7px;
    border-color: transparent transparent transparent currentColor;
}

/* «Más» se va al extremo derecho, como en el diseño: la fila se lee como las
   secciones a la izquierda y el cajón de lo que no cabe al otro lado. Con `order`
   y no moviéndolo en el marcado, porque en el HTML tiene que seguir detrás de las
   secciones: es lo que continúa esa lista, y así lo lee quien navega a oídas. */
:root[data-interfaz="nueva"] .nav-scroll > * { order: 1; }
:root[data-interfaz="nueva"] .nav-mas {
    order: 2;
    margin-left: auto;
}

/* El resto de las secciones, detrás de un <details>: abre y cierra sin
   JavaScript, se maneja con teclado por su cuenta y no necesita ARIA inventada. */
.nav-mas {
    position: relative;
    display: inline-block;
}

/* Con el mismo registro que las secciones: «Más» es un elemento más de la fila y
   salía dos puntos más grande que todo lo que acompaña, porque es un <summary> y
   no heredaba la regla que viste los enlaces de la barra. */
.nav-mas > summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    min-height: var(--toque-min);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--texto-2);
}

.nav-mas > summary:hover {
    color: var(--ladrillo);
}

.nav-mas > summary::-webkit-details-marker { display: none; }

.nav-mas > summary::after {
    content: "▾";
    margin-left: .35em;
    font-size: .8em;
}

.nav-mas-lista {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 40;
    min-width: 12rem;
    padding: var(--e-2) 0;
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: var(--r-modulo);
    box-shadow: 0 6px 24px rgb(0 0 0 / 12%);
}

.nav-mas-lista a {
    display: block;
    padding: var(--e-2) var(--e-4);
    color: var(--texto);
    text-decoration: none;
    white-space: nowrap;
}

.nav-mas-lista a:hover {
    background: var(--crema);
    color: var(--ladrillo);
}

/* --------------------------------------------------------------------------
   El boletín, en su propia banda

   Antes era el tercer bloque del pie, entre los enlaces legales y las redes:
   pedir una suscripción ahí es pedirla donde nadie mira. Aquí tiene una banda
   suya, con el fondo de descanso, justo antes del pie.
   -------------------------------------------------------------------------- */
.banda-boletin {
    margin-top: var(--e-8);
    padding: var(--e-7) 0;
    background: var(--crema);
    border-top: 1px solid var(--linea);
    border-bottom: 1px solid var(--linea);
}

.banda-boletin-caja {
    max-width: 44rem;
}

/* El formulario es el mismo que estaba en el pie, con su titulillo de columna.
   En una banda propia ese titulillo se queda pequeno: aqui es el rotulo de un
   bloque, no la cabecera de una lista de enlaces. */
.banda-boletin .footer-col-title {
    font-family: var(--serif);
    font-size: var(--t-rotulo);
    line-height: var(--t-titular-alto);
    letter-spacing: 0;
    text-transform: none;
    color: var(--texto);
    margin-bottom: var(--e-3);
}

.banda-boletin .boletin-nota {
    font-size: var(--t-cuerpo);
    color: var(--texto-2);
    max-width: 36rem;
}

@media (max-width: 720px) {
    .banda-boletin { padding: var(--e-6) 0; }
}

/* --------------------------------------------------------------------------
   «En desarrollo», con los colores del rediseño

   El aviso existe en las dos interfaces —una nota a medias lo está igual con la
   cara vieja que con la nueva—, pero aquí tiene su color propio: --rosa, que es
   el que los tokens reservan para esta franja.
   -------------------------------------------------------------------------- */
:root[data-interfaz="nueva"] .nota-en-desarrollo {
    background: var(--rosa);
    border-left-color: var(--ladrillo);
    border-radius: var(--r-chapa);
    font-family: var(--sans);
    font-size: var(--t-entradilla);
    letter-spacing: .01em;
}

:root[data-interfaz="nueva"] .nota-en-desarrollo strong {
    color: var(--ladrillo);
}

/* ==========================================================================
   Fuente TV: la capa de vídeo, sobre fondo tinta (paso 7)

   El fondo oscuro no es decoración: es lo que separa la capa de vídeo del texto
   sin depender solo del color. Quien no distingue bien los tonos ve igualmente
   que esa franja es otra cosa, porque cambia el fondo entero y no un detalle.

   Va a sangre: la banda se sale del ancho de lectura y ocupa la ventana, que es
   lo que la hace leerse como un bloque del medio y no como una tarjeta grande.
   -------------------------------------------------------------------------- */
:root[data-interfaz="nueva"] .video-reel {
    /* Dentro de la banda, «papel» es el texto claro y «tinta» el fondo: las
       reglas de portal.css que pintan tarjetas siguen valiendo sin tocarlas. */
    --paper: var(--tinta);
    --ink: var(--texto-inv);
    --accent: var(--ladrillo-claro);

    position: relative;
    background: var(--tinta);
    color: var(--texto-inv);
    padding: var(--e-7) 0;
    margin-block: var(--e-7);
}

/* A sangre sin romper la rejilla de la página: la banda se estira con dos
   pseudoelementos en vez de con un ancho de 100vw, que en una página con barra
   de desplazamiento se pasa de largo y saca scroll horizontal. */
:root[data-interfaz="nueva"] .video-reel::before {
    content: "";
    position: absolute;
    inset: 0 calc(-50vw + 50%);
    background: var(--tinta);
    z-index: 0;
}

:root[data-interfaz="nueva"] .video-reel > * {
    position: relative;
    z-index: 1;
}

:root[data-interfaz="nueva"] .video-reel .section-header h2 {
    color: var(--texto-inv);
}

/* El rótulo de la capa de vídeo lleva su propio filete, en el ladrillo claro que
   es el que pasa contraste sobre tinta. */
:root[data-interfaz="nueva"] .video-reel .section-header h2::before {
    background: var(--ladrillo-claro);
}

:root[data-interfaz="nueva"] .video-reel .ver-todos {
    color: var(--ladrillo-claro);
}

:root[data-interfaz="nueva"] .video-reel .video-card {
    border-top-color: var(--linea-inv);
}

:root[data-interfaz="nueva"] .video-reel .card-autor,
:root[data-interfaz="nueva"] .video-reel .card-time,
:root[data-interfaz="nueva"] .video-reel .video-fuente {
    color: var(--texto-inv-2);
}

/* La chapa, al revés que en el resto de la portada: sobre tinta, una chapa de
   tinta no se ve. */
:root[data-interfaz="nueva"] .video-reel .video-chapa {
    background: var(--papel);
    color: var(--tinta);
    box-shadow: inset .18rem 0 0 var(--ladrillo);
}

@media (max-width: 720px) {
    :root[data-interfaz="nueva"] .video-reel {
        padding: var(--e-6) 0;
        margin-block: var(--e-6);
    }
}

/* --------------------------------------------------------------------------
   Fuente TV: las columnas se ajustan a las piezas (decisión D29)

   Es la regla de la fila vista por el otro lado. En una rejilla adaptable, dos
   piezas en seis columnas dejan cuatro huecos: media fila en blanco justo en la
   zona que tiene que parecer un canal.

   Una zona cuyo mínimo son dos y cuyo tope son cuatro no puede repartirse en el
   número de columnas que quepan: se reparte en el número de piezas que hay. Dos
   piezas, dos tarjetas anchas. Cuatro, cuatro. Nunca una fila a medias.

   El número lo pone la plantilla en --piezas; el respaldo de 4 es por si alguien
   pinta el carrete sin pasar por ahí.
   -------------------------------------------------------------------------- */
:root[data-interfaz="nueva"] .video-reel .video-grid {
    grid-template-columns: repeat(var(--piezas, 4), minmax(0, 1fr));
}

/* En el teléfono manda el ancho, no el conteo: cuatro columnas de 90 px no son
   tarjetas, son sellos. Aquí vuelve la rejilla adaptable de siempre. */
@media (max-width: 860px) {
    :root[data-interfaz="nueva"] .video-reel .video-grid {
        grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    }
}

/* --------------------------------------------------------------------------
   Fuente TV, el escaparate vertical (decisión D40)

   El medio publica vertical: las cuatro piezas que hay son 9:16. Así que la
   banda deja de ser «vídeo apaisado con algún vertical dentro» y pasa a ser lo
   que de verdad enseña.

   La regla B, extendida: la tarjeta la decide el tipo de la pieza **y su forma**.
   Una pieza 9:16 se pinta 9:16, y por eso no hace falta relleno desenfocado en
   ninguna parte: no hay forma metida en otra.

   Lo que esto necesita es un tope de ancho. Con las columnas ajustadas al número
   de piezas (D29), dos verticales en dos columnas de 690 px serían dos tarjetas
   de mil doscientos px de alto: el vertical a su proporción natural crece con el
   ancho, así que el ancho hay que acotarlo. 280 px es el ancho de un teléfono en
   la mano, que es como se graba y como se mira esto.
   -------------------------------------------------------------------------- */
:root[data-interfaz="nueva"] .video-reel .video-grid {
    grid-template-columns: repeat(var(--piezas, 4), minmax(0, 280px));
    justify-content: center;
    gap: var(--e-6);
}

/*
 * Y cuando lo que hay dentro son verticales, la columna baja a 150.
 *
 * A 280 px un 9:16 mide 498 de alto, y con el rótulo, la bajada y el pie de cada
 * tarjeta la banda pasaba de 750 px: una pantalla entera para dos piezas. El
 * ancho de la columna es la única medida que hay —el alto sale de la proporción,
 * y la proporción no se toca (D40: la pieza se pinta a su forma, ni estirada ni
 * recortada)—, así que acotar el alto es acotar el ancho.
 *
 * 200 ya metía la banda en una pantalla; 150 —póster de 267 px— la deja por
 * debajo del alto de una tarjeta de la rejilla de notas. Es el suelo: a partir de
 * aquí el bloque de texto mide más que el póster y la pieza deja de ser una
 * pieza, así que la banda se encoge recortando el texto y no el vídeo.
 *
 * Con `:has`, que es la pregunta exacta: no es «cuántas piezas hay» —eso ya lo
 * contesta --piezas— sino «de qué forma son». Una banda con un 16:9 dentro se
 * queda en 280, porque ahí la columna ancha no cuesta alto.
 */
:root[data-interfaz="nueva"] .video-reel .video-grid:has(.video-card-vertical) {
    grid-template-columns: repeat(var(--piezas, 4), minmax(0, 150px));

    /* Y pegadas al margen, no centradas. Centrar tenía sentido con columnas
       anchas; con dos piezas de 200 px dejaba mil de negro repartido a los lados
       y el rótulo, que está a la izquierda, se quedaba solo. En la maqueta la
       fila arranca donde arranca el rótulo. */
    justify-content: start;
}

/* Y el titular, entero. En una columna estrecha un titular de prensa no cabe en
   tres líneas —«contra el alcalde de…»— y un titular con puntos suspensivos no
   es un titular: es una adivinanza. Seis líneas y un cuerpo algo menor —que a 170
   px es el que toca: el de 1rem partía cuatro palabras por renglón— dan sitio a
   los dos titulares que hay publicados, y lo que se gasta en ellos es menos de la
   mitad de lo que acaba de soltar el póster. El tope sigue puesto: no hay titular
   que se lleve la banda entera. */
:root[data-interfaz="nueva"] .video-reel .video-grid:has(.video-card-vertical) .video-card h4 .card-enlace {
    font-size: .9rem;
    line-height: 1.26;
    -webkit-line-clamp: 5;
    line-clamp: 5;
}

/* Y la firma, al cuerpo de un dato. A 150 px «Luciano Andrey Sánchez Flórez» y
   «23 de octubre de 2026» ocupaban dos renglones cada uno, y el pie de la tarjeta
   acababa midiendo más que el póster. Quien firma y cuándo se publico siguen
   enteros: lo que se encoge es la letra, no el dato. */
:root[data-interfaz="nueva"] .video-reel .video-grid:has(.video-card-vertical) .card-autor,
:root[data-interfaz="nueva"] .video-reel .video-grid:has(.video-card-vertical) .card-time {
    font-size: .72rem;
    line-height: 1.3;
}

/*
 * Y en rejilla manda la PROPORCIÓN, no la altura.
 *
 * El carrete nació como tira, y en una tira manda el alto: todas las piezas a la
 * misma altura y cada una con el ancho de su forma, que es lo que deja la fila
 * recta. Por eso `portal.css` le fija `height: var(--video-alto)` y le quita la
 * proporción.
 *
 * En un escaparate vertical eso es justo al revés: el ancho lo da la columna y el
 * alto sale de la forma de la pieza. Sin esto, las tarjetas salían de 144×184 px
 * —miniaturas— en una banda que ocupa la pantalla de ancho a ancho.
 */
:root[data-interfaz="nueva"] .video-reel-rejilla .video-card,
:root[data-interfaz="nueva"] .video-reel-rejilla .video-card-vertical {
    width: 100%;
}

:root[data-interfaz="nueva"] .video-reel-rejilla .video-marco {
    height: auto;
    aspect-ratio: var(--zona-proporcion, 16 / 9);
}

:root[data-interfaz="nueva"] .video-reel-rejilla .video-card-vertical .video-marco {
    height: auto;
    aspect-ratio: 9 / 16;
}

@media (max-width: 860px) {
    :root[data-interfaz="nueva"] .video-reel .video-grid {
        grid-template-columns: repeat(auto-fill, minmax(10rem, 200px));
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   La barra de lectura (paso 9)

   Cuánto queda de la nota, en una línea de 3 px. Va fija al borde de la
   ventana y no pegada bajo la navegación: la navegación es `sticky` con
   `top: 0` y de alto variable —en móvil las secciones hacen dos renglones—, así
   que colgarse de ella pediría medir su altura con un guion para algo que se
   resuelve apoyándose en la ventana, que no se mueve.

   Por encima de la navegación (41 sobre 40) y por debajo del aviso de vista
   previa. Encima de la navegación no tapa nada: los enlaces tienen su relleno y
   la línea cae sobre el aire del borde superior.

   El carril es casi invisible a propósito: sin desplazar, lo que se ve es una
   regla finísima que no compite con la testera; el relleno es el ladrillo de la
   marca, que es el único color que el portal usa para marcar.
   -------------------------------------------------------------------------- */
.barra-lectura {
    position: fixed;
    inset-inline: 0;
    top: 0;
    z-index: 41;
    height: 3px;
    background: color-mix(in srgb, var(--texto) 8%, transparent);
}

.barra-lectura-relleno {
    display: block;
    width: 0;
    height: 100%;
    background: var(--ladrillo);
}

/* Imprimir una barra de progreso no tiene sentido: en papel se ve cuánto
   queda. */
@media print {
    .barra-lectura {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   La barra de abajo, en el teléfono (paso 9)

   En un teléfono la navegación del portal estaba toda arriba: el botón «Menú»
   de la cabecera y una fila de secciones que se desplaza de lado. Leyendo una
   nota, eso queda a varios dedos de distancia y a tres mil píxeles de altura.

   Así que los cuatro destinos que de verdad se usan bajan al borde de abajo,
   donde está el pulgar: la portada, las secciones (el mismo cajón lateral de
   siempre), Fuente TV y la cuenta. Son cuatro y no cinco; el porqué está en el
   marcado y en el paso 9 del contrato.

   Solo en el teléfono. Por encima de 640 px hay sitio arriba para todo y una
   barra flotante abajo sería un estorbo, así que no se pinta: `display: none`
   de salida y se enciende en la consulta de medios.

   El aviso de cookies (z-index 900) se le pone delante a propósito: es
   temporal, pide una respuesta y no debe quedar debajo de nada.
   -------------------------------------------------------------------------- */
.barra-movil {
    display: none;
}

@media (max-width: 640px) {
    /* El alto de la fila y el hueco que hay que dejarle debajo, en un solo sitio:
       la fila, el relleno del documento y la chapa de vista previa salen todos de
       estas dos variables. El `--barra-movil-hueco` incluye el borde inferior de
       los teléfonos con muesca. */
    :root[data-interfaz="nueva"] {
        --barra-movil-alto: 56px;
        --barra-movil-hueco: calc(var(--barra-movil-alto) + env(safe-area-inset-bottom, 0px));
    }

    .barra-movil {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 45;
        display: flex;
        /* El borde inferior de los teléfonos con muesca: el relleno se suma por
           debajo de la fila, que conserva sus 56 px. */
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--papel);
        border-top: 1px solid var(--linea);
        box-shadow: 0 -2px 12px color-mix(in srgb, var(--texto) 8%, transparent);
    }

    .barra-movil-boton {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        /* El mínimo táctil no negociable: la fila mide 56 y cada destino se lleva
           un cuarto del ancho de la pantalla, así que a 390 px son 97×56. */
        min-width: var(--toque-min);
        min-height: var(--barra-movil-alto);
        height: var(--barra-movil-alto);
        padding: 0;
        border: 0;
        background: none;
        color: var(--texto);
        font-family: var(--sans);
        font-size: var(--t-antetitulo);
        line-height: 1.1;
        text-decoration: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    /* Dónde se está, con el ladrillo de la marca. No se subraya ni se engorda:
       en cuatro renglones de 11 px el color es lo que se lee de un vistazo. */
    .barra-movil-boton[aria-current="page"] {
        color: var(--ladrillo);
    }

    .barra-movil-boton:focus-visible {
        outline: 2px solid var(--ladrillo);
        outline-offset: -2px;
    }

    /* El hueco para que el pie no se quede debajo de la barra. Va en el body y
       no en el pie porque lo que se tapa es el final del documento, sea el pie,
       la banda del boletín o lo último de una nota. */
    :root[data-interfaz="nueva"] body {
        padding-bottom: var(--barra-movil-hueco);
    }

    /* Y la chapa de vista previa sube por encima de la barra: abajo a la derecha
       es justo donde está «Cuenta». */
    .aviso-vista-previa {
        bottom: calc(var(--barra-movil-hueco) + var(--e-2));
    }
}

/* --------------------------------------------------------------------------
   Fuente TV en el teléfono: un carrusel que se arrastra con el dedo (paso 9)

   En escritorio el escaparate es una fila de cuatro verticales. En una pantalla
   de 390 px esa misma rejilla se parte en dos columnas y dos filas de tarjetas
   de 170×300: dos sellos arriba, dos abajo, y el resto de la portada empujado
   seiscientos píxeles hacia abajo.

   Así que en el teléfono la rejilla se vuelve una pista horizontal. Y la mueve
   el dedo, no un guion: `overflow-x` con `scroll-snap` es el desplazamiento del
   sistema —misma inercia, misma goma al llegar al final, y funciona con el
   teclado y con la rueda sin que nadie escriba nada—. El carrusel con flechas
   del portal sigue siendo el de la tira; esto es otra cosa y no se mezcla.

   Las tarjetas se quedan dentro del ancho de lectura, sin sangrar a los bordes:
   a 62vw cabe una y media, así que la siguiente asoma y se ve que hay más. Eso
   es lo que hace de aviso, porque la barra de desplazamiento va escondida —como
   en la barra de secciones, que es la misma idea.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    :root[data-interfaz="nueva"] .video-reel-rejilla .video-grid {
        /* La columna la pone `grid-auto-columns`, así que la plantilla de columnas
           de la rejilla tiene que desaparecer: con ella puesta, las piezas se
           apilan en una sola columna y la pista no se mueve. */
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: min(62vw, 240px);
        justify-content: start;
        gap: var(--e-4);

        overflow-x: auto;
        scroll-snap-type: x mandatory;
        /* Al llegar al final, el gesto no se lo pasa a la página: arrastrar el
           escaparate no desplaza la portada de lado. */
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        /* El hueco de abajo es para que el relieve de la tarjeta no se corte. */
        padding-bottom: var(--e-2);
    }

    :root[data-interfaz="nueva"] .video-reel-rejilla .video-grid::-webkit-scrollbar {
        display: none;
    }

    :root[data-interfaz="nueva"] .video-reel-rejilla .video-grid > * {
        scroll-snap-align: start;
    }
}

/* --------------------------------------------------------------------------
   El mini reproductor (paso 9)

   El vídeo de la nota se encoge a la esquina de abajo cuando se le pasa por
   encima leyendo, y se puede cerrar. El guion solo pone y quita la clase y deja
   un bloque de la misma altura en su sitio; todo lo demás es esto.

   La clave es que el reproductor NO se mueve del documento: cambia de posición
   en la pantalla, no de sitio en el HTML. Mover un iframe de la plataforma lo
   recarga, y el vídeo empezaría otra vez por el principio.

   Sobre la navegación (50 sobre 41) y debajo del aviso de cookies, que es
   temporal y pide una respuesta. En el teléfono se sube por encima de la barra
   de abajo: tapar «Cuenta» con un vídeo no es una esquina libre.
   -------------------------------------------------------------------------- */
:root[data-interfaz="nueva"] .nota-video-mini {
    position: fixed;
    right: var(--e-4);
    bottom: var(--e-4);
    z-index: 50;
    width: min(360px, 86vw);
    margin: 0;
    border: 1px solid var(--linea);
    background: var(--tinta);
    box-shadow: 0 6px 24px rgb(0 0 0 / 30%);
}

/* Un vertical encogido a 360 px de ancho mide 640 de alto: media pantalla de
   teléfono. Manda el ancho de la forma, como en el escaparate. */
:root[data-interfaz="nueva"] .nota-video-mini.nota-video-vertical {
    width: min(190px, 46vw);
}

/* De la ficha solo queda el vídeo: el pie de foto, la fuente y el enlace a la
   plataforma se leen en su sitio, no en una esquina de 360 px. */
:root[data-interfaz="nueva"] .nota-video-mini figcaption,
:root[data-interfaz="nueva"] .nota-video-mini .nota-video-fuera {
    display: none;
}

:root[data-interfaz="nueva"] .nota-video-mini .nota-video-marco {
    width: 100%;
    height: auto;
    display: block;
}

/* El hueco que queda arriba mientras el vídeo está en la esquina. Sin fondo ni
   borde: no es una caja, es el sitio que no se cierra para que el texto no suba
   de golpe y el lector no pierda el renglón. */
.nota-video-hueco {
    width: 100%;
}

/* El cerrar. Nace oculto —en su sitio el reproductor no se cierra, se usa— y
   aparece con la clase del mini. */
.nota-video-cerrar {
    display: none;
}

:root[data-interfaz="nueva"] .nota-video-mini .nota-video-cerrar {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* El mínimo táctil, que aquí importa el doble: es el único mando del mini y
       se pulsa con el pulgar, sobre un vídeo en marcha. */
    width: var(--toque-min);
    height: var(--toque-min);
    border: 0;
    background: color-mix(in srgb, var(--tinta) 72%, transparent);
    color: var(--texto-inv);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

:root[data-interfaz="nueva"] .nota-video-mini .nota-video-cerrar:hover {
    background: var(--tinta);
}

:root[data-interfaz="nueva"] .nota-video-mini .nota-video-cerrar:focus-visible {
    outline: 2px solid var(--ladrillo-claro);
    outline-offset: -2px;
}

/* La chapa de vista previa comparte esquina con el mini y le pasa por encima
   (60 sobre 50). Es lo correcto: esa chapa dice que lo que se está viendo no es
   lo que ve el lector, y eso no se tapa con un vídeo. Además solo sale en vista
   previa, es decir: nunca para un lector. */

@media (max-width: 640px) {
    /* Por encima de la barra de abajo: tapar «Cuenta» con un vídeo no es una
       esquina libre. */
    :root[data-interfaz="nueva"] .nota-video-mini {
        bottom: calc(var(--barra-movil-hueco) + var(--e-2));
    }
}

/* --------------------------------------------------------------------------
   «Las claves» y los capítulos, con los colores del rediseño (paso 9)

   Los dos bloques existen en las dos interfaces: son contenido escrito por la
   redacción, no cromo. Lo que cambia aquí es la tipografía —el cuerpo de la nota
   va en serif desde la decisión D5, y estos dos cuelgan de él— y el filete, que
   es el ladrillo de la marca.

   Las claves se quedan a la medida de lectura: un resumen más ancho que el
   texto que resume se lee como otra cosa.
   -------------------------------------------------------------------------- */
/* El diseño no las mete en una caja: un filete de ladrillo a la izquierda, el
   rótulo encima y la lista. Sin fondo y sin borde, porque esto no es un aviso
   —eso es «En desarrollo», que sí va en caja— sino el arranque del texto. */
:root[data-interfaz="nueva"] .nota-claves {
    max-width: var(--medida);
    padding: 0 0 0 var(--e-4);
    background: none;
    border-top: 0;
    border-left: 3px solid var(--ladrillo);
    border-radius: 0;
}

:root[data-interfaz="nueva"] .nota-claves ul {
    gap: var(--e-2);
}

:root[data-interfaz="nueva"] .nota-claves-rotulo {
    font-family: var(--sans);
    font-size: var(--t-antetitulo);
    color: var(--ladrillo);
}

/* En serif, como el cuerpo: es el resumen de ese texto y se lee con él. */
:root[data-interfaz="nueva"] .nota-claves li {
    font-family: var(--serif);
    font-size: var(--t-cuerpo);
    line-height: var(--t-cuerpo-alto);
}

:root[data-interfaz="nueva"] .nota-capitulos {
    max-width: var(--medida);
}

/* El índice, en la sans: es un mando y una lista de datos, no texto corrido. */
:root[data-interfaz="nueva"] .nota-capitulos-rotulo,
:root[data-interfaz="nueva"] .nota-capitulo {
    font-family: var(--sans);
}

:root[data-interfaz="nueva"] .nota-capitulos-rotulo {
    font-size: var(--t-antetitulo);
}

:root[data-interfaz="nueva"] .nota-capitulo-reloj {
    color: var(--ladrillo);
}

:root[data-interfaz="nueva"] .nota-capitulo:focus-visible {
    outline: 2px solid var(--ladrillo);
    outline-offset: -2px;
}

/* ==========================================================================
   La nota, a dos columnas (paso 9, según el diseño entregado)

   El diseño no pone el vídeo vertical «al lado del titular»: pone una **columna
   lateral** de 340 px que arranca a la altura del cuerpo y lleva, en este orden,
   el vídeo vertical, el boletín y «Más en <sección>». El cuerpo se queda en sus
   680 px, que es la medida de lectura del contrato.

   Es mejor que lo que había: el titular y la entradilla ocupan el ancho que les
   toca —son de la nota entera, no de una columna—, y la columna lateral tiene un
   sitio fijo donde poner lo que acompaña, en vez de colgarlo del vídeo.

   La columna va al final del documento y la coloca la rejilla, así que en el
   teléfono cae después del texto sin tocar el marcado, y quien lee con teclado o
   con lector de pantalla no atraviesa un boletín para llegar al cuerpo.
   ========================================================================== */
/* El envoltorio de la apertura no pinta nada: está para que la cabecera y la
   figura se coloquen en la rejilla de la nota como si colgaran de ella. */
.nota-apertura {
    display: contents;
}

/* 1.200 px y no 1.080: la nota con columna mide 680 + 40 + 340 = 1.060, y con el
   relleno lateral de la página (48 por lado) hacen falta 1.156 para que entre sin
   apretar. Por debajo, una columna. */
@media (min-width: 1200px) {
    :root[data-interfaz="nueva"] .nota-con-columna {
        /* `.nota` viene capada a `--nota` (832 px), que es el ancho de una nota de
           una sola columna. Con la columna al lado, el conjunto mide 1.060. */
        max-width: 1060px;
        display: grid;
        /* 680 px clavados, no `var(--medida)` ni un `minmax`. La medida son 68ch y
           un `ch` aquí se mide contra la sans de la nota —no contra el serif del
           cuerpo—, así que salían 444; y con `minmax(0, 680px)` la columna se
           encoge al ancho de lo que haya dentro, que en una nota de vídeo sin
           texto son otros 444. 680 es el número del diseño y es el que va. */
        grid-template-columns: 680px 340px;
        column-gap: var(--e-7);
        align-items: start;
        /* La nota deja de ir centrada en la caja: con una columna al lado, lo que
           se centra es el conjunto. */
        justify-content: center;
    }

    /* Todo lo de la nota va en la primera columna. `.nota-apertura` es
       `display: contents`, así que sus hijos cuentan como hijos de la rejilla y
       hay que nombrarlos igual. */
    :root[data-interfaz="nueva"] .nota-con-columna > *,
    :root[data-interfaz="nueva"] .nota-con-columna > .nota-apertura > * {
        grid-column: 1;
    }

    /* Y la columna, a la derecha y pegada arriba mientras dura el cuerpo. */
    :root[data-interfaz="nueva"] .nota-con-columna > .nota-columna {
        grid-column: 2;
        grid-row: 1 / span 50;
        position: sticky;
        top: var(--e-4);
        display: grid;
        gap: var(--e-6);
        align-content: start;
    }

    /* La foto de portada se desborda a propósito de la caja de lectura —`width:
       min(100%, 60rem)` con márgenes negativos— para respirar en una nota de una
       sola columna. Con la columna al lado eso la metería encima del boletín, así
       que aquí se queda en su columna, que es como está en el diseño. */
    :root[data-interfaz="nueva"] .nota-con-columna .nota-portada {
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
    }

    /* El vídeo vertical no se coloca aquí: va dentro de la columna, que es donde
       lo pone el diseño y lo que deja el titular arriba del todo. Lo único que
       hace falta es que dentro de esos 340 px mande la columna y no el tope de
       26 rem que trae el reproductor vertical de serie. */
    :root[data-interfaz="nueva"] .nota-columna .nota-video-vertical .nota-video-marco {
        max-width: 100%;
    }

    /* El mini manda sobre la rejilla: al encogerse deja de ser una celda y se va
       a la esquina. */
    :root[data-interfaz="nueva"] .nota-con-columna .nota-video-mini {
        position: fixed;
        grid-column: auto;
        grid-row: auto;
    }
}

/* --------------------------------------------------------------------------
   Lo que lleva la columna
   -------------------------------------------------------------------------- */
.nota-columna {
    display: grid;
    gap: var(--e-6);
    margin-block: var(--e-6);
}

.nota-columna h2 {
    margin: 0 0 var(--e-2);
    font-family: var(--serif);
    font-size: 1.25rem;
    line-height: 1.2;
}

/* El boletín de la columna, en caja: aquí no hay banda de color a sangre que lo
   separe del resto, así que lo separa el contorno. */
.nota-columna-boletin {
    padding: var(--e-5);
    border: 1px solid var(--linea);
    border-radius: var(--r-chapa);
    background: var(--papel);
}

/* El rótulo del trozo del boletín es un `.footer-col-title` —nació en el pie—,
   así que aquí se recompone como el de la columna: serif y tamaño de bloque. */
.nota-columna-boletin .footer-col-title {
    margin: 0 0 var(--e-2);
    font-family: var(--serif);
    font-size: 1.25rem;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: 0;
    color: var(--texto);
}

.nota-columna-boletin .boletin-nota {
    margin: 0 0 var(--e-4);
    font-family: var(--sans);
    font-size: var(--t-entradilla);
    color: var(--texto-2, var(--texto));
}

/* El formulario del boletín, en una columna de 340 px, se apila: el campo arriba
   y el botón debajo, los dos a lo ancho. */
.nota-columna-boletin .boletin-form {
    display: grid;
    gap: var(--e-2);
}

.nota-columna-boletin .boletin-form input,
.nota-columna-boletin .boletin-form button {
    width: 100%;
}

/* «Más en <sección>»: titulares y nada más. Sin foto, sin fecha y sin entradilla,
   que es lo que lo distingue de «Sigue leyendo» y lo que lo hace mirable de un
   vistazo mientras se lee otra cosa. */
.nota-columna-mas h2 {
    font-family: var(--sans);
    font-size: var(--t-antetitulo);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--texto-2, var(--texto));
    padding-bottom: var(--e-2);
    border-bottom: 1px solid var(--linea);
}

.nota-columna-mas ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nota-columna-mas li + li {
    border-top: 1px solid var(--linea);
}

.nota-columna-mas a {
    display: block;
    padding: var(--e-3) 0;
    font-family: var(--serif);
    font-size: 1.05rem;
    line-height: 1.3;
    color: var(--texto);
    text-decoration: none;
}

.nota-columna-mas a:hover {
    color: var(--ladrillo);
}

/* --------------------------------------------------------------------------
   La miga de pan y la chapa de «nota con vídeo»
   -------------------------------------------------------------------------- */
.nota-miga {
    margin-bottom: var(--e-4);
    font-family: var(--sans);
    font-size: var(--t-antetitulo);
    color: var(--texto-2, var(--texto));
}

.nota-miga a {
    color: inherit;
    text-decoration: none;
}

.nota-miga a:hover {
    color: var(--ladrillo);
    text-decoration: underline;
}

.nota-miga-separador {
    margin-inline: var(--e-1);
    opacity: .6;
}

/* El titular de la nota, recortado a un renglón: la miga dice dónde estás, no
   vuelve a contar la noticia. */
.nota-miga-aqui {
    display: inline-block;
    max-width: 28ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.nota-chapa-video {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    margin-bottom: var(--e-3);
    padding: var(--e-1) var(--e-3);
    border-radius: var(--r-chapa);
    background: var(--rosa);
    color: var(--ladrillo);
    font-family: var(--sans);
    font-size: var(--t-antetitulo);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.nota-chapa-video-triangulo {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 0 4px 7px;
    border-color: transparent transparent transparent currentColor;
}

/* --------------------------------------------------------------------------
   Lo que viene detrás de la nota, alineado con ella

   «Sigue leyendo», los comentarios y Lo más leído son hermanos del artículo, no
   hijos: la caja de la nota no los alcanza. Y con la columna lateral puesta, la
   nota mide 1.060 y ellos seguían midiendo la medida de lectura, así que sus
   bordes izquierdos no coincidían con nada y «Sigue leyendo» pintaba tres
   tarjetas y media fila.

   `:has()` es lo que permite decir «en una página cuya nota lleva columna»
   desde fuera de la nota. Es lo mismo que hace la rejilla, dicho al revés.
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
    :root[data-interfaz="nueva"] main:has(.nota-con-columna) .relacionados,
    :root[data-interfaz="nueva"] main:has(.nota-con-columna) .comentarios,
    :root[data-interfaz="nueva"] main:has(.nota-con-columna) .mas-leido-nota {
        max-width: 1060px;
    }

    /* Cuatro a lo ancho, que es lo que pide el diseño y lo que cabe exacto en
       1.060: la rejilla adaptable dejaba tres y una colgando. */
    :root[data-interfaz="nueva"] main:has(.nota-con-columna) .relacionados-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* --------------------------------------------------------------------------
   La franja de lo que está pasando

   Antes de la apertura y antes de todo: es lo único de la primera plana que
   cambia cada pocos minutos. Rosa de la marca, la chapa en ladrillo y el
   titular en la sans, que aquí no se lee como un titular de periódico sino como
   un aviso que se mira de reojo.

   Es un enlace entero —no un titular con un enlace dentro—: lo que se quiere es
   que cueste poco llegar a la nota, y para eso la diana es toda la franja.
   -------------------------------------------------------------------------- */
.portada-desarrollo {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--e-3);
    margin-bottom: var(--e-5);
    padding: var(--e-3) var(--e-4);
    border-radius: var(--r-chapa);
    background: var(--rosa);
    color: var(--texto);
    text-decoration: none;
    /* El mínimo táctil, que en el teléfono esta franja es lo primero que cae
       debajo del pulgar al abrir la portada. */
    min-height: var(--toque-min);
}

.portada-desarrollo:hover .portada-desarrollo-titulo {
    text-decoration: underline;
}

.portada-desarrollo-chapa {
    flex: none;
    font-family: var(--sans);
    font-size: var(--t-antetitulo);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--ladrillo);
}

.portada-desarrollo-titulo {
    font-family: var(--sans);
    font-size: var(--t-entradilla);
    line-height: 1.35;
}

/* Cuándo se tocó, al final y en el registro de los datos: es un dato, no parte
   del titular. */
.portada-desarrollo-cuando {
    margin-left: auto;
    flex: none;
    font-family: var(--font-mono);
    font-size: var(--t-antetitulo);
    color: var(--texto-2, var(--texto));
}

@media (max-width: 640px) {
    /* En una columna estrecha, «actualizado hace 8 min» debajo y no empujando el
       titular a tres renglones. */
    .portada-desarrollo-cuando {
        margin-left: 0;
    }
}

/* --------------------------------------------------------------------------
   La testera, a la izquierda (diseño entregado)

   El portal la compone centrada —«como la testera de un impreso»— y el diseño
   del rediseño la pone a la izquierda, con la marca abriendo la página y lo
   demás a su derecha. Se cambia solo la colocación: el logotipo, su regla y su
   entrada siguen siendo los mismos.

   Es un primer paso a propósito: queda el resto de la cabecera del diseño —la
   edición impresa en PDF a la derecha, el buscador— que es otra conversación.
   -------------------------------------------------------------------------- */
/* Solo de 1.081 px para arriba: por debajo, portal.css reparte la cabecera en dos
   filas con zonas nombradas —menú, nombre y cuenta arriba; buscador debajo— y eso
   ya coloca la marca donde toca en un teléfono. Tocar ahí las columnas sería
   deshacer ese trabajo para repetirlo. */
@media (min-width: 1081px) {
    :root[data-interfaz="nueva"] .header-grid {
        /* La marca sola. En el diseño la testera no lleva nada más en pantalla
           grande: las secciones están en la fila de abajo, con «Más» recogiendo
           las que no caben, y el servicio en la fila negra de arriba. */
        grid-template-columns: minmax(0, 1fr);
    }

    /* El botón de menú se va de la testera, que es lo que pide el diseño: aquí
       arriba duplicaba la barra de secciones que tiene justo debajo. No se borra
       —en el teléfono es la única puerta al cajón lateral— ni se esconde de los
       lectores de pantalla en el teléfono: desaparece solo a este ancho. */
    :root[data-interfaz="nueva"] .header-left {
        display: none;
    }

    /* `order` y no mover el marcado: en el documento la testera va después del
       botón de menú, y ese orden es el que siguen el teclado y el lector de
       pantalla. Lo que cambia es dónde se pinta. */
    :root[data-interfaz="nueva"] .logo-area {
        order: -1;
        justify-self: start;
        text-align: left;
    }

    :root[data-interfaz="nueva"] .logo-main {
        text-align: left;
    }

    /* La regla de la marca se traza desde la izquierda, que es de donde nace el
       gesto; centrada bajo una testera centrada tenía sentido, aquí no. */
    :root[data-interfaz="nueva"] .logo-regla {
        margin-inline: 0;
    }
}

/* --------------------------------------------------------------------------
   «Lo más leído», al pie de la columna de la apertura (diseño entregado)

   En el diseño no es una fila a lo ancho: es una caja al final de la columna
   lateral, con los números grandes en ladrillo y los titulares apilados. A
   1.400 px de ancho, una lista numerada de cinco titulares se lee como un
   índice perdido; en una columna de 340, como lo que es.

   Las fotos pequeñas que lleva en la fila no caben aquí y se van: lo que manda
   en este bloque es el orden, y para eso basta el número.
   -------------------------------------------------------------------------- */
.mas-leido-columna {
    margin-top: var(--e-6);
    padding: var(--e-4);
    border: 1px solid var(--linea);
    border-radius: var(--r-chapa);
    background: var(--crema);
}

.mas-leido-columna .section-header {
    margin-bottom: var(--e-2);
    border: 0;
    padding: 0;
}

.mas-leido-columna .section-header h2 {
    font-family: var(--sans);
    font-size: var(--t-antetitulo);
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--texto-2);
}

.mas-leido-columna .section-header h2::before {
    display: none;
}

.mas-leido-columna .mas-leido-item:first-child {
    border-top: 0;
}

.mas-leido-columna .mas-leido-enlace {
    grid-template-columns: auto 1fr;
    gap: var(--e-3);
    padding: var(--e-3) 0;
    align-items: start;
}

.mas-leido-columna .mas-leido-enlace::before {
    font-size: 1.1rem;
    /* Alineado con la primera línea del titular, no centrado con el bloque: el
       número es la posición, y se lee junto al primer renglón. */
    padding-top: .15rem;
}

/* La foto pequeña sobra en una columna de 340 px: con ella, el titular se queda
   en cuatro palabras por renglón. */
.mas-leido-columna .mas-leido-marco {
    display: none;
}

.mas-leido-columna .mas-leido-titulo {
    font-family: var(--serif);
    font-size: 1rem;
    line-height: 1.25;
}

/* --------------------------------------------------------------------------
   El rótulo de Fuente TV, como el diseño

   En el diseño no es el rotulito de una zona más: es el nombre de la capa de
   vídeo, en serif grande, con un triángulo de reproducción delante y una línea
   que explica de qué va. Debajo, las piezas.

   Por eso aquí el rótulo deja de llevar el punto de las demás zonas y de
   componerse en la sans pequeña: esta banda no es «una sección más del
   periódico», que es justamente lo que el fondo tinta ya está diciendo.
   -------------------------------------------------------------------------- */
:root[data-interfaz="nueva"] .video-reel .video-reel-cabecera {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    row-gap: var(--e-1);
    margin-bottom: var(--e-5);
    border-bottom: 0;
}

:root[data-interfaz="nueva"] .video-reel .video-reel-cabecera h2 {
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: var(--e-3);
    font-family: var(--serif);
    font-size: clamp(1.6rem, 2.6vw, 2rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-transform: none;
}

/* El punto de las zonas se cambia por el triángulo de reproducción, que es el
   mismo gesto que la chapa del minutaje y la entrada de la barra de servicio:
   tres sitios, un solo signo para «esto es vídeo». */
:root[data-interfaz="nueva"] .video-reel .video-reel-cabecera h2::before {
    content: "";
    flex: none;
    width: 0;
    height: 0;
    border-radius: 0;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent var(--ladrillo-claro);
    background: none;
}

:root[data-interfaz="nueva"] .video-reel-bajada {
    grid-column: 1;
    margin: 0;
    font-family: var(--sans);
    font-size: var(--t-entradilla);
    color: var(--texto-inv-2);
}

:root[data-interfaz="nueva"] .video-reel .video-reel-cabecera .ver-todos {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
}

/* ==========================================================================
   Los rótulos de zona, como el diseño los escribe

   En el portal de siempre el rótulo de una zona es un sumario de manual: un
   punto, el nombre en versal muy espaciada y el filete debajo. El diseño pide
   otra cosa y la pide en todas las zonas —«Hoy», «Cultura», «Tecnología»,
   «Opinión»—: el nombre en serif grande, tal como se escribe, y el filete.

   El punto se va. Con el nombre a 30 px ya no ordena nada: es un adorno al lado
   de una palabra que se lee sola. Fuente TV conserva el suyo, que no es un punto
   sino el triángulo de reproducción, y por eso se escribió aparte.
   -------------------------------------------------------------------------- */
:root[data-interfaz="nueva"] .section-header h2 {
    font-family: var(--serif);
    font-size: clamp(1.45rem, 2.1vw, var(--t-rotulo));
    font-weight: 700;
    line-height: var(--t-titular-alto);
    letter-spacing: -0.01em;
    text-transform: none;
}

:root[data-interfaz="nueva"] .section-header h2::before {
    display: none;
}

/* El rótulo de una sección lleva al mismo sitio que «Ver todos», así que hereda
   el color del texto y no el del enlace: dos ladrillos en la misma línea
   compiten, y el que importa es el de la derecha. */
:root[data-interfaz="nueva"] .section-header h2 .seccion-titulo {
    color: inherit;
}

/* «Ver todos →» en el ladrillo y en la sans del diseño. En monoespaciado y en
   versal se leía como un dato —el número de página de un sumario— y aquí es lo
   que es: el enlace a la sección. */
:root[data-interfaz="nueva"] .ver-todos {
    font-family: var(--sans);
    font-size: var(--t-entradilla);
    letter-spacing: 0;
    text-transform: none;
    color: var(--ladrillo);
}

:root[data-interfaz="nueva"] .ver-todos:hover {
    color: var(--ladrillo-oscuro);
}

/* ==========================================================================
   Los dos bloques de sección del día, emparejados (diseño entregado)

   El diseño los pone uno al lado del otro a media caja: foto, titular y tres
   renglones cada uno. A lo ancho eran dos portadas pegadas, y en el teléfono los
   bloques de sección apilados se llevaban 7.600 px de los 11.665 que medía la
   página —la cuenta del paso 9—.

   `auto-fit` y no dos columnas fijas: con una sola sección —porque la otra se
   quedó sin material— la que queda ocupa el ancho entero en vez de dejar media
   caja en blanco, que es la regla A aplicada a la rejilla.
   -------------------------------------------------------------------------- */
.portada-secciones {
    display: grid;
    /* `min(22rem, 100%)` y no `22rem` a secas: en un telefono de 390 px la caja
       mide 342 y una columna de 352 se sale de la pagina. El minimo de un
       minmax no se encoge nunca —ese es su trabajo—, asi que hay que decirle
       que por debajo de su medida mande el ancho disponible. */
    grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
    gap: var(--e-7);
}

/* Dentro del par, el bloque deja de partirse en foto y lista: no cabe. La foto
   va arriba, el titular debajo y las miniaturas después, que es como se lee una
   columna estrecha.

   Y solo cuando hay par. Con un bloque solo —porque el otro se quedó sin
   material— la rejilla le da el ancho entero, y ahí apilar significa una foto de
   1.344 px y 756 de alto: media pantalla para una nota. A lo ancho vuelve el
   reparto de siempre, foto a la izquierda y miniaturas al lado, que es con lo
   que `portal.css` lo pinta desde antes del rediseño. */
:root[data-interfaz="nueva"] .portada-secciones:has(.section-block:nth-child(2)) .seccion-bloque {
    grid-template-columns: minmax(0, 1fr);
}

/* El titular de la destacada, al cuerpo del diseño: por encima de un renglón y
   por debajo del rótulo de la zona. */
:root[data-interfaz="nueva"] .portada-secciones .seccion-principal h3 {
    font-family: var(--serif);
    font-size: clamp(1.25rem, 1.7vw, 1.6rem);
    line-height: 1.18;
    letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   Lo demás que hay en la sección: miniaturas, no renglones

   El bloque emparejado lleva tres notas debajo de la destacada, cada una con su
   foto pequeña. Un rato fueron titulares a secas —caben más en media caja— y el
   resultado fue un bloque sin vida: tres líneas grises bajo una foto grande se
   leen como el pie de la foto. Aquí solo se separa la lista de la destacada; lo
   demás lo pone `.seccion-miniaturas`, que es de las dos pieles.
   -------------------------------------------------------------------------- */
:root[data-interfaz="nueva"] .portada-secciones:has(.section-block:nth-child(2)) .seccion-miniaturas {
    margin-top: var(--e-5);
}

/* --------------------------------------------------------------------------
   La firma de una tarjeta, como la escribe el diseño

   En la sans y en el gris secundario, no en monoespaciado. El monoespaciado es
   el registro de los datos del portal de siempre —fechas, minutajes, números de
   página— y aquí la firma no es un dato: es quién lo cuenta.
   -------------------------------------------------------------------------- */
:root[data-interfaz="nueva"] .card-autor,
:root[data-interfaz="nueva"] .card-time {
    font-family: var(--sans);
    font-size: var(--t-entradilla);
    letter-spacing: 0;
}

:root[data-interfaz="nueva"] .card-autor {
    font-weight: 400;
    color: var(--texto-2);
}

:root[data-interfaz="nueva"] .card-time {
    color: var(--texto-2);
}

/* --------------------------------------------------------------------------
   Las tarjetas, sin el filete de arriba

   El portal de siempre abre cada tarjeta con una regla de 2 px en el acento: es
   la marca de columna de un sumario impreso, y con trece tarjetas en la portada
   dibuja una reja. En el diseño no hay ninguna —ni en «Hoy», ni en Fuente TV, ni
   en el cierre—: lo que separa una tarjeta de la de al lado es el aire, y lo que
   la abre es su foto.
   -------------------------------------------------------------------------- */
:root[data-interfaz="nueva"] .news-card,
:root[data-interfaz="nueva"] .video-card {
    padding-top: 0;
    border-top: 0;
}

/* --------------------------------------------------------------------------
   Debajo del menú no va una banda en blanco

   El cuerpo de la página abre con el ritmo del portal de siempre —hasta 64 px de
   aire—, y en la portada eso dejaba una franja vacía entre la barra de secciones
   y lo primero que hay que leer. En la maqueta no está: la franja de «En
   desarrollo» arranca pegada al filete de la barra.

   Se queda un respiro corto para el caso general —una nota, un listado—, y cero
   cuando lo primero de la página es esa franja, que es cuando la maqueta la pone
   a tocar. `:has` sobre el primer hijo, que es exactamente la condición: no es
   «en la portada», es «cuando la página abre con la franja».
   -------------------------------------------------------------------------- */
:root[data-interfaz="nueva"] main.container {
    padding-top: var(--e-5);
}

:root[data-interfaz="nueva"] main.container:has(> .portada-desarrollo:first-child) {
    padding-top: 0;
}

/* --------------------------------------------------------------------------
   El carrusel debajo de la apertura: tres a la vista, con su línea

   El hueco que la entrega de diseño marca en rojo. Con la franja de pie en la
   columna de al lado, la columna de la apertura acaba en la firma y deja media
   pantalla en blanco: la derecha lleva tres entradas y «Lo más leído», y en una
   fila de dos manda la más alta.

   Lo que lo llena son tres piezas de texto separadas por un filete, y el resto
   a un clic. La tira es la de siempre —`[data-carrusel]`, con sus flechas, su
   teclado y su arrastre—: aquí solo cambian las medidas, porque el paso es un
   tercio de la columna y no una tarjeta de 20 rem.
   -------------------------------------------------------------------------- */
:root[data-interfaz="nueva"] .apertura-carrusel {
    margin-top: var(--e-6);
    padding-top: var(--e-4);
    border-top: 2px solid var(--texto);
}

/* El rótulo, al tamaño de lo que encabeza. Los de zona van en serif a 30 px;
   esto no es una zona de la portada, es el pie de la apertura. */
:root[data-interfaz="nueva"] .apertura-carrusel .section-header {
    margin-bottom: var(--e-4);
    padding-bottom: 0;
    border-bottom: 0;
}

:root[data-interfaz="nueva"] .apertura-carrusel .section-header h2 {
    font-family: var(--sans);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ladrillo);
}

/* Tres exactas, no «le que quepa»: el dibujo pide tres y el paso de las flechas
   sale de la medida de una, así que la tira avanza de tres en tres sin que el
   guión sepa nada de esto. */
:root[data-interfaz="nueva"] .apertura-carrusel .carrusel-item {
    flex: 0 0 calc((100% - 2 * var(--gap)) / 3);
    padding-left: var(--e-4);
    border-left: 1px solid var(--linea);
}

/* La primera también lleva su filete: así se leen tres columnas de una misma
   banda, y no dos piezas colgando de la de la izquierda.

   Dentro va la tarjeta de la zona, con su foto. Lo que se recorta es lo que
   sobra a este tamaño: la entradilla —que en una banda que se mueve sola no se
   lee de paso— y la firma, que es el dato más pequeño de la pieza más pequeña
   de la portada. Queda foto, sección y titular, que es lo que hace mirar. */
:root[data-interfaz="nueva"] .apertura-carrusel .news-card,
:root[data-interfaz="nueva"] .apertura-carrusel .video-card {
    width: 100%;
}

:root[data-interfaz="nueva"] .apertura-carrusel .card-media,
:root[data-interfaz="nueva"] .apertura-carrusel .video-marco {
    height: auto;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--e-3);
}

:root[data-interfaz="nueva"] .apertura-carrusel .news-card h4,
:root[data-interfaz="nueva"] .apertura-carrusel .video-card h4 {
    font-size: 1rem;
    line-height: 1.25;
}

:root[data-interfaz="nueva"] .apertura-carrusel .news-card p,
:root[data-interfaz="nueva"] .apertura-carrusel .card-pie {
    display: none;
}

/* En el teléfono la columna ya no existe —el dúo se apila— y tres tercios de
   390 px no son tres piezas, son tres columnas de una palabra. Una y media,
   que es lo que dice que hay más a la derecha. */
@media (max-width: 720px) {
    :root[data-interfaz="nueva"] .apertura-carrusel .carrusel-item {
        flex: 0 0 min(68%, 16rem);
    }
}

/* --------------------------------------------------------------------------
   El buscador de la testera, en tableta

   Por debajo de 1.081 px la cabecera se parte en dos renglones y el buscador se
   queda con el de abajo entero: en un teléfono está bien, pero en una tableta son
   700 px de caja para escribir dos palabras, y al lado de una testera centrada se
   lee como un error de maquetación. Se capa y se centra bajo la marca.

   De 640 para abajo no: ahí el ancho entero es el ancho entero.
   -------------------------------------------------------------------------- */
@media (min-width: 641px) and (max-width: 1080px) {
    :root[data-interfaz="nueva"] .header-search form {
        max-width: 26rem;
        margin-inline: auto;
    }
}

/* --------------------------------------------------------------------------
   El botón de menú, lo primero de la fila negra

   Tres sitios en un día, y este es el bueno. En la testera duplicaba la barra de
   secciones que tiene justo debajo; en la propia barra de secciones se leía como
   una sección más. Aquí arriba, delante de la fecha, está con lo que es: la
   zona de servicio del portal, y el cajón lateral es la puerta a lo que la
   portada no enseña —las secciones sin notas, el archivo, el RSS—.
   -------------------------------------------------------------------------- */
.barra-menu {
    gap: .5rem;
    padding-inline: 0;
    font-weight: 700;
}

.barra-menu .hamburger {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    width: 1.05em;
    height: .8em;
}

.barra-menu .hamburger span {
    display: block;
    height: 1.5px;
    background: currentColor;
}

/* En el teléfono la fila se queda con la fecha y la cuenta, y el cajón se abre
   desde la testera y desde «Secciones», abajo. Tres puertas en 390 px es una
   pantalla hecha de puertas. */
@media (max-width: 1080px) {
    .barra-menu {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   El carrusel debajo de la apertura: tres a la vista, con su línea

   El hueco que la entrega de diseño marca en rojo. Con la franja de pie en la
   columna de al lado, la columna de la apertura acaba en la firma y deja media
   pantalla en blanco: la derecha lleva tres entradas y «Lo más leído», y en una
   fila de dos manda la más alta.

   Lo que lo llena son tres piezas de texto separadas por un filete, y el resto
   a un clic. La tira es la de siempre —`[data-carrusel]`, con sus flechas, su
   teclado y su arrastre—: aquí solo cambian las medidas, porque el paso es un
   tercio de la columna y no una tarjeta de 20 rem.
   -------------------------------------------------------------------------- */
:root[data-interfaz="nueva"] .apertura-carrusel {
    margin-top: var(--e-6);
    padding-top: var(--e-4);
    border-top: 2px solid var(--texto);
}

/* El rótulo, al tamaño de lo que encabeza. Los de zona van en serif a 30 px;
   esto no es una zona de la portada, es el pie de la apertura. */
:root[data-interfaz="nueva"] .apertura-carrusel .section-header {
    margin-bottom: var(--e-4);
    padding-bottom: 0;
    border-bottom: 0;
}

:root[data-interfaz="nueva"] .apertura-carrusel .section-header h2 {
    font-family: var(--sans);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ladrillo);
}

/* Tres exactas, no «le que quepa»: el dibujo pide tres y el paso de las flechas
   sale de la medida de una, así que la tira avanza de tres en tres sin que el
   guión sepa nada de esto. */
:root[data-interfaz="nueva"] .apertura-carrusel .carrusel-item {
    flex: 0 0 calc((100% - 2 * var(--gap)) / 3);
    padding-left: var(--e-4);
    border-left: 1px solid var(--linea);
}

/* La primera también lleva su filete: así se leen tres columnas de una misma
   banda, y no dos piezas colgando de la de la izquierda.

   Dentro va la tarjeta de la zona, con su foto. Lo que se recorta es lo que
   sobra a este tamaño: la entradilla —que en una banda que se mueve sola no se
   lee de paso— y la firma, que es el dato más pequeño de la pieza más pequeña
   de la portada. Queda foto, sección y titular, que es lo que hace mirar. */
:root[data-interfaz="nueva"] .apertura-carrusel .news-card,
:root[data-interfaz="nueva"] .apertura-carrusel .video-card {
    width: 100%;
}

:root[data-interfaz="nueva"] .apertura-carrusel .card-media,
:root[data-interfaz="nueva"] .apertura-carrusel .video-marco {
    height: auto;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--e-3);
}

:root[data-interfaz="nueva"] .apertura-carrusel .news-card h4,
:root[data-interfaz="nueva"] .apertura-carrusel .video-card h4 {
    font-size: 1rem;
    line-height: 1.25;
}

:root[data-interfaz="nueva"] .apertura-carrusel .news-card p,
:root[data-interfaz="nueva"] .apertura-carrusel .card-pie {
    display: none;
}

/* En el teléfono la columna ya no existe —el dúo se apila— y tres tercios de
   390 px no son tres piezas, son tres columnas de una palabra. Una y media,
   que es lo que dice que hay más a la derecha. */
@media (max-width: 720px) {
    :root[data-interfaz="nueva"] .apertura-carrusel .carrusel-item {
        flex: 0 0 min(68%, 16rem);
    }
}

/* --------------------------------------------------------------------------
   El botón de menú, en la barra y no en la testera

   Tres rayas y la palabra, a la izquierda del todo y separadas de las secciones
   por un filete: es la puerta a lo que la fila no enseña —las secciones sin
   notas, el archivo, el RSS— y por eso va con ellas y no encima.

   `order: 0` para que se quede delante: la fila ordena a mano sus hijos
   —secciones en 1, «Más» en 2— y sin esto el botón caería donde lo dejara el
   marcado. Y `position: sticky` en el borde izquierdo porque esta fila se
   arrastra de lado cuando las secciones no caben: la puerta no se va con ellas.
   -------------------------------------------------------------------------- */
:root[data-interfaz="nueva"] .nav-menu {
    order: 0;
    position: sticky;
    left: 0;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex: none;
    margin-right: .25rem;
    padding: .85rem clamp(.6rem, 1vw, 1rem) .85rem 0;
    border: 0;
    border-bottom: 2px solid transparent;
    border-right: 1px solid var(--linea);
    background: var(--papel);
    color: var(--texto);
    font-family: var(--sans);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .2s var(--ease);
}

:root[data-interfaz="nueva"] .nav-menu:hover {
    color: var(--ladrillo);
}

:root[data-interfaz="nueva"] .nav-menu .hamburger {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    width: 1.05em;
    height: .8em;
}

:root[data-interfaz="nueva"] .nav-menu .hamburger span {
    display: block;
    height: 1.5px;
    background: currentColor;
}

/* En el teléfono no: ahí el botón de la testera sigue en su sitio y abajo está
   «Secciones». Tres puertas al mismo cajón en una pantalla de 390 px es una
   pantalla hecha de puertas. */
@media (max-width: 1080px) {
    :root[data-interfaz="nueva"] .nav-menu {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   El pie, descuadrado desde que el boletín se mudó

   `.footer-top` reparte tres columnas —marca, boletín y enlaces— porque en la
   piel clásica el formulario del boletín vive ahí en medio. En la nueva subió a
   su propia banda, y la columna de en medio se quedó vacía: los cuatro bloques
   de enlaces se apretaban en el último tercio, se partían en dos renglones y
   dejaban media página en negro a la derecha. No era el pie: era un hueco de
   440 px que nadie llenaba.

   Dos columnas, y los enlaces con el sitio que les sobraba.
   -------------------------------------------------------------------------- */
/* Por encima de 1.081 px, que es donde `portal.css` reparte el pie en columnas:
   por debajo lo apila él, y pisarle esa regla sin condición de ancho dejaba dos
   columnas en un teléfono —cuatro bloques de 150 px en un tercio de 390— y la
   portada entera con 16 px de arrastre lateral. Medido con la sonda, no a ojo. */
@media (min-width: 1081px) {
    :root[data-interfaz="nueva"] .footer-top {
        grid-template-columns: minmax(220px, 1fr) minmax(0, 3fr);
    }

    /* Y en cuatro columnas iguales, que son los cuatro bloques que hay. Con
       `auto-fit` el ancho mandaba y «Transparencia», que tiene un solo enlace,
       podía quedarse sola en un renglón debajo de las otras tres. */
    :root[data-interfaz="nueva"] .footer-nav {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* El aviso legal, pegado al margen. `.footer-legal` reserva a la izquierda la
   columna de los iconos de redes; sin ninguna red configurada esa columna es
   una caja vacía que empuja el copyright 2,5 rem hacia dentro y lo deja
   desalineado con todo lo de arriba. Vacía no ocupa. */
:root[data-interfaz="nueva"] .footer-legal-side:not(:has(*)) {
    display: none;
}