/* ==========================================================================
   El Turpial Digital — DIARIO (tema 4.0)

   Una sola hoja para todo el sitio, ordenada de lo general a lo particular:
     1. Fichas      colores, tipos, medidas
     2. Base        reinicio y elementos sueltos
     3. Cabecera    servicio, marca, secciones, buscador, cinta
     4. Tarjeta     la pieza con que se arma todo
     5. Portada     tapa, dólar, lo último, banda, bloques, cierre
     6. Archivos    secciones, búsqueda, autor, paginación, lateral
     7. Nota        cabecera de la nota, firma, foto, relacionadas
     8. Boletín, anuncios, vacíos
     9. Pie
    10. Responsive  (al final, de mayor a menor)

   Gramática: tinta casi negra para la estructura (filetes, navegación, pie),
   rojo de marca sólo para señales (sección, hora, acentos) y el ámbar del
   ave reservado para el dato del dólar. Filetes finos en vez de cajas; fotos
   a caja, sin redondeos ni sombras, como en el papel.
   ========================================================================== */

/* 1. FICHAS ---------------------------------------------------------------- */
:root {
  /* Marino y oro: la estructura en azul marino —el color de la confianza en
     prensa— y el oro del pecho del turpial como único acento cálido. El rojo
     queda para lo urgente o lo que sube: «en vivo», alzas del dólar.
     Todos los pares de texto están medidos contra AA (4,5:1). */
  --tinta: #111827;      /* texto principal  17,7:1 */
  --texto: #111827;
  --texto-2: #374151;    /* bajadas          10,3:1 */
  --texto-3: #5b6472;    /* meta, fechas      6,0:1 · 5,5:1 sobre gris */
  --linea: #e4e7ec;
  --linea-2: #cdd3dc;
  --fondo: #ffffff;
  --papel: #f3f5f8;      /* superficies grises frías */
  --marino: #0f2747;     /* navegación, dato, boletín, pie */
  --marino-2: #1b3a63;   /* separadores sobre marino */
  --azul: #1957a6;       /* antetítulos, horas, enlaces  7,1:1 */
  --oro: #f5b301;        /* acento del ave: botones y barras; texto sólo sobre marino (8,1:1) */
  --oro-2: #ffc933;      /* oro al pasar el cursor */
  --rojo: #c8102e;       /* en vivo, alzas  5,9:1 */
  --naranja-osc: #c25e00;
  --verde: #0f7a41;
  --sobre-marino: #c3cbd8; /* texto secundario sobre marino 9,2:1 */
  --radio: 6px;
  --radio-s: 4px;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Libre Franklin", "Franklin Gothic Medium", "Helvetica Neue", Arial, sans-serif;
  --marca: Archivo, "Helvetica Neue", Arial, sans-serif;

  --ancho: 1280px;
  --gutter: 24px;
  --ease: cubic-bezier(.23, 1, .32, 1);

  /* Nombres de la versión 3, que todavía leen los mu-plugins y algunas notas. */
  --tp-marca: var(--rojo); --tp-texto: var(--texto); --tp-suave: var(--texto-3);
  --tp-linea: var(--linea); --tp-caja: var(--papel); --tp-fondo: var(--fondo);
  --tp-sube: var(--rojo); --tp-baja: var(--verde); --tp-ave-ambar: #fabb00;
}

/* 2. BASE ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 400 1rem/1.55 var(--sans); font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, video, svg { max-inline-size: 100%; }
img { block-size: auto; display: block; }
img.emoji, .wp-smiley { display: inline; }
a { color: inherit; text-underline-offset: .16em; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; }
p { margin: 0 0 1em; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--rojo); outline-offset: 3px; }
::selection { background: #cfe0f7; color: var(--tinta); }
input::placeholder { color: var(--texto-3); opacity: 1; }

.contenedor { max-inline-size: var(--ancho); margin-inline: auto; padding-inline: var(--gutter); }
main.contenedor { padding-block: 28px 0; }
.visualmente-oculto {
  position: absolute !important; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.saltar {
  position: absolute; inset: -100px auto auto 8px; z-index: 100;
  background: var(--tinta); color: #fff; padding: 10px 14px; font-weight: 700; text-decoration: none;
}
.saltar:focus { inset-block-start: 8px; }
.cifra { font-variant-numeric: tabular-nums; }
.sube { color: var(--rojo); }
.baja { color: var(--verde); }
.punto { margin-inline: 6px; }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-block-size: 40px; padding: 0 18px; border: 1px solid var(--marino); border-radius: var(--radio-s);
  background: var(--fondo); color: var(--marino); cursor: pointer; white-space: nowrap;
  font: 800 .78125rem/1 var(--sans); letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.boton:hover { background: var(--marino); color: #fff; }
.boton--rojo { background: var(--oro); border-color: var(--oro); color: var(--marino); }
.boton--rojo:hover { background: var(--oro-2); border-color: var(--oro-2); color: var(--marino); }
.boton--icono { inline-size: 40px; padding: 0; }
.boton[hidden] { display: none; }
.boton[aria-expanded="true"] { background: var(--marino); color: #fff; }

/* 3. CABECERA -------------------------------------------------------------- */

