/* ===== Tokens de marca (no se tocan sus valores) =====
   Este medio es monocromo: su --primario ES el blanco. La spec lo dice —
   "el logo es blanco, su color es la ausencia de color" y "el oro es su
   unico color y por eso no se pisa". */
:root {
  --primario: #FFFFFF;
  --tinta: #141414;
  --acento: #B08C4A;
  --papel: #FFFFFF;
  --texto: #16150F;
  --texto-suave: #6E6A5E;

  --fuente-display: 'Alegreya', Georgia, serif;
  --fuente-texto: 'Alegreya Sans', system-ui, sans-serif;

  /* ===== Roles de superficie (claro por default) =====
     NO hay rol --marca en este tema, a diferencia del resto de la red: aca
     resolveria a --primario, que es blanco. El peso lo lleva
     --en-superficie y el remate --acento. */
  --superficie: var(--papel);
  --superficie-alterna: #F6F4EF;
  --en-superficie: var(--texto);
  --en-superficie-suave: var(--texto-suave);
  --borde-suave: #E3E0D9;
  /* El oro puro da 3.14:1 sobre blanco: pasa como grafico (piso 3,0) pero
     falla como texto (piso 4,5). Este derivado tiene el mismo tono y la
     misma saturacion, solo el valor mas bajo: 5.17:1. */
  --acento-texto: #846938;
}

[data-tema="oscuro"] {
  --superficie: var(--tinta);
  --superficie-alterna: #1E1E1E;
  --en-superficie: var(--papel);
  --en-superficie-suave: rgba(255, 255, 255, 0.68);
  --borde-suave: rgba(255, 255, 255, 0.14);
  /* Sobre --tinta el oro original ya da 5.87:1: no hace falta derivarlo. */
  --acento-texto: var(--acento);
}

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

/* 16px y peso 400: la referencia usa Work Sans 16/400 en cuerpo y el spec
   dice que los tamanos y pesos se calcan. Las familias son las de la marca,
   la escala es la de la referencia. */
body {
  margin: 0;
  background: var(--superficie);
  color: var(--en-superficie);
  font-family: var(--fuente-texto);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  transition: background-color .2s ease, color .2s ease;
}

@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover, a:focus-visible { color: var(--acento-texto); }

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

.contenedor {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ===== Cabecera de tres filas (patron de la referencia) ===== */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde-suave);
}

.cabecera__ticker {
  border-bottom: 1px solid var(--borde-suave);
  overflow: hidden;
}
.cabecera__ticker-pista {
  display: flex;
  gap: 32px;
  padding-top: 7px;
  padding-bottom: 7px;
  overflow-x: auto;
  scrollbar-width: none;
}
.cabecera__ticker-pista::-webkit-scrollbar { display: none; }
.cabecera__ticker-item {
  font-size: 13px;
  color: var(--en-superficie-suave);
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
}
/* El punto separador es decorativo: va en --acento, que como grafico pasa. */
.cabecera__ticker-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -18px;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--acento);
  transform: translateY(-50%);
}

.cabecera__nav { border-bottom: 1px solid var(--borde-suave); }
.cabecera__menu {
  display: flex;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.cabecera__menu::-webkit-scrollbar { display: none; }
.cabecera__menu a {
  display: block;
  padding: 11px 0;
  font-family: var(--fuente-texto);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}

.cabecera__masthead-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding-top: 18px;
  padding-bottom: 18px;
}
/* NADA de text-transform: capitalize. En español mayusculiza CADA palabra,
   incluido el "de": "Lunes 27 De Julio De 2026". Solo la primera letra, y
   para que ::first-letter aplique el elemento tiene que ser inline-block. */
.cabecera__fecha {
  display: inline-block;
  font-size: 13px;
  color: var(--en-superficie-suave);
}
.cabecera__fecha::first-letter { text-transform: uppercase; }

.cabecera__marca { justify-self: center; }
.cabecera__logo { height: clamp(2.6rem, 2.1rem + 2.2vw, 4rem); width: auto; }
.cabecera__logo--oscuro { display: none; }
[data-tema="oscuro"] .cabecera__logo--claro { display: none; }
[data-tema="oscuro"] .cabecera__logo--oscuro { display: block; }

.cabecera__acciones { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }

.boton-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid var(--borde-suave);
  border-radius: 50%;
  background: transparent;
  color: var(--en-superficie);
  cursor: pointer;
  padding: 0;
}
.boton-icono svg { width: 15px; height: 15px; fill: currentColor; }
.boton-icono:hover, .boton-icono:focus-visible {
  border-color: var(--acento-texto);
  color: var(--acento-texto);
}

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

/* ===== Buscador ===== */
.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.buscador { display: flex; align-items: center; gap: 6px; }
.buscador__campo {
  width: 150px;
  padding: 6px 10px;
  border: 1px solid var(--borde-suave);
  background: transparent;
  color: var(--en-superficie);
  font-family: var(--fuente-texto);
  font-size: 14px;
}
/* El placeholder necesita el mismo piso de 4,5:1 que el texto normal, no el
   gris de fabrica del navegador. --en-superficie-suave da 5.40:1 en claro. */
.buscador__campo::placeholder { color: var(--en-superficie-suave); opacity: 1; }
.buscador__campo:focus-visible { outline: 2px solid var(--acento-texto); outline-offset: 1px; }
.buscador__boton { border: 0; width: 28px; height: 28px; }

@media (max-width: 760px) {
  .cabecera__masthead-inner { grid-template-columns: 1fr auto; }
  .cabecera__fecha { display: none; }
  /* El campo se esconde, NO el formulario: el boton sigue enviando y lleva a
     search.php con s vacio, que es la busqueda abierta. */
  .buscador__campo { display: none; }
}

/* ===== Pie ===== */
/* El pie NO sigue al tema: su fondo es --tinta siempre. En oscuro
   --superficie tambien es --tinta, asi que sin el borde el pie se funde con
   el cuerpo y desaparece como superficie. */
.pie {
  background: var(--tinta);
  color: var(--papel);
  padding: 40px 0;
  margin-top: 56px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.pie__logo { height: 40px; width: auto; margin: 0 auto 22px; }
.pie__categorias {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  font-size: 14px;
}
.pie__categorias a:hover, .pie__categorias a:focus-visible { color: var(--acento); }
.pie__redes { display: flex; justify-content: center; gap: 12px; margin-bottom: 20px; }
.pie__copyright { text-align: center; font-size: 12px; color: rgba(255,255,255,.65); margin: 0; }

/* ===== Redes sociales ===== */
.redes { display: flex; align-items: center; gap: 8px; }
.redes__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  color: var(--en-superficie-suave);
}
.redes__link svg { width: 16px; height: 16px; fill: currentColor; }
.redes__link:hover, .redes__link:focus-visible { color: var(--acento-texto); }

/* El pie tiene fondo --tinta SIEMPRE, no sigue al tema: aca el oro puro es
   el correcto (5.87:1) y --acento-texto seria innecesariamente oscuro. */
.redes--pie .redes__link { color: var(--papel); width: 32px; height: 32px; }
.redes--pie .redes__link svg { width: 18px; height: 18px; }
.redes--pie .redes__link:hover, .redes--pie .redes__link:focus-visible { color: var(--acento); }

