/* ---- Tokens de marca: valores fijos, NO se tocan ---- */
:root {
  --primario: #5C2D95;
  --tinta: #2E1651;
  --acento: #00D68F;
  --papel: #FFFFFF;
  --texto: #16150F;
  --texto-suave: #6E6A5E;

  /* ---- Roles de superficie: lo único que cambia con el tema ---- */
  --superficie: var(--papel);
  --en-superficie: var(--texto);
  --en-superficie-suave: var(--texto-suave);
  --borde-suave: #E6E2EC;
  --oscuro: var(--tinta);
  --en-oscuro: var(--papel);
  --realce-claro: var(--primario);
  --realce-oscuro: var(--acento);

  /* ---- Layout ---- */
  --aire-lateral: 40px;
  --ancho-max: 1600px;
  --gap: 40px;

  --display: 'Space Grotesk', system-ui, sans-serif;
  --texto-familia: 'Inter', system-ui, sans-serif;
  --mono: 'Space Mono', ui-monospace, monospace;
}

[data-tema="oscuro"] {
  --superficie: var(--tinta);
  --en-superficie: var(--papel);
  --en-superficie-suave: rgba(255, 255, 255, 0.65);
  --borde-suave: rgba(255, 255, 255, 0.14);
  --realce-claro: var(--acento);
}

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

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

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

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  margin: 0;
  letter-spacing: -0.02em;
}

.contenedor {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding-inline: var(--aire-lateral);
}

.meta {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 16px;
  text-transform: uppercase;
  color: var(--en-superficie-suave);
}

.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

:focus-visible {
  outline: 3px solid var(--realce-claro);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  :root { --aire-lateral: 16px; --gap: 24px; }
  body { font-size: 17px; line-height: 27px; }
}

/* ---- Redes sociales ---- */
.redes {
  display: flex;
  align-items: center;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.redes__enlace {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  transition: color .15s ease;
}
.redes__enlace:hover,
.redes__enlace:focus-visible { color: var(--realce-oscuro); }

.redes--header .redes__enlace svg { width: 18px; height: 18px; }
.redes--footer .redes__enlace svg { width: 22px; height: 22px; }

@media (max-width: 900px) {
  .redes__enlace { min-width: 44px; min-height: 44px; }
}

/* ---- Grillas ---- */
.grilla { display: grid; gap: var(--gap); }
.grilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1100px) { .grilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .grilla--3, .grilla--4 { grid-template-columns: 1fr; } }

/* ---- Categoría (enlace subrayado, no chip) ---- */
.categoria {
  display: inline-block;          /* si fuera bloque, el subrayado se estira a toda la columna */
  width: fit-content;
  font-family: var(--display);
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
.categoria--claro { color: var(--en-superficie); text-decoration-color: var(--realce-claro); }
.categoria--oscuro { color: var(--en-oscuro); text-decoration-color: var(--realce-oscuro); }
.categoria:hover { text-decoration-thickness: 3px; }

/* ---- Tarjeta ---- */
.tarjeta { display: flex; flex-direction: column; gap: 12px; }
.tarjeta__media { position: relative; }   /* NO es un <a> */
.tarjeta__media img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; border-radius: 0; }
.tarjeta__cuerpo { display: flex; flex-direction: column; gap: 6px; }
.tarjeta__titular {
  font-size: 20px;
  line-height: 25px;
  font-weight: 600;
}
.tarjeta__titular a { text-decoration: none; }
.tarjeta__titular a:hover { text-decoration: underline; text-decoration-color: var(--realce-claro); }

@media (max-width: 900px) {
  .tarjeta { display: grid; grid-template-columns: 1fr 120px; gap: 16px; align-items: start;
             padding-bottom: 20px; border-bottom: 1px solid var(--borde-suave); }
  .tarjeta__media { order: 2; }
  .tarjeta__cuerpo { order: 1; }
  .tarjeta__titular { font-size: 18px; line-height: 23px; }
}

/* ---- Riel lateral ---- */
.riel { margin-bottom: 48px; }
.riel__titulo {
  font-size: 22px;
  line-height: 25px;
  font-weight: 700;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--en-superficie);
}
.riel__lista { list-style: none; margin: 0; padding: 0; }
.riel__item { padding: 16px 0; border-bottom: 1px solid var(--borde-suave); }
.riel__hora { margin: 0 0 4px; }
.riel__titular { font-size: 16px; line-height: 20px; font-weight: 600; }
.riel__titular a { text-decoration: none; }
.riel__titular a:hover { text-decoration: underline; }