/* Barra de servicio: fecha y cotizaciones. */
.servicio { background: var(--papel); border-bottom: 1px solid var(--linea); font-size: .8125rem; color: var(--texto-2); }
.servicio__in { display: flex; align-items: center; gap: 28px; min-block-size: 38px; }
.servicio__fecha { font-weight: 600; color: var(--texto); white-space: nowrap; }
.servicio__cot { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.servicio__cot a { display: flex; align-items: baseline; gap: 6px; text-decoration: none; white-space: nowrap; }
.servicio__cot span { font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); }
.servicio__cot strong { font-size: .875rem; font-weight: 700; color: var(--texto); }
.servicio__cot em { font-style: normal; font-size: .75rem; font-weight: 700; }
.servicio__cot em span { color: inherit; font-size: .625rem; margin-inline-end: 2px; }
.servicio__cot a:hover strong { text-decoration: underline; }
.servicio__enlaces { display: flex; gap: 18px; list-style: none; margin: 0 0 0 auto; padding: 0; }
.servicio__enlaces a { font-weight: 600; text-decoration: none; }
.servicio__enlaces a:hover { text-decoration: underline; }

/* Marca. La cabecera es pegajosa con un `top` negativo que calcula nav.js:
   al bajar sólo queda a la vista la barra de secciones. */
