/* ============================================================================
   DINERO Y CONTEXTO — Sistema de diseño editorial
   ----------------------------------------------------------------------------
   Arquitectura:
     1. Tokens de diseño (color, tipografía, espacio, radio, sombra, motion)
     2. Reinicio y base
     3. Utilidades de composición (contenedor, reglas, kicker, meta)
     4. Cabecera: masthead + navegación + buscador
     5. Portada: hero, ríos de noticias, tarjetas, barra lateral
     6. Artículo: cuerpo tipográfico de lectura larga
     7. Páginas, secciones, estados
     8. Publicidad
     9. Pie
    10. Adaptable (tablet, móvil) + impresión
   Todo se apoya en variables. Un solo lugar para cambiar el sistema entero.
   ========================================================================== */

/* 1 · TOKENS ============================================================== */

:root {
  /* — Neutrales cálidos (papel) — */
  --tinta:        #191713;   /* texto principal, casi negro cálido */
  --tinta-2:      #4d4a44;   /* subtítulos, texto secundario */
  --tinta-3:      #7a766e;   /* metadatos, apoyo */
  --tinta-4:      #a8a49b;   /* deshabilitado, marcas de agua */
  --papel:        #ffffff;   /* fondo base */
  --papel-2:      #f7f5f0;   /* superficies suaves, secciones */
  --papel-3:      #efece4;   /* superficies elevadas, hover */
  --linea:        #e5e1d8;   /* hairline principal */
  --linea-2:      #d8d3c8;   /* hairline con más peso */
  --regla:        #1f1c17;   /* reglas editoriales fuertes (bajo titulares) */

  /* — Acento: rojo editorial, usado con moderación — */
  --acento:       #a3231d;
  --acento-oscuro:#87180f;
  --acento-tinte: #f7ebe9;
  --realce:       #b8860b;   /* dorado apagado, para detalles premium puntuales */

  /* — Semánticos — */
  --positivo:     #1c7a4a;
  --negativo:     #b02a1f;

  /* — Tipografía — */
  --serif: "Newsreader", Georgia, "Times New Roman", Times, serif;
  --sans:  "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Escala modular (~1.20). Los pasos grandes usan clamp para fluidez. */
  --t-xs:   0.75rem;                               /* 12 */
  --t-sm:   0.8125rem;                             /* 13 */
  --t-base: 0.9375rem;                             /* 15 — UI */
  --t-md:   1.0625rem;                             /* 17 — cuerpo */
  --t-lg:   1.25rem;                               /* 20 */
  --t-xl:   clamp(1.35rem, 1.1rem + 1.1vw, 1.62rem);
  --t-2xl:  clamp(1.6rem, 1.2rem + 1.8vw, 2.1rem);
  --t-3xl:  clamp(2.05rem, 1.5rem + 2.6vw, 2.9rem);
  --t-4xl:  clamp(2.5rem, 1.7rem + 3.8vw, 3.9rem);

  --peso-normal: 400;
  --peso-medio:  500;
  --peso-semi:   600;
  --peso-bold:   700;
  --peso-negro:  800;

  /* — Espacio (base 4px) — */
  --e1: 0.25rem;  --e2: 0.5rem;   --e3: 0.75rem;  --e4: 1rem;
  --e5: 1.5rem;   --e6: 2rem;     --e7: 3rem;     --e8: 4rem;     --e9: 6rem;

  /* — Composición — */
  --ancho:   1400px;   /* contenedor máximo */
  --ancho-estrecho: 1040px;
  --lectura: 46rem;    /* medida óptima de lectura */
  --radio-sm: 3px;
  --radio:    6px;
  --radio-lg: 12px;
  --radio-pill: 999px;

  /* — Sombra (discretas, papel) — */
  --sombra-1: 0 1px 2px rgba(24, 20, 12, .05);
  --sombra-2: 0 2px 4px rgba(24, 20, 12, .05), 0 8px 24px rgba(24, 20, 12, .06);
  --sombra-3: 0 1px 0 var(--linea), 0 6px 20px rgba(24, 20, 12, .05);

  /* — Motion — */
  --mov-rapido: 130ms cubic-bezier(.2, 0, .2, 1);
  --mov:        220ms cubic-bezier(.2, 0, .2, 1);

  color-scheme: light;
}

/* — Oscuro: por preferencia del sistema y por interruptor — */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --tinta:   #f1eee8;  --tinta-2: #bdb8ae;  --tinta-3: #8f8a80;  --tinta-4: #625e57;
    --papel:   #131117;  --papel-2: #1a181f;  --papel-3: #232029;
    --linea:   #2c2933;  --linea-2: #383440;  --regla:   #e7e3da;
    --acento:  #ff6f63;  --acento-oscuro: #ff8b81;  --acento-tinte: #2a1614;
    --realce:  #d4a63c;  --positivo: #4ecb8a;  --negativo: #ff7a6d;
    --sombra-1: 0 1px 2px rgba(0,0,0,.4);
    --sombra-2: 0 2px 4px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    --sombra-3: 0 1px 0 var(--linea), 0 6px 20px rgba(0,0,0,.3);
    color-scheme: dark;
  }
}