/* ---- Bloque de categoría ---- */
.bloque-categoria { margin: 64px 0; }
.bloque-categoria__encabezado {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; margin-bottom: 24px;
  border-bottom: 1px solid var(--en-superficie); padding-bottom: 12px;
}
.titulo-seccion { font-size: 50px; line-height: 56px; font-weight: 700; }
.bloque-categoria__ver-todas {
  font-family: var(--display); font-size: 14px; font-weight: 500;
  text-decoration: underline; text-decoration-color: var(--realce-claro);
  white-space: nowrap;
}
@media (max-width: 900px) { .titulo-seccion { font-size: 32px; line-height: 36px; } }

/* ---- Paginación ---- */
.pagination { margin: 48px 0; font-family: var(--display); font-weight: 600; }
.pagination .page-numbers {
  display: inline-block; padding: 8px 14px; margin-right: 6px;
  border: 1px solid var(--borde-suave); text-decoration: none;
}
.pagination .page-numbers.current { background: var(--primario); color: var(--papel); border-color: var(--primario); }

/* ---- Cabecera: dos barras oscuras a sangre, NO sticky (la referencia tampoco) ---- */
.cabecera { background: var(--oscuro); color: var(--en-oscuro); }

.cabecera__utilitaria { border-bottom: 1px solid rgba(255, 255, 255, .14); }
.cabecera__utilitaria-fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 36px;
}
.cabecera__fecha { color: rgba(255, 255, 255, .65); margin: 0; }

.cabecera__principal-fila {
  display: flex; align-items: center; gap: 28px; min-height: 82px;
}
.cabecera__marca img { height: 34px; width: auto; }

.cabecera__menu {
  display: flex; align-items: center; gap: 22px;
  list-style: none; margin: 0; padding: 0;
}
.cabecera__menu a {
  font-family: var(--display);
  font-size: 16px; line-height: 16px; font-weight: 700;
  text-decoration: none;
}
.cabecera__menu a:hover { color: var(--realce-oscuro); }