/* ===== Hero: titular SOBRE la imagen ===== */
.hero { position: relative; overflow: hidden; }
.hero__link { display: block; position: relative; }
.hero__imagen { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
/*
 * El scrim asegura contraste del titular contra cualquier foto. Sin el, una
 * imagen clara deja el texto blanco ilegible y no hay forma de preverlo.
 *
 * Vive en .hero__cuerpo, NO en un .hero__velo aparte con inset:0 sobre todo
 * el .hero: ese primer intento escalaba el degradado contra la ALTURA FIJA
 * del contenedor (determinada por aspect-ratio: 16/9), mientras el bloque de
 * texto crece hacia arriba de forma independiente segun cuantas lineas tenga
 * el titular. Con un titular de 2-3 lineas la linea superior terminaba en la
 * zona ya casi transparente del degradado -> contraste por debajo de 4.5:1
 * sobre foto clara. Nunca se vio en el seed porque las 9 fotos sembradas son
 * todas oscuras (#141414 con texto dorado) -- el caso que falla, foto clara,
 * no se ejercita con ese contenido. `wp/seed/images/prueba-clara.png` (fondo
 * #FFFFFF, fuera del flujo normal de seed.sh, sin asignar a ningun post) es
 * el material para probar el peor caso real.
 *
 * Version anterior (Task 6): stops "to top" en PX medidos desde el borde
 * INFERIOR del cuerpo. Resolvia bien el titular largo, pero con un titular
 * de 1 sola linea la caja mide ~227px de alto y su borde SUPERIOR cae a
 * mitad del degradado (alpha ~0.68) -- arriba de ese borde, sobre la foto
 * sin filtrar, no hay overlay ninguno. Resultado: un escalon de contraste
 * duro justo donde arranca .hero__cuerpo, visible en cualquier titular corto
 * (el caso mas comun, no el peor). Confirmado con screenshot en
 * task-8-report.md.
 *
 * Fix (Task 8, ronda 1): "to bottom" con stops medidos desde ARRIBA, atados
 * al padding-top (110px) en vez de a la altura total de la caja. El fundido
 * ocupa EXACTAMENTE la zona vacia por encima del texto (0 a 110px) y de ahi
 * para abajo queda solido (.88) hasta el borde inferior, sin importar cuantas
 * lineas tenga el titular ni cuan alta sea la caja. Si se cambia
 * padding-top, mover el segundo stop del gradiente con el, son el mismo
 * numero.
 *
 * Verificado con la formula de contraste WCAG (linealizando sRGB) sobre foto
 * blanca pura (#FFFFFF): el titular arranca siempre a 110px del borde
 * superior del cuerpo (donde alpha ya llego a .88), sea de 1 o de 3 lineas
 * -> fondo efectivo 255*(1-.88) = 30.6 -> contraste del texto blanco:
 * ~16.6:1 (piso 4.5:1), constante sin importar el largo del titular. El
 * borde superior de la caja queda en alpha 0, sin escalon.
 */
.hero__cuerpo {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 110px 30px 28px;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,.88) 110px, /* mismo valor que el padding-top de arriba */
    rgba(0,0,0,.88) 100%);
}
.hero__titular {
  font-size: clamp(1.7rem, 1.2rem + 2.2vw, 3rem);
  color: #FFFFFF;
  text-wrap: balance;
  margin: 0 0 8px;
}
.hero__meta { font-size: 14px; color: rgba(255,255,255,.82); margin: 0; }

/* ===== Item de lista: miniatura a la DERECHA ===== */
.item {
  display: grid;
  grid-template-columns: 1fr 96px;
  gap: 16px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid var(--borde-suave);
}
.item:last-child { border-bottom: 0; }
.item__titular { font-size: 19px; line-height: 1.3; color: var(--en-superficie); }
.item__meta { font-size: 13px; color: var(--en-superficie-suave); margin: 6px 0 0; }
.item__imagen { width: 96px; height: 72px; object-fit: cover; }

/* ===== Franja de cotizacion ===== */
/* El borde va en --acento (grafico, 3.14:1 sobre blanco). 2px y no 1px: con
   solo 0,14 de margen sobre el piso, un trazo fino se pierde. */
.cotizacion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  border-top: 2px solid var(--acento);
  border-bottom: 2px solid var(--acento);
  padding: 16px 4px;
  margin: 32px 0;
}
.cotizacion__etiqueta { display: flex; flex-direction: column; gap: 2px; }
.cotizacion__titulo {
  font-family: var(--fuente-display);
  font-size: 18px;
  color: var(--en-superficie);
}
.cotizacion__fuente { font-size: 13px; color: var(--en-superficie-suave); }
.cotizacion__dato { display: flex; align-items: baseline; gap: 6px; }
.cotizacion__valor {
  font-family: var(--fuente-display);
  font-size: 34px;
  line-height: 1;
  color: var(--en-superficie);
}
.cotizacion__unidad { font-size: 12px; font-weight: 500; color: var(--en-superficie-suave); }
.cotizacion__fecha { font-size: 13px; color: var(--en-superficie-suave); }

/* ===== Bloques de seccion ===== */
.bloque { margin: 40px 0; }
.bloque__titulo {
  font-size: 15px;
  font-family: var(--fuente-texto);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--en-superficie);
  border-bottom: 2px solid var(--acento);
  padding-bottom: 8px;
  margin-bottom: 4px;
}
.bloque__chevron { color: var(--acento-texto); margin-left: 4px; }

/* auto-fill y NO auto-fit: auto-fit colapsa las pistas vacias, asi que un
   bloque con 1 sola nota renderiza a ancho completo al lado de otros de
   ancho normal. Con el seed no se nota; el dia del lanzamiento, si. */