:root[data-tema="oscuro"] {
  --tinta:   #f1eee8;  --tinta-2: #bdb8ae;  --tinta-3: #8f8a80;  --tinta-4: #625e57;
  --papel:   #131117;  --papel-2: #1a181f;  --papel-3: #232029;
  --linea:   #2c2933;  --linea-2: #383440;  --regla:   #e7e3da;
  --acento:  #ff6f63;  --acento-oscuro: #ff8b81;  --acento-tinte: #2a1614;
  --realce:  #d4a63c;  --positivo: #4ecb8a;  --negativo: #ff7a6d;
  --sombra-1: 0 1px 2px rgba(0,0,0,.4);
  --sombra-2: 0 2px 4px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --sombra-3: 0 1px 0 var(--linea), 0 6px 20px rgba(0,0,0,.3);
  color-scheme: dark;
}


/* 2 · REINICIO Y BASE ==================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: var(--t-md);
  line-height: 1.6;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; transition: color var(--mov-rapido); }

button { font: inherit; color: inherit; cursor: pointer; }

::selection { background: var(--acento); color: #fff; }

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: 2px;
}

h1, h2, h3, h4 { font-weight: var(--peso-bold); }

/* Placeholder de imagen ausente: patrón sutil en vez de hueco vacío */
.marco {
  display: block;               /* imprescindible: aspect-ratio se ignora en inline */
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, var(--papel-2), var(--papel-3));
}
.marco::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg, transparent 0 11px, rgba(120,110,95,.05) 11px 12px);
  pointer-events: none;
}
.marco picture { display: block; width: 100%; height: 100%; }
.marco img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.marco:has(img)::after { display: none; }


/* 3 · UTILIDADES DE COMPOSICIÓN ========================================== */

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: clamp(16px, 3.5vw, 40px);
}

.saltar {
  position: fixed; left: -9999px; top: 8px; z-index: 200;
  background: var(--acento); color: #fff;
  padding: 10px 18px; border-radius: var(--radio);
  font: var(--peso-semi) var(--t-sm)/1 var(--sans);
}
.saltar:focus { left: 12px; }

/* Kicker / etiqueta de categoría — la firma tipográfica del sistema */
.kicker {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: var(--peso-bold);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--acento);
  line-height: 1;
}
.kicker--tinta { color: var(--tinta-3); }

/* Metadatos: autor · fecha · lectura */
.meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .5em;
  font-family: var(--sans);
  font-size: var(--t-sm);
  color: var(--tinta-3);
  line-height: 1.3;
}
.meta time { font-variant-numeric: tabular-nums; }
.meta .sep { color: var(--tinta-4); font-size: .8em; }

/* Regla de sección con rótulo */
.regla-seccion {
  display: flex; align-items: center; gap: var(--e4);
  margin: var(--e8) 0 var(--e5);
}
.regla-seccion:first-child { margin-top: var(--e6); }
/* Bandas por sección en la portada: la primera alinea con la barra lateral */
.banda .regla-seccion { margin-top: var(--e7); }
.portada-principal > .banda:first-child .regla-seccion { margin-top: 0; }
.regla-seccion h2 {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: var(--peso-negro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta);
  white-space: nowrap;
}
.regla-seccion .linea-fina {
  flex: 1; height: 1px; background: var(--linea-2);
}
.regla-seccion a {
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: var(--peso-semi);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta-3);
  white-space: nowrap;
}
.regla-seccion a:hover { color: var(--acento); }


/* 4 · CABECERA =========================================================== */

/* Franja superior: fecha · última hora · utilidades mínimas */
.barra-superior {
  border-bottom: 1px solid var(--linea);
  background: var(--papel);
  font-family: var(--sans);
  font-size: var(--t-xs);
}
.barra-superior-fila {
  display: flex; align-items: center; gap: var(--e4);
  height: 38px;
}
.fecha-hoy {
  color: var(--tinta-3);
  letter-spacing: .02em;
  text-transform: capitalize;
  white-space: nowrap;
}
.ultima-hora {
  display: flex; align-items: center; gap: var(--e3);
  min-width: 0; margin-inline: auto;
}
.ultima-hora .etiqueta {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--acento);
  font-weight: var(--peso-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ultima-hora .etiqueta::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--acento);
  box-shadow: 0 0 0 0 var(--acento);
  animation: latido 2.4s ease-out infinite;
}
@keyframes latido {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acento) 55%, transparent); }
  70%  { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.ultima-hora a.titular {
  color: var(--tinta-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: var(--peso-medio);
}
.ultima-hora a.titular:hover { color: var(--acento); }
.barra-superior .utiles-min {
  display: flex; align-items: center; gap: var(--e4);
  white-space: nowrap;
}
.barra-superior .utiles-min a { color: var(--tinta-3); font-weight: var(--peso-medio); }
.barra-superior .utiles-min a:hover { color: var(--acento); }

/* Masthead: marca + acciones */
.cabecera {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--papel) 90%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--linea);
  transition: box-shadow var(--mov), border-color var(--mov);
}
.cabecera.desplazada { box-shadow: var(--sombra-3); }

.masthead {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--e4);
  height: 74px;
}
.masthead .izq { justify-self: start; }
.masthead .der { justify-self: end; }

.marca {
  justify-self: center;
  font-family: var(--serif);
  font-weight: var(--peso-bold);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.05rem);
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--tinta);
  white-space: nowrap;
}
.marca span { color: var(--acento); }
.marca:hover { color: var(--tinta); }