.cabecera { position: sticky; inset-block-start: var(--cabecera-top, 0px); z-index: 50; background: var(--fondo); transition: box-shadow .3s ease; }
.cabecera--compacta { box-shadow: 0 4px 18px rgb(15 39 71 / .22); }
.cabecera__fila { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; padding-block: 22px; }
.cabecera__lado { display: flex; flex-direction: column; gap: 3px; min-inline-size: 0; }
.cabecera__lado--der { flex-direction: row; justify-content: flex-end; align-items: center; gap: 10px; }
.cabecera__edicion { font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.cabecera__lema { font: 400 1rem/1.3 var(--serif); color: var(--texto-2); }

.marca { margin: 0; font-size: inherit; line-height: 1; }
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--tinta); }
.logo img { block-size: 62px; inline-size: auto; }
.logo__t { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.logo__n { font: 800 2.75rem/1 var(--marca); letter-spacing: -.035em; color: #0b0b0c; }
/* «El» más chico y en ámbar oscurecido: el nombre que pesa es «Turpial». */
.logo__n em { font-style: normal; font-weight: 700; font-size: .6em; color: var(--naranja-osc); margin-inline-end: 3px; vertical-align: .22em; }
/* Placa ámbar con texto negro (11,4:1): la única forma de usar el color del
   ave en texto chico sin que quede ilegible. */
.logo__b {
  margin-top: 5px; padding: 2px 8px 2px 9px; background: #fabb00; color: #0b0b0c; border-radius: 3px;
  font: 800 .6875rem/1.4 var(--marca); letter-spacing: .3em;
}

/* Secciones: barra de tinta, el ancla de toda la página. */
.nav { position: relative; background: var(--marino); color: #fff; border-top: 3px solid var(--oro); }
.nav__in { display: flex; align-items: stretch; }
.nav__marca {
  display: flex; align-items: center; flex: 0 0 auto; inline-size: 0; opacity: 0; overflow: hidden;
  transition: inline-size .22s var(--ease), opacity .22s var(--ease);
}
.nav__marca img { block-size: 30px; inline-size: 30px; object-fit: contain; background: var(--fondo); border-radius: 50%; padding: 2px; }
.cabecera--compacta .nav__marca { inline-size: 46px; opacity: 1; }
.nav__lista {
  display: flex; flex: 1 1 auto; min-inline-size: 0; list-style: none; margin: 0; padding: 0;
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
}
.nav__lista::-webkit-scrollbar { display: none; }
/* Cuando la tira no entra, un desvanecido en el borde avisa que sigue. nav.js
   marca de qué lado queda contenido; sin JS no hay máscara y nada se oculta. */
.nav__lista.desborda-der { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
.nav__lista.desborda-izq { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent); }
.nav__lista.desborda-izq.desborda-der { -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
.nav__lista li { flex: 0 0 auto; }
/* Márgenes automáticos y no justify-content: centran mientras entra todo y,
   cuando no entra, dejan deslizar desde el primer elemento. */
.nav__lista > li:first-child { margin-inline-start: auto; }
.nav__lista > li:last-child { margin-inline-end: auto; }
.nav__lista a {
  position: relative; display: block; padding: 15px 14px 14px;
  font: 800 .78125rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  color: #fff; text-decoration: none; white-space: nowrap; z-index: 0;
}
.nav__lista a::after {
  content: ""; position: absolute; inset: auto 14px 0; block-size: 3px; background: var(--oro);
  transform: scaleX(0); transition: transform .2s var(--ease);
}
.nav__lista a:hover::after,
.nav__lista :is(.current-menu-item, .current-menu-parent, .current-category-ancestor, .current-post-ancestor) > a::after { transform: scaleX(1); }
.nav__lista .sub-menu { display: none; }
.nav__dato a { color: var(--oro); }
.nav__dato a::after { background: var(--oro); }
.nav :focus-visible { outline-color: var(--oro); outline-offset: -3px; }

/* Avance de lectura: filete rojo bajo la barra de secciones. */
.progreso__pista { position: absolute; inset: auto 0 -3px; block-size: 3px; overflow: hidden; pointer-events: none; }
.progreso { display: block; block-size: 100%; background: var(--oro); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .progreso { animation: tp-progreso linear both; animation-timeline: scroll(root block); }
    /* «from» explícito: sin él la animación arranca del scaleX que pone
       nav.js y los dos se suman (a mitad de página marcaba 75 %). */
    @keyframes tp-progreso { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
}

/* Buscador desplegable (y el mismo formulario en búsqueda y 404). */
.cabecera__buscar { background: var(--papel); border-bottom: 1px solid var(--linea); padding-block: 16px; }
.cabecera__buscar[hidden] { display: none; }
.buscador { display: flex; max-inline-size: 640px; margin: 0 auto; border: 2px solid var(--marino); border-radius: var(--radio-s); background: var(--fondo); transition: box-shadow .2s ease; }
.buscador:focus-within { box-shadow: 0 0 0 3px rgb(25 87 166 / .25); }
.buscador__campo { flex: 1 1 auto; min-inline-size: 0; border: 0; padding: 0 14px; min-block-size: 46px; font-size: 1rem; background: transparent; }
.buscador__campo:focus { outline: 0; }
.buscador__boton { border: 0; background: var(--marino); color: #fff; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; font-size: .78125rem; padding: 0 22px; cursor: pointer; transition: background-color .2s ease; }
.buscador__boton:hover { background: var(--azul); }

/* Cinta de titulares de otros medios. */
.ticker { background: var(--fondo); border-bottom: 1px solid var(--linea); }
.ticker__in { display: flex; align-items: center; min-block-size: 44px; }
.ticker__et {
  flex: 0 0 auto; margin-inline-end: 16px; padding: 5px 9px; border-radius: var(--radio-s); background: var(--rojo); color: #fff;
  font: 700 .6875rem/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase;
}
.ticker__pista { flex: 1 1 auto; min-inline-size: 0; overflow-x: auto; scrollbar-width: none; }
.ticker__pista::-webkit-scrollbar { display: none; }
.ticker--animado .ticker__pista { overflow: hidden; }
.ticker--animado .ticker__pista:focus-within { overflow-x: auto; }
.ticker__cinta { display: flex; gap: 24px; inline-size: max-content; white-space: nowrap; }
.ticker__grupo { display: flex; gap: 24px; flex-shrink: 0; }
.ticker__cinta a { font-size: .875rem; font-weight: 600; line-height: 44px; text-decoration: none; }
.ticker__cinta a:hover { text-decoration: underline; }
.ticker__grupo a + a { padding-inline-start: 24px; border-inline-start: 1px solid var(--linea); }
.ticker__medio { margin-inline-start: 8px; font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); }
.ticker__pausa {
  flex: 0 0 44px; block-size: 44px; border: 0; border-inline-start: 1px solid var(--linea);
  background: var(--fondo); cursor: pointer; font: 700 .875rem/1 system-ui, sans-serif;
}
.ticker__pausa:hover { background: var(--papel); }
.ticker__pausa[hidden] { display: none; }

/* 4. TARJETA --------------------------------------------------------------- */
.card { position: relative; min-inline-size: 0; }
.card__foto { display: block; overflow: hidden; background: var(--papel); border-radius: var(--radio-s); margin-block-end: 12px; }
.card__foto img { inline-size: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.card .etiqueta {
  display: inline-block; margin-block-end: 6px;
  font: 800 .6875rem/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--azul); text-decoration: none;
}
.card .etiqueta:hover { text-decoration: underline; }
.card__titulo {
  font: 600 1.3125rem/1.16 var(--serif); letter-spacing: -.01em; text-wrap: balance; color: var(--texto);
}
.card__titulo a {
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px;
  text-underline-offset: .14em; transition: text-decoration-color .25s ease;
}
.card__titulo a:hover { text-decoration-color: var(--oro); }
/* La foto responde al pasar el cursor con un acercamiento lento: sólo
   transform, que lo resuelve la GPU y no recalcula la página. */
.card__foto img { transition: transform .6s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .card:hover .card__foto img { transform: scale(1.03); }
}
.card__bajada { margin: 8px 0 0; font: 400 1.0625rem/1.45 var(--serif); color: var(--texto-2); }
.card__meta { display: flex; flex-wrap: wrap; gap: 0 6px; margin: 10px 0 0; font-size: .78125rem; color: var(--texto-3); }
.card__fuente::before { content: "·"; margin-inline-end: 6px; }

/* Apertura: la foto más grande y el titular que manda en la página. */
.card--lead .card__foto { margin-block-end: 16px; }
.card--lead .card__foto img { aspect-ratio: 16 / 9; }
.card--lead .card__titulo { font-size: clamp(2.125rem, 3.3vw, 3rem); line-height: 1.04; letter-spacing: -.022em; }
.card--lead .card__bajada { font-size: 1.25rem; line-height: 1.45; margin-top: 12px; }

/* Grande: principal de la sección a todo el ancho. */
.card--grande .card__foto img { aspect-ratio: 16 / 9; }
.card--grande .card__titulo { font-size: clamp(1.5rem, 2.2vw, 1.875rem); line-height: 1.12; letter-spacing: -.02em; }
.card--grande .card__bajada { font-size: 1.0625rem; }

/* Fila: texto a la izquierda y miniatura a la derecha. */
.card--fila:not(.card--sin-foto) { display: grid; grid-template-columns: minmax(0, 1fr) 34%; gap: 18px; align-items: start; }
.card--fila .card__foto { order: 2; margin: 0; }
.card--fila .card__titulo { font-size: 1.1875rem; }

/* Horizontal: foto y texto mitad y mitad (sección con una sola nota). */
.card--h:not(.card--sin-foto) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.card--h .card__foto { margin: 0; }
.card--h .card__titulo { font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.14; }

/* Destacada: primera nota de un archivo. */
.card--destacada:not(.card--sin-foto) { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.card--destacada .card__foto { margin: 0; }
.card--destacada .card__foto img { aspect-ratio: 16 / 10; }
.card--destacada .card__titulo { font-size: clamp(1.75rem, 2.6vw, 2.25rem); line-height: 1.1; letter-spacing: -.022em; }
.card--destacada .card__bajada { font-size: 1.0625rem; }

/* Texto: titular solo, para listas dentro de un bloque. */
.card--texto .card__titulo { font-size: 1.125rem; line-height: 1.22; }
.card--texto .card__meta { margin-top: 6px; }

/* 5. PORTADA --------------------------------------------------------------- */

/* Tapa: apertura · acompañantes · columna del dato. */
.tapa {
  display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr) minmax(0, 1.05fr);
  padding-block-end: 32px; border-bottom: 1px solid var(--linea-2);
}
.tapa__lead { padding-inline-end: 24px; border-inline-end: 1px solid var(--linea); }
.tapa__secundarias { padding-inline: 24px; border-inline-end: 1px solid var(--linea); }
.tapa__secundarias .card + .card { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--linea); }
.tapa__rail { padding-inline-start: 24px; }

.relacionados-lead { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--linea); display: grid; gap: 10px; }
.relacionados-lead li { position: relative; padding-inline-start: 18px; font: 600 1.0625rem/1.3 var(--serif); }
.relacionados-lead li::before { content: ""; position: absolute; inset: .42em auto auto 0; inline-size: 8px; block-size: 8px; background: var(--oro); }
.relacionados-lead a { text-decoration: none; }
.relacionados-lead a:hover { text-decoration: underline; }

/* El dólar hoy: bloque marino, cifras en blanco y el oro del ave. */
.dolar { background: var(--marino); color: #fff; padding: 18px 20px; border-top: 4px solid var(--oro); border-radius: 0 0 var(--radio) var(--radio); }
.dolar__cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.dolar__titulo { font: 800 .75rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--oro); }
.dolar__unidad { font-size: .71875rem; color: var(--sobre-marino); }
.dolar__principal { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding-bottom: 14px; border-bottom: 1px solid var(--marino-2); text-decoration: none; }
.dolar__et { flex: 1 0 100%; font-size: .75rem; color: var(--sobre-marino); }
.dolar__principal strong { font: 800 2.625rem/1 var(--sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.dolar__principal:hover strong { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--oro); }
.dolar__var { font-size: .8125rem; font-weight: 700; }
.dolar .sube { color: #ff8b98; }   /* 6,7:1 sobre marino */
.dolar .baja { color: #6ee7a8; }
.dolar__otros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0 0; }
.dolar__otros dt { font-size: .65625rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--sobre-marino); }
.dolar__otros dd { margin: 3px 0 0; font: 800 1.1875rem/1.1 var(--sans); font-variant-numeric: tabular-nums; }
.dolar__brecha dd { color: #ff8b98; }
.dolar__mas { display: inline-block; margin-top: 14px; padding: 9px 14px; border-radius: var(--radio-s); background: var(--oro); font-size: .71875rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--marino); text-decoration: none; transition: background-color .2s ease; }
.dolar__mas::after { content: " →"; }
.dolar__mas:hover { background: var(--oro-2); }
.dolar :focus-visible { outline-color: var(--oro); }

/* Lo último. */
.ultimo { margin-top: 26px; }
.ultimo__titulo {
  display: flex; align-items: center; gap: 9px; padding-bottom: 10px; border-bottom: 3px solid var(--marino);
  font: 800 .8125rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--marino);
}
.ultimo__vivo { flex: 0 0 auto; inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--rojo); }
@media (prefers-reduced-motion: no-preference) {
  .ultimo__vivo { animation: tp-latido 2.4s ease-out infinite; }
}
@keyframes tp-latido {
  0% { box-shadow: 0 0 0 0 rgb(200 16 46 / .45); }
  70%, 100% { box-shadow: 0 0 0 9px rgb(200 16 46 / 0); }
}
.ultimo__lista { list-style: none; margin: 0; padding: 0; }
.ultimo__lista li { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--linea); }
.ultimo__hora { font: 800 .75rem/1.55 var(--sans); color: var(--azul); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ultimo__lista a { font: 600 .96875rem/1.32 var(--serif); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .14em; transition: text-decoration-color .25s ease; }
.ultimo__lista a:hover { text-decoration-color: var(--oro); }

/* Banda: columnas iguales con filete centrado en el hueco. */
.banda {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 40px;
  padding-block: 28px; border-bottom: 1px solid var(--linea);
}
.banda > .card + .card::before { content: ""; position: absolute; inset: 0 auto 0 -20px; inline-size: 1px; background: var(--linea); }
.banda .card__titulo { font-size: 1.1875rem; }

/* Bloques de sección. */
.bloque { margin-top: 44px; }
.bloque__cab {
  position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  border-top: 1px solid var(--linea-2); padding-top: 12px; margin-bottom: 20px;
}
.bloque__cab::before { content: ""; position: absolute; inset: -2px auto auto 0; inline-size: 64px; block-size: 4px; background: var(--oro); }
.bloque__titulo { font: 700 1.75rem/1.1 var(--serif); letter-spacing: -.02em; color: var(--marino); }
.bloque__titulo a { text-decoration: none; }
.bloque__titulo a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.bloque__mas { font: 800 .71875rem/1 var(--sans); letter-spacing: .1em; color: var(--azul); text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.bloque__mas::after { content: " →"; }
.bloque__mas { transition: color .2s ease; }
.bloque__mas:hover { color: var(--marino); }
.bloque__nota { font-size: .8125rem; color: var(--texto-3); }

.bloque__cuerpo { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.bloque__principal { padding-inline-end: 24px; }
.bloque__lista { padding-inline-start: 24px; border-inline-start: 1px solid var(--linea); }
.bloque__lista > .card + .card { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--linea); }
.bloque.bloque--solo .bloque__cuerpo { grid-template-columns: minmax(0, 1fr); }
.bloque.bloque--solo .bloque__principal { padding: 0; }
.bloque--ancho.bloque--solo .card--h { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }

/* El resto de las secciones, de a pares. */
.secciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.secciones > .bloque:last-child:nth-child(odd) { grid-column: 1 / -1; }
.bloque--compacto .bloque__cuerpo { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.bloque--compacto .bloque__principal { padding-inline-end: 20px; }
.bloque--compacto .bloque__lista { padding-inline-start: 20px; }
.bloque--compacto .card--normal .card__titulo { font-size: 1.3125rem; }

/* Cierre: lo que rota y lo más leído. */
.cierre { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: 0 48px; }
.cierre--sin-leidas { grid-template-columns: minmax(0, 1fr); }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px 32px; }
.cierre:not(.cierre--sin-leidas) .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla .card__titulo { font-size: 1.1875rem; }

.mas-leido { list-style: none; margin: 0; padding: 0; }
.mas-leido li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--linea); }
.mas-leido li:first-child { padding-top: 0; }
.mas-leido__n { font: 700 2rem/1 var(--serif); color: var(--azul); }
.mas-leido a { font: 600 1.0625rem/1.3 var(--serif); text-decoration: none; }
.mas-leido a:hover { text-decoration: underline; }

/* 6. ARCHIVOS -------------------------------------------------------------- */
.migas ol { display: flex; flex-wrap: wrap; gap: 4px 8px; list-style: none; margin: 0 0 18px; padding: 0; font-size: .8125rem; color: var(--texto-3); }
.migas li + li::before { content: "›"; margin-inline-end: 8px; color: var(--linea-2); }
.migas a { text-decoration: none; }
.migas a:hover { text-decoration: underline; color: var(--texto); }

.archivo__cab { padding-bottom: 26px; margin-bottom: 30px; border-bottom: 1px solid var(--linea-2); }
.archivo__tipo { margin: 0 0 8px; font: 800 .75rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--azul); }
.archivo__titulo { font: 700 clamp(2.25rem, 5vw, 3.5rem)/1.02 var(--serif); letter-spacing: -.025em; color: var(--marino); }
.archivo__desc { margin-top: 12px; font: 400 1.1875rem/1.45 var(--serif); color: var(--texto-2); max-inline-size: 60ch; }
.archivo__desc p { margin: 0; }
.archivo__cuenta { margin: 12px 0 0; font-size: .8125rem; color: var(--texto-3); }
.archivo__cab .buscador { margin: 20px 0 0; }

