/* ===== Tokens de marca (no se tocan sus valores) ===== */
:root {
  --primario: #115325;
  --tinta: #0A2E15;
  --acento: #D9A441;
  --papel: #FFFFFF;
  --texto: #16150F;
  --texto-suave: #6E6A5E;

  --fuente-display: 'Archivo', system-ui, sans-serif;
  --fuente-texto: 'Source Sans 3', system-ui, sans-serif;

  /* ===== Roles de superficie (claro por default) ===== */
  --superficie: var(--papel);
  --superficie-alterna: #F4F4F1;
  --en-superficie: var(--texto);
  --en-superficie-suave: var(--texto-suave);
  --borde-suave: #E3E0D9;
  --marca: var(--primario);
  /* --acento sobre blanco da 2.25:1 y el piso para elementos graficos es
     3,0:1 (no negociable de la marca). Este derivado tiene el MISMO tono
     (39deg) y la MISMA saturacion (0.70) que --acento, solo el valor mas
     bajo: 3.44:1. No reemplaza el token, lo amplia. */
  --acento-grafico: #AE8334;
}

[data-tema="oscuro"] {
  --superficie: var(--tinta);
  --superficie-alterna: #0F3A1C;
  --en-superficie: var(--papel);
  --en-superficie-suave: rgba(255, 255, 255, 0.68);
  --borde-suave: rgba(255, 255, 255, 0.14);
  /* El verde institucional no contrasta contra --tinta: en oscuro manda el dorado. */
  --marca: var(--acento);
  /* Sobre --tinta el dorado original ya da 6.60:1: no hace falta derivarlo. */
  --acento-grafico: var(--acento);
}

*, *::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;
  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(--marca); }

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

/* El contenedor de la referencia mide 1160px. */
.contenedor {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px;
}

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

.cabecera__utilitaria { border-bottom: 1px solid var(--borde-suave); }
.cabecera__utilitaria-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
}
/* NADA de text-transform: capitalize. En español mayusculiza CADA palabra,
   incluido el "de": "Lunes 27 De Julio De 2026 · Santa Cruz De La Sierra".
   Con el locale en inglés esto no se notaba. Solo va la primera letra, y para
   que ::first-letter aplique el elemento tiene que ser inline-block. */
.cabecera__fecha {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--en-superficie-suave);
}
.cabecera__fecha::first-letter { text-transform: uppercase; }
.cabecera__acciones { display: flex; align-items: center; 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: 16px; height: 16px; fill: currentColor; }
.boton-icono:hover, .boton-icono:focus-visible { border-color: var(--marca); color: var(--marca); }

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

.cabecera__masthead { display: flex; justify-content: center; padding: 18px 20px; }
.cabecera__logo { height: clamp(3rem, 2.4rem + 2.6vw, 4.75rem); width: auto; }
.cabecera__logo--oscuro { display: none; }
[data-tema="oscuro"] .cabecera__logo--claro { display: none; }
[data-tema="oscuro"] .cabecera__logo--oscuro { display: block; }