.acciones { display: flex; align-items: center; gap: var(--e2); }

.boton-icono {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--tinta-2);
  border-radius: var(--radio-pill);
  transition: background var(--mov-rapido), color var(--mov-rapido), border-color var(--mov-rapido);
}
.boton-icono:hover { background: var(--papel-2); color: var(--acento); }
.boton-icono svg { width: 20px; height: 20px; }

.boton-suscribir {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 17px;
  background: var(--tinta);
  color: var(--papel);
  border: 1px solid var(--tinta);
  border-radius: var(--radio-pill);
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: var(--peso-semi);
  letter-spacing: .01em;
  transition: opacity var(--mov-rapido), transform var(--mov-rapido);
}
.boton-suscribir:hover { color: var(--papel); opacity: .88; }
.boton-suscribir:active { transform: translateY(1px); }

.menu-alterna { display: none; }

/* Navegación de secciones */
.nav-principal {
  border-top: 1px solid var(--linea);
}
.nav-lista {
  display: flex; align-items: stretch;
  gap: clamp(2px, 1.5vw, 22px);
  height: 50px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.nav-lista::-webkit-scrollbar { display: none; }
.nav-lista a {
  display: inline-flex; align-items: center;
  padding: 0 4px;
  font-family: var(--sans);
  font-size: var(--t-base);
  font-weight: var(--peso-semi);
  letter-spacing: .01em;
  color: var(--tinta-2);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--mov-rapido), border-color var(--mov-rapido);
}
.nav-lista a:hover { color: var(--tinta); }
.nav-lista a.activo { color: var(--acento); border-bottom-color: var(--acento); }

/* Buscador desplegable */
.buscador {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--mov);
  border-top: 1px solid transparent;
}
.buscador.abierto {
  grid-template-rows: 1fr;
  border-top-color: var(--linea);
  background: var(--papel-2);
}
.buscador-interior { overflow: hidden; }
.buscador-caja { padding: var(--e4) 0 var(--e5); }
.buscador input {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--serif);
  font-size: var(--t-lg);
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--linea-2);
  border-radius: var(--radio);
  transition: border-color var(--mov-rapido);
}
.buscador input::placeholder { color: var(--tinta-4); }
.buscador input:focus { outline: none; border-color: var(--acento); }
.resultados { list-style: none; margin: var(--e3) 0 0; padding: 0; }
.resultados li { border-bottom: 1px solid var(--linea); }
.resultados li:last-child { border: 0; }
.resultados a { display: block; padding: 12px 4px; }
.resultados strong {
  display: block; font-family: var(--serif);
  font-size: var(--t-md); font-weight: var(--peso-semi); color: var(--tinta);
}
.resultados span { font-family: var(--sans); font-size: var(--t-xs); color: var(--tinta-3); }
.resultados a:hover strong { color: var(--acento); }


/* 5 · PORTADA ============================================================ */

.portada { padding-block: var(--e6) var(--e9); }

/* — Hero — */
.hero {
  display: grid;
  grid-template-columns: 1.62fr 1fr;
  gap: clamp(24px, 3vw, 48px);
  padding-bottom: var(--e6);
  border-bottom: 3px double var(--linea-2);
}

.hero-principal .marco {
  aspect-ratio: 16 / 9;
  border-radius: var(--radio);
  margin-bottom: var(--e4);
}
.hero-principal .titulo {
  font-family: var(--serif);
  font-size: var(--t-4xl);
  font-weight: var(--peso-bold);
  line-height: 1.04;
  letter-spacing: -.022em;
  margin: var(--e3) 0 var(--e4);
  text-wrap: balance;
}
.hero-principal .titulo a:hover { color: var(--acento); }
.hero-principal .bajada {
  font-family: var(--serif);
  font-size: var(--t-lg);
  line-height: 1.5;
  color: var(--tinta-2);
  margin: 0 0 var(--e4);
  max-width: 40ch;
}