.disposicion { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; }
.listado > .card + .card { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--linea); }
.listado > .card--destacada { padding-bottom: 6px; }
.listado .card--fila .card__titulo { font-size: 1.3125rem; }

.pagination { margin-top: 36px; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 6px; }
.page-numbers {
  display: inline-grid; place-items: center; min-inline-size: 42px; block-size: 42px; padding: 0 12px;
  border: 1px solid var(--linea-2); font-size: .875rem; font-weight: 700; text-decoration: none;
}
.page-numbers { border-radius: var(--radio-s); transition: background-color .2s ease, border-color .2s ease; }
.page-numbers:hover { border-color: var(--marino); }
.page-numbers.current { background: var(--marino); border-color: var(--marino); color: #fff; }
.page-numbers.dots { border-color: transparent; }

/* Barra lateral: bloques con filete, sin cajas. */
.disposicion__lateral > * + * { margin-top: 32px; }
.disposicion__lateral .ultimo { margin-top: 32px; }
.lateral__titulo, .widget__titulo {
  position: relative; margin: 0 0 12px; padding-top: 10px; border-top: 1px solid var(--linea-2);
  font: 800 .8125rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--marino);
}
.lateral__titulo::before, .widget__titulo::before { content: ""; position: absolute; inset: -2px auto auto 0; inline-size: 40px; block-size: 3px; background: var(--oro); }
.mas-leido--lateral .mas-leido__n { font-size: 1.5rem; }
.mas-leido--lateral a { font-size: .96875rem; }
.widget-secciones { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.widget-secciones a {
  display: flex; justify-content: space-between; align-items: baseline; padding: 9px 0;
  border-bottom: 1px solid var(--linea); font-size: .75rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; text-decoration: none;
}
.widget-secciones a:hover { color: var(--azul); }
.widget-secciones .cuenta { color: var(--texto-3); font-weight: 400; }
.widget-lista { list-style: none; margin: 0; padding: 0; }
.widget-lista li { padding: 10px 0; border-bottom: 1px solid var(--linea); }
.widget-lista a { font: 600 .96875rem/1.3 var(--serif); text-decoration: none; }
.widget-lista .fecha { display: block; font-size: .75rem; color: var(--texto-3); margin-top: 3px; }

/* 7. NOTA ------------------------------------------------------------------ */
.lectura { max-inline-size: 1080px; margin-inline: auto; }
.nota__cab { margin-bottom: 22px; }
.nota__titulo, .nota__bajada { max-inline-size: 880px; }
.nota__seccion { position: relative; padding-top: 12px; margin-bottom: 14px; border-top: 1px solid var(--linea-2); }
.nota__seccion::before { content: ""; position: absolute; inset: -2px auto auto 0; inline-size: 64px; block-size: 4px; background: var(--oro); }
.nota__seccion a { font: 800 .75rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--azul); text-decoration: none; }
.nota__seccion a:hover { text-decoration: underline; }
.nota__titulo { font: 600 clamp(2.125rem, 4.6vw, 3.625rem)/1.04 var(--serif); letter-spacing: -.024em; text-wrap: balance; color: var(--tinta); }
.nota__bajada { margin: 16px 0 0; font: 400 1.3125rem/1.45 var(--serif); color: var(--texto-2); text-wrap: pretty; }
.nota__temas { margin: 14px 0 0; }
.antetitulo { display: inline-block; font: 700 .6875rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); }