.cabecera__acciones { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.cabecera__busqueda input {
  background: transparent; border: 1px solid rgba(255, 255, 255, .4);
  color: var(--en-oscuro); font-family: var(--mono); font-size: 12px;
  padding: 7px 10px; width: 150px;
}
.cabecera__busqueda input::placeholder { color: rgba(255, 255, 255, .5); }

.cabecera__boton-icono,
.cabecera__hamburguesa {
  background: none; border: 0; color: inherit; cursor: pointer;
  padding: 6px; display: inline-flex; align-items: center;
}
.cabecera__boton-icono svg,
.cabecera__hamburguesa svg { width: 22px; height: 22px; }

/* Oculta por defecto (desktop): debe ir DESPUÉS del bloque combinado de
   arriba, que también fija `display` para .cabecera__hamburguesa — misma
   especificidad, gana la que viene después en la cascada. El
   @media (max-width: 900px) de abajo la vuelve a mostrar en mobile. */
.cabecera__hamburguesa { display: none; }

.cabecera__boton-icono .icono-luna { display: none; }
[data-tema="oscuro"] .cabecera__boton-icono .icono-sol { display: none; }
[data-tema="oscuro"] .cabecera__boton-icono .icono-luna { display: inline; }

.cabecera__panel { background: var(--oscuro); border-top: 1px solid rgba(255,255,255,.14); padding: 16px 0 24px; }
.cabecera__menu--panel { flex-direction: column; align-items: flex-start; gap: 14px; }
.cabecera__menu--panel a { font-size: 22px; }

/* El nav completo de 9 categorías mide 826px fijos: sumado a la marca, los
   gaps y el aire lateral necesita 1146px mínimos en una sola fila (medido
   con scrollWidth). El breakpoint de la hamburguesa vive aparte del
   breakpoint general de 900px (que compacta tipografía/grillas en todo el
   sitio) porque el nav se rompe bastante antes que el resto del layout —
   sin este breakpoint propio, entre 901px y 1145px el nav se corta y toda
   la página queda con scroll horizontal (iPad horizontal, ventanas de
   laptop no maximizadas). El buscador del header ya se oculta desde 1360px
   (ver media query más abajo), así que a partir de acá alcanza con resolver
   nav vs. hamburguesa. */
@media (max-width: 1150px) {
  .cabecera__hamburguesa { display: inline-flex; }
  .cabecera__nav { display: none; }
}

@media (max-width: 900px) {
  .cabecera__marca img { height: 28px; }
  .cabecera__principal-fila { min-height: 64px; gap: 14px; }
}

/* ---- Pie ---- */
.pie { background: var(--oscuro); color: var(--en-oscuro); margin-top: 80px; padding: 56px 0 40px; }
.pie__interior { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.pie__marca img { height: 40px; width: auto; }
.pie__secciones ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; list-style: none; margin: 0; padding: 0; }
.pie__secciones a { font-family: var(--display); font-size: 14px; font-weight: 500; text-decoration: none; }
.pie__secciones a:hover { color: var(--realce-oscuro); text-decoration: underline; }
.pie__legal { color: rgba(255, 255, 255, .65); margin: 0; }

/* ---- Franja de cotización ---- */
.franja-dolar {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  border-top: 1px solid var(--en-superficie);
  border-bottom: 1px solid var(--en-superficie);
  padding: 14px 0; margin: 40px 0;
}
.franja-dolar__etiqueta { margin: 0; }
.franja-dolar__cifra {
  font-family: var(--display); font-size: 32px; line-height: 36px; font-weight: 700;
  color: var(--realce-claro); margin: 0;
}
.franja-dolar__cifra span { font-size: 16px; font-weight: 500; }

/* ---- Riel de Facebook ---- */
.riel__fb-texto { font-family: var(--display); font-size: 16px; line-height: 22px; font-weight: 500; margin: 0; }
.riel__item--fb a { text-decoration: none; }
.riel__item--fb a:hover { text-decoration: underline; text-decoration-color: var(--realce-claro); }

/* ---- Hero ---- */
.hero {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--gap);
  margin-top: 32px;
}
.hero__imagen img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.hero__bloque {
  background: var(--oscuro); color: var(--en-oscuro);
  padding: 28px 32px 32px;
  display: flex; flex-direction: column; gap: 10px;
}
.hero__titular { font-size: 40px; line-height: 45px; font-weight: 700; }
.hero__titular a { text-decoration: none; }
.hero__titular a:hover { text-decoration: underline; text-decoration-color: var(--realce-oscuro); }
.hero__bloque .meta { color: rgba(255, 255, 255, .65); }

.destacada { display: flex; flex-direction: column; gap: 8px; margin-bottom: 40px; }
.destacada__imagen img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.destacada__titular { font-size: 22px; line-height: 27px; font-weight: 600; }
.destacada__titular a { text-decoration: none; }
.destacada__bajada { font-size: 16px; line-height: 24px; margin: 0; color: var(--en-superficie-suave); }

@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .hero { margin-top: 0; }
  .hero__bloque { text-align: center; padding: 22px 18px 26px; align-items: center; }
  .hero__titular { font-size: 28px; line-height: 33px; }
}

/* ---- Nota ---- */
/* El spec pide un filete blanco cerrando el bloque oscuro del encabezado
   (categoría · titular · bajada · firma · filete) — var(--en-oscuro) es
   --papel, fijo en los dos temas, así que el filete siempre se ve blanco
   sobre el fondo oscuro sin importar el tema activo. */
.nota__encabezado { background: var(--oscuro); color: var(--en-oscuro); padding: 36px 0 28px; border-bottom: 1px solid var(--en-oscuro); }
.nota__encabezado-interior { display: flex; flex-direction: column; gap: 12px; max-width: 1100px; }
.nota__titular { font-size: 40px; line-height: 45px; font-weight: 700; }
.nota__bajada { font-family: var(--display); font-size: 16px; line-height: 22px; margin: 0; }
.nota__firma { color: rgba(255, 255, 255, .65); }

.nota__foto { margin: 0 auto; padding-top: 32px; }
.nota__foto img { width: 100%; max-width: 1100px; }
.nota__foto figcaption { padding-top: 8px; }