/* Columna de titulares secundarios */
.hero-lista {
  display: flex; flex-direction: column;
  border-left: 1px solid var(--linea);
  padding-left: clamp(20px, 2.4vw, 40px);
}
.hero-lista .item {
  padding-block: var(--e5);
  border-bottom: 1px solid var(--linea);
}
.hero-lista .item:first-child { padding-top: 0; }
.hero-lista .item:last-child { border-bottom: 0; padding-bottom: 0; }
.hero-lista .item h3 {
  font-family: var(--serif);
  font-size: var(--t-xl);
  font-weight: var(--peso-semi);
  line-height: 1.16;
  letter-spacing: -.01em;
  margin: var(--e2) 0;
  text-wrap: balance;
}
.hero-lista .item h3 a:hover { color: var(--acento); }
.hero-lista .item p {
  font-family: var(--serif);
  font-size: var(--t-base);
  color: var(--tinta-2);
  margin: 0 0 var(--e2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* — Cuerpo de portada: río principal + lateral — */
.portada-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(28px, 3.4vw, 56px);
  align-items: start;
}

/* Río de tarjetas */
.rio {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: clamp(24px, 2.6vw, 36px) clamp(20px, 2.2vw, 32px);
}

.tarjeta { display: flex; flex-direction: column; min-width: 0; }
.tarjeta .marco {
  aspect-ratio: 3 / 2;
  border-radius: var(--radio);
  margin-bottom: var(--e3);
}
.tarjeta .marco img { transition: transform 600ms cubic-bezier(.2,0,.2,1); }
.tarjeta:hover .marco img { transform: scale(1.04); }
.tarjeta h3 {
  font-family: var(--serif);
  font-size: var(--t-lg);
  font-weight: var(--peso-semi);
  line-height: 1.18;
  letter-spacing: -.008em;
  margin: var(--e2) 0;
  text-wrap: balance;
}
.tarjeta h3 a:hover { color: var(--acento); }
.tarjeta p {
  font-family: var(--serif);
  font-size: var(--t-base);
  color: var(--tinta-2);
  margin: 0 0 var(--e3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tarjeta .meta { margin-top: auto; }

/* Sello de guía: distingue el contenido atemporal de la noticia del día */
.sello-guia {
  display: inline-block;
  padding: 2px 8px;
  background: var(--acento-tinte);
  color: var(--acento);
  border-radius: var(--radio-pill);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: var(--peso-negro);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.tarjeta--guia .marco { border-bottom: 3px solid var(--acento); }

/* Banda de guías en la portada */
.banda--guias { padding-top: var(--e2); }
.banda-nota {
  font-family: var(--serif);
  font-size: var(--t-base);
  color: var(--tinta-2);
  margin: calc(var(--e5) * -1 + 4px) 0 var(--e5);
  max-width: 52ch;
}

/* Variante sin imagen: regla superior que le da estructura de columna de diario */
.tarjeta--texto { border-top: 2px solid var(--regla); padding-top: var(--e3); }
.tarjeta--texto h3 { margin-top: var(--e1); font-size: var(--t-xl); }

/* Variante horizontal (para listas densas dentro del río) */
.tarjeta--fila {
  flex-direction: row; gap: var(--e4);
  padding-bottom: var(--e5); border-bottom: 1px solid var(--linea);
}
.tarjeta--fila .marco {
  flex: 0 0 132px; aspect-ratio: 1 / 1; margin: 0;
}
.tarjeta--fila h3 { font-size: var(--t-md); margin-top: 0; }

/* — Barra lateral — */
.lateral {
  position: sticky; top: 96px;
  display: flex; flex-direction: column;
  gap: var(--e6);
}
.modulo { min-width: 0; }
.modulo-titulo {
  display: flex; align-items: center; gap: var(--e3);
  margin: 0 0 var(--e4);
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: var(--peso-negro);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tinta);
}
.modulo-titulo::after { content: ""; flex: 1; height: 1px; background: var(--linea-2); }

/* Lista numerada "lo último / más leído" */
.lista-rank { list-style: none; margin: 0; padding: 0; counter-reset: r; }
.lista-rank li {
  display: flex; gap: var(--e4);
  padding: var(--e4) 0;
  border-bottom: 1px solid var(--linea);
  counter-increment: r;
}
.lista-rank li:first-child { padding-top: 0; }
.lista-rank li:last-child { border-bottom: 0; }
.lista-rank li::before {
  content: counter(r);
  font-family: var(--serif);
  font-size: var(--t-2xl);
  font-weight: var(--peso-bold);
  line-height: .9;
  color: var(--linea-2);
  flex: 0 0 auto;
  min-width: 1.1ch;
}
.lista-rank .txt { min-width: 0; }
.lista-rank .txt .kicker { font-size: 10px; margin-bottom: 3px; }
.lista-rank h4 {
  font-family: var(--serif);
  font-size: var(--t-base);
  font-weight: var(--peso-semi);
  line-height: 1.22;
  margin: 0;
}
.lista-rank h4 a:hover { color: var(--acento); }

/* Listas con miniatura (Lo último · Sigue leyendo) */
.lista-thumb { list-style: none; margin: 0; padding: 0; }
.lista-thumb li {
  display: flex; gap: var(--e3); align-items: flex-start;
  padding: var(--e3) 0; border-bottom: 1px solid var(--linea);
}
.lista-thumb li:first-child { padding-top: 0; }
.lista-thumb li:last-child { border-bottom: 0; padding-bottom: 0; }
.mini-thumb {
  flex: 0 0 66px; width: 66px; height: 66px;
  border-radius: var(--radio); overflow: hidden;
  background: var(--papel-3); display: block;
}
.mini-thumb picture { display: block; width: 100%; height: 100%; }
.mini-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.lista-thumb li:hover .mini-thumb img { transform: scale(1.06); }
.mini-thumb--vacio { background: linear-gradient(135deg, var(--papel-2), var(--papel-3)); }
.lista-thumb .txt { min-width: 0; }
.lista-thumb .kicker { font-size: 10px; margin-bottom: 3px; }
.lista-thumb h4 {
  font-family: var(--serif); font-size: var(--t-base); font-weight: var(--peso-semi);
  line-height: 1.22; margin: 0;
}
.lista-thumb h4 a:hover { color: var(--acento); }

/* Nube de temas */
.temas { display: flex; flex-wrap: wrap; gap: var(--e2); }
.temas a {
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: var(--peso-medio);
  padding: 6px 12px;
  background: var(--papel-2);
  border: 1px solid var(--linea);
  border-radius: var(--radio-pill);
  color: var(--tinta-2);
  transition: all var(--mov-rapido);
}
.temas a:hover { border-color: var(--acento); color: var(--acento); background: var(--acento-tinte); }

/* Índice de temas: fichas más grandes con su contador */
.temas--indice { gap: var(--e3); padding-bottom: var(--e6); }
.temas--indice a {
  display: inline-flex; align-items: center; gap: var(--e2);
  font-size: var(--t-base); padding: 9px 16px;
}
.conteo-tema {
  display: inline-grid; place-items: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  background: var(--papel-3); color: var(--tinta-3);
  border-radius: var(--radio-pill);
  font-size: var(--t-xs); font-weight: var(--peso-bold);
  font-variant-numeric: tabular-nums;
}
.temas--indice a:hover .conteo-tema { background: var(--acento); color: #fff; }

/* Newsletter */
.boletin {
  background: var(--papel-2);
  border: 1px solid var(--linea);
  border-radius: var(--radio-lg);
  padding: var(--e5);
}
.boletin h3 {
  font-family: var(--serif);
  font-size: var(--t-lg);
  font-weight: var(--peso-bold);
  line-height: 1.15;
  margin: 0 0 var(--e2);
}
.boletin p { font-size: var(--t-sm); color: var(--tinta-2); margin: 0 0 var(--e4); }
.boletin form { display: flex; flex-direction: column; gap: var(--e2); }
.boletin input {
  padding: 11px 13px;
  font: var(--peso-normal) var(--t-base)/1.2 var(--sans);
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--linea-2);
  border-radius: var(--radio);
}
.boletin input:focus { outline: none; border-color: var(--acento); }
.boletin button {
  padding: 11px 13px;
  background: var(--acento); color: #fff; border: 0;
  border-radius: var(--radio);
  font: var(--peso-semi) var(--t-base)/1 var(--sans);
  transition: background var(--mov-rapido);
}
.boletin button:hover { background: var(--acento-oscuro); }
.boletin .nota { font-size: var(--t-xs); color: var(--tinta-3); margin: var(--e2) 0 0; }

/* Panel de mercados (marcador honesto) */
.mercados { border: 1px solid var(--linea); border-radius: var(--radio-lg); overflow: hidden; }
.mercados .fila {
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: baseline; gap: var(--e3);
  padding: 11px var(--e4);
  border-bottom: 1px solid var(--linea);
  font-family: var(--sans); font-size: var(--t-sm);
}
.mercados .fila:last-child { border-bottom: 0; }
.mercados .simbolo { font-weight: var(--peso-semi); color: var(--tinta); }
.mercados .valor { font-variant-numeric: tabular-nums; color: var(--tinta-2); }
.mercados .cambio { font-variant-numeric: tabular-nums; font-weight: var(--peso-semi); }
.mercados .sube { color: var(--positivo); }
.mercados .baja { color: var(--negativo); }
.mercados .pie-panel { padding: 9px var(--e4); font-size: var(--t-xs); color: var(--tinta-4); background: var(--papel-2); }


/* 6 · ARTÍCULO =========================================================== */

.art-disposicion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
  padding-block: var(--e6) var(--e9);
}

.articulo { min-width: 0; max-width: var(--lectura); margin-inline: auto; }
.art-disposicion .lateral { top: 96px; }

.art-cabecera { margin-bottom: var(--e5); }
.art-cabecera .kicker { margin-bottom: var(--e3); }
.articulo h1 {
  font-family: var(--serif);
  font-size: var(--t-3xl);
  font-weight: var(--peso-bold);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0 0 var(--e4);
  text-wrap: balance;
}
.art-bajada {
  font-family: var(--serif);
  font-size: var(--t-xl);
  font-weight: var(--peso-normal);
  line-height: 1.45;
  color: var(--tinta-2);
  margin: 0 0 var(--e5);
}
.firma {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3);
  padding: var(--e4) 0;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}
.firma .autor { font-family: var(--sans); font-size: var(--t-base); color: var(--tinta); }
.firma .autor b { font-weight: var(--peso-semi); }
.firma .meta { margin-left: auto; }

figure.portada-figura { margin: var(--e6) 0; }
figure.portada-figura .marco { border-radius: var(--radio); aspect-ratio: 16 / 9; }
figcaption {
  font-family: var(--sans);
  font-size: var(--t-xs);
  color: var(--tinta-3);
  margin-top: var(--e2);
  padding-left: var(--e3);
  border-left: 2px solid var(--linea-2);
  line-height: 1.45;
}

/* Cuerpo de lectura */
.cuerpo {
  font-family: var(--serif);
  font-size: 1.19rem;
  line-height: 1.75;
  color: var(--tinta);
}
.cuerpo > p { margin: 0 0 1.3em; }
/* Realce del arranque y capitular: solo en artículos, no en páginas legales */
.articulo .cuerpo > p:first-of-type { font-size: 1.28rem; line-height: 1.62; }
.articulo .cuerpo > p:first-of-type::first-letter {
  float: left;
  font-family: var(--serif);
  font-weight: var(--peso-bold);
  font-size: 3.9em;
  line-height: .78;
  padding: 4px 10px 0 0;
  color: var(--acento);
}
/* Cuerpo plano para páginas estáticas: sin capitular, tamaño de lectura sobrio */
.cuerpo--plano { font-size: 1.09rem; line-height: 1.7; }
.cuerpo--plano h2 { font-size: var(--t-xl); margin-top: 1.6em; }
.nota-editorial {
  font-family: var(--serif);
  font-size: var(--t-base);
  color: var(--tinta-2);
  line-height: 1.55;
  margin: 0;
}
.nota-editorial a { color: var(--acento); text-decoration: underline; text-underline-offset: 2px; }
.cuerpo h2 {
  font-family: var(--serif);
  font-size: var(--t-2xl);
  font-weight: var(--peso-bold);
  line-height: 1.18;
  letter-spacing: -.012em;
  margin: 1.9em 0 .5em;
  text-wrap: balance;
}
.cuerpo h3 {
  font-family: var(--sans);
  font-size: var(--t-lg);
  font-weight: var(--peso-bold);
  letter-spacing: -.005em;
  margin: 1.7em 0 .4em;
}
.cuerpo a {
  color: var(--acento);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--acento) 40%, transparent);
}
.cuerpo a:hover { text-decoration-color: var(--acento); }
.cuerpo strong { font-weight: var(--peso-bold); }
.cuerpo ul, .cuerpo ol { margin: 0 0 1.3em; padding-left: 1.3em; }
.cuerpo li { margin-bottom: .5em; padding-left: .2em; }
.cuerpo ul li::marker { color: var(--acento); }
.cuerpo ol li::marker { color: var(--tinta-3); font-weight: var(--peso-semi); }
.cuerpo blockquote {
  margin: 1.6em 0;
  padding: .2em 0 .2em 1.1em;
  border-left: 3px solid var(--acento);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--tinta);
}
.cuerpo code {
  font-family: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
  font-size: .85em;
  background: var(--papel-3);
  padding: .12em .4em;
  border-radius: var(--radio-sm);
}
.cuerpo pre {
  background: var(--papel-3);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: var(--e4);
  overflow-x: auto;
  margin: 0 0 1.3em;
}
.cuerpo pre code { background: none; padding: 0; font-size: .85rem; }
.cuerpo hr { border: 0; height: 1px; background: var(--linea-2); margin: 2.2em 0; }
.cuerpo em { font-style: italic; }
.tabla-envoltura { overflow-x: auto; margin: 0 0 1.4em; }
.cuerpo table {
  border-collapse: collapse; width: 100%;
  font-family: var(--sans); font-size: var(--t-base);
}
.cuerpo th, .cuerpo td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--linea); }
.cuerpo th { font-weight: var(--peso-bold); border-bottom: 2px solid var(--linea-2); }
.cuerpo tbody tr:hover { background: var(--papel-2); }

