/* ---------------------------------------------------------------
   Pulso del Beni — tokens de marca y capa de roles
   Los tokens de marca NO cambian de valor entre temas. Lo que
   cambia es a qué rol apunta cada uno.
   --------------------------------------------------------------- */

@font-face {
  font-family: "Noto Serif Display";
  src: url("../fonts/noto-serif-display-latin.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url("../fonts/work-sans-latin.woff2") format("woff2-variations");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Marca — intocables */
  --primario:    #0C3E6B;
  --tinta:       #082742;
  --acento:      #4FA3D9;
  --papel:       #FFFFFF;
  --texto:       #16150F;
  --texto-suave: #6E6A5E;

  /* Roles de superficie — tema claro */
  --superficie:          var(--papel);
  --superficie-alterna:  #F1F6FA;
  --superficie-promo:    #EEF6FC;
  --en-superficie:       var(--texto);
  --en-superficie-suave: var(--texto-suave);
  --borde-suave:         rgba(137, 137, 137, .15);

  /* El celeste da 2,77:1 sobre blanco: no puede ser texto en claro.
     Este rol lo cubre el navy, y solo en oscuro pasa a ser el celeste. */
  --acento-texto: var(--primario);

  /* Rol aparte para texto/ícono de acento sobre --superficie-alterna y
     --superficie-promo específicamente: en claro son superficies MUY
     claras (F1F6FA/EEF6FC) y --acento-texto (navy) contrasta bien ahí,
     así que en :root este rol vale lo mismo que --acento-texto. En
     oscuro esas dos superficies pasan a valer --primario (no --tinta),
     y el --acento real da solo 3,95:1 contra --primario — no pasa el
     piso de 4,5:1. Ver override en [data-tema="oscuro"] más abajo. */
  --acento-sobre-tinte: var(--acento-texto);

  --fuente-display: "Noto Serif Display", Georgia, serif;
  --fuente-texto:   "Work Sans", system-ui, -apple-system, sans-serif;

  --ancho-max: 1240px;
}

[data-tema="oscuro"] {
  --superficie:          var(--tinta);
  --superficie-alterna:  var(--primario);
  --superficie-promo:    var(--primario);
  --en-superficie:       var(--papel);
  --en-superficie-suave: rgba(255, 255, 255, .65);
  --borde-suave:         rgba(255, 255, 255, .14);
  --acento-texto:        var(--acento);   /* 5,49:1 sobre --tinta */
  /* --acento (#4FA3D9) da 3,95:1 sobre --primario (#0C3E6B), que es lo
     que valen --superficie-alterna/--superficie-promo acá — no pasa el
     piso de 4,5:1. #72B5E0 es --acento aclarado un 20% hacia --papel:
     4,90:1 sobre --primario, con margen real. */
  --acento-sobre-tinte:  #72B5E0;
}

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

body {
  margin: 0;
  background: var(--superficie);
  color: var(--en-superficie);
  font-family: var(--fuente-texto);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--fuente-display);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
}

a { color: var(--acento-texto); }

img { max-width: 100%; height: auto; display: block; }

.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 20px;
}

/* Título de sección: cuadradito + serif, como en la referencia */
.seccion__titulo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 32px;
  margin-bottom: 28px;
}
.seccion__titulo::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--acento-texto);
  flex: none;
}

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

/* El "Ir al contenido" es el único elemento con esta clase que además es
   enfocable (un <a href>) — al recibir foco por teclado se revela como
   una caja normal, arriba a la izquierda. El <h1> oculto de la portada
   (front-page.php) no tiene tabindex, nunca recibe foco, y esta regla no
   lo afecta. */
a.solo-lectores:focus,
a.solo-lectores:focus-visible {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  width: auto;
  height: auto;
  clip: auto;
  overflow: visible;
  padding: 12px 20px;
  background: var(--primario);
  color: var(--papel);
  font-family: var(--fuente-texto);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: normal;
}

/* ---------------------------------------------------------------
   Cabecera
   --------------------------------------------------------------- */

.cabecera__nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde-suave);
}