.nota__cuerpo { max-width: calc(800px + var(--aire-lateral) * 2); margin: 0; padding-top: 32px; }
.nota__cuerpo p { margin: 0 0 24px; }
.nota__cuerpo a { color: var(--realce-claro); }

.vacio { padding: 48px 0; }

@media (max-width: 900px) {
  .nota__titular { font-size: 28px; line-height: 33px; }
}

/* ---- Defensa visual: el recuadro de una foto siempre se lee ----
   Bug real: un placeholder de fondo --tinta se camuflaba contra
   --superficie en modo oscuro (mismo valor exacto) y parecía no haber
   cargado, aunque la imagen sí cargaba (200, sin error). Con fotos reales
   el mismo riesgo existe si una foto de fondo oscuro cae sobre modo
   oscuro. Este borde + fondo de respaldo, con --borde-suave (sutil en
   claro, apenas perceptible en oscuro), asegura que el recuadro se note
   incluso si la imagen se funde con lo que tiene detrás. No cambia nada
   del diseño en modo claro con una foto normal. */
.tarjeta__media,
.hero__imagen,
.destacada__imagen {
  background: var(--borde-suave);
  border: 1px solid var(--borde-suave);
}

/* Bug real: .hero__imagen y .destacada__imagen son <a> (display:inline por
   defecto) envolviendo una <img> block-level — el navegador genera una caja
   de línea anónima alrededor del bloque, y ese "strut" de line-height suma
   ~55px repartidos arriba y abajo del borde/fondo de defensa visual de
   arriba (medido: caja del anchor 880×550 contra imagen 880×495 en el
   hero). Con display:block el anchor mide exactamente lo que mide la
   imagen. .tarjeta__imagen-link tiene el mismo patrón (<a> inline
   envolviendo <img>) dentro de .tarjeta__media — mismo arreglo por las
   dudas, aunque ahí el borde/fondo vive en el <div> padre y no en el <a>. */
.hero__imagen,
.destacada__imagen,
.tarjeta__imagen-link {
  display: block;
}

/* ---- Defensa visual: paginación, página actual siempre visible ----
   Bug real (mismo patrón que el de arriba): el badge de "página actual"
   usaba --oscuro/--en-oscuro, que son fijos (--tinta/--papel). En modo
   oscuro --superficie TAMBIÉN pasa a ser --tinta, así que el fondo del
   badge activo se camuflaba contra el fondo de la página — solo quedaba
   el número flotando, sin caja, indistinguible de las páginas inactivas.
   El badge ahora usa colores de marca fijos (--primario/--papel) que no
   coinciden con --superficie en ningún tema, y en oscuro pasa al acento
   verde con texto oscuro (nunca verde sobre superficie clara: esto solo
   se activa dentro de [data-tema="oscuro"]). */
[data-tema="oscuro"] .pagination .page-numbers.current {
  background: var(--acento);
  color: var(--texto);
  border-color: var(--acento);
}

/* ---- Tarea 10: nombre del medio como texto junto al isotipo ----
   El SVG mono-blanca.svg es solo la burbuja (isotipo), sin el nombre. Se
   arma el lockup isotipo + texto en HTML (el archivo del logo no cambia),
   con el nombre saliendo de get_bloginfo('name'). El isotipo pasa a
   alt="" (decorativo) porque el nombre ya está como texto al lado — si
   no, un lector de pantalla lo anunciaría dos veces. */