/* Fuentes */
.fuentes {
  margin-top: var(--e7);
  padding: var(--e5);
  background: var(--papel-2);
  border: 1px solid var(--linea);
  border-radius: var(--radio-lg);
}
.fuentes h2 {
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: var(--peso-negro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin: 0 0 var(--e3);
}
.fuentes ul { margin: 0; padding-left: 1.2em; }
.fuentes li { font-family: var(--sans); font-size: var(--t-base); color: var(--tinta-2); margin-bottom: .5em; line-height: 1.5; }
.fuentes a { color: var(--acento); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }

/* Etiquetas */
.art-etiquetas { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e6); }
.art-etiquetas a {
  font-family: var(--sans); font-size: var(--t-sm); font-weight: var(--peso-medio);
  padding: 6px 13px;
  background: var(--papel-2); border: 1px solid var(--linea);
  border-radius: var(--radio-pill); color: var(--tinta-2);
  transition: all var(--mov-rapido);
}
.art-etiquetas a:hover { border-color: var(--acento); color: var(--acento); }

/* Migas de pan */
.migas { margin-bottom: var(--e4); }
.migas ol {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  margin: 0; padding: 0;
  font-family: var(--sans); font-size: var(--t-xs); color: var(--tinta-3);
}
.migas li { display: flex; align-items: center; gap: 7px; min-width: 0; }
.migas li:not(:last-child)::after { content: "›"; color: var(--tinta-4); }
.migas a { color: var(--tinta-3); font-weight: var(--peso-medio); }
.migas a:hover { color: var(--acento); }
.migas [aria-current] { color: var(--tinta-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }

/* Navegación entre notas (anterior / siguiente) */
.saltos {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4);
  margin-top: var(--e7); padding-top: var(--e5);
  border-top: 1px solid var(--linea);
}
.salto {
  display: flex; flex-direction: column; gap: 5px;
  padding: var(--e4);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  transition: border-color var(--mov-rapido), background var(--mov-rapido);
  min-width: 0;
}
.salto:hover { border-color: var(--acento); background: var(--papel-2); }
.salto--adelante { text-align: right; grid-column: 2; }
.salto-rotulo {
  font-family: var(--sans); font-size: var(--t-xs); font-weight: var(--peso-bold);
  letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-3);
}
.salto--atras .salto-rotulo::before { content: "← "; }
.salto--adelante .salto-rotulo::after { content: " →"; }
.salto:hover .salto-rotulo { color: var(--acento); }
.salto-titulo {
  font-family: var(--serif); font-size: var(--t-base); font-weight: var(--peso-semi);
  line-height: 1.28; color: var(--tinta);
}