.cabecera__nav { border-top: 1px solid var(--borde-suave); }
.cabecera__menu {
  display: flex;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cabecera__menu::-webkit-scrollbar { display: none; }
.cabecera__menu a {
  display: block;
  padding: 12px 0;
  font-family: var(--fuente-display);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* ===== Pie ===== */
.pie {
  background: var(--tinta);
  color: var(--papel);
  padding: 36px 0;
  margin-top: 48px;
}
.pie__logo { height: 42px; width: auto; margin: 0 auto 20px; }
.pie__categorias {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  font-size: 14px;
}
.pie__redes { display: flex; justify-content: center; gap: 12px; margin-bottom: 18px; }
.pie__copyright { text-align: center; font-size: 12px; color: rgba(255,255,255,.65); margin: 0; }
/* Mismo motivo que .redes--pie: el pie no sigue al tema, su fondo es --tinta
   siempre. En claro --marca resuelve a --primario y da 1.62:1 sobre ese
   fondo. Aca --acento es fijo y correcto (6.60:1). */
.pie__categorias a:hover, .pie__categorias a:focus-visible { color: var(--acento); }

/* ===== 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;
  border-radius: 50%;
  color: var(--marca);
}
.redes__link svg { width: 16px; height: 16px; fill: currentColor; }
.redes--pie .redes__link { color: var(--papel); width: 32px; height: 32px; }
.redes--pie .redes__link svg { width: 18px; height: 18px; }
.redes__link:hover, .redes__link:focus-visible { color: var(--acento-grafico); }
.redes--pie .redes__link:hover, .redes--pie .redes__link:focus-visible { color: var(--acento); }

/* ===== Etiqueta de categoria ===== */
/* Lo que evita que el border-bottom se estire a toda la columna es
   `width: fit-content`, NO el `display: inline-block`.
   .tarjeta__cuerpo es flex, asi que la etiqueta es un flex item y su
   `inline-block` se blockifica: el display COMPUTADO es `block` (medido con
   getComputedStyle). Siendo flex item, su ancho lo decide `align-items`
   (default `stretch`), y `stretch` solo se desactiva cuando el item tiene un
   tamano transversal definido — que es justo lo que aporta `fit-content`.
   El `inline-block` se deja igual: es inerte hoy, pero vuelve a proteger el
   ancho si alguien saca el flex del contenedor. NO borrar `fit-content`
   creyendo que es redundante: ahi el filete se estira en TODAS las
   plantillas, y ni php -l ni leer el PHP lo detectan. */
.etiqueta-categoria {
  display: inline-block;
  width: fit-content;
  font-family: var(--fuente-display);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--en-superficie);
  border-bottom: 3px solid var(--marca);
  padding: 0 0 2px;
  margin-bottom: 10px;
}
.etiqueta-categoria:hover, .etiqueta-categoria:focus-visible {
  color: var(--en-superficie);
  border-bottom-color: var(--acento-grafico);
}

/* ===== Tarjeta de nota ===== */
.tarjeta { display: flex; flex-direction: column; background: var(--superficie); }
.tarjeta__media { position: relative; margin-bottom: 12px; }
.tarjeta__imagen { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.tarjeta__cuerpo { display: flex; flex-direction: column; }
.tarjeta__titular {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--en-superficie);
}
.tarjeta__bajada {
  font-size: 16px;
  line-height: 1.5;
  color: var(--en-superficie-suave);
  margin: 10px 0 0;
}

/* La principal replica la proporcion de la referencia: 28px de titular. */
.tarjeta--principal .tarjeta__titular { font-size: 28px; line-height: 34px; }
/* 16:9 como la referencia (su imagen principal mide 685x385), no 3:2. */

/* ===== Franja de cotizacion (patron de la referencia) ===== */
.cotizacion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  border: 1px solid var(--acento-grafico);
  padding: 14px 20px;
  margin: 24px 0 32px;
}
.cotizacion__etiqueta { display: flex; flex-direction: column; gap: 2px; }
.cotizacion__titulo {
  font-family: var(--fuente-display);
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--marca);
}
.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;
  font-weight: 800;
  line-height: 1;
  color: var(--marca);
}
.cotizacion__unidad { font-size: 12px; font-weight: 700; color: var(--en-superficie-suave); }
.cotizacion__fecha { display: flex; flex-direction: column; font-size: 13px; color: var(--en-superficie-suave); }
.cotizacion__hoy { font-weight: 700; color: var(--en-superficie); }

/* ===== Portada ===== */
/* La principal NO va a ancho completo. En la referencia ocupa 685px de un
   contenedor de 1160 (59%) con una columna de tarjetas chicas al lado; a
   ancho completo su imagen queda de ~750px de alto y se come el pliegue. */
.portada__destacado {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 28px 24px;
  margin-bottom: 44px;
}
.portada__secundarias { display: grid; gap: 24px; align-content: start; }
@media (max-width: 860px) {
  .portada__destacado { grid-template-columns: 1fr; }
}

.bloque-categoria { margin-bottom: 44px; }
.bloque-categoria__titulo {
  font-size: 22px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--en-superficie);
  border-bottom: 2px solid var(--acento-grafico);
  padding-bottom: 8px;
  margin-bottom: 20px;
}

/* Grilla responsive sin breakpoints; la estrategia de columnas esta en .grilla--tres. */
.grilla { display: grid; gap: 28px 24px; }
/* auto-fill y NO auto-fit: auto-fit colapsa las pistas vacias, asi que un
   bloque con 1 sola nota renderiza una tarjeta de ancho completo al lado de
   otras de 357px. Con el seed (3 por categoria) no se nota; el dia del
   lanzamiento, con categorias de 1 o 2 notas, si. */
.grilla--tres { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* ===== Nota ===== */
.nota { max-width: 760px; }
.nota__titular { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.75rem); margin: 6px 0 12px; }
.nota__bajada { font-size: 19px; 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 20px; }
.nota__media { margin: 0 0 24px; }
.nota__imagen { width: 100%; height: auto; }
.nota__texto { font-size: 18px; line-height: 1.7; }
.nota__texto p { margin: 0 0 18px; }

/* ===== Paginacion ===== */
.paginacion ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 32px 0 0; }
.paginacion a, .paginacion span {
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid var(--borde-suave);
  font-size: 14px;
  font-weight: 700;
}
/* El texto va en --superficie, NO en --papel fijo. Con fondo --marca el color
   del fondo cambia con el tema (verde en claro, dorado en oscuro) pero --papel
   es blanco siempre: en oscuro queda blanco sobre dorado, 2.25:1. Con
   --superficie el texto acompaña al tema — 9.18:1 en claro y 6.60:1 en oscuro.
   Regla general: todo fondo --marca lleva texto --superficie. */
.paginacion .current { background: var(--marca); color: var(--superficie); border-color: var(--marca); }

/* ===== Riel de Facebook ===== */
.tarjeta--fb .tarjeta__fb-texto { font-size: 15px; line-height: 1.45; color: var(--en-superficie); margin: 0 0 10px; }
.tarjeta--fb .tarjeta__fb-link {
  font-family: var(--fuente-display);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--marca);
}