/* Home v4 "Noir" — mobile: feed destacados / desktop: portada dinámica.
   --cyan/--red quedan como alias monocromáticos de compat: la UI no lleva
   color de marca fijo (spec noir 3: el color es narrativo, por artículo). */
:root {
  /* Default: LIGHT NOIR (papel claro) en mobile y desktop. El modo oscuro
     y el modo tinta se aplican vía data-theme / data-accent (ver abajo). */
  --bg: var(--paper-100, #f0eee7);
  --surface: #e6e2d6;
  --text: #14120f;
  --muted: rgba(20, 18, 15, 0.62);
  --cyan: var(--text); /* live: sigue a --text en el scope donde se use */
  --red: var(--text);
  --line: var(--line-light, rgba(20, 18, 15, 0.18));
  --hairline-strong: rgba(20, 18, 15, 0.32);
  --chip: rgba(0, 0, 0, 0.08);
  --invert-bg: var(--text); /* fondo de estados "activo/hover invertido" */
  --invert-text: var(--bg);
  --accent-ink: #ff1a1a; /* color fijo de sitio para el modo "punto de tinta" */
  --mast-bg: rgba(240, 238, 231, 0.92);
}

/* ── Modo DARK NOIR (data-theme="dark") — aplica a mobile y desktop ── */
html[data-theme="dark"] {
  --bg: var(--ink-950, #050505);
  --surface: var(--ink-800, #141414);
  --text: #fff;
  --muted: rgba(255, 255, 255, 0.66);
  --cyan: var(--text);
  --red: var(--text);
  --line: var(--line-dark, rgba(255, 255, 255, 0.22));
  --hairline-strong: rgba(255, 255, 255, 0.34);
  --chip: rgba(0, 0, 0, 0.55);
  --invert-bg: var(--text);
  --invert-text: var(--bg);
  --mast-bg: rgba(5, 5, 5, 0.92);
}

/* ── Modo LIGHT TINT (data-accent="color") — tinta sobre papel, mobile y desktop ── */
html[data-accent="color"] {
  --bg: #fff;
  --surface: #f2f0ea;
  --invert-bg: #fff;
  --invert-text: var(--accent-ink);
  --cyan: var(--accent-ink);
  --red: var(--accent-ink);
}

/* ── Modo DARK TINT (data-theme="dark" + data-accent="color") */
html[data-theme="dark"][data-accent="color"] {
  --bg: var(--ink-900, #0a0a0a);
  --surface: var(--ink-800, #141414);
  --invert-bg: var(--accent-ink);
  --invert-text: #fff;
  --cyan: var(--accent-ink);
  --red: var(--accent-ink);
  --line: var(--line-dark, rgba(255, 255, 255, 0.22));
  --hairline-strong: rgba(255, 255, 255, 0.34);
}

/* ══════════ Desktop — aplica el tema (ya definido en :root + data-theme/data-accent) ══════════
   Las variables de color viven en :root (default light noir) y se cambian con
   html[data-theme="dark"] (dark noir) y html[data-accent="color"] (tint).
   Este bloque solo aplica el fondo/texto al .d-home. */
@media (min-width: 900px) {
  .d-home {
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
  }
  /* Fotos/videos siempre quedan sobre un velo negro (spec 4.4): el texto que
     se superpone a la composición se fija en blanco, no sigue el toggle. */
  .ed-lead-body, .d-feed-body {
    --muted: rgba(255, 255, 255, 0.7);
    color: #fff;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, sans-serif;
  overscroll-behavior-y: none;
}
a { color: inherit; text-decoration: none; }
.loading { color: var(--muted); font: 400 14px "Inter", sans-serif; }
.m-loading, .d-loading {
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  color: var(--muted);
}
.spinner {
  /* gris neutro: este spinner aparece en .m-home (siempre oscuro) y en .d-home
     (claro por defecto), así que no puede fijarse a un solo extremo. */
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid rgba(128,128,128,0.3);
  border-top-color: rgba(128,128,128,0.9);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.mock-chip {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 62px);
  right: 10px;
  z-index: 100;
  font: 700 10px "DM Mono", monospace;
  letter-spacing: 0.1em;
  background: rgba(254, 44, 85, 0.85);
  color: #fff;
  padding: 6px 10px;
  border-radius: 0;
  backdrop-filter: blur(8px);
}

/* badges compartidos */
.badge {
  display: inline-flex; align-items: center;
  font: 700 10px "DM Mono", monospace;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 0;
  background: var(--chip);
  filter: grayscale(1); /* el ⭐ del score es un emoji: sin esto queda dorado */
}
.badge.kind-news, .badge.kind-media, .badge.kind-score {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.28);
}
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  border-radius: 0; padding: 11px 17px;
  font: 700 13px "Inter", sans-serif;
  border: 0; cursor: pointer;
}
.btn-light { background: var(--invert-bg); color: var(--invert-text); }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
/* styles.css trae su propio .btn-ghost:hover (surface-card, oscuro fijo)
   para el modal de home-clasica.html; acá gana por orden de carga, pero
   lo pisamos explícito para que quede claro y no dependa del orden. */
.btn-ghost:hover { background: var(--surface); }

/* ══════════ MOBILE: feed de destacados ══════════ */
.m-home {
  height: 100dvh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}
.m-home::-webkit-scrollbar { display: none; }

.m-slide {
  position: relative;
  height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  touch-action: pan-y;
}
.m-cover, .m-cover video, .m-cover img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* Fondo del BANCO para artículos sin imagen propia: la ilustración abstracta
   noir (papel en light noir, tinta en dark) con un velo para que el texto
   se lea siempre. El velo va en el color del tema, así el fondo no "mancha"
   la portada con un tono que no corresponde. */
.m-cover.is-bank img { animation: none; }
.m-cover.is-bank::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.86) 0%, rgba(0,0,0,0.45) 38%, rgba(0,0,0,0) 62%);
}
html:not([data-theme="dark"]) .m-cover.is-bank::after {
  background: linear-gradient(0deg, rgba(240,238,231,0.93) 0%, rgba(240,238,231,0.55) 34%, rgba(240,238,231,0) 64%);
}
/* Fallback final: si tampoco carga la imagen del banco, fondo de papel/tinta. */
.m-cover.is-bank.is-bank-fallback {
  background: var(--bg);
}

.m-cover img { animation: kenburns 14s ease-in-out infinite alternate; }
@keyframes kenburns {
  from { scale: 1; } to { scale: 1.12; }
}
@media (prefers-reduced-motion: reduce) {
  .m-cover img { animation: none; }
}
/* Indicador de estado monocromático (spec 8): solo visible mientras la
   tarjeta con video está activa/reproduciendo. */
.m-live-pill {
  position: absolute; z-index: 6;
  right: 14px; top: calc(env(safe-area-inset-top, 0px) + 16px);
  display: flex; align-items: center; gap: 6px;
  color: #fff; font: 500 0.6rem "DM Mono", monospace;
  text-transform: uppercase; letter-spacing: 0.08em;
  opacity: 0; transition: opacity 0.3s ease; pointer-events: none;
}
.m-slide.is-active .m-live-pill { opacity: 1; }
.m-live-pill i {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  animation: m-pulse 1s ease-in-out infinite;
}
@keyframes m-pulse { 50% { opacity: 0.25; } }
/* Barra de progreso inferior "efecto TikTok" (spec 8: indicador de estado
   monocromático) — puramente decorativa, no fuerza el avance a la
   siguiente tarjeta, solo da la sensación de que la pieza "corre". */
.m-progress {
  position: absolute; z-index: 6; left: 0; right: 0; bottom: 0;
  height: 2px; width: 0; background: #fff;
  transform-origin: left;
}
.m-slide.is-active .m-progress { animation: m-progress-fill 8s linear forwards; }
@keyframes m-progress-fill { to { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .m-slide.is-active .m-progress { animation: none; }
}
/* Ocultar un elemento sin sacarlo del DOM. Se usa en los onerror de las
 * portadas: si la imagen falla, se oculta y el contenedor pasa a mostrar el
 * fondo del banco. Antes se hacía this.remove(), pero eso dejaba
 * this.parentElement en null y el .classList siguiente tiraba TypeError. */
.is-hidden { display: none !important; }

.m-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 22%),
    linear-gradient(0deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0) 65%);
}
.m-content {
  position: relative; z-index: 5;
  width: calc(100% - 62px);
  padding: 0 14px calc(env(safe-area-inset-bottom, 0px) + 88px);
  display: flex; flex-direction: column; gap: 10px;
}
/* Fondo propio detrás del texto (spec 8: legibilidad sin importar qué tan
   clara sea la foto de fondo) — además de .m-shade, que solo resuelve el
   caso general. */