@media (max-width: 620px) {
  .saltos { grid-template-columns: 1fr; }
  .salto--adelante { grid-column: 1; text-align: left; }
}

/* Nota de corrección */
.correccion {
  margin: var(--e6) 0;
  padding: var(--e4) var(--e5);
  background: var(--acento-tinte);
  border-left: 3px solid var(--acento);
  border-radius: 0 var(--radio) var(--radio) 0;
}
.correccion h2 {
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: var(--peso-negro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--acento);
  margin: 0 0 var(--e2);
}
.correccion p {
  font-family: var(--serif);
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--tinta);
  margin: 0;
}

/* Compartir */
.compartir {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2);
  margin: var(--e6) 0; padding: var(--e4) 0;
  border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
}
.compartir-rotulo {
  font-family: var(--sans); font-size: var(--t-xs); font-weight: var(--peso-bold);
  letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); margin-right: var(--e2);
}
.cmp {
  font-family: var(--sans); font-size: var(--t-sm); font-weight: var(--peso-semi);
  padding: 7px 14px; border-radius: var(--radio-pill);
  border: 1px solid var(--linea-2); background: var(--papel); color: var(--tinta-2);
  cursor: pointer; transition: border-color var(--mov-rapido), color var(--mov-rapido), background var(--mov-rapido);
}
.cmp:hover { border-color: var(--acento); color: var(--acento); }
.cmp-wa:hover { border-color: #25d366; color: #17a34a; }
.cmp-copy.ok { border-color: var(--positivo); color: var(--positivo); }

/* Módulo lateral de contexto en artículo */
.tarjeta-modulo {
  border: 1px solid var(--linea);
  border-radius: var(--radio-lg);
  padding: var(--e5);
}
.tarjeta-modulo .modulo-titulo { margin-bottom: var(--e4); }
.mini-lista { list-style: none; margin: 0; padding: 0; }
.mini-lista li { padding: var(--e3) 0; border-bottom: 1px solid var(--linea); }
.mini-lista li:first-child { padding-top: 0; }
.mini-lista li:last-child { border-bottom: 0; padding-bottom: 0; }
.mini-lista .kicker { font-size: 10px; }
.mini-lista h4 {
  font-family: var(--serif); font-size: var(--t-base); font-weight: var(--peso-semi);
  line-height: 1.22; margin: 3px 0 0;
}
.mini-lista h4 a:hover { color: var(--acento); }


/* 7 · PÁGINAS Y SECCIONES ================================================ */

.cabecera-seccion {
  padding-block: var(--e7) var(--e2);
  margin-bottom: var(--e6);
  border-bottom: 3px double var(--linea-2);
}
.cabecera-seccion .kicker { margin-bottom: var(--e3); }
.cabecera-seccion h1 {
  font-family: var(--serif);
  font-size: var(--t-3xl);
  font-weight: var(--peso-bold);
  letter-spacing: -.02em;
  line-height: 1.05;
  margin: 0 0 var(--e3);
}
.cabecera-seccion p {
  font-family: var(--serif);
  font-size: var(--t-lg);
  color: var(--tinta-2);
  max-width: 52ch;
  margin: 0 0 var(--e5);
}

.pagina-estatica { max-width: var(--lectura); margin-inline: auto; padding-block: var(--e7) var(--e9); }
.pagina-estatica h1 {
  font-family: var(--serif);
  font-size: var(--t-3xl);
  font-weight: var(--peso-bold);
  letter-spacing: -.02em;
  line-height: 1.08;
  margin: 0 0 var(--e5);
  padding-bottom: var(--e4);
  border-bottom: 2px solid var(--regla);
}

.vacio {
  padding: var(--e9) var(--e5);
  text-align: center;
  color: var(--tinta-3);
  font-family: var(--serif);
  font-size: var(--t-lg);
  border: 1px dashed var(--linea-2);
  border-radius: var(--radio-lg);
}

/* Archivo */
.archivo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--e7) var(--e6); padding-bottom: var(--e8);
}
.archivo-seccion h2 {
  font-family: var(--sans); font-size: var(--t-sm); font-weight: var(--peso-negro);
  letter-spacing: .1em; text-transform: uppercase;
  padding-bottom: var(--e3); margin: 0 0 var(--e2);
  border-bottom: 2px solid var(--regla);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3);
}
.archivo-seccion h2 a:hover { color: var(--acento); }
.archivo-seccion .conteo {
  font-family: var(--serif); font-size: var(--t-base); font-weight: var(--peso-normal);
  color: var(--tinta-4); letter-spacing: 0;
}
.archivo-lista { list-style: none; margin: 0; padding: 0; }
.archivo-lista li {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e4);
  padding: var(--e3) 0; border-bottom: 1px solid var(--linea);
}
.archivo-lista li:last-child { border-bottom: 0; }
.archivo-lista a {
  font-family: var(--serif); font-size: var(--t-md); font-weight: var(--peso-medio);
  line-height: 1.3; min-width: 0;
}
.archivo-lista a:hover { color: var(--acento); }
.archivo-lista time {
  font-family: var(--sans); font-size: var(--t-xs); color: var(--tinta-4);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}