.cabecera__nav-interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 52px;
}

.nav { min-width: 0; }

.nav__lista {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Nav mobile: scroll horizontal, sin hamburguesa. */
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.nav__lista::-webkit-scrollbar { display: none; }

.nav__lista a {
  display: block;
  padding: 14px 0;
  color: var(--en-superficie);
  text-decoration: none;
  font-size: 15px;
  white-space: nowrap;
}
.nav__lista a:hover,
.nav__lista .current-menu-item > a {
  color: var(--acento-texto);
}

.cabecera__acciones {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
}

.buscador { display: flex; align-items: center; gap: 6px; }
.buscador input {
  width: 140px;
  padding: 6px 10px;
  border: 1px solid var(--borde-suave);
  background: transparent;
  color: var(--en-superficie);
  font-family: var(--fuente-texto);
  font-size: 14px;
}
.buscador button,
.toggle-tema {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--en-superficie);
  cursor: pointer;
}

.toggle-tema__sol { display: none; }
[data-tema="oscuro"] .toggle-tema__luna { display: none; }
[data-tema="oscuro"] .toggle-tema__sol  { display: block; }

/* Masthead */
.masthead {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 26px 20px;
}
.masthead__redes { justify-self: start; }
.masthead__cta   { justify-self: end; }

.marca {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--en-superficie);
}
.marca__isotipo { width: 52px; height: auto; flex: none; }
[data-tema="oscuro"] .marca__isotipo { filter: brightness(0) invert(1); }

.marca__wordmark {
  font-family: var(--fuente-display);
  font-weight: 600;
  font-size: 30px;
  letter-spacing: .02em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.boton {
  display: inline-block;
  padding: 10px 20px;
  background: var(--primario);
  color: var(--papel);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.boton:hover { background: var(--tinta); }
[data-tema="oscuro"] .boton { background: var(--acento); color: var(--texto); }
/* Sin esto, [data-tema="oscuro"] .boton (0,2,0) y .boton:hover (0,2,0)
   empatan en especificidad y gana el que va después en la hoja — en
   oscuro el hover no hacía nada. Reusa --acento-sobre-tinte (más claro
   que --acento) para que el hover se note. */
[data-tema="oscuro"] .boton:hover { background: var(--acento-sobre-tinte); }

@media (max-width: 860px) {
  .masthead { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 14px; }
  .masthead__redes, .masthead__cta { justify-self: center; }
  .marca__wordmark { font-size: 24px; }
  .buscador input { width: 96px; }

  /* Con 9 categorías + buscador compartiendo una sola fila, al nav le
     quedaban ~150px reales (verificado: scrollWidth 802 / clientWidth
     150 en 390px de viewport) — se veían 2 categorías y media, sin
     ninguna señal de que había más. El nav baja a su propia fila a
     ancho completo; sigue resolviendo mobile con scroll horizontal sin
     hamburguesa (regla del proyecto), pero ahora con las 9 categorías
     enteras dentro de esa fila en vez de compartirla con el buscador. */
  .cabecera__nav-interior { flex-wrap: wrap; row-gap: 4px; }
  .nav { order: 1; flex: 1 1 100%; }
  .cabecera__acciones { order: 2; margin-left: auto; }
}

/* ---------------------------------------------------------------
   Pie — fondo --tinta fijo, NO sigue al tema
   --------------------------------------------------------------- */

.pie {
  margin-top: 72px;
  padding: 48px 0 32px;
  background: var(--tinta);
  color: var(--papel);
  /* En oscuro --superficie TAMBIÉN es --tinta: sin este borde el pie se
     funde con el cuerpo y no se lee como pie. */
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.pie__interior { display: grid; justify-items: center; gap: 22px; text-align: center; }
.pie .marca__wordmark { color: var(--papel); }
.pie .marca__isotipo  { filter: none; }

.pie__lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pie__lista a { color: var(--papel); text-decoration: none; font-size: 14px; }
.pie__lista a:hover { color: var(--acento); }

.pie__legal { margin: 0; font-size: 13px; color: rgba(255, 255, 255, .65); }

/* ---------------------------------------------------------------
   Redes sociales — masthead (superficie clara) y pie (--tinta fijo)
   --------------------------------------------------------------- */

.redes {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.redes a {
  display: inline-flex;
  color: var(--en-superficie);
  text-decoration: none;
}
.redes a:hover { color: var(--acento-texto); }
.pie .redes a { color: var(--papel); }
.pie .redes a:hover { color: var(--acento); }

/* ---------------------------------------------------------------
   Chip de categoría
   El celeste da 2,77:1 sobre blanco: no puede ser texto. Va como
   RELLENO con --texto encima (6,60:1).
   --------------------------------------------------------------- */

.chip {
  display: inline-block;
  padding: 4px 11px;
  background: var(--acento);
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.5;
}
.chip:hover { background: var(--primario); color: var(--papel); }

/* Meta */
.meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--en-superficie-suave);
}
.meta__cat { color: var(--acento-texto); font-weight: 600; }
.meta__sep { opacity: .5; }

.enlace-mas {
  display: inline-block;
  margin-top: 10px;
  color: var(--acento-texto);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

/* ---------------------------------------------------------------
   Tarjeta vertical
   --------------------------------------------------------------- */

.tarjeta__media { position: relative; overflow: hidden; }
.tarjeta__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.tarjeta__cuerpo { padding: 16px 0 0; }
.tarjeta--centrada .tarjeta__cuerpo { text-align: center; }

.tarjeta__titulo { font-size: 20px; margin: 10px 0 0; }
.tarjeta--centrada .tarjeta__titulo { font-size: 22px; }
.tarjeta__titulo a { color: var(--en-superficie); text-decoration: none; }
.tarjeta__titulo a:hover { color: var(--acento-texto); }

/* ---------------------------------------------------------------
   Tarjeta horizontal
   --------------------------------------------------------------- */

.horizontal {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 24px;
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--borde-suave);
}
.horizontal__media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.horizontal__titulo { font-size: 24px; margin: 0 0 10px; }
.horizontal__titulo a { color: var(--en-superficie); text-decoration: none; }
.horizontal__titulo a:hover { color: var(--acento-texto); }
.horizontal__bajada { margin: 0; color: var(--en-superficie-suave); font-size: 15px; }

@media (max-width: 640px) {
  .horizontal { grid-template-columns: 1fr; gap: 14px; }
  .horizontal__titulo { font-size: 20px; }
}

/* ---------------------------------------------------------------
   Item de lista
   --------------------------------------------------------------- */

.item {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 14px;
  align-items: start;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--borde-suave);
}
.item:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.item__media img { width: 90px; height: 70px; object-fit: cover; }
.item__titulo { font-size: 16px; margin: 0; }
.item__titulo a { color: var(--en-superficie); text-decoration: none; }
.item__titulo a:hover { color: var(--acento-texto); }
.item .meta { margin-bottom: 5px; font-size: 11px; }

/* ---------------------------------------------------------------
   Bloque de categoría
   --------------------------------------------------------------- */

.bloque { margin-bottom: 64px; }
.bloque__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 36px; }
.bloque__pie { margin: 26px 0 0; }

@media (max-width: 900px) {
  .bloque__grid { grid-template-columns: 1fr; gap: 28px; }
}

.boton--fantasma {
  background: transparent;
  color: var(--acento-texto);
  border: 1px solid var(--borde-suave);
}
.boton--fantasma:hover { background: var(--primario); color: var(--papel); border-color: var(--primario); }
[data-tema="oscuro"] .boton--fantasma { background: transparent; color: var(--acento); }
/* El hover claro rellena con --primario, casi invisible sobre --tinta
   (1,39:1) — lo único que sobreviviría en oscuro sería el border-color,
   feedback negativo. Se rellena con --acento en su lugar: mismo
   tratamiento "filled" que el hover claro, pero con un color que sí
   contrasta contra el fondo oscuro. */
[data-tema="oscuro"] .boton--fantasma:hover { background: var(--acento); color: var(--texto); border-color: var(--acento); }