.portada__secciones {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 0 40px;
}
.bloque__items--dos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 0 40px;
}

/* ===== Nota ===== */
.nota { max-width: 720px; }
.nota__categoria {
  font-family: var(--fuente-texto);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--acento-texto);
  margin: 24px 0 8px;
}
.nota__titular { font-size: clamp(2rem, 1.5rem + 2.4vw, 3.1rem); margin: 0 0 14px; }
.nota__bajada {
  font-size: 20px;
  line-height: 1.5;
  color: var(--en-superficie-suave);
  margin: 0 0 10px;
}
.nota__meta { font-size: 13px; color: var(--en-superficie-suave); margin: 0 0 24px; }
.nota__media { margin: 0 0 26px; }
.nota__imagen { width: 100%; height: auto; }
.nota__texto { font-size: 19px; line-height: 1.75; }
.nota__texto p { margin: 0 0 20px; }

/* ===== Paginacion ===== */
.paginacion ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 36px 0 0; }
.paginacion a, .paginacion span {
  display: inline-block;
  padding: 8px 13px;
  border: 1px solid var(--borde-suave);
  font-size: 14px;
}
/* El texto va en --superficie, NO en --papel fijo: con fondo --en-superficie
   el fondo cambia con el tema pero --papel es blanco siempre, y en oscuro
   quedaria blanco sobre blanco. */
.paginacion .current {
  background: var(--en-superficie);
  color: var(--superficie);
  border-color: var(--en-superficie);
}

/* Enlaces DENTRO de prosa. La regla global `a { color: inherit }` sirve para
   navegacion, titulares de tarjeta y pie, donde el enlace es el bloque entero
   y se entiende clickeable. En prosa no hay esa pista: sin color ni subrayado
   un enlace a una fuente es byte-identico al texto que lo rodea. Este medio
   cita fuentes por linea editorial, asi que esto es parte del producto.
   Selector ajustado a la estructura real del tema: `main` ES `.contenedor`
   (no hay un `.contenedor` anidado adentro), asi que el selector que cubre
   los parrafos sueltos de 404.php/search.php es `main.contenedor > p a`. */
.nota__texto a,
.nota__bajada a,
main.contenedor > p a {
  color: var(--acento-texto);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.nota__texto a:hover, .nota__texto a:focus-visible,
.nota__bajada a:hover, .nota__bajada a:focus-visible,
main.contenedor > p a:hover, main.contenedor > p a:focus-visible {
  text-decoration-thickness: 2px;
}

/* ===== Franja de destacadas: "Lo ultimo" + "Lo mas visto" =====
   Columnas explicitas y no auto-fill/auto-fit: aca los hijos son siempre
   exactamente dos secciones, no una cantidad variable de tarjetas. Con
   auto-fill a minmax(340px, 1fr) el contenedor armaria 3 pistas a 1192px y
   dejaria una vacia a la derecha; con auto-fit las dos columnas se estirarian
   de forma distinta segun cuantas secciones tengan contenido. El caso de una
   sola seccion (si la otra queda sin posts) lo cubre el 1fr de mobile, que
   ocupa el ancho completo sin hueco. */
.portada__destacadas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 40px;
}
@media (min-width: 900px) {
  .portada__destacadas { grid-template-columns: 1fr 1fr; }
}

/* ===== Riel de Facebook ===== */
.riel-fb {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 28px 24px;
  margin-top: 20px;
}
/* flex column + margin-top:auto en el texto: un post sin full_picture no
   trae .tarjeta-fb__media, asi que sin esto su texto arrancaria ~157px mas
   arriba que el de sus vecinas (el alto del aspect-ratio 16/9 a 280px mas
   su margen). El grid ya iguala el alto de fila (stretch por defecto); el
   margin-top:auto empuja texto+link al fondo de esa celda ya pareja, con o
   sin foto arriba. */
.tarjeta-fb { display: flex; flex-direction: column; }
.tarjeta-fb__imagen { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 12px; }
.tarjeta-fb__texto { font-size: 15px; line-height: 1.5; color: var(--en-superficie); margin: auto 0 10px; }
.tarjeta-fb__link {
  font-family: var(--fuente-texto);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--acento-texto);
}