/* 8 · PUBLICIDAD ========================================================= */

.anuncio { margin-block: var(--e6); text-align: center; }
.anuncio--lateral { margin-block: 0; }
.anuncio-rotulo {
  display: block;
  font-family: var(--sans);
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinta-4);
  margin-bottom: var(--e2);
}
.anuncio-marcador {
  display: grid; place-items: center;
  min-height: 250px;
  border: 1px dashed var(--linea-2);
  border-radius: var(--radio);
  background:
    repeating-linear-gradient(-45deg, transparent 0 14px, var(--papel-2) 14px 28px);
  color: var(--tinta-4);
  font-family: var(--sans); font-size: var(--t-sm);
  padding: var(--e5); line-height: 1.5;
}
.anuncio-marcador small { display: block; margin-top: 6px; font-size: var(--t-xs); }
.anuncio-marcador code { font-size: .85em; color: var(--tinta-3); }
.anuncio ins { display: block; }


/* 9 · PIE ================================================================ */

.pie {
  margin-top: var(--e9);
  border-top: 3px double var(--linea-2);
  background: var(--papel-2);
}
.pie-superior {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--e6);
  padding-block: var(--e8) var(--e7);
}
.pie-marca .marca { justify-self: start; font-size: 1.7rem; margin-bottom: var(--e3); }
.pie-marca p {
  font-family: var(--serif);
  font-size: var(--t-base);
  color: var(--tinta-2);
  max-width: 34ch;
  margin: 0 0 var(--e4);
}
.pie-social { display: flex; gap: var(--e2); }
.pie-col h2 {
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: var(--peso-negro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin: 0 0 var(--e4);
}
.pie-col ul { list-style: none; margin: 0; padding: 0; }
.pie-col li { margin-bottom: var(--e3); }
.pie-col a {
  font-family: var(--sans);
  font-size: var(--t-base);
  color: var(--tinta-2);
}
.pie-col a:hover { color: var(--acento); }
.pie-legal {
  display: flex; flex-wrap: wrap; gap: var(--e3);
  justify-content: space-between; align-items: center;
  padding-block: var(--e5);
  border-top: 1px solid var(--linea);
  font-family: var(--sans);
  font-size: var(--t-sm);
  color: var(--tinta-3);
}
.pie-legal a:hover { color: var(--acento); }


/* Progreso de lectura + volver arriba */
.progreso {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 70;
  pointer-events: none; background: transparent;
}
.progreso span { display: block; height: 100%; width: 0; background: var(--acento); }
.volver-arriba {
  position: fixed; right: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 32px); z-index: 65;
  width: 46px; height: 46px; display: grid; place-items: center;
  background: var(--tinta); color: var(--papel); border: 0; border-radius: 50%;
  box-shadow: var(--sombra-2); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity var(--mov), transform var(--mov), visibility var(--mov), background var(--mov-rapido);
}
.volver-arriba.visible { opacity: 1; visibility: visible; transform: none; }
.volver-arriba:hover { background: var(--acento); color: #fff; }
.volver-arriba svg { width: 20px; height: 20px; }


/* 10 · ADAPTABLE ========================================================= */

@media (max-width: 1080px) {
  .portada-cuerpo { grid-template-columns: 1fr; }
  .art-disposicion { grid-template-columns: 1fr; }
  .lateral, .art-disposicion .lateral {
    position: static;
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: var(--e6);
  }
  .lateral .boletin { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: var(--e6); }
  .hero-lista { border-left: 0; padding-left: 0; border-top: 1px solid var(--linea); padding-top: var(--e5); }
  .barra-superior .ultima-hora { display: none; }
  .masthead { grid-template-columns: 1fr auto; height: 64px; }
  .masthead .izq { display: none; }
  .marca { justify-self: start; }
  .boton-suscribir span { display: none; }
  .boton-suscribir { padding: 9px 11px; }
}

@media (max-width: 620px) {
  :root { --t-md: 1rem; }
  .barra-superior .utiles-min a:not(.destacar) { display: none; }
  .fecha-hoy { font-size: 11px; }
  .hero-principal .titulo { font-size: var(--t-3xl); }
  .rio { grid-template-columns: 1fr; }
  .lateral, .art-disposicion .lateral { grid-template-columns: 1fr; }
  .pie-superior { grid-template-columns: 1fr 1fr; gap: var(--e5); }
  .pie-marca { grid-column: 1 / -1; }
  .cuerpo { font-size: 1.12rem; }
  /* misma especificidad que la regla base, si no, no la sobrescribe */
  .articulo .cuerpo > p:first-of-type { font-size: 1.18rem; }
  .articulo .cuerpo > p:first-of-type::first-letter { font-size: 3.2em; }
  .firma .meta { margin-left: 0; width: 100%; }
  .acciones .boton-icono[data-solo-escritorio] { display: none; }
}

@media (max-width: 420px) {
  .pie-superior { grid-template-columns: 1fr; }
}


/* Impresión */
@media print {
  .barra-superior, .cabecera, .lateral, .art-disposicion .lateral,
  .anuncio, .pie, .buscador, .art-etiquetas { display: none !important; }
  body { font-size: 12pt; color: #000; background: #fff; }
  .art-disposicion, .portada-cuerpo { grid-template-columns: 1fr; }
  .articulo { max-width: none; }
  .cuerpo a { color: #000; text-decoration: underline; }
  .cuerpo a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}