/* ---------------------------------------------------------------
   Lista numerada del sidebar
   --------------------------------------------------------------- */

.numerada { list-style: none; margin: 0; padding: 0; counter-reset: n; }
.numerada__item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  align-items: start;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--borde-suave);
}
.numerada__item:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.numerada__n {
  font-family: var(--fuente-display);
  font-size: 34px;
  line-height: 1;
  /* Antes: color + opacity .55, que diluye el contraste efectivo por
     debajo del piso de 3,0:1 en oscuro (2,66:1 medido). --acento-texto
     sólido ya da 10,94:1 en claro y 5,49:1 en oscuro contra --superficie
     — con margen real, no al filo — así que el numeral queda apagado
     por peso/tamaño relativo al titular, no por opacidad. */
  color: var(--acento-texto);
  font-weight: 400;
}
.numerada__titulo { font-size: 15px; margin: 0 0 5px; }
.numerada__titulo a { color: var(--en-superficie); text-decoration: none; }
.numerada__titulo a:hover { color: var(--acento-texto); }
.numerada .meta { margin: 0; font-size: 11px; }

/* ---------------------------------------------------------------
   Paginación
   --------------------------------------------------------------- */

.paginacion { margin: 48px 0 0; }
.paginacion .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.paginacion .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--borde-suave);
  color: var(--en-superficie);
  text-decoration: none;
  font-size: 14px;
}
.paginacion .page-numbers.current,
.paginacion .page-numbers:hover {
  background: var(--primario);
  color: var(--papel);
  border-color: var(--primario);
}
[data-tema="oscuro"] .paginacion .page-numbers.current,
[data-tema="oscuro"] .paginacion .page-numbers:hover {
  background: var(--acento);
  color: var(--texto);
  border-color: var(--acento);
}

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */

.hero { padding: 40px 0 56px; }
.hero__interior { position: relative; }

.hero__pista {
  display: grid;
  grid-auto-flow: column;
  /* calc(.../ 3) exacto sumaba 3 columnas + 2 gaps = 100% del contenedor:
     scrollWidth == clientWidth, cero overflow, y con la consulta del hero
     siempre en exactamente 3 posts la flecha "siguiente" quedaba
     disabled para siempre (verificado con el browser: el click a
     data-carrusel-next hacía timeout por click a un botón disabled).
     2.85 deja un margen real de scroll sin achicar visiblemente la
     tercera tarjeta. */
  grid-auto-columns: calc((100% - 60px) / 2.85);
  gap: 30px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.hero__pista::-webkit-scrollbar { display: none; }
.hero__slide { scroll-snap-align: start; }

.hero__flecha {
  position: absolute;
  top: 34%;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--borde-suave);
  border-radius: 50%;
  background: var(--superficie);
  color: var(--en-superficie);
  cursor: pointer;
}
.hero__flecha--prev { left: -6px; }
.hero__flecha--next { right: -6px; }
.hero__flecha[disabled] { opacity: .3; cursor: default; }

@media (max-width: 900px) {
  .hero__pista { grid-auto-columns: 78%; gap: 18px; }
  .hero__flecha { display: none; }
}

/* ---------------------------------------------------------------
   Tarjetas promo (eran "Who Am I" / "My Store")
   --------------------------------------------------------------- */

.promos { padding-bottom: 64px; }
.promos__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }

.promo {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 22px;
  padding: 26px 28px;
  background: var(--superficie-promo);
  color: var(--en-superficie);
  text-decoration: none;
}
.promo__marca { color: var(--primario); }
[data-tema="oscuro"] .promo__marca { color: var(--acento); }
[data-tema="oscuro"] .promo__marca img { filter: brightness(0) invert(1); }
.promo__cuerpo { display: block; }
.promo__titulo {
  display: block;
  font-family: var(--fuente-display);
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 6px;
}
.promo__texto { display: block; color: var(--en-superficie-suave); font-size: 15px; }
.promo .enlace-mas { margin-top: 12px; }
/* .promo vive sobre --superficie-promo: en oscuro eso es --primario, no
   --tinta, y ahí --acento-texto (=--acento) cae a 3,95:1. Ver el rol
   --acento-sobre-tinte en la capa de tokens de arriba. */
[data-tema="oscuro"] .promo .enlace-mas { color: var(--acento-sobre-tinte); }

@media (max-width: 780px) {
  .promos__grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   Bandas
   --------------------------------------------------------------- */

.banda { padding: 60px 0; margin-bottom: 64px; }
.banda--tinte { background: var(--superficie-alterna); }
/* Mismo caso que .promo: --superficie-alterna es --primario en oscuro,
   no --tinta, y el --acento-texto de las tarjetas ("Leer más") cae a
   3,95:1 ahí. Usado en "Lo más leído" (portada) y "Seguí leyendo"
   (single.php). */
[data-tema="oscuro"] .banda--tinte .enlace-mas { color: var(--acento-sobre-tinte); }

/* Sección oscura: --tinta fijo en los dos temas, como el pie. */
.banda--oscura {
  background: var(--tinta);
  color: var(--papel);
  border-top: 1px solid rgba(255, 255, 255, .14);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.banda--oscura .tarjeta__titulo a { color: var(--papel); }
.banda--oscura .tarjeta__titulo a:hover { color: var(--acento); }
/* Sobre --tinta el celeste SÍ puede ser texto: 5,49:1. */
.banda--oscura .enlace-mas,
.banda--oscura .meta__cat { color: var(--acento); }
.banda--oscura .meta { color: rgba(255, 255, 255, .65); }
.banda--oscura .seccion__titulo { color: var(--papel); }
/* El cuadradito de .seccion__titulo::before usa --acento-texto, que en
   tema claro resuelve a --primario (navy) — casi invisible sobre el
   --tinta fijo de esta banda. Igual que enlace-mas/meta__cat arriba,
   se fuerza al --acento real, que sí contrasta contra --tinta. */
.banda--oscura .seccion__titulo::before { background: var(--acento); }

.banda--cta { background: var(--superficie-alterna); margin-bottom: 0; }
.cta { text-align: center; display: grid; justify-items: center; gap: 14px; }
.cta__titulo { font-size: 40px; }
.cta__texto { margin: 0; max-width: 560px; color: var(--en-superficie-suave); }

@media (max-width: 640px) { .cta__titulo { font-size: 28px; } }

/* Grilla de 3: auto-fill, NUNCA auto-fit (auto-fit colapsa las pistas
   vacías y una sola nota renderiza a todo el ancho). */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 30px;
}

.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; }
.dos-columnas .bloque__grid { grid-template-columns: 1fr; }
@media (max-width: 900px) { .dos-columnas { grid-template-columns: 1fr; gap: 0; } }

/* ---------------------------------------------------------------
   Layout con sidebar
   --------------------------------------------------------------- */

.contenedor-archivo {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px;
  align-items: start;
  margin-bottom: 64px;
}

.sidebar { position: sticky; top: 76px; display: grid; gap: 34px; }

.widget { padding-bottom: 4px; }
.widget__titulo {
  font-size: 20px;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--borde-suave);
}
.widget--editorial { text-align: center; padding: 26px 22px; background: var(--superficie-promo); }
.widget--editorial .widget__titulo { border-bottom: 0; padding-bottom: 0; margin-top: 12px; }
.widget__isotipo { width: 56px; margin: 0 auto; }
[data-tema="oscuro"] .widget__isotipo { filter: brightness(0) invert(1); }
.widget__texto { margin: 0 0 16px; font-size: 14px; color: var(--en-superficie-suave); }
.widget--editorial .redes { justify-content: center; }
.widget__pie { margin: 16px 0 0; }
/* .widget--editorial vive sobre --superficie-promo (--primario en
   oscuro): el override general de .boton--fantasma en oscuro usa
   --acento real (3,95:1 ahí, falla el piso). Mayor especificidad que
   [data-tema="oscuro"] .boton--fantasma, gana sin !important.
   :not(:hover) para no empatar en especificidad con
   [data-tema="oscuro"] .boton--fantasma:hover (ambas 0,3,0 sin esto) —
   en hover el fondo pasa a --acento sólido y el color de acá ya no
   aplica ni hace falta. */
[data-tema="oscuro"] .widget--editorial .boton--fantasma:not(:hover) { color: var(--acento-sobre-tinte); }

@media (max-width: 1000px) {
  .contenedor-archivo { grid-template-columns: 1fr; gap: 56px; }
  .sidebar { position: static; }
}

/* ---------------------------------------------------------------
   Nota individual — sin sidebar, columna angosta
   --------------------------------------------------------------- */

.nota { padding-top: 44px; }

.nota__cabecera {
  max-width: 760px;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 14px;
}
.nota__titulo { font-size: 44px; margin: 0; }
.nota__cabecera .meta { justify-content: center; }

.nota__foto { margin: 40px 0; }
.nota__foto img { width: 100%; max-height: 560px; object-fit: cover; }
.nota__foto figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--en-superficie-suave);
  text-align: center;
}

.nota__cuerpo {
  max-width: 720px;
  font-size: 17px;
  line-height: 1.75;
}
.nota__cuerpo p { margin: 0 0 1.3em; }
.nota__cuerpo a { text-decoration: underline; text-underline-offset: 3px; }
.nota__cuerpo h2 { font-size: 28px; margin: 1.8em 0 .6em; }
.nota__cuerpo h3 { font-size: 22px; margin: 1.6em 0 .5em; }
/* border-left usa --acento-texto, no --acento: el blockquote vive sobre
   superficie clara y el --acento crudo (2,77:1 sobre blanco) no puede
   ser filete/texto ahí — mismo ruling que .seccion__titulo::before y
   .numerada__n en las tasks anteriores. */
.nota__cuerpo blockquote {
  margin: 1.6em 0;
  padding-left: 20px;
  border-left: 3px solid var(--acento-texto);
  font-family: var(--fuente-display);
  font-size: 21px;
}

@media (max-width: 640px) {
  .nota__titulo { font-size: 30px; }
  .nota__cuerpo { font-size: 16px; }
}

/* ---------------------------------------------------------------
   Archivo, búsqueda, 404
   --------------------------------------------------------------- */

.archivo__cabecera { margin-bottom: 32px; }
.archivo__desc { margin: 0; color: var(--en-superficie-suave); }

.pagina-simple { padding: 48px 20px 24px; max-width: 800px; }
.pagina-simple--centrada { text-align: center; display: grid; justify-items: center; gap: 18px; }

.vacio { color: var(--en-superficie-suave); font-size: 16px; }

.search-form { display: flex; gap: 8px; margin-top: 18px; }
.search-form input[type="search"] {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--borde-suave);
  background: transparent;
  color: var(--en-superficie);
  font-family: var(--fuente-texto);
}
/* get_search_form() de WordPress emite <input type="submit"
   class="search-submit">, NO un <button> — .search-form button nunca
   matchea eso y el botón queda con el estilo gris por defecto del
   navegador (afecta search.php y 404.php, las dos plantillas que llaman
   get_search_form()). */
.search-form input[type="submit"] {
  padding: 10px 18px;
  border: 0;
  background: var(--primario);
  color: var(--papel);
  font-family: var(--fuente-texto);
  font-size: 14px;
  cursor: pointer;
}
[data-tema="oscuro"] .search-form input[type="submit"] { background: var(--acento); color: var(--texto); }

.feed-fb { list-style: none; margin: 0; padding: 0; }
.feed-fb__item {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--borde-suave);
}
.feed-fb__item:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.feed-fb__item a {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  align-items: start;
  color: var(--en-superficie);
  text-decoration: none;
}
.feed-fb__foto { width: 72px; height: 72px; object-fit: cover; }
.feed-fb__texto { display: block; font-size: 14px; line-height: 1.45; }
.feed-fb__fecha {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--en-superficie-suave);
}
.feed-fb__item a:hover .feed-fb__texto { color: var(--acento-texto); }