.cabecera__marca,
.pie__marca {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

/* El isotipo+nombre nunca se debe comprimir por flex-shrink automático:
   con white-space:nowrap en el nombre, dejar el shrink por defecto hace
   que el navegador angoste la caja por debajo del ancho real del texto
   y el nombre queda superpuesto sobre el nav (medido con
   getBoundingClientRect(), visible en pantalla, no un problema teórico). */
.cabecera__marca { flex-shrink: 0; }

.cabecera__marca-nombre {
  font-family: var(--display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--en-oscuro);
  white-space: nowrap;
}

.pie__marca-nombre {
  font-family: var(--display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--en-oscuro);
  white-space: nowrap;
}

/* Entre 901px y 1360px, el nav completo de 9 categorías + el nombre del
   medio como texto + el buscador ya no entran juntos en una sola fila
   (antes, con el logo como solo-imagen, sobraban apenas ~7px a 1200px —
   quedaba al borde de romperse, y agregar el nombre como texto lo rompe
   del todo si no se libera espacio). El buscador se oculta en este rango
   igual que ya pasa en mobile, y el nombre baja un escalón de tamaño —
   así el nav nunca se comprime ni el nombre se superpone. */
@media (max-width: 1360px) {
  .cabecera__busqueda { display: none; }
  .cabecera__marca-nombre { font-size: 20px; }
}

@media (max-width: 900px) {
  .cabecera__marca-nombre { font-size: 18px; }
}

@media (max-width: 480px) {
  .cabecera__marca-nombre { font-size: 15px; }
}

/* ---- Foco por teclado visible sobre superficies siempre oscuras ----
   :focus-visible usa --realce-claro, que en tema claro es --primario
   (#5C2D95). Eso funciona sobre --superficie (papel) pero .cabecera, .pie,
   .hero__bloque y .nota__encabezado son SIEMPRE oscuros (--oscuro/--tinta)
   sin importar el tema — ahí primario sobre tinta da 1,68:1 (medido), el
   anillo prácticamente no se ve. Se sobreescribe solo el color del anillo
   dentro de esos bloques a --realce-oscuro (--acento, fijo, 8,16:1 contra
   --tinta) — nunca cambia con el tema porque --oscuro tampoco cambia con
   el tema. Esto no viola "el verde nunca sobre superficie clara": --oscuro
   es oscuro siempre, en los dos temas. */
.cabecera :focus-visible,
.pie :focus-visible,
.hero__bloque :focus-visible,
.nota__encabezado :focus-visible,
.screen-reader-text:focus-visible {
  outline-color: var(--realce-oscuro);
}

/* ---- Skip link visible al enfocarlo ----
   El reset de WordPress core para `.screen-reader-text:focus` solo toca
   `clip-path`, pero `.screen-reader-text` en este tema usa la propiedad
   `clip` (obsoleta pero todavía activa) para ocultarse — sin resetear
   también `clip`, el skip link queda invisible incluso enfocado. Fondo
   --oscuro/--en-oscuro porque el link flota sobre la franja superior de la
   cabecera (siempre oscura, en los dos temas). */
.screen-reader-text:focus {
  background-color: var(--oscuro);
  color: var(--en-oscuro);
  clip: auto;
  clip-path: none;
  position: absolute;
  top: 8px;
  left: 8px;
  width: auto;
  height: auto;
  overflow: visible;
  white-space: normal;
  padding: 12px 20px;
  font-family: var(--display);
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  z-index: 100000;
}

/* ---- Buscador dentro del panel de la hamburguesa ----
   El buscador del header (`.cabecera__busqueda`) se oculta por debajo de
   1360px para que el nav de 9 categorías entre en una sola fila — pero eso
   dejaba mobile, tablet y laptops chicas sin ninguna forma de buscar: el
   panel de la hamburguesa solo listaba categorías. El campo usa un id
   propio (`campo-busqueda-panel`), distinto del `campo-busqueda` del
   header, porque dos elementos con el mismo id en el documento rompen el
   `<label for>` (y son HTML inválido). */
.cabecera__panel-busqueda {
  margin-bottom: 20px;
}
.cabecera__panel-busqueda input {
  background: transparent; border: 1px solid rgba(255, 255, 255, .4);
  color: var(--en-oscuro); font-family: var(--mono); font-size: 14px;
  padding: 10px 12px; width: 100%;
}
.cabecera__panel-busqueda input::placeholder { color: rgba(255, 255, 255, .6); }

/* ---- Hero sin nota principal (sitio recién instalado, sin posts propios
   pero con feed de Facebook) ----
   .hero__principal solo se imprime cuando hay $id_principal (ver
   front-page.php). Sin este modificador, la columna 2fr del grid quedaba
   reservada igual (la altura de fila la fija .hero__riel, la única celda
   con contenido) y se veía un rectángulo en blanco del tamaño del riel a
   la izquierda — mismo defecto en espíritu que un título huérfano: markup
   estructural (la reserva de grid) ocupando espacio antes de saber si hay
   contenido. */
.hero--sin-principal { grid-template-columns: 1fr; }
.hero--sin-principal .hero__riel { max-width: 480px; margin: 0 auto; }