/* ═══════════════════════════════════════════════════════════════
   Miguel Zacarías · Sistema visual
   Paleta y tipografías del manual de marca (AdsProject Media).
   La capa de movimiento vive aparte, en motion.css.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Color */
  --tinta:        #141413;
  --tinta-80:     #3D3D3F;
  --tinta-60:     #6B6B6E;
  --verde:        #5C6E4B;
  --verde-oscuro: #47563A;
  --azul:         #3A4A5C;
  --oro:          #B8A882;
  --papel:        #F5F3EF;
  --papel-2:      #EAE7E0;
  --papel-3:      #D4CFC6;
  --linea:        rgba(20, 20, 19, 0.13);
  --linea-fina:   rgba(20, 20, 19, 0.07);
  --linea-clara:  rgba(245, 243, 239, 0.16);

  /* Tipografía */
  --display: "Playfair Display", "Times New Roman", serif;
  --lectura: "Lora", Georgia, serif;
  --ui:      "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Retícula */
  --ancho:    1240px;
  --ancho-txt: 700px;
  --gutter:   clamp(1.15rem, 4vw, 2.75rem);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--lectura);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }

a { color: inherit; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 2px;
}

/* Sobre el azul noche el verde de foco se pierde (1.64:1): ahí el anillo
   se dibuja en papel cálido (8.19:1). */
.bloque--azul a:focus-visible,
.bloque--azul button:focus-visible { outline-color: var(--papel); }

::selection { background: var(--verde); color: var(--papel); }

/* ── Utilidades ─────────────────────────────────────────────── */

.env {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.saltar {
  /* fixed y no absolute: sin ancestro posicionado, con la página desplazada
     el foco aterrizaba fuera de la pantalla y el enlace no se veía. */
  position: fixed; left: -9999px; top: 0;
  background: var(--tinta); color: var(--papel);
  padding: .75rem 1.25rem; z-index: 100;
  font-family: var(--ui); font-size: .85rem;
}
.saltar:focus { left: 0; }

/* Etiqueta mono: la voz de los datos */
.kicker {
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--verde);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
}
.kicker::before {
  content: "";
  width: 20px; height: 1px;
  background: currentColor;
  flex: none;
}
.kicker--suelto::before { display: none; }
.kicker--azul  { color: var(--azul); }
.kicker--oro   { color: #8A7A52; }
.kicker--tinta { color: var(--tinta-60); }

.meta {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-60);
}

/* ── Cabecera ───────────────────────────────────────────────── */

.cintillo {
  background: var(--tinta);
  color: rgba(245, 243, 239, .7);
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.cintillo .env {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 34px;
  padding-block: .45rem;
}
.cintillo b { color: var(--oro); font-weight: 500; }
/* El área táctil sube de ~16 px a ~34 px sin cambiar nada de lo que se ve:
   el padding crece y el margen negativo lo compensa. */
.cintillo a {
  color: rgba(245, 243, 239, .7);
  text-decoration: none;
  display: inline-block;
  padding-block: .55rem;
  margin-block: -.55rem;
}
.cintillo a:hover { color: var(--papel); }
.cintillo__der { display: flex; gap: 1.25rem; align-items: center; }

.cabecera {
  background: var(--papel);
  border-bottom: 1px solid var(--tinta);
}
.cabecera__fila {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding-block: 1.6rem 1.35rem;
}

.mancheta {
  text-decoration: none;
  display: block;
  text-align: center;
  color: var(--tinta);
}
.mancheta__nombre {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(.85rem, 1.6vw, 1.05rem);
  line-height: 1;
  letter-spacing: .02em;
  margin: 0 0 .1rem;
  color: var(--tinta-80);
}
.mancheta__apellido {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.1rem, 7vw, 4.15rem);
  line-height: .88;
  letter-spacing: -.035em;
  margin: 0;
  display: block;
}
.mancheta__linea {
  width: 100%;
  height: 2px;
  background: var(--verde);
  margin: .5rem auto .4rem;
}
.mancheta__lema {
  font-family: var(--mono);
  font-size: .56rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--tinta-60);
  margin: 0;
}

.cabecera__izq, .cabecera__der {
  display: flex;
  align-items: center;
  gap: .9rem;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.cabecera__der { justify-content: flex-end; }
.cabecera__izq { color: var(--tinta-60); line-height: 1.4; }

.boton {
  display: inline-block;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .62rem 1.05rem;
  border: 1px solid var(--tinta);
  background: var(--tinta);
  color: var(--papel);
  text-decoration: none;
  cursor: pointer;
  line-height: 1;
}
.boton:hover { background: var(--verde); border-color: var(--verde); }
.boton--linea { background: transparent; color: var(--tinta); }
.boton--linea:hover { background: var(--tinta); color: var(--papel); }
.boton--verde { background: var(--verde); border-color: var(--verde); }
.boton--verde:hover { background: var(--verde-oscuro); border-color: var(--verde-oscuro); }
.boton--bloque { display: block; width: 100%; text-align: center; }

/* Navegación de secciones */
.nav {
  border-top: 1px solid var(--linea);
  background: var(--papel);
}
.nav__lista {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
}
.nav__lista a {
  display: block;
  padding: .95rem 1.15rem;
  font-family: var(--ui);
  font-weight: 400;
  font-size: .82rem;
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--tinta);
  border-bottom: 2px solid transparent;
}
.nav__lista a:hover { color: var(--verde); }
.nav__lista a[aria-current="page"] {
  border-bottom-color: var(--verde);
  color: var(--verde);
}
.nav__lista .nav__sep { color: var(--papel-3); align-self: center; }
/* Submenú (5-oct-2026): Foro virtual cuelga de Cara a Cara para que el menú principal se quede con
   los cuatro pilares. Se abre al pasar el cursor, con el teclado o con la flecha (pantallas táctiles). */
.nav__padre { position: relative; display: flex; align-items: stretch; }
.nav__padre > a { padding-right: .3rem; }
.nav__abrir {
  display: flex; align-items: center;
  background: none; border: 0; cursor: pointer;
  padding: 0 1.15rem 0 .25rem;
  color: var(--tinta-60);
}
.nav__abrir:after {
  content: ""; width: 6px; height: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.nav__abrir:hover, .nav__padre:hover .nav__abrir { color: var(--verde); }
.nav__sub {
  display: none;
  list-style: none; margin: 0; padding: .3rem 0;
  position: absolute; top: 100%; left: 0; z-index: 40;
  min-width: 100%;
  background: var(--papel);
  border: 1px solid var(--linea);
  box-shadow: 0 12px 28px rgba(20, 20, 19, .1);
}
.nav__padre:hover .nav__sub,
.nav__padre:focus-within .nav__sub,
.nav__padre.abierto .nav__sub { display: block; }
.nav__sub a { padding: .7rem 1.15rem; white-space: nowrap; border-bottom: 0; }
.nav__padre--actual > a { border-bottom-color: var(--verde); color: var(--verde); }

.menu-btn {
  display: none;
  background: none;
  border: 1px solid var(--linea);
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .55rem .8rem;
  cursor: pointer;
  color: var(--tinta);
}

/* ── Portada ────────────────────────────────────────────────── */

.portada {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
  gap: 0;
  border-bottom: 1px solid var(--tinta);
}
.portada__principal {
  padding: 2.6rem 2.6rem 2.6rem 0;
  border-right: 1px solid var(--linea);
  min-width: 0;
}
.portada__lado {
  padding: 2.6rem 0 2.6rem 2.2rem;
  min-width: 0;
}

.hero__figura {
  position: relative;
  margin-bottom: 1.5rem;
  background: var(--papel-2);
}
/* 7:4 no es un número al azar: es la medida en que salen todas las portadas
   del generador (1400×800). Cualquier otra proporción recorta, y como el
   título va escrito dentro del arte, lo primero que se pierde es la palabra
   con la que empieza. */
.hero__figura img {
  width: 100%;
  aspect-ratio: 7 / 4;
  object-fit: cover;
}
.hero__titulo {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.95rem, 4.4vw, 3.25rem);
  line-height: 1.04;
  letter-spacing: -.03em;
  margin: .85rem 0 .85rem;
}
.hero__titulo a { text-decoration: none; }
.hero__titulo a:hover { color: var(--verde); }
.hero__dek {
  font-family: var(--lectura);
  font-size: clamp(1.02rem, 1.5vw, 1.22rem);
  line-height: 1.55;
  color: var(--tinta-80);
  margin: 0 0 1.15rem;
  max-width: 44ch;
}
.hero__pie {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.1rem;
  align-items: center;
  padding-top: .85rem;
  border-top: 1px solid var(--linea);
}