.m-text-bg {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px;
  margin: 0 -16px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
}
.m-title {
  margin: 0;
  /* Escala grande tipo mockup, pero más contenida. */
  font: 400 clamp(1.75rem, 7.5vw, 2.4rem)/1.05 "Libre Caslon Display", Georgia, serif;
  /* El slide siempre lleva portada + .m-shade oscuro, así que el texto del
     feed va en claro sin importar el tema (como el subtítulo). */
  color: #fff;
  -webkit-text-stroke: 0.5px currentColor;
  letter-spacing: -0.025em;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.m-meta { font: 500 12px "Inter", sans-serif; color: var(--muted); }
.m-summary {
  margin: 0;
  font: 400 13.5px/1.45 "Inter", sans-serif;
  color: rgba(255,255,255,0.85);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.m-formats { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 2px; }
.m-fmt {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 0; padding: 10px 14px;
  font: 700 12.5px "Inter", sans-serif;
}
.m-fmt.active { background: var(--invert-bg, #fff); color: var(--invert-text, #000); }

.m-rail {
  position: absolute;
  right: 10px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  z-index: 6;
}
.m-rail .score {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font: 700 15px "DM Mono", monospace;
}
.m-rail .score b {
  background: linear-gradient(135deg, var(--cyan), var(--red));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.m-rail .score small { font: 600 10px "Inter", sans-serif; color: var(--muted); }
/* Acciones (spec 8): Guardar, Preguntar, Fuente — monocromáticas, nunca
   toman el acento de color del artículo (spec 4.3/8). */
.m-action {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: 0; color: #fff; padding: 0; cursor: pointer;
  text-decoration: none;
}
.m-action svg, .m-action .icon {
  width: 26px; height: 26px;
  min-width: 26px; min-height: 26px;
  flex: 0 0 auto;
  aspect-ratio: 1 / 1;
  display: block;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6));
}
.m-action small {
  font: 600 10px "Inter", sans-serif; text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.m-save.is-saved { color: #fff; }
.m-save.is-saved svg { fill: #fff; }
.m-save:not(.is-saved) svg { fill: none; stroke: currentColor; stroke-width: 1.6; }

/* ══════════ DESKTOP: oculto en mobile ══════════ */
.d-home { display: none; }

/* ══════════ DESKTOP ≥ 900px ══════════ */
@media (min-width: 900px) {
  .m-home { display: none; }
  .d-home {
    display: block;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
  }
  .mock-chip { top: 14px; }

  /* Masthead editorial — reemplaza el top-bar de producto (spec 11: cabecera y marca) */
  .mast { background: var(--bg); }
  .mast-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    padding: 12px 0 10px;
    border-bottom: 1px solid var(--line);
    font: 500 11px "DM Mono", monospace;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--muted);
  }
  .mast-tagline { margin-right: auto; margin-left: 16px; }
  .mast-actions { display: flex; align-items: center; gap: 12px; }
  .theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0;
    background: transparent; border: 1px solid var(--line);
    color: var(--text); cursor: pointer;
  }
  .theme-toggle:hover { background: var(--invert-bg); color: var(--invert-text); }
  .theme-toggle .icon { width: 15px; height: 15px; }
  .icon-theme-light { display: none; }
  html[data-theme="dark"] .icon-theme-dark { display: none; }
  html[data-theme="dark"] .icon-theme-light { display: inline-block; }

  /* El botón de tinta siempre muestra su color real (aunque esté apagado),
     para que se entienda qué color se va a aplicar antes de activarlo. */
  .ink-toggle .icon { color: var(--accent-ink); }
  .ink-toggle:hover { background: transparent; color: inherit; border-color: var(--accent-ink); }
  html[data-accent="color"] .ink-toggle {
    background: var(--accent-ink); border-color: var(--accent-ink);
  }
  html[data-accent="color"] .ink-toggle .icon { color: #fff; }
  .brand { display: block; text-align: center; padding: 18px 0 12px; }
  .brand h1 {
    margin: 0;
    font: 400 clamp(2.2rem, 5.4vw, 5rem)/0.85 "Libre Caslon Display", Georgia, serif;
    letter-spacing: -0.03em;
    color: var(--text);
  }
  .brand .dot {
    display: inline-block; width: 0.1em; height: 0.1em;
    background: var(--text); border-radius: 50%; margin: 0 0.05em 0.15em;
  }
  /* Nav fija: al hacer scroll, el masthead grande (fecha/marca) queda
     atrás y solo esto se mantiene arriba — como WaPo/NYT, el título
     completo desaparece y aparece uno chico acá, a nivel de lectura. */
  .mast-nav {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    background: var(--mast-bg);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    padding: 12px 0;
  }
  .mast-nav-title {
    flex-shrink: 0;
    font: 400 1.05rem "Libre Caslon Display", Georgia, serif;
    letter-spacing: -0.03em;
    color: var(--text);
    white-space: nowrap;
    opacity: 0; transform: translateX(-6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
  }
  .brand:hover, .mast-nav-title:hover { text-decoration: none; }
  .mast-nav-title .dot {
    display: inline-block; width: 4px; height: 4px;
    background: currentColor; border-radius: 50%; margin: 0 3px 2px;
  }
  .mast-nav.scrolled .mast-nav-title { opacity: 1; transform: none; pointer-events: auto; }
  /* Links centrados, mismo tratamiento que .site-nav del resto de las secciones */
  .mast-nav-links {
    flex: 1; display: flex; justify-content: center; gap: 4px;
    font: 500 0.66rem "DM Mono", monospace;
    text-transform: uppercase; letter-spacing: 0.1em;
  }
  .mast-nav-links a { color: var(--muted); padding: 7px 10px; }
  .mast-nav-links a:hover, .mast-nav-links a.active { background: var(--invert-bg); color: var(--invert-text); }
  /* Acciones a la derecha, idénticas a .site-actions (tema, tinta, chat, ingresar) */
  .mast-nav-actions { display: flex; align-items: center; gap: 10px; }
  .mast-nav-actions .site-btn {
    font: 500 0.66rem "DM Mono", monospace;
    text-transform: uppercase; letter-spacing: 0.1em;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text);
    padding: 7px 12px; height: auto; border-radius: 0; cursor: pointer;
  }
  .mast-nav-actions .site-btn:hover { background: var(--invert-bg); color: var(--invert-text); }
  .mast-nav-actions .btn-login {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text);
    font: 500 0.66rem "DM Mono", monospace;
    text-transform: uppercase; letter-spacing: 0.1em;
    padding: 7px 12px; height: auto; border-radius: 0;
  }
  .mast-nav-actions .btn-login:hover { background: var(--invert-bg); color: var(--invert-text); }
  .mast-nav-actions .user-chip {
    border-radius: 0;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--text);
  }

  /* Apertura: retícula de edición a 3 columnas (spec 11) — 1 historia
     principal dominante en el centro + 2 bloques secundarios, como un
     diario: columnas separadas por filetes, no tarjetas de carrusel. */
  .edition {
    display: grid;
    grid-template-columns: 1fr 2.1fr 1fr;
    gap: 28px;
    padding: 24px 0 28px;
    border-bottom: 3px double var(--hairline-strong);
    align-items: stretch;
  }
  .ed-side {
    display: flex; flex-direction: column; gap: 10px;
    padding-top: 6px;
  }
  .ed-side .kicker { display: flex; align-items: center; gap: 6px; }
  .ed-side .kicker::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--text);
  }
  .ed-side h3 { margin: 0; font: 400 1.55rem/1.15 "Libre Caslon Display", Georgia, serif;
  -webkit-text-stroke: 0.5px currentColor;
  }
  .ed-side h3 a { color: inherit; }
  .ed-side h3 a:hover, .ed-lead:hover { text-decoration: none; }
  .ed-side p { margin: 0; font: 400 0.85rem/1.42 "Inter", sans-serif; color: var(--muted); }
  /* Lead central (mockup portada): imagen arriba, titular Caslon grande,
     bajada Georgia y folio con Nº de edición + minutos de lectura. */
  .ed-lead {
    display: block;
    padding: 22px;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    background: var(--bg);
  }
  .ed-lead-media {
    position: relative;
    height: 390px;
    overflow: hidden;
    background: var(--surface);
  }
  .ed-lead-media img, .ed-lead-media video {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    transition: scale 0.6s cubic-bezier(0.22,1,0.36,1);
  }
  .ed-lead:hover .ed-lead-media img, .ed-lead:hover .ed-lead-media video { scale: 1.04; }
  .ed-lead-title {
    margin: 18px 0 10px;
    font: 400 clamp(1.8rem, 3vw, 3.2rem)/0.98 "Libre Caslon Display", Georgia, serif;
    -webkit-text-stroke: 0.5px currentColor;
    letter-spacing: -0.03em;
  }
  .ed-lead-dek {
    margin: 0;
    font: 400 1.08rem/1.35 Georgia, "Iowan Old Style", serif;
    max-width: 780px;
    color: var(--muted);
  }
  .ed-lead-folio {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
    border-top: 1px solid var(--hairline-strong);
    padding-top: 8px;
    font: 500 0.67rem "DM Mono", monospace;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--muted);
  }

  /* Ticker */
  .d-ticker {
    display: flex; align-items: center; gap: 16px;
    border-block: 1px solid var(--hairline-strong);
    padding: 10px 0;
    margin: 18px 0;
    overflow: hidden;
  }
  .d-ticker-label {
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    background: var(--bg);
    font: 700 11px "DM Mono", monospace;
    letter-spacing: 0.14em;
    padding: 12px 18px 12px 28px;
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--red);
  }
  .live-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--red); box-shadow: 0 0 10px var(--red);
    animation: pulse 1.6s ease-in-out infinite;
    display: inline-block;
  }
  @keyframes pulse { 50% { opacity: 0.4; } }
  .d-ticker-track {
    display: flex; gap: 44px;
    white-space: nowrap;
    animation: marquee 75s linear infinite;
  }
  .d-ticker:hover .d-ticker-track { animation-play-state: paused; }
  @keyframes marquee { to { transform: translateX(-50%); } }
  .d-ticker-track a { font: 500 13px "Inter", sans-serif; color: var(--muted); }
  .d-ticker-track a:hover { color: var(--cyan); }
  .d-ticker-track b { color: var(--cyan); font: 700 11px "DM Mono", monospace; margin-right: 8px; }

  /* Launcher — fila de accesos editorial (spec 11: en vez de grid de app-icons) */
  .d-launcher {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    margin: 30px 0 40px;
    border: 1px solid var(--hairline-strong);
  }
  .tile {
    background: transparent;
    border: 0;
    border-right: 1px solid var(--hairline-strong);
    border-radius: 0;
    padding: 18px 10px;
    text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .tile:last-child { border-right: 0; }
  .tile:hover { background: var(--invert-bg); color: var(--invert-text); }
  .tile-ico { font-size: 20px; }
  .tile strong { font: 400 1.05rem "Libre Caslon Display", Georgia, serif; }
  .tile small {
    font: 500 10px "DM Mono", monospace; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--muted);
  }
  .tile:hover small { color: var(--invert-text); }
  .tile-soon { opacity: 0.4; }

  .d-sec { padding: 0 0 44px; }
  .sec-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 16px; padding-bottom: 10px;
    border-bottom: 3px double var(--hairline-strong);
  }
  .sec-title { margin: 0; font: 400 1.85rem "Libre Caslon Display", Georgia, serif; letter-spacing: -0.02em;
  -webkit-text-stroke: 0.5px currentColor;
  }
  .sec-sub { font: 500 13px "Inter", sans-serif; color: var(--muted); margin-left: 8px; }
  .sec-more { font: 600 13px "Inter", sans-serif; color: var(--cyan); }
  .d-live-count { font: 700 12px "DM Mono", monospace; color: var(--cyan); }

  /* Retícula tipo mosaico de diario: filetes finos entre celdas (gap de 1px
     coloreado con --line), no tarjetas separadas con su propio borde
     (spec 11: "separadores como reglas de imprenta, no tarjetas SaaS"). */
  /* Destacados de la semana: grilla de solo texto (spec 9/11 — no todas las
     historias necesitan foto/video; numeral serif grande + filete arriba
     de la metadata, como una sección de índice de diario). Sin imagen: el
     foco es el titular, no la composición visual. */
  .d-bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--line);
  }
  .bento-card {
    display: flex; flex-direction: column;
    padding: 24px 22px;
    border-right: 1px solid var(--line);
    min-height: 260px;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .bento-card:last-child { border-right: 0; }
  .bento-card:hover { background: var(--invert-bg); color: var(--invert-text); text-decoration: none; }
  .bento-num { font: 400 3rem/1 "Libre Caslon Display", Georgia, serif; color: var(--muted); }
  .bento-card:hover .bento-num { color: inherit; opacity: 0.5; }
  .bento-card-title {
    margin: auto 0 12px; font: 400 1.5rem/1.15 "Libre Caslon Display", Georgia, serif;
    -webkit-text-stroke: 0.5px currentColor;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .bento-card-dek {
    margin: 0 0 14px; font: 400 0.85rem/1.4 "Inter", sans-serif;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .bento-card-meta {
    font: 500 0.65rem "DM Mono", monospace; text-transform: uppercase; letter-spacing: 0.04em;
    border-top: 1px solid var(--line); padding-top: 10px;
  }
  @media (max-width: 1100px) {
    .d-bento { grid-template-columns: repeat(2, 1fr); }
    .bento-card:nth-child(2n) { border-right: 0; }
  }

  .rail {
    display: flex; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail > * { scroll-snap-align: start; flex-shrink: 0; }
  .poster-card { width: 168px; display: flex; flex-direction: column; gap: 7px; }
  .poster-card img {
    width: 168px; aspect-ratio: 2/3; border-radius: 0; object-fit: cover;
    background: var(--surface); border: 1px solid var(--line);
    transition: scale 0.3s ease;
  }
  .poster-card:hover img { scale: 1.04; }
  .poster-card .poster-title {
    font: 400 1.05rem/1.25 "Libre Caslon Display", Georgia, serif;
    -webkit-text-stroke: 0.5px currentColor;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .poster-card .poster-meta { font: 600 10.5px "DM Mono", monospace; color: var(--muted); filter: grayscale(1); }

  .d-foot {
    text-align: center; color: var(--muted);
    font: 500 12px "Inter", sans-serif;
    padding: 30px 0;
    border-top: 1px solid var(--line);
  }
}

/* ── Barra y menú mobile ── */
.m-top {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 14px 10px;
  /* Encabezado con fondo oscuro translúcido + blur: oculta el feed que pasa
     por detrás al scrollear. */
  background: rgba(10, 10, 14, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: none;
}
.m-top > * { pointer-events: auto; }
/* El .m-top flota sobre el slide (portada + shade oscuro), así que su texto
   va en claro siempre. Solo "GEN·AI" lleva fondo blanco con letra negra. */
.m-top { color: #fff; }
.m-top .top-brand {
  font: 400 1.15rem "Libre Caslon Display", Georgia, serif; letter-spacing: -0.02em;
  color: #fff;
}
.m-top .top-brand span {
  background: #fff; color: #000;
  padding: 2px 7px; display: inline-block;
}
.m-menu-btn {
  background: var(--chip); color: #fff;
  border: 1px solid var(--line); border-radius: 0;
  font-size: 17px; width: 40px; height: 40px;
  cursor: pointer; backdrop-filter: blur(8px);
}
.m-menu {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 56px);
  right: 10px;
  z-index: 90;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 210px;
  backdrop-filter: blur(12px);
}
.m-menu.hidden { display: none; }
.m-menu a {
  padding: 11px 12px;
  font: 600 14px "Inter", sans-serif;
  border-radius: 0;
  color: var(--text);
}
.m-menu a:hover { background: var(--surface); }
.m-menu-auth { padding: 6px 4px 2px; border-top: 1px solid var(--line); margin-top: 4px; }
.m-menu-auth .btn-login {
  width: 100%; background: var(--invert-bg); color: var(--invert-text); border: 0; border-radius: 0;
  font: 700 13.5px "Inter", sans-serif; padding: 10px; cursor: pointer;
}
#m-sub-wrap { padding: 8px 6px 4px; border-top: 1px solid var(--line); margin-top: 4px; }
#m-sub-wrap.hidden { display: none; }
#m-sub-form { display: flex; gap: 6px; }
#m-sub-form input {
  flex: 1; min-width: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 0;
  color: var(--text); font: 500 13px "Inter", sans-serif; padding: 9px 12px; outline: none;
}
#m-sub-form button {
  background: var(--invert-bg); color: var(--invert-text); border: 0; border-radius: 0;
  font: 700 12.5px "Inter", sans-serif; padding: 9px 12px; cursor: pointer;
}
#m-sub-msg { margin: 6px 0 0; font: 500 12px "Inter", sans-serif; color: var(--cyan); min-height: 14px; }

/* ── Episodio + suscripción (desktop) ── */
.episode { margin: 0 0 46px; display: flex; flex-direction: column; gap: 14px; }

/* "Hoy": resumen del día + índice de titulares al costado (spec 11 /
   mockup .daily+.digest) — reemplaza las dos cards separadas de antes. */
.today-grid {
  display: grid; grid-template-columns: 1.6fr 1fr;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.today-main {
  padding: 26px 28px 26px 0;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 14px;
}
.today-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; margin-right: 6px; vertical-align: middle;
}
.today-headline {
  margin: 0; font: 400 clamp(1.5rem, 2.8vw, 2.1rem)/1.08 "Libre Caslon Display", Georgia, serif;
  -webkit-text-stroke: 0.5px currentColor;
}
.today-dek { margin: 0; font: 400 1rem/1.5 "Inter", sans-serif; color: var(--muted); max-width: 640px; }
.today-list { margin: 0; padding: 26px 0 20px 28px; list-style: none; counter-reset: n; }
.today-list li {
  counter-increment: n;
  border-top: 1px solid var(--line);
  padding: 12px 0 12px 38px;
  position: relative;
  font: 600 0.95rem/1.3 "Inter", sans-serif;
}
.today-list li:first-child { border-top: 0; }
.today-list li::before {
  content: "0" counter(n);
  position: absolute; left: 0; top: 12px;
  font: 400 0.7rem "DM Mono", monospace; color: var(--muted);
}
.today-list a { color: inherit; }
.today-list a:hover { text-decoration: none; }
@media (max-width: 1024px) {
  .today-grid { grid-template-columns: 1fr; }
  .today-main { border-right: 0; padding-right: 0; }
  .today-list { padding-left: 0; border-top: 1px solid var(--line); }
}
.hero-ctas { display: flex; gap: 8px; flex-wrap: wrap; }
.sub {
  border-radius: 0;
  padding: 8px 0 4px;
  display: flex; flex-direction: column; gap: 20px;
}
/* Reemplaza al .sub-head/.sub-title/.sub-lead que había arriba de las
   cards: en vez de una fila propia, esta intro vive en el hueco que
   dejaba el plan gratis (menos beneficios que el pago = espacio de
   sobra) — ahorra una fila entera de la sección. */
.tier-intro { margin: 0; font: 500 0.92rem/1.5 "Inter", sans-serif; color: var(--muted); }

/* Elegí tu plan — antes vivía en un modal aparte (home-clasica), acá va
   directo en el bloque de suscripción del desktop, con el mismo lenguaje
   que una landing de precios: card por plan, badge en el recomendado,
   checklist de beneficios con ícono. Nombres .tier-* (no .plan-*) porque
   styles.css ya tiene .plan/.plan-featured/etc. sin scopear para el modal
   de home-clasica.html, y ambas hojas conviven acá. */
.tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tier-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 28px;
  border: 1px solid var(--line);
}
.tier-featured { border: 2px solid var(--text); position: relative; }
.tier-badge {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font: 700 0.68rem "DM Mono", monospace; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 5px 10px;
  background: var(--text); color: var(--bg);
}
.tier-badge .icon { width: 12px; height: 12px; }
.tier-name { margin: 0; font: 400 1.4rem "Libre Caslon Display", Georgia, serif; }
.tier-price { font: 400 2.2rem "Libre Caslon Display", Georgia, serif; }
.tier-period { font: 500 0.85rem "Inter", sans-serif; color: var(--muted); }
.tier-features { list-style: none; margin: 0; padding: 0; }
.tier-features li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0; border-top: 1px solid var(--line);
  font: 400 0.88rem/1.4 "Inter", sans-serif;
}
.tier-features li:first-child { border-top: 0; }
.tier-features .icon { width: 15px; height: 15px; margin-top: 2px; flex-shrink: 0; color: var(--text); }
.tier-features strong { font-weight: 700; }
.tier-form { display: flex; gap: 8px; flex-wrap: wrap; }
.tier-form input {
  flex: 1; min-width: 160px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 0;
  color: var(--text); font: 500 14px "Inter", sans-serif; padding: 12px 16px; outline: none;
}
.tier-form input:focus { border-color: var(--cyan); }
.tier-msg { margin: 0; font: 500 12.5px "Inter", sans-serif; color: var(--muted); min-height: 16px; }
@media (max-width: 900px) {
  .tiers { grid-template-columns: 1fr; }
}
.top-soon, .nav-soon { opacity: 0.45; pointer-events: none; }
.m-top .top-brand span { color: var(--cyan); margin-left: 5px; }
@media (min-width: 900px) {
  .m-top, .m-menu { display: none !important; }
}

/* ── Íconos Lucide en tiles y CTAs ── */
.tile .icon, .tile-ico.icon {
  width: 22px; height: 22px;
  color: var(--text);
  stroke-width: 1.75;
}
.tile:hover .icon { color: var(--invert-text); }
.tile-soon .icon { color: var(--muted); }
.btn .icon { width: 16px; height: 16px; stroke-width: 2; }
.episode .btn .icon { color: inherit; }
.hero-ctas .btn .icon { stroke-width: 2; }

/* ── Feed de todas las notas (desktop) — tamaños variados estilo bento ── */
/* Mismo mosaico que .d-bento: filetes finos (gap coloreado), no cards con
   borde propio. */
.d-feed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;
  gap: 1px;
  background: var(--line);
}
.d-feed-card {
  position: relative;
  border-radius: 0; overflow: hidden;
  background: var(--surface);
  display: flex; align-items: flex-end;
  text-decoration: none; color: inherit;
  box-shadow: inset 0 0 0 0 transparent;
  transition: box-shadow 0.2s ease;
}
.d-feed-card:hover { box-shadow: inset 0 0 0 2px var(--accent, var(--hairline-strong)); text-decoration: none; }
html[data-accent="color"] .d-feed-card:hover { box-shadow: inset 0 0 0 2px var(--accent, var(--accent-ink)); }
html[data-accent="color"] .tier-featured { border-color: var(--accent-ink); }
html[data-accent="color"] .tier-badge { background: var(--accent-ink); color: #fff; }
.d-feed-card.big { grid-column: span 2; grid-row: span 2; }
.d-feed-card img, .d-feed-ph {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: scale 0.5s cubic-bezier(0.22,1,0.36,1);
}
/* Sin imagen: gris oscuro fijo (no negro puro). No lleva el filtro de foto
   de arriba (ya es un gris plano, no una imagen a tratar) — el valor se
   eligió para que se note gris incluso debajo del velo de .d-feed-shade. */
.d-feed-ph { background: #6b6b6b; }
.d-feed-card:hover img { scale: 1.06; }
.d-feed-shade {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.25) 100%);
}
.d-feed-body { position: relative; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.d-feed-title {
  margin: 0; font: 400 1.3rem/1.25 "Libre Caslon Display", Georgia, serif;
  -webkit-text-stroke: 0.5px currentColor;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
.d-feed-card.big .d-feed-title { font: 400 1.7rem/1.18 "Libre Caslon Display", Georgia, serif; -webkit-line-clamp: 4;
-webkit-text-stroke: 0.5px currentColor;
}
.d-feed-meta { font: 600 10.5px "DM Mono", monospace; color: rgba(255,255,255,0.75); text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
.d-feed-more { display: flex; justify-content: center; padding: 24px 0 8px; }
.d-feed-more .btn { min-width: 180px; }

/* ── Scroll infinito real en mobile (sin snap loop) ── */
.m-home.m-scroll { scroll-snap-type: none; }
.m-sentinel { height: 1px; }

/* ── Tratamiento noir de fotografía (spec 4.4): B/N de alto contraste.
   Aplica a toda foto/video de portada y feed; el color narrativo, si existe,
   se aísla aparte (máscara/capa), nunca tiñendo la imagen entera. ── */
.m-cover img, .m-cover video,
.ed-lead img, .ed-lead video,
.d-feed-card img,
.poster-card img {
  filter: grayscale(1) contrast(1.15) brightness(0.95);
}

/* Modo "punto de tinta": las fotos que ya tienen color lo muestran, en vez
   de forzarlas a B/N. Se apaga el grayscale global de arriba; el resto del
   tratamiento (contraste/velo) se mantiene igual. */
html[data-accent="color"] .m-cover img, html[data-accent="color"] .m-cover video,
html[data-accent="color"] .ed-lead img, html[data-accent="color"] .ed-lead video,
html[data-accent="color"] .d-feed-card img,
html[data-accent="color"] .poster-card img {
  filter: contrast(1.1);
}