.nota__linea {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding-block: 12px; margin-bottom: 26px; border-block: 1px solid var(--linea);
}
.nota__firmas { display: flex; align-items: center; gap: 12px; }
.nota__avatar { flex: 0 0 auto; inline-size: 42px; block-size: 42px; border-radius: 50%; border: 1px solid var(--linea); padding: 3px; object-fit: contain; background: var(--fondo); }
.nota__firma { font-weight: 700; color: var(--texto); text-decoration: none; }
.nota__firma:hover { text-decoration: underline; }
.nota__meta { margin-top: 1px; font-size: .84375rem; color: var(--texto-3); }
.nota__actualizada { color: var(--azul); font-weight: 700; }
.nota__compartir { display: flex; gap: 8px; }
.nota__compartir a {
  display: grid; place-items: center; inline-size: 42px; block-size: 42px; border-radius: 50%;
  border: 1px solid var(--linea-2); color: var(--texto); transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.nota__compartir a:hover { background: var(--marino); border-color: var(--marino); color: #fff; }

.nota__foto { margin: 0 0 34px; }
.nota__foto img { inline-size: 100%; border-radius: var(--radio-s); }
.nota__foto figcaption { padding: 9px 0; border-bottom: 1px solid var(--linea); font-size: .8125rem; line-height: 1.45; color: var(--texto-3); }
.nota__foto figcaption a { color: inherit; }

.lectura .disposicion { grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; }
.nota { max-inline-size: 700px; }
.nota__etiquetas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--linea); }
.nota__etiquetas a { padding: 6px 12px; border: 1px solid var(--linea-2); border-radius: var(--radio-s); background: var(--papel); font-size: .8125rem; font-weight: 600; text-decoration: none; transition: border-color .2s ease, background-color .2s ease; }
.nota__etiquetas a:hover { border-color: var(--marino); background: var(--fondo); }
.lectura .disposicion__lateral { padding-inline-start: 28px; border-inline-start: 1px solid var(--linea); }

.relacionadas { max-inline-size: 1080px; margin: 56px auto 0; }
.relacionadas .rejilla { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.pagina { max-inline-size: 760px; margin-inline: auto; }
.pagina__cab { margin-bottom: 26px; padding-bottom: 20px; border-bottom: 1px solid var(--linea); }

/* 8. BOLETÍN, ANUNCIOS, VACÍOS --------------------------------------------- */
.boletin {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 56px; align-items: center;
  margin-top: 56px; padding: 40px 44px; background: var(--marino); color: #fff; border-top: 4px solid var(--oro); border-radius: 0 0 var(--radio) var(--radio);
}
.boletin__texto { grid-row: 1 / span 3; }
.boletin h2 { margin-bottom: 8px; font: 600 2rem/1.1 var(--serif); letter-spacing: -.02em; color: #fff; }
.boletin p { margin: 0; font-size: .96875rem; color: var(--sobre-marino); max-inline-size: 46ch; }
.boletin__form { display: flex; gap: 8px; }
.boletin__form input:not(.boletin__trampa) {
  flex: 1 1 auto; min-inline-size: 0; min-block-size: 50px; padding: 0 14px;
  border: 0; border-radius: var(--radio-s); background: var(--fondo); color: var(--texto); font-size: 1rem; padding-inline: 16px;
}
.boletin__form input:not(.boletin__trampa):focus { outline: 3px solid var(--oro); outline-offset: 1px; }
.boletin__form button { min-block-size: 50px; padding: 0 26px; border: 0; border-radius: var(--radio-s); background: var(--oro); color: var(--marino); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; font-size: .8125rem; cursor: pointer; transition: background-color .2s ease; }
.boletin__form button:hover { background: var(--oro-2); }
.boletin__form button:disabled { opacity: .6; cursor: progress; }
/* La trampa para robots se esconde con posición, no con display:none: varios
   robots saltan justamente los campos ocultos de la forma evidente. */
.boletin__trampa { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); border: 0; }
.boletin__aviso { margin: 0; font-size: .875rem; font-weight: 700; color: var(--oro); }
.boletin__aviso:empty { display: none; }
.boletin__nota { font-size: .8125rem !important; color: var(--sobre-marino) !important; }
.boletin :focus-visible { outline-color: var(--oro); }

/* Hueco publicitario: alto reservado ANTES de que cargue el anuncio, para que
   el contenido no salte. Sólo existe si hay AdSense (ver ad-space.php). */
.anuncio { display: grid; place-items: center; margin: 36px auto; border-radius: var(--radio-s); background: var(--papel); color: var(--texto-3); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; }
.anuncio--horizontal { min-block-size: 100px; max-inline-size: 970px; }
.anuncio--lateral { min-block-size: 600px; }

.vacio { max-inline-size: 640px; padding-block: 40px; }
.vacio h1, .vacio h2 { margin-bottom: 12px; font: 700 clamp(2rem, 4vw, 2.75rem)/1.08 var(--serif); letter-spacing: -.02em; }
.vacio p { color: var(--texto-2); }
.vacio .buscador { margin: 22px 0 0; }
.vacio__enlaces { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 22px; }
.vacio__enlaces a { font-weight: 700; color: var(--rojo); }
.vacio--404 { margin-inline: auto; text-align: center; padding-block: 64px; }
.vacio--404 .buscador { margin-inline: auto; }
.vacio--404 .vacio__enlaces { justify-content: center; }

/* 9. PIE ------------------------------------------------------------------- */
.pie { margin-top: 72px; background: var(--marino); color: var(--sobre-marino); border-top: 4px solid var(--oro); }
.pie a { color: #fff; text-decoration: none; }
.pie a:hover { text-decoration: underline; text-decoration-color: var(--oro); }
.pie :focus-visible { outline-color: var(--oro); }
.pie__in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 40px; padding-block: 52px 44px; }
.pie__logo { display: inline-flex; align-items: center; gap: 12px; }
.pie__logo img { inline-size: 56px; block-size: 56px; object-fit: contain; background: #fff; border-radius: 50%; padding: 5px; }
.pie__logo span { font: 800 1.375rem/1.1 var(--marca); letter-spacing: -.02em; color: #fff; }
.pie__lema { margin: 16px 0 0; font-size: .875rem; line-height: 1.55; max-inline-size: 34ch; }
.pie__titulo { margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--marino-2); font: 800 .75rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--oro); }
.pie__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .90625rem; }
.pie__contacto { margin: 14px 0 0; font-size: .875rem; }
.pie__metodo p { font-size: .875rem; line-height: 1.55; }
.pie__enlaces-dato { font-weight: 700; font-size: .875rem; }
.pie__enlaces-dato a { color: var(--oro); }
.pie__redes { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; }
.pie__redes a { display: grid; place-items: center; inline-size: 40px; block-size: 40px; border: 1px solid var(--marino-2); border-radius: 50%; transition: background-color .2s ease; }
.pie__redes a:hover { background: var(--oro); border-color: var(--oro); color: var(--marino); text-decoration: none; }
.pie__sinredes { margin: 18px 0 0; font-size: .875rem; }
.pie__sinredes a { display: inline-flex; align-items: center; gap: 8px; color: var(--sobre-marino); }
.pie__legal { border-top: 1px solid var(--marino-2); padding-block: 20px 26px; }
.pie__legal p { margin: 0; max-inline-size: 100ch; font-size: .78125rem; line-height: 1.5; color: #9aa6b8; }
.pie__legal p + p { margin-top: 6px; }

/* Movimiento: sólo en lo que responde a una acción. Con movimiento reducido
   no se anima nada que no sea imprescindible. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}
@view-transition { navigation: auto; }

/* SCROLL FLUIDO
   · Los bloques aparecen al entrar en pantalla: opacidad y un recorrido de
     16 px, ligados a la posición del scroll y no a un temporizador. Lo
     resuelve el compositor —sin JavaScript ni escuchas de scroll— y sigue al
     dedo: si el lector frena, la animación frena con él.
   · content-visibility deja sin pintar lo que está lejos de la pantalla; el
     navegador recuerda el alto real (`auto`) para que la barra no salte.
   Con movimiento reducido no aparece nada animado: todo está en su sitio. */
.secciones, .cierre, .pie__in, .relacionadas { content-visibility: auto; contain-intrinsic-size: auto 900px; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .banda > .card, .bloque, .rejilla > .card, .listado > .card, .boletin, .tapa__rail .ultimo li {
      animation: tp-aparece linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
    @keyframes tp-aparece {
      from { opacity: 0; transform: translateY(16px); }
      to { opacity: 1; transform: none; }
    }
  }
}

/* 10. RESPONSIVE ----------------------------------------------------------- */
@media (max-width: 1140px) {
  /* La columna del dato baja bajo la apertura, partida en dos. */
  .tapa { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
  .tapa__secundarias { padding-inline-end: 0; border-inline-end: 0; }
  .tapa__rail {
    grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 32px;
    padding: 28px 0 0; margin-top: 28px; border-top: 1px solid var(--linea);
  }
  .tapa__rail .ultimo { margin-top: 0; }
  .disposicion { grid-template-columns: minmax(0, 1fr) 290px; gap: 40px; }
  .lectura .disposicion { grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; }
  .pie__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  :root { --gutter: 20px; }
  .servicio__fecha, .servicio__enlaces { display: none; }
  .servicio__in { min-block-size: 36px; }
  .servicio__cot { overflow-x: auto; scrollbar-width: none; gap: 18px; }

  .cabecera__fila { grid-template-columns: minmax(0, 1fr) auto; padding-block: 12px; gap: 12px; }
  .cabecera__lado--izq { display: none; }
  .marca { justify-self: start; }
  .logo { gap: 9px; }
  .logo img { block-size: 46px; }
  .logo__n { font-size: 2rem; }
  .logo__b { font-size: .5625rem; padding: 1px 6px 1px 7px; margin-top: 4px; }
  .cabecera__boletin { padding-inline: 12px; }
  .cabecera--compacta .nav__marca { inline-size: 40px; }
  .nav__lista a { padding: 14px 12px 13px; }
  .nav__lista a::after { inset-inline: 12px; }

  .tapa { grid-template-columns: minmax(0, 1fr); padding-bottom: 26px; }
  .tapa__lead { padding: 0 0 24px; border: 0; border-bottom: 1px solid var(--linea); }
  .tapa__secundarias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; padding: 22px 0 0; }
  .tapa__secundarias .card + .card { margin: 0; padding: 0; border: 0; }
  .tapa__rail { gap: 28px; margin-top: 24px; padding-top: 24px; }

  .banda { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
  .banda > .card:nth-child(odd)::before { display: none; }

  .bloque--compacto .bloque__cuerpo { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .secciones, .cierre { grid-template-columns: minmax(0, 1fr); }
  .cierre .bloque--leido { margin-top: 44px; }

  .disposicion, .lectura .disposicion { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .lectura .disposicion__lateral { padding: 28px 0 0; border: 0; border-top: 1px solid var(--linea-2); }
  .nota { max-inline-size: none; }

  .boletin { grid-template-columns: minmax(0, 1fr); padding: 28px 24px; }
  .boletin__texto { grid-row: auto; margin-bottom: 8px; }
}

@media (max-width: 560px) {
  :root { --gutter: 16px; }
  html { scroll-padding-top: 64px; }
  main.contenedor { padding-top: 20px; }
  .cabecera__boletin { display: none; }
  .logo img { block-size: 42px; }
  .logo__n { font-size: 1.8125rem; }

  .tapa__rail { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tapa__rail .ultimo { margin-top: 26px; }
  .bloque__cuerpo, .bloque--compacto .bloque__cuerpo, .bloque--ancho.bloque--solo .card--h { grid-template-columns: minmax(0, 1fr); }
  .bloque__principal, .bloque--compacto .bloque__principal { padding: 0; }
  .bloque__lista, .bloque--compacto .bloque__lista { padding: 18px 0 0; margin-top: 18px; border: 0; border-top: 1px solid var(--linea); }
  .card--lead .card__titulo { font-size: 1.875rem; }
  .card--lead .card__bajada { font-size: 1.0625rem; }
  .relacionados-lead li { font-size: 1rem; }

  /* En el teléfono las piezas secundarias van en fila, con la miniatura a
     la derecha: entran el doble de titulares por pantalla. */
  .tapa__secundarias { grid-template-columns: minmax(0, 1fr); }
  .tapa__secundarias .card + .card { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--linea); }
  .tapa__secundarias .card:not(.card--sin-foto), .banda > .card:not(.card--sin-foto),
  .rejilla > .card:not(.card--sin-foto), .card--h:not(.card--sin-foto), .card--destacada:not(.card--sin-foto) {
    display: grid; grid-template-columns: minmax(0, 1fr) 36%; gap: 14px; align-items: start;
  }
  .tapa__secundarias .card__foto, .banda .card__foto, .rejilla .card__foto, .card--h .card__foto { order: 2; margin: 0; }
  .tapa__secundarias .card__bajada { display: none; }
  .tapa__secundarias .card__titulo, .banda .card__titulo, .rejilla .card__titulo, .card--fila .card__titulo { font-size: 1.0625rem; }
  .card--h .card__titulo { font-size: 1.25rem; }
  .card--h .card__bajada { display: none; }
  .card--fila:not(.card--sin-foto) { gap: 14px; grid-template-columns: minmax(0, 1fr) 36%; }

  .banda { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: 22px; }
  .banda > .card + .card { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--linea); }
  .banda > .card + .card::before { display: none; }
  .rejilla, .cierre:not(.cierre--sin-leidas) .rejilla { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rejilla > .card + .card { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--linea); }

  /* La destacada de archivo vuelve a foto arriba: es la entrada a la sección. */
  .card--destacada:not(.card--sin-foto) { display: block; }
  .card--destacada .card__foto { margin-bottom: 14px; }
  .card--destacada .card__titulo { font-size: 1.625rem; }
  .listado .card--fila .card__titulo { font-size: 1.125rem; }
  .listado .card--fila .card__bajada { display: none; }

  .bloque { margin-top: 36px; }
  .bloque__titulo { font-size: 1.4375rem; }
  .bloque--compacto .card--normal .card__titulo, .card--grande .card__titulo { font-size: 1.375rem; }

  .archivo__titulo { font-size: 2.25rem; }
  .archivo__desc { font-size: 1.0625rem; }
  .nota__titulo { font-size: clamp(1.875rem, 8.4vw, 2.5rem); line-height: 1.1; }
  .nota__bajada { font-size: 1.1875rem; }
  .nota__firmas { flex-basis: 100%; }
  .nota__foto { margin-inline: calc(var(--gutter) * -1); }
  .nota__foto img { border-radius: 0; }
  .nota__foto figcaption { padding-inline: var(--gutter); }
  .migas li:last-child { display: none; }

  .boletin { padding: 24px 18px; margin-top: 44px; }
  .boletin h2 { font-size: 1.625rem; }
  .boletin__form { flex-direction: column; }
  .pie__in { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 40px 32px; }
  .widget-secciones { grid-template-columns: 1fr; }
}

/* 11. IMPRESIÓN ------------------------------------------------------------
   Quien imprime o guarda en PDF una nota quiere la nota: titular, firma, foto,
   texto y fuentes. Sin navegación, publicidad, lateral ni boletín, en negro
   sobre blanco y con la dirección de cada fuente escrita al lado. */
@media print {
  @page { margin: 18mm 16mm; }
  :root { --fondo: #fff; --papel: #fff; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .servicio, .nav, .ticker, .cabecera__buscar, .cabecera__lado, .disposicion__lateral, .nota__compartir,
  .relacionadas, .boletin, .anuncio, .pie__in, .progreso__pista, .migas, .saltar, .ticker__pausa { display: none !important; }
  .cabecera { position: static; box-shadow: none; }
  .cabecera__fila { display: block; padding: 0 0 8mm; border-bottom: 1px solid #000; margin-bottom: 8mm; }
  .logo img { block-size: 40px; }
  .disposicion, .lectura .disposicion { display: block; }
  .nota, .lectura { max-inline-size: none; }
  .nota__titulo { font-size: 24pt; }
  .nota__foto img { max-block-size: 90mm; inline-size: auto; border-radius: 0; }
  .nota__cuerpo { font-size: 11.5pt; line-height: 1.5; }
  .nota__cuerpo .tp-fuentes a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; overflow-wrap: anywhere; }
  .nota__cuerpo h2, .nota__cuerpo h3 { break-after: avoid; }
  .nota__cuerpo figure, .nota__cuerpo blockquote, .tp-claves, .tp-contraste, .tp-tarjeta { break-inside: avoid; }
  .pie { margin: 8mm 0 0; background: #fff; }
  .pie__legal { border-top: 1px solid #000; }
  * { animation: none !important; transition: none !important; content-visibility: visible !important; }
}