/* Notas secundarias del bloque de portada */
.sec-lista { list-style: none; margin: 0; padding: 0; }
.sec-item {
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--linea);
}
.sec-item:first-child { padding-top: 0; }
.sec-item:last-child { border-bottom: 0; padding-bottom: 0; }

/* ── La segunda del día ─────────────────────────────────────────
   Va debajo de la principal, en la misma columna ancha, y tiene que pesar
   menos que ella y más que las tres del lado. Lo resuelve la forma, no el
   tamaño de letra a solas: la principal abre con la imagen a todo lo ancho;
   ésta la pone a un costado, ocupando poco menos de la mitad. */

.portada__segunda {
  padding-top: 1.9rem;
  margin-top: 1.9rem;
  border-top: 1px solid var(--linea);
}
.portada__segunda--foto {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 1.5rem;
  align-items: start;
}
.segunda__figura {
  display: block;
  background: var(--papel-2);
}
.segunda__figura img {
  width: 100%;
  aspect-ratio: 7 / 4;
  object-fit: cover;
}
.segunda__figura:hover img { opacity: .9; }
.segunda__texto { min-width: 0; }
.portada__segunda .kicker { margin-top: 0; }
.segunda__titulo {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.1vw, 1.62rem);
  line-height: 1.16;
  letter-spacing: -.022em;
  margin: .45rem 0 .5rem;
}
.segunda__titulo a { text-decoration: none; }
.segunda__titulo a:hover { color: var(--verde); }
.segunda__sumario {
  font-size: .95rem;
  line-height: 1.55;
  color: var(--tinta-80);
  margin: 0 0 .6rem;
}

/* Las tres del lado con su portada arriba del título, como la principal pero
   en chico: la columna del lado mide poco más de la mitad, así que la misma
   composición se lee sin competirle al hero. 7:4, la medida del arte. */
.sec-item__figura {
  display: block;
  background: var(--papel-2);
  margin-bottom: .8rem;
}
.sec-item__figura img {
  width: 100%;
  aspect-ratio: 7 / 4;
  object-fit: cover;
}
.sec-item__figura:hover img { opacity: .9; }
.sec-item__texto { min-width: 0; }
/* El kicker abre el bloque de texto, pegado al pie de la foto. */
.sec-item--foto .kicker { margin-top: 0; }
.sec-item__titulo {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.16rem;
  line-height: 1.22;
  letter-spacing: -.015em;
  margin: .45rem 0 .35rem;
}
.sec-item__titulo a { text-decoration: none; }
.sec-item__titulo a:hover { color: var(--verde); }
.sec-item__sumario {
  font-size: .9rem;
  line-height: 1.5;
  color: var(--tinta-80);
  margin: 0 0 .5rem;
}

/* ── Breves ─────────────────────────────────────────────────────
   El pie de la columna derecha. Sin foto y sin sumario: son el peldaño
   más bajo de la portada, y su trabajo es que se lean de un vistazo.
   La línea de arriba es más marcada que la de las notas de encima para
   que se entienda que empieza otro tipo de contenido. */

.portada__breves {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 2px solid var(--tinta);
}
.portada__breves .kicker { margin: 0 0 .5rem; }
.breves { list-style: none; margin: 0; padding: 0; }
.breve {
  padding: .7rem 0;
  border-bottom: 1px solid var(--linea);
}
.breve:last-child { border-bottom: 0; padding-bottom: 0; }
.breve a {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.24;
  letter-spacing: -.012em;
  color: var(--tinta);
  text-decoration: none;
  display: block;
}
.breve a:hover { color: var(--verde); }
.breve__sec {
  display: block;
  font-family: var(--ui);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-60);
  margin-top: .25rem;
}

/* ── Tarjetas ───────────────────────────────────────────────── */

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

.tarjeta {
  padding: 1.7rem 1.6rem;
  border-right: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  min-width: 0;
  display: flex;
  flex-direction: column;
}
/* El sangrado de la izquierda y el filete de la derecha marcan el borde de
   CADA fila. Con :first-child y :last-child sólo se corregían la primera y
   la última tarjeta de toda la rejilla, y bajo 1080 px, donde la rejilla de
   cuatro baja a dos columnas, la segunda fila quedaba descuadrada.
   Se declara por rango porque el número de columnas cambia en cada uno. */
.rejilla > .tarjeta:last-child { border-right: 0; }

@media (min-width: 1081px) {
  .rejilla--3 > .tarjeta:nth-child(3n + 1),
  .rejilla--4 > .tarjeta:nth-child(4n + 1) { padding-left: 0; }
  .rejilla--3 > .tarjeta:nth-child(3n),
  .rejilla--4 > .tarjeta:nth-child(4n)     { border-right: 0; }
}
@media (min-width: 901px) and (max-width: 1080px) {
  .rejilla--3 > .tarjeta:nth-child(3n + 1),
  .rejilla--4 > .tarjeta:nth-child(2n + 1) { padding-left: 0; }
  .rejilla--3 > .tarjeta:nth-child(3n),
  .rejilla--4 > .tarjeta:nth-child(2n)     { border-right: 0; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .rejilla--3 > .tarjeta:nth-child(2n + 1),
  .rejilla--4 > .tarjeta:nth-child(2n + 1) { padding-left: 0; }
  .rejilla--3 > .tarjeta:nth-child(2n),
  .rejilla--4 > .tarjeta:nth-child(2n)     { border-right: 0; }
}
.tarjeta__figura {
  background: var(--papel-2);
  margin-bottom: .95rem;
}
.tarjeta__figura img {
  width: 100%;
  aspect-ratio: 7 / 4;   /* la medida del arte: ver .hero__figura */
  object-fit: cover;
}
/* Cuando la nota no tiene imagen, un bloque sobrio mantiene la retícula */
.tarjeta__figura--vacia {
  display: grid;
  place-items: center;
  aspect-ratio: 7 / 4;
  background: var(--papel-2);
  border-top: 2px solid var(--verde);
  text-decoration: none;
}
/* El nombre del pilar dentro del recuadro se lee como etiqueta editorial
   deliberada, no como una caja que no cargó. Tres de las nueve notas van
   sin imagen y una de ellas es la destacada de portada. */
.tarjeta__figura--vacia span {
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--tinta-60);
  text-align: center;
  padding: 0 1rem;
}
.bloque--azul .tarjeta__figura--vacia { background: #2C3846; border-top-color: var(--oro); }
.bloque--azul .tarjeta__figura--vacia span { color: rgba(245, 243, 239, .6); }

.lista-notas__figura--vacia {
  aspect-ratio: 7 / 4;
  background: var(--papel-2);
  border-top: 2px solid var(--verde);
}
.tarjeta__titulo {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.24;
  letter-spacing: -.015em;
  margin: .5rem 0 .45rem;
}
.tarjeta__titulo a { text-decoration: none; }
.tarjeta__titulo a:hover { color: var(--verde); }
.tarjeta__sumario {
  font-size: .88rem;
  line-height: 1.55;
  color: var(--tinta-80);
  margin: 0 0 .9rem;
}
.tarjeta__pie {
  margin-top: auto;
  padding-top: .7rem;
  border-top: 1px solid var(--linea-fina);
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  align-items: baseline;
}

/* Variante compacta en lista */
.lista-notas { list-style: none; margin: 0; padding: 0; }
.lista-notas > li {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 1.5rem;
  padding: 1.65rem 0;
  border-bottom: 1px solid var(--linea);
  align-items: start;
}
.lista-notas > li:first-child { padding-top: 0; }
.lista-notas__figura { background: var(--papel-2); }
.lista-notas__figura img { width: 100%; aspect-ratio: 7 / 4; object-fit: cover; }

/* Ranking de lo más leído: el puesto va delante, en grande, porque es lo que
   convierte una lista en una tabla de posiciones. */
.lista-notas--ranking > li { grid-template-columns: 2.4rem 168px minmax(0, 1fr); }
.lista-notas__puesto {
  font-family: var(--display);
  font-weight: 900;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--verde);
  padding-top: .1rem;
}
.lista-notas h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: .4rem 0 .4rem;
}
.lista-notas h3 a { text-decoration: none; }
.lista-notas h3 a:hover { color: var(--verde); }
.lista-notas p {
  margin: 0 0 .55rem;
  font-size: .93rem;
  line-height: 1.55;
  color: var(--tinta-80);
}

/* ── Encabezados de bloque ──────────────────────────────────── */

.bloque { padding-block: 3.1rem; }
.bloque--linea { border-bottom: 1px solid var(--tinta); }
.bloque--tinta { background: var(--tinta); color: var(--papel); }
.bloque--azul  { background: var(--azul); color: var(--papel); }

.bloque__cabeza {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-bottom: 1.1rem;
  margin-bottom: 1.9rem;
  border-bottom: 2px solid var(--tinta);
}
.bloque--tinta .bloque__cabeza,
.bloque--azul .bloque__cabeza { border-bottom-color: var(--linea-clara); }

.bloque__titulo {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  line-height: 1.06;
  letter-spacing: -.028em;
  margin: .45rem 0 0;
}
.bloque__titulo em { font-style: italic; font-weight: 400; }
.bloque__lead {
  font-size: .95rem;
  line-height: 1.6;
  color: var(--tinta-80);
  max-width: 62ch;
  margin: .6rem 0 0;
}
.bloque--tinta .bloque__lead,
.bloque--azul .bloque__lead { color: rgba(245, 243, 239, .72); }

.enlace-mas {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--verde);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.enlace-mas:hover { color: var(--tinta); }
.bloque--tinta .enlace-mas,
.bloque--azul .enlace-mas { color: var(--oro); }
.bloque--tinta .enlace-mas:hover,
.bloque--azul .enlace-mas:hover { color: var(--papel); }

/* ── Numeralia ──────────────────────────────────────────────── */

.numeralia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  border-top: 1px solid var(--linea-clara);
  border-left: 1px solid var(--linea-clara);
}
.numeralia__celda {
  padding: 1.6rem 1.3rem;
  border-right: 1px solid var(--linea-clara);
  border-bottom: 1px solid var(--linea-clara);
}
.numeralia__num {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: .95;
  letter-spacing: -.04em;
  color: var(--oro);
  margin: 0 0 .5rem;
}
.numeralia__desc {
  font-family: var(--ui);
  font-weight: 300;
  font-size: .82rem;
  line-height: 1.45;
  color: rgba(245, 243, 239, .78);
  margin: 0;
}
.numeralia__fuente {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(245, 243, 239, .55);
  margin: .55rem 0 0;
}

/* ── Artículo ───────────────────────────────────────────────── */

.art-cabeza {
  max-width: 820px;
  margin-inline: auto;
  padding-block: 2.9rem 1.9rem;
  text-align: center;
}
.art-cabeza .kicker { justify-content: center; }
.art-titulo {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.3rem);
  line-height: 1.05;
  letter-spacing: -.033em;
  margin: 1rem 0 1rem;
  text-wrap: balance;
}
.art-dek {
  font-family: var(--lectura);
  font-style: italic;
  font-size: clamp(1.05rem, 1.8vw, 1.32rem);
  line-height: 1.5;
  color: var(--tinta-80);
  margin: 0 auto 1.6rem;
  max-width: 60ch;
  text-wrap: pretty;
}
.art-firma {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem 1.1rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--linea);
  max-width: 560px;
  margin-inline: auto;
}
.art-firma__nombre {
  font-family: var(--ui);
  font-weight: 500;
  font-size: .84rem;
  letter-spacing: .02em;
}

.art-portada {
  margin-block: 0 2.4rem;
  background: var(--papel-2);
  position: relative;
}
.art-portada img {
  width: 100%;
  height: auto;
  /* Las portadas son 7:4 (1400×800). El tope de 620 px las recortaba en escritorio y la franja verde
     del arte quedaba a la mitad (5-oct-2026). Así se ven completas; otra proporción se encuadra a 7:4. */
  aspect-ratio: 7 / 4;
  object-fit: cover;
}
.pie-foto {
  font-family: var(--ui);
  font-weight: 300;
  font-size: .76rem;
  line-height: 1.5;
  /* Sobre papel-2 el gris medio se quedaba en 4.30:1. */
  color: var(--tinta-80);
  padding: .65rem 0 0;
  border-bottom: 1px solid var(--linea-fina);
  padding-bottom: .65rem;
}
.pie-foto b { font-weight: 500; color: var(--tinta-80); }

.art-cuerpo {
  max-width: var(--ancho-txt);
  margin-inline: auto;
  font-size: 1.06rem;
  line-height: 1.78;
}
.art-cuerpo > p { margin: 0 0 1.35rem; }
/* La capitular sólo abre el texto principal, no los bloques de apoyo. */
.art-cuerpo:not(.art-cuerpo--nota) > p:first-of-type::first-letter {
  font-family: var(--display);
  font-weight: 900;
  font-size: 3.6em;
  line-height: .82;
  float: left;
  margin: .06em .09em 0 0;
  color: var(--verde);
}
.art-cuerpo h2 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 2.6rem 0 1rem;
}
.art-cuerpo h3 {
  font-family: var(--ui);
  font-weight: 500;
  font-size: 1.02rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 2.1rem 0 .8rem;
  color: var(--verde-oscuro);
}
.art-cuerpo a {
  color: var(--verde-oscuro);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.art-cuerpo a:hover { color: var(--tinta); }
.art-cuerpo ul, .art-cuerpo ol { margin: 0 0 1.35rem; padding-left: 1.35rem; }
.art-cuerpo li { margin-bottom: .5rem; }
.art-cuerpo blockquote {
  margin: 2rem 0;
  padding: .35rem 0 .35rem 1.5rem;
  border-left: 2px solid var(--verde);
  font-family: var(--display);
  font-style: italic;
  font-size: 1.28rem;
  line-height: 1.4;
  color: var(--tinta);
}
.art-cuerpo blockquote p { margin: 0; }
.art-cuerpo figure { margin: 2rem 0; }
.art-cuerpo figcaption {
  font-family: var(--ui);
  font-weight: 300;
  font-size: .76rem;
  color: var(--tinta-60);
  padding-top: .55rem;
  line-height: 1.5;
}
.art-cuerpo hr {
  border: 0;
  border-top: 1px solid var(--linea);
  margin: 2.4rem 0;
}
.art-cuerpo strong { font-weight: 600; }
.art-cuerpo table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ui);
  font-size: .85rem;
  margin: 1.8rem 0;
}
.art-cuerpo th, .art-cuerpo td {
  padding: .62rem .7rem;
  border-bottom: 1px solid var(--linea);
  text-align: left;
}
.art-cuerpo th {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--verde-oscuro);
  border-bottom: 1.5px solid var(--tinta);
  font-weight: 500;
}
.art-cuerpo td:not(:first-child) { font-variant-numeric: tabular-nums; }

.tabla-scroll { overflow-x: auto; margin: 1.8rem 0; }
.tabla-scroll table { margin: 0; }

.video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  margin: 2rem 0;
  background: var(--tinta);
}
.video iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* Herramientas del artículo */
.art-pie {
  max-width: var(--ancho-txt);
  margin: 2.6rem auto 0;
  padding-top: 1.5rem;
  border-top: 2px solid var(--tinta);
}
.etiquetas { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1.6rem; padding: 0; list-style: none; }
.etiquetas a {
  display: inline-block;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .38rem .68rem;
  border: 1px solid var(--linea);
  color: var(--tinta-80);
  text-decoration: none;
}
.etiquetas a:hover { border-color: var(--verde); color: var(--verde); }

.compartir { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.compartir a, .compartir button {
  display: inline-block;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .5rem .8rem;
  border: 1px solid var(--tinta);
  color: var(--tinta);
  background: transparent;
  text-decoration: none;
  cursor: pointer;
}
.compartir a:hover, .compartir button:hover { background: var(--tinta); color: var(--papel); }

/* Galería de hemeroteca */
.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  margin: 2.2rem 0;
}
.galeria__item {
  background: var(--papel);
  padding: 0;
  margin: 0;
  border: 0;
  cursor: zoom-in;
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
}
.galeria__item img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top center;
  background: var(--papel-2);
}
.galeria__item:hover img { opacity: .88; }
.galeria__pie {
  display: block;
  font-family: var(--ui);
  font-weight: 300;
  font-size: .72rem;
  line-height: 1.45;
  color: var(--tinta-60);
  padding: .6rem .7rem .8rem;
}

dialog.visor {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 96vw;
  max-height: 96vh;
  width: min(1100px, 96vw);
  color: var(--papel);
}
dialog.visor::backdrop { background: rgba(10, 10, 10, .93); }
.visor__caja { background: #0e0e0d; padding: 1rem; }
.visor__caja img { max-height: 78vh; width: auto; margin-inline: auto; }
.visor__barra {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-top: .75rem;
  font-family: var(--ui);
  font-weight: 300;
  font-size: .8rem;
  line-height: 1.45;
  color: rgba(245, 243, 239, .75);
}
.visor__barra > span:first-child { flex: 1 1 220px; min-width: 0; }
.visor__barra button {
  background: transparent;
  border: 1px solid rgba(245, 243, 239, .3);
  color: var(--papel);
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .45rem .8rem;
  cursor: pointer;
}
.visor__barra button:hover { background: rgba(245, 243, 239, .12); }
.visor__nav { display: flex; gap: .4rem; }

/* ── Publicidad ─────────────────────────────────────────────── */

.anuncio {
  text-align: center;
  padding: 1.5rem 0;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  margin-block: 2rem;
}
/* La página promete por escrito que todo contenido pagado se identifica:
   la etiqueta tiene que leerse, no insinuarse. */
.anuncio__marca {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tinta-60);
  margin: 0 0 .7rem;
}
/* El hueco se reserva con la medida recomendada de cada espacio, para que
   el texto no salte cuando entra la pieza. object-fit evita que una pieza
   de proporción distinta se deforme. */
.anuncio img {
  margin-inline: auto;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.anuncio--superior img { aspect-ratio: 24 / 5; }
.anuncio--articulo img { aspect-ratio: 3 / 1; }
.anuncio--lateral  img { aspect-ratio: 6 / 5; }
.anuncio--lateral { margin-block: 0 2rem; }

/* ── Boletín ────────────────────────────────────────────────── */

.boletin {
  background: var(--tinta);
  color: var(--papel);
  padding: 2.7rem 0;
}
.boletin__caja {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 2.6rem;
  align-items: center;
}
.boletin h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.6vw, 1.95rem);
  line-height: 1.1;
  letter-spacing: -.028em;
  margin: .6rem 0 .55rem;
}
.boletin p {
  font-family: var(--ui);
  font-weight: 300;
  font-size: .9rem;
  line-height: 1.6;
  color: rgba(245, 243, 239, .72);
  margin: 0;
  max-width: 48ch;
}
.formulario { display: flex; flex-direction: column; gap: .6rem; }
.formulario--fila { flex-direction: row; flex-wrap: wrap; }
.formulario--fila input[type="email"] { flex: 1 1 210px; }

input[type="text"], input[type="email"], input[type="search"],
input[type="password"], input[type="date"], input[type="time"],
input[type="number"], input[type="url"], select, textarea {
  font-family: var(--ui);
  font-weight: 300;
  font-size: .9rem;
  padding: .72rem .85rem;
  /* El fondo del campo es el mismo del cuerpo: el borde es lo único que
     dice dónde empieza el control, así que tiene que verse (4.79:1). */
  border: 1px solid var(--tinta-60);
  background: var(--papel);
  color: var(--tinta);
  width: 100%;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.boletin input { border-color: rgba(245, 243, 239, .55); background: #1c1c1a; color: var(--papel); }
.boletin input::placeholder { color: rgba(245, 243, 239, .4); }
textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
label {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-60);
  display: block;
  margin-bottom: .4rem;
}
.nota-legal {
  font-family: var(--ui);
  font-weight: 300;
  font-size: .72rem;
  color: rgba(245, 243, 239, .55);
  margin: .3rem 0 0;
  line-height: 1.5;
}
.nota-legal a { color: inherit; }
.trampa { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

/* ── Pie ────────────────────────────────────────────────────── */

.pie {
  background: var(--tinta);
  color: rgba(245, 243, 239, .68);
  padding-block: 3rem 0;
  font-family: var(--ui);
  font-weight: 300;
  font-size: .86rem;
}
.pie__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 2.4rem;
  padding-bottom: 2.6rem;
  border-bottom: 1px solid var(--linea-clara);
}
.pie h3 {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--oro);
  margin: 0 0 1rem;
  font-weight: 500;
}
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: .55rem; }
.pie a { color: rgba(245, 243, 239, .68); text-decoration: none; }
.pie a:hover { color: var(--papel); }
.pie__marca .mancheta__apellido { font-size: 2.1rem; color: var(--papel); }
.pie__marca .mancheta__nombre { color: rgba(245, 243, 239, .6); }
.pie__marca .mancheta { text-align: left; }
.pie__marca .mancheta__linea { margin-inline: 0; width: 120px; }
.pie__marca .mancheta__lema { color: rgba(245, 243, 239, .55); }
.pie__desc { margin: 1.1rem 0 0; max-width: 40ch; line-height: 1.6; color: rgba(245, 243, 239, .6); }

.pie__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .9rem 2rem;
  padding-block: 1.5rem 1.8rem;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(245, 243, 239, .52);
}
.pie__base a { color: rgba(245, 243, 239, .62); }
.pie__base a:hover { color: rgba(245, 243, 239, .8); }

/* Firma de autoría: discreta, sin efectos */
.firma-ads {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.firma-ads__punto {
  width: 5px; height: 5px;
  background: var(--oro);
  flex: none;
}

/* ── Páginas internas ───────────────────────────────────────── */

.cabeza-pagina {
  padding-block: 2.9rem 2rem;
  border-bottom: 2px solid var(--tinta);
  margin-bottom: 2.4rem;
}
.cabeza-pagina h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.03;
  letter-spacing: -.033em;
  margin: .9rem 0 .8rem;
}
.cabeza-pagina h1 em { font-style: italic; font-weight: 400; }
.cabeza-pagina p {
  max-width: 68ch;
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--tinta-80);
  margin: 0;
}

.dos-columnas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 3rem;
  align-items: start;
  padding-bottom: 3.2rem;
}
.lado { position: sticky; top: 1.5rem; }
.lado__bloque {
  border-top: 2px solid var(--tinta);
  padding-top: .9rem;
  margin-bottom: 2.2rem;
}
.lado__bloque h3 {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--verde);
  margin: 0 0 1rem;
  font-weight: 500;
}
.lado__lista { list-style: none; margin: 0; padding: 0; }
.lado__lista li {
  padding: .75rem 0;
  border-bottom: 1px solid var(--linea-fina);
  font-family: var(--ui);
  font-size: .88rem;
  line-height: 1.4;
}
.lado__lista a { text-decoration: none; }
.lado__lista a:hover { color: var(--verde); }

.buscador {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  padding-bottom: 1.8rem;
  margin-bottom: 1.8rem;
  border-bottom: 1px solid var(--linea);
}
.buscador input[type="search"] { flex: 1 1 260px; }
.buscador select { flex: 0 1 220px; }

.paginacion {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .4rem;
  padding-block: 2.4rem;
  flex-wrap: wrap;
}
.paginacion a, .paginacion span {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  padding: .55rem .8rem;
  border: 1px solid var(--linea);
  text-decoration: none;
  color: var(--tinta-80);
  min-width: 38px;
  text-align: center;
}
.paginacion a:hover { border-color: var(--tinta); color: var(--tinta); }
.paginacion .actual { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }

.aviso {
  padding: .9rem 1.1rem;
  border-left: 3px solid var(--verde);
  background: var(--papel-2);
  font-family: var(--ui);
  font-size: .88rem;
  margin-bottom: 1.6rem;
}
/* El rojo #B8202B lo descartó la marca por evocar partido. La alerta se
   marca con un filete de tinta más grueso. */
.aviso--error { border-left-color: var(--tinta); border-left-width: 5px; }

.vacio {
  padding: 3.5rem 0;
  text-align: center;
  font-family: var(--ui);
  font-weight: 300;
  color: var(--tinta-60);
}

/* Perfil */
.perfil {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
  padding-bottom: 3rem;
}
.perfil__foto { background: var(--papel-2); }
.perfil__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.perfil__marco {
  border: 1px solid var(--linea);
  padding: 1.4rem;
  margin-top: 1.4rem;
}
.perfil__dato {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--linea-fina);
  font-family: var(--ui);
  font-size: .84rem;
}
.perfil__dato:last-child { border-bottom: 0; }
.perfil__dato b { font-family: var(--mono); font-size: .72rem; font-weight: 500; }

.texto-largo { max-width: 68ch; font-size: 1.02rem; line-height: 1.75; }
.texto-largo p { margin: 0 0 1.25rem; }
.texto-largo h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.55rem;
  letter-spacing: -.022em;
  margin: 2.2rem 0 .9rem;
}
.texto-largo h3 {
  font-family: var(--ui);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--verde-oscuro);
  margin: 1.9rem 0 .7rem;
}
.texto-largo ul, .texto-largo ol { padding-left: 1.3rem; margin: 0 0 1.25rem; }
.texto-largo li { margin-bottom: .5rem; }
.texto-largo a { color: var(--verde-oscuro); text-decoration: underline; text-underline-offset: 3px; }

/* Tarjetas de oferta comercial */
.paquetes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  border-top: 1px solid var(--linea);
  border-left: 1px solid var(--linea);
  margin: 2rem 0;
}
.paquete {
  padding: 1.7rem 1.5rem;
  border-right: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}
.paquete h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -.015em;
  margin: .6rem 0 .6rem;
}
.paquete p { font-family: var(--ui); font-weight: 300; font-size: .87rem; line-height: 1.6; margin: 0; color: var(--tinta-80); }
.paquete ul { font-family: var(--ui); font-size: .85rem; padding-left: 1.1rem; margin: .8rem 0 0; color: var(--tinta-80); }
.paquete li { margin-bottom: .4rem; }

/* Página de error */
.error-pag { padding-block: 6rem; text-align: center; }
.error-pag__num {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(4.5rem, 16vw, 10rem);
  line-height: .85;
  letter-spacing: -.05em;
  color: var(--papel-3);
  margin: 0;
}
.error-pag h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
  letter-spacing: -.025em;
  margin: 1.2rem 0 .8rem;
}
.error-pag p { color: var(--tinta-80); max-width: 46ch; margin: 0 auto 2rem; }

/* ── Adaptación a pantallas ─────────────────────────────────── */

@media (max-width: 1080px) {
  .rejilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pie__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
}

@media (max-width: 900px) {
  .portada { grid-template-columns: 1fr; }
  .portada__principal { padding: 2rem 0; border-right: 0; border-bottom: 1px solid var(--linea); }
  .portada__lado { padding: 2rem 0; }
  .dos-columnas { grid-template-columns: 1fr; gap: 2.4rem; }
  .lado { position: static; }
  .perfil { grid-template-columns: 1fr; gap: 2rem; }
  .perfil__foto { max-width: 320px; }
  .boletin__caja { grid-template-columns: 1fr; gap: 1.5rem; }
  .rejilla--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cabecera__fila { grid-template-columns: auto 1fr auto; }
  .cabecera__izq { display: none; }
  .mancheta { text-align: left; }
  .menu-btn { display: inline-block; }
  .nav { display: none; border-top: 1px solid var(--linea); }
  .nav.abierto { display: block; }
  .nav__lista { flex-direction: column; align-items: stretch; }
  .nav__lista a { padding: .85rem 0; border-bottom: 1px solid var(--linea-fina); }
  .nav__lista .nav__sep { display: none; }
  /* En el menú del teléfono el submenú va siempre a la vista, con sangría. */
  .nav__padre { display: block; }
  .nav__padre > a { padding-right: 0; }
  .nav__abrir { display: none; }
  .nav__sub { display: block; position: static; min-width: 0; padding: 0; border: 0; box-shadow: none; background: none; }
  .nav__sub a { padding: .85rem 0 .85rem 1.2rem; border-bottom: 1px solid var(--linea-fina); }
}

@media (max-width: 640px) {
  body { font-size: 1rem; }
  .rejilla, .rejilla--3, .rejilla--4 { grid-template-columns: 1fr; }
  .tarjeta { padding: 1.5rem 0; border-right: 0; }
  .tarjeta:first-child { padding-left: 0; }
  .lista-notas > li { grid-template-columns: 110px minmax(0, 1fr); gap: 1rem; }
  .lista-notas--ranking > li { grid-template-columns: 1.6rem 92px minmax(0, 1fr); gap: .8rem; }
  .lista-notas__puesto { font-size: 1.4rem; }
  /* En teléfono la columna ya es angosta: la segunda se apila como las demás. */
  .portada__segunda--foto { grid-template-columns: 1fr; gap: .85rem; }
  .pie__rejilla { grid-template-columns: 1fr; }
  .cintillo__der span.oculta-movil { display: none; }
  .art-cuerpo:not(.art-cuerpo--nota) > p:first-of-type::first-letter { font-size: 3.1em; }
  .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bloque { padding-block: 2.3rem; }

  /* Visor de hemeroteca en pantalla chica */
  dialog.visor { width: 100vw; max-width: 100vw; }
  .visor__caja { padding: .6rem; }
  .visor__caja img { max-height: 62vh; }
  .visor__barra { flex-direction: column; align-items: stretch; gap: .7rem; }
  .visor__barra > span:first-child { flex: none; font-size: .78rem; }
  .visor__nav { justify-content: space-between; flex-wrap: wrap; gap: .35rem; }
  .visor__nav button { flex: 1 1 auto; }
}

@media print {
  .cintillo, .nav, .boletin, .anuncio, .compartir, .pie__rejilla, .menu-btn { display: none; }
  body { background: #fff; font-size: 11pt; }
  .art-cuerpo { max-width: none; }
}

/* ── Página de expectativa ───────────────────────────────────
   Es lo único que ve quien llega por la campaña, así que se
   compone como una portada de una sola pieza: mancheta, frase,
   trailer y el campo de correo. El trailer es morado oscuro y
   la marca es papel y verde; en vez de dejar que se peleen, la
   página adopta ese morado como color de sus dos bloques de
   peso —marco del video y caja del correo— y así el video deja
   de ser un parche pegado sobre el papel. */
:root {
  --prox-noche:  #2E2939;   /* el fondo del trailer, un punto más profundo */
  --prox-noche2: #3D374B;   /* su tono medio, para bordes y realces */
}

/* La cabecera del resto del sitio es un grid de tres columnas.
   Aquí sólo queda la mancheta: sin esta regla cae en la primera
   columna y se ve descuadrada contra el margen izquierdo. */
.cabecera--sola { border-bottom: 0; }
.cabecera--sola .cabecera__fila {
  grid-template-columns: 1fr;
  justify-items: center;
  padding-block: 1.5rem .9rem;
}
.cabecera--sola .mancheta { cursor: default; }

.prox {
  padding: clamp(1rem, 2.5vw, 2rem) 0 clamp(2.5rem, 6vw, 4.5rem);
  text-align: center;
}
.prox__titulo {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2rem, 5.6vw, 3.9rem);
  line-height: 1.02;
  letter-spacing: -.032em;
  margin: .5rem auto 1.5rem;
  max-width: 15ch;
}
.prox__titulo em { font-style: italic; font-weight: 700; color: var(--verde); }

/* El video flota sobre el papel. Dos cosas lo consiguen: una sombra
   de tres capas —contacto, media y difusa lejana, que es como cae la
   luz real sobre un objeto levantado— y un resplandor del propio
   morado del trailer derramándose por debajo, como si la pieza
   iluminara la hoja en la que está apoyada. */
.prox__video {
  position: relative;
  margin: 0 auto clamp(2rem, 4.5vw, 3.2rem);
  max-width: 960px;
  isolation: isolate;
}
.prox__video::before {
  content: "";
  position: absolute;
  inset: 12% 4% -9%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(58% 62% at 50% 55%, rgba(61, 55, 75, .5), rgba(61, 55, 75, 0) 72%);
  filter: blur(44px);
  pointer-events: none;
}
.prox__video video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  background: var(--prox-noche);
  box-shadow:
    0 1px 2px rgba(46, 41, 57, .10),
    0 12px 26px -8px rgba(46, 41, 57, .26),
    0 44px 76px -28px rgba(46, 41, 57, .46);
}

/* Sin movimiento pedido, sin resplandor: es decoración pura. */
@media (prefers-reduced-motion: reduce) {
  .prox__video::before { display: none; }
}

.prox__bajada {
  font-family: var(--lectura);
  font-size: clamp(1rem, 1.5vw, 1.13rem);
  line-height: 1.6;
  color: var(--tinta-80);
  max-width: 58ch;
  margin: 0 auto 1.4rem;
}
.prox__fecha {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tinta-60);
  margin: 0;
}
.prox__fecha strong { color: var(--tinta); font-weight: 500; }

/* El correo es la única acción de la página: caja oscura, para
   que el ojo caiga aquí y no tenga dónde más ir. */
.prox__aviso {
  margin: clamp(2rem, 4.5vw, 3rem) auto 0;
  max-width: 620px;
  padding: clamp(1.7rem, 4vw, 2.5rem) clamp(1.3rem, 4vw, 2.5rem);
  background: var(--prox-noche);
  color: var(--papel);
  border-radius: 2px;
}
.prox__aviso h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--papel);
  margin: 0 0 .5rem;
}
.prox__aviso-texto {
  font-family: var(--lectura);
  font-size: .96rem;
  line-height: 1.55;
  color: rgba(245, 243, 239, .78);
  margin: 0 auto 1.35rem;
  max-width: 42ch;
}
.prox__aviso .formulario--fila { justify-content: center; }
.prox__aviso input[type="email"] {
  background: rgba(245, 243, 239, .07);
  border-color: rgba(245, 243, 239, .28);
  color: var(--papel);
}
.prox__aviso input[type="email"]::placeholder { color: rgba(245, 243, 239, .45); }
.prox__aviso input[type="email"]:focus {
  border-color: rgba(245, 243, 239, .6);
  background: rgba(245, 243, 239, .12);
  outline-color: rgba(245, 243, 239, .5);
}
.prox__aviso .nota-legal {
  margin-top: .9rem;
  color: rgba(245, 243, 239, .62);
}
.prox__aviso .nota-legal a { color: rgba(245, 243, 239, .85); text-decoration: underline; }
.prox__error {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .04em;
  color: #FFD5D5;
  background: rgba(180, 60, 60, .22);
  border-left: 3px solid #E08585;
  padding: .6rem .8rem;
  margin: 0 0 1rem;
  text-align: left;
}

/* Pie reducido: sólo la línea legal y las redes, sin mapa del sitio. */
.pie__rejilla--sola {
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: start;
  gap: 2rem;
  padding-bottom: .5rem;
}
.pie__rejilla--sola .pie__desc { margin: 0; }

@media (max-width: 560px) {
  .prox__video { padding: .4rem; }
  .pie__rejilla--sola { grid-template-columns: 1fr; justify-content: start; gap: 1.25rem; }
}

/* Puerta del sitio: la misma caja oscura del correo, sin adornos. */
.acceso {
  margin: clamp(2rem, 6vw, 4rem) auto;
  max-width: 480px;
  padding: clamp(1.8rem, 4vw, 2.6rem) clamp(1.4rem, 4vw, 2.4rem);
  background: var(--prox-noche);
  color: var(--papel);
  border-radius: 2px;
  text-align: center;
}
.acceso__titulo {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  letter-spacing: -.02em;
  color: var(--papel);
  margin: .3rem 0 .5rem;
}
.acceso__texto {
  font-family: var(--lectura);
  font-size: .95rem;
  line-height: 1.55;
  color: rgba(245, 243, 239, .78);
  margin: 0 auto 1.3rem;
  max-width: 34ch;
}
.acceso .formulario--fila { justify-content: center; }
.acceso input[type="password"] {
  background: rgba(245, 243, 239, .07);
  border-color: rgba(245, 243, 239, .28);
  color: var(--papel);
}
.acceso input[type="password"]::placeholder { color: rgba(245, 243, 239, .45); }
.acceso input[type="password"]:focus {
  border-color: rgba(245, 243, 239, .6);
  background: rgba(245, 243, 239, .12);
  outline-color: rgba(245, 243, 239, .5);
}
.acceso__pie {
  margin: 1.1rem 0 0;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.acceso__pie a { color: rgba(245, 243, 239, .62); }
/* Discreto, no invisible: es el enlace por el que entra el equipo, y
   al 50% de opacidad se quedaba en 2.9:1 contra el negro del pie. */
.pie__acceso {
  margin-left: .9rem;
  padding-left: .9rem;
  border-left: 1px solid rgba(245, 243, 239, .22);
}
.pie__acceso:hover, .pie__acceso:focus { color: var(--papel); }

/* ── Aviso de pase ────────────────────────────────────────────
   Sólo la ve quien entró con la clave. Existe porque el sitio con
   pase es idéntico al sitio publicado, y sin este recordatorio uno
   acaba creyendo que el portal ya está abierto cuando no lo está. */
.aviso-pase {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: .85rem;
  max-width: calc(100vw - 2rem);
  padding: .6rem 1rem;
  background: #2E2939;
  color: rgba(245, 243, 239, .88);
  border-radius: 999px;
  box-shadow: 0 8px 28px -10px rgba(20, 20, 19, .5);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .02em;
  line-height: 1.3;
}
.aviso-pase__punto {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: #D8B65A;
  flex: none;
}
.aviso-pase__texto { flex: 1 1 auto; }
.aviso-pase a {
  flex: none;
  color: #FFF;
  text-decoration: underline;
  text-underline-offset: .2em;
  white-space: nowrap;
}
.aviso-pase a:hover, .aviso-pase a:focus { color: #D8B65A; }

@media (max-width: 640px) {
  .aviso-pase {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    border-radius: 10px;
    left: 1rem;
    right: 1rem;
    transform: none;
    max-width: none;
  }
  .aviso-pase__texto { flex: 1 0 100%; }
}

/* ── Estreno programado ───────────────────────────────────────
   Lo que aún no estrena se anuncia con el mismo morado del
   trailer: quien ya vio la pieza de expectativa reconoce que es
   la misma promesa. El contenido no está oculto por CSS, no
   llega al HTML. */
.estreno {
  margin: clamp(1.5rem, 4vw, 2.5rem) auto;
  max-width: 640px;
  padding: clamp(2rem, 5vw, 3rem) clamp(1.3rem, 4vw, 2.4rem);
  background: var(--prox-noche, #2E2939);
  color: var(--papel);
  border-radius: 3px;
  text-align: center;
}
.estreno__kicker {
  margin: 0 0 .7rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #D8B65A;
}
.estreno__titulo {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.3rem, 3.2vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--papel);
  margin: 0 0 1.1rem;
}
/* La cuenta regresiva: números tabulares para que no bailen al cambiar. */
.estreno__cuenta {
  font-family: var(--mono);
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  color: #D8B65A;
  margin: 0 0 1.2rem;
  min-height: 1.4em;
}
.estreno__texto {
  font-family: var(--lectura);
  font-size: .97rem;
  line-height: 1.6;
  color: rgba(245, 243, 239, .8);
  max-width: 46ch;
  margin: 0 auto 1.4rem;
}
.estreno__form .formulario--fila { justify-content: center; }
.estreno input[type="email"] {
  background: rgba(245, 243, 239, .07);
  border-color: rgba(245, 243, 239, .28);
  color: var(--papel);
}
.estreno input[type="email"]::placeholder { color: rgba(245, 243, 239, .45); }
.estreno input[type="email"]:focus {
  border-color: rgba(245, 243, 239, .6);
  background: rgba(245, 243, 239, .12);
  outline-color: rgba(245, 243, 239, .5);
}
.estreno .nota-legal { margin-top: .9rem; color: rgba(245, 243, 239, .62); }
.estreno .nota-legal a { color: rgba(245, 243, 239, .85); text-decoration: underline; }

/* El sello sobre la foto en los listados. */
.tarjeta__figura { position: relative; }
.sello-estreno {
  position: absolute;
  left: .6rem;
  top: .6rem;
  padding: .3rem .6rem;
  background: var(--prox-noche, #2E2939);
  color: #D8B65A;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-radius: 2px;
}
.meta--estreno { color: var(--verde-oscuro); font-weight: 500; }
.tarjeta--estreno .tarjeta__figura img { filter: saturate(.75) brightness(.92); }
/* El sello también sobre las fotos de las listas de sección. */
.hero__figura, .lista-notas__figura { position: relative; }

/* ═══════════════════════════════════════════════════════════════
   ACCESIBILIDAD Y TEMA  ·  añadido 2026-09-06
   Tamaño de texto para lectores mayores + modo oscuro + ampliar fotos.
   ═══════════════════════════════════════════════════════════════ */

/* — Tamaño de texto: escala toda la raíz (el sitio es rem) — */
:root[data-escala="grande"] { font-size: 112.5%; }   /* ~18px de base */
:root[data-escala="mayor"]  { font-size: 125%;   }   /* ~20px de base */

/* — Modo oscuro: se intercambia la paleta base; los acentos se conservan — */
:root[data-tema="dark"] {
  --tinta:      #EDEBE5;
  --tinta-80:   #C9C7C0;
  --tinta-60:   #97958D;
  --papel:      #16171A;
  --papel-2:    #1F2024;
  --papel-3:    #2B2D33;
  --linea:      rgba(237, 235, 229, 0.15);
  --linea-fina: rgba(237, 235, 229, 0.07);
  color-scheme: dark;
}
/* Franjas y bloques que ya eran oscuros en claro: conservan su identidad
   y no dependen del intercambio de variables. */
:root[data-tema="dark"] .cintillo      { background: #0C0D0F; }
:root[data-tema="dark"] .bloque--tinta { background: #0C0D0F; color: #F5F3EF; }
:root[data-tema="dark"] .bloque--azul  { background: #141C25; color: #F5F3EF; }
:root[data-tema="dark"] .boletin       { background: #0C0D0F; color: #F5F3EF; }
:root[data-tema="dark"] .boletin input { color: #F5F3EF; }
:root[data-tema="dark"] .pie           { background: #0C0D0F; }
:root[data-tema="dark"] .pie a:hover   { color: #F5F3EF; }
:root[data-tema="dark"] .bloque--linea { border-bottom-color: var(--linea); }
/* Botón sólido: en oscuro, superficie discreta en vez de un bloque brillante. */
:root[data-tema="dark"] .boton        { background: var(--papel-3); color: var(--tinta); border-color: var(--papel-3); }
:root[data-tema="dark"] .boton:hover  { background: var(--verde); border-color: var(--verde); color: #fff; }
:root[data-tema="dark"] .boton--linea { background: transparent; color: var(--tinta); }
:root[data-tema="dark"] .paginacion .actual { background: var(--tinta); color: #16171A; border-color: var(--tinta); }
/* Las fotos, un punto menos brillantes de noche para no deslumbrar. */
:root[data-tema="dark"] .art-portada img,
:root[data-tema="dark"] .tarjeta__figura img,
:root[data-tema="dark"] .lista-notas__figura img,
:root[data-tema="dark"] .galeria__item img { filter: brightness(0.92); }

/* — Grupo de preferencias en el cintillo (sobre franja oscura en ambos modos) — */
.prefs { display: inline-flex; align-items: center; gap: .3rem; }
.prefs__btn {
  -webkit-appearance: none; appearance: none;
  font-family: var(--ui); font-weight: 400; font-size: .72rem; line-height: 1;
  color: rgba(245, 243, 239, .74); background: rgba(245, 243, 239, .10);
  border: 1px solid rgba(245, 243, 239, .20); border-radius: 999px;
  min-width: 1.9rem; height: 1.55rem; padding: 0 .5rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .06rem;
  transition: background .18s, color .18s, border-color .18s;
}
.prefs__btn:hover { background: rgba(245, 243, 239, .22); color: #fff; }
.prefs__btn:disabled { opacity: .32; cursor: default; }
.prefs__btn .men, .prefs__btn .may { font-size: .82em; }
.prefs__ico { width: 15px; height: 15px; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; }
.prefs__tema .luna { display: none; }
:root[data-tema="dark"] .prefs__tema .sol  { display: none; }
:root[data-tema="dark"] .prefs__tema .luna { display: block; }

/* — Botón elegante para ampliar una imagen — */
.art-cuerpo figure, .fig-ampliable { position: relative; }
.fig-zoom {
  position: absolute; right: .75rem; bottom: .75rem; z-index: 3;
  -webkit-appearance: none; appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.35rem; height: 2.35rem; padding: 0; border-radius: 999px;
  color: #fff; background: rgba(20, 20, 19, .55);
  border: 1px solid rgba(245, 243, 239, .34);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(5px);
  transition: opacity .22s var(--curva), transform .22s var(--curva), background .18s, border-color .18s;
}
.fig-zoom svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.fig-zoom:hover { background: var(--verde); border-color: var(--verde); }
.fig-zoom--deco { pointer-events: none; }
.art-portada:hover .fig-zoom,
.fig-ampliable:hover .fig-zoom,
.galeria__item:hover .fig-zoom,
.fig-zoom:focus-visible { opacity: 1; transform: none; }
.art-portada .fig-zoom { right: 1rem; bottom: 1rem; }
/* En pantallas táctiles no hay hover: el botón se queda a la vista. */
@media (hover: none) { .fig-zoom { opacity: .92; transform: none; } }

/* — Gráficos de datos y primeras planas dentro del cuerpo de las notas — */
.art-cuerpo figure { margin: 2.4rem 0; text-align: center; }
.art-cuerpo figure img { display: inline-block; max-width: 100%; max-height: 72vh; width: auto; height: auto; border-radius: 5px; }
.art-cuerpo figcaption { font-family: var(--ui); font-weight: 300; font-size: .8rem; color: var(--tinta-60); margin-top: .6rem; line-height: 1.5; text-align: center; }

/* Video propio vertical dentro del cuerpo (14-sep-2026). preparar_cuerpo() envuelve
   cada iframe en .video (16:9); si el reproductor termina en -vertical.html le suma
   .video--vertical y la caja pasa a 9:16, centrada y con tope de ancho. El alto no
   pasa de 72vh, igual que las fotos del cuerpo (72vh × 9/16 = 40.5vh de ancho). */
.video--vertical {
  padding-bottom: 0;
  height: auto;
  aspect-ratio: 9 / 16;
  width: min(100%, 400px, 40.5vh);
  margin: 2rem auto .6rem;
  border-radius: 5px;
  overflow: hidden;
}

/* Reel de Instagram dentro del cuerpo (10-oct-2026). preparar_cuerpo() le suma
   .video--instagram al iframe de instagram.com/reel/<código>/embed. Sin el script de
   Instagram el iframe no se ajusta solo. Su vista mide 1.247 × ancho + 209 px
   (encabezado y pie fijos, video 4:5), medido a 323, 353, 393 y 400 px de ancho; el
   cuerpo de la nota mide 100vw − 37 px en el teléfono. Tope de 400 px, centrada. */
.video--instagram {
  padding-bottom: 0;
  width: min(100%, 400px);
  height: calc(min(100vw - 37px, 400px) * 1.247 + 214px);
  margin: 2rem auto .6rem;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: 6px;
  overflow: hidden;
}

/* — Nota relacionada dentro del cuerpo (2-oct-2026) —
   preparar_cuerpo() convierte un párrafo con un solo enlace title="relacionada" en esta
   tarjeta: portada de la otra nota, antetítulo, título, firma y «Leer…». En el teléfono
   la portada va arriba y el texto abajo. */
.relacionada { margin: 2.2rem 0; border-top: 3px solid var(--tinta); border-bottom: 1px solid var(--linea); }
.art-cuerpo .relacionada__enlace {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 1.1rem; align-items: center;
  padding: 1rem 0; color: var(--tinta); text-decoration: none;
}
.relacionada__img { display: block; width: 100%; height: auto; aspect-ratio: 7 / 4; object-fit: cover; border-radius: 3px; }
.relacionada__txt { display: block; }
.relacionada__k { display: block; font-family: var(--mono); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--verde); }
.relacionada__t { display: block; font-family: var(--display); font-weight: 700; font-size: 1.28rem; line-height: 1.22; margin: .35rem 0 .4rem; }
.relacionada__m { display: block; font-family: var(--ui); font-size: .82rem; color: var(--tinta-60); }
.relacionada__ir { display: inline-block; margin-top: .55rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; border-bottom: 1px solid var(--verde); }
.art-cuerpo .relacionada__enlace:hover .relacionada__t { color: var(--verde-oscuro); }
@media (max-width: 560px) {
  .art-cuerpo .relacionada__enlace { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
}
:root[data-tema="dark"] .relacionada__k { color: var(--oro); }
:root[data-tema="dark"] .art-cuerpo .relacionada__enlace:hover .relacionada__t { color: var(--oro); }

/* — Verdes de texto en modo oscuro (2-oct-2026) —
   En oscuro, los enlaces del cuerpo (--verde-oscuro) daban 2.3:1 de contraste sobre el
   fondo y los antetítulos (--verde) 3.2:1: casi no se leían. Sólo cambian los TEXTOS;
   --verde y --verde-oscuro se quedan igual porque también son fondo de botones con letra
   blanca. #8FA679 es el verde claro de las gráficas en tinta: 6.7:1 sobre #16171A.
   El antetítulo verde sólo cambia si no lleva variante (azul, oro o tinta). */
:root[data-tema="dark"] { --verde-texto: #8FA679; }
:root[data-tema="dark"] .art-cuerpo a,
:root[data-tema="dark"] .texto-largo a {
  color: var(--verde-texto);
  text-decoration-color: rgba(143, 166, 121, .6);
}
:root[data-tema="dark"] .art-cuerpo a:hover,
:root[data-tema="dark"] .texto-largo a:hover { color: var(--tinta); }
:root[data-tema="dark"] .kicker:not(.kicker--azul):not(.kicker--oro):not(.kicker--tinta),
:root[data-tema="dark"] .lista-notas__puesto,
:root[data-tema="dark"] .enlace-mas,
:root[data-tema="dark"] .lado__bloque h3,
:root[data-tema="dark"] .nav__lista a[aria-current="page"],
:root[data-tema="dark"] .art-cuerpo:not(.art-cuerpo--nota) > p:first-of-type::first-letter,
:root[data-tema="dark"] .art-cuerpo h3,
:root[data-tema="dark"] .art-cuerpo th,
:root[data-tema="dark"] .texto-largo h3,
:root[data-tema="dark"] .meta--estreno,
:root[data-tema="dark"] .prox__titulo em,
:root[data-tema="dark"] .nav__lista a:hover,
:root[data-tema="dark"] .hero__titulo a:hover,
:root[data-tema="dark"] .segunda__titulo a:hover,
:root[data-tema="dark"] .sec-item__titulo a:hover,
:root[data-tema="dark"] .breve a:hover,
:root[data-tema="dark"] .tarjeta__titulo a:hover,
:root[data-tema="dark"] .lista-notas h3 a:hover,
:root[data-tema="dark"] .lado__lista a:hover { color: var(--verde-texto); }
:root[data-tema="dark"] .etiquetas a:hover { color: var(--verde-texto); border-color: var(--verde-texto); }
/* Los antetítulos de sección conservan su color, en versión clara: Coyuntura en oro (4.3:1 → 7.7:1)
   y Memoria en azul (2.0:1 → 8.1:1). El gris (--kicker--tinta) ya se ajusta con --tinta-60. */
:root[data-tema="dark"] .kicker--oro  { color: var(--oro); }
:root[data-tema="dark"] .kicker--azul { color: #9DB0C4; }