/* ---------------------------------------------------
   Soberanía · LexTech — tokens

   Principio: nada es puro. Ni blanco #fff, ni negro #000, ni un azul
   saturado de fábrica — eso es lo que separa lo premium de lo genérico.
   Todo el sistema deriva de un mismo azul llevado a distintas
   profundidades, sobre un neutro cálido que favorece las fotos en B&N.

   La paleta es enteramente azul: se probó un acento de latón (#a8865c)
   como toque cálido y se descartó por decisión de marca.

   Roles (por superficie, de mayor a menor):
   --paper   hueso cálido: fondo del sitio, y texto sobre superficies oscuras
   --ink     azul tinta: texto principal y superficies profundas (hero, bandas)
   --accent  azul profundo: marca, links, botones — la identidad
   --accent-soft azul acero: el mismo azul aclarado, para elementos que
             viven SOBRE superficie oscura, donde --accent queda a 1.42:1
   --gray    gris cálido: texto secundario
   --surface relleno claro de tarjetas

   --quiz-bg y los dos colores de feedback son exclusivos del quiz.

   ---------------------------------------------------
   CÓMO VOLVER A LA PALETA ANTERIOR (blanco / negro / navy)

   Los valores viejos eran:
     --paper #ffffff   --ink #0a0a0a   --accent #1b3a6b
     --gray  #6b7280   --surface #f2f2f2
     --line  rgba(10, 10, 10, 0.1)     (no existía --brass)

   Pero NO basta con volver a poner esos hex: junto con la paleta
   cambiaron tres reglas que dependen de ella (el botón del hero, el
   botón "Suscribirme" y el foco del input), porque con los colores
   nuevos el azul quedaba invisible sobre el panel oscuro. Un cambio
   solo de hex dejaría esos elementos rotos.

   La forma correcta y exacta de volver es por git. El último commit
   con la paleta anterior está marcado con el tag:

       paleta-blanco-negro

   Para revertir, pídeselo a Claude ("vuelve a la paleta anterior") o
   ejecuta: git revert <commit de la paleta>
   --------------------------------------------------- */
:root {
  --paper: #f8f6f1;
  --ink: #12192a;
  --accent: #1e3557;
  --accent-soft: #6e8fbf;
  --gray: #5f5b54;
  --line: rgba(18, 25, 42, 0.12);
  --surface: #efebe3;
  --quiz-bg: #f7f5f0;
  --quiz-correct: #3f6b47;
  --quiz-incorrect: #9c4a3c;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  /* -------------------------------------------------
     Escala tipográfica

     Antes había 28 tamaños distintos repartidos por el archivo,
     decididos uno a uno según hacía falta. Diez de ellos caían
     dentro de una franja de 9 píxeles (20, 19, 17, 16, 15, 14.5,
     14, 13, 12, 11): tamaños tan parecidos que el ojo no puede
     distinguir cuál manda, así que en vez de jerarquía producen
     una sensación de desorden difícil de señalar.

     Ahora son ocho escalones, en dos zonas con una regla cada una:

       TÍTULOS  peso 700, letras apretadas (--track-tight)
       TEXTO    peso 400-700, espaciado normal

     Si alguna vez quieres el sitio entero más grande o más chico,
     se cambia acá y se mueve todo junto, en proporción.
     ------------------------------------------------- */
  --fs-display: clamp(32px, 4.4vw, 52px);  /* título del héroe */
  --fs-h1: clamp(28px, 3.4vw, 38px);       /* título de página y de sección */
  --fs-h2: clamp(23px, 2.4vw, 28px);       /* subsecciones */
  --fs-h3: 20px;                           /* títulos de tarjeta */
  --fs-lead: 18px;                         /* párrafo de entrada */
  --fs-body: 16px;                         /* texto de lectura */
  --fs-ui: 14px;                           /* menú, botones, enlaces, metadatos */
  --fs-label: 12px;                        /* etiquetas en mayúsculas y fechas */

  --track-tight: -0.03em;                  /* solo títulos */
  --track-label: 0.08em;                   /* solo etiquetas en mayúsculas */

  /* -------------------------------------------------
     Ritmo vertical

     El sitio tenía 19 secciones repartidas en 11 ritmos distintos de
     aire arriba/abajo (70/80, 90/110, 96/96, 150/40, 170/140...).
     Secciones que hacen el mismo trabajo llevaban números distintos,
     y la asimetría no seguía ninguna regla: unas con más aire arriba,
     otras con más abajo, cada una decidida en su momento.

     Ahora hay tres ritmos:
       banda de contenido           --band  / --band   (80 / 80)
       sección que abre página      --band-lg / --band (120 / 80)
       sección que abre con imagen  0 / --band
     ------------------------------------------------- */
  --band: 80px;                            /* banda de contenido */
  --band-lg: 120px;                        /* apertura de página */
  --band-sm: 48px;                         /* separaciones internas */

  /* -------------------------------------------------
     Esquinas y sombras

     Había 8 redondeos distintos (6, 8, 10, 12, 14, 18, 20, 28) para
     objetos del mismo tipo: las tarjetas usaban tres valores diferentes
     y los paneles flotantes dos. Diferencias que nadie puede nombrar
     mirando, pero que hacen que un conjunto de tarjetas se vea *casi*
     alineado en vez de alineado.

     Se eligió 14px para tarjetas y paneles por tres razones:

       · Los tres niveles quedan en 8 → 14 → 28, que es duplicar cada
         vez. Con 10 no habría escala: estaría pegado al 8 y lejísimos
         del 28, tres números sueltos otra vez.
       · Las tarjetas tienen 28px de relleno interno. Un redondeo de la
         mitad del relleno se asienta bien; uno de 10 se lee apretado,
         un vértice duro envolviendo un interior aireado.
       · El sitio ya se comprometió con redondeos generosos (píldoras
         completamente redondas, visor del héroe en 28). Con 10, las
         tarjetas serían el objeto más anguloso de la página.

     Las píldoras (999px), los círculos (50%) y los reinicios a 0 no
     entran acá: siempre fueron consistentes y son deliberados.
     ------------------------------------------------- */
  --radius-sm: 8px;                        /* controles pequeños */
  --radius: 14px;                          /* tarjetas y paneles */
  --radius-lg: 28px;                       /* contenedores grandes */

  --shadow: 0 16px 28px rgba(18, 25, 42, 0.1);      /* tarjeta al pasar el mouse */
  --shadow-lg: 0 16px 40px rgba(18, 25, 42, 0.14);  /* panel flotante */

  --max-width: 1120px;
}

/* ---------------------------------------------------
   Transición entre páginas

   Antes, cada clic en el menú borraba la pantalla y la volvía a
   dibujar: parpadeo blanco entre página y página. Ahora se funde.

   Hay dos caminos, a propósito, para que ningún navegador quede
   afuera:

   1. Chrome, Edge y Safari (y Firefox el día que lo publique) tienen
      la transición nativa entre documentos: @view-transition la
      activa y el navegador hace todo el trabajo.

   2. Firefox hoy todavía no la tiene. Ahí el fundido se hace a mano:
      un script mínimo en el <head> marca <html class="js-fade"> antes
      del primer cuadro, y js/main.js agrega la salida al hacer clic.
      El resultado que se ve es el mismo.

   Los dos caminos se apagan solos con "reducir movimiento".
--------------------------------------------------- */
@view-transition { navigation: auto; }

/* El header es idéntico en todas las páginas: al nombrarlo, el
   navegador lo trata como el mismo elemento en vez de desvanecerlo y
   volverlo a dibujar — se queda quieto mientras el resto se funde. */
.site-header { view-transition-name: site-header; }

::view-transition-old(root),
::view-transition-new(root) { animation-duration: 220ms; }

@keyframes page-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
html.js-fade body { animation: page-fade-in 200ms ease-out backwards; }
body.is-leaving {
  opacity: 0;
  transition: opacity 170ms ease;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
  html.js-fade body,
  body.is-leaving {
    animation: none;
    transition: none;
    opacity: 1;
  }
}

/* ---------------------------------------------------
   Reset & base
--------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
ul { list-style: none; margin: 0; padding: 0; }

/* Los títulos bajan de peso 800 a 700. El 800 es la variante más
   gruesa de Inter: en tamaños grandes se ve bien, pero en los títulos
   pequeños (tarjetas, subsecciones) las letras se juntan tanto que la
   palabra se lee como una mancha. El 700 conserva la contundencia sin
   apelmazarse — es el rango que usan los sitios de esta familia. */
h1, h2, h3 {
  font-family: var(--font-body);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: var(--track-tight);
  margin: 0 0 0.5em;
}

a { color: inherit; }

/* Enlace para saltar al contenido: invisible hasta que alguien navega
   con teclado y llega a él con Tab. Sin esto, cada visita con teclado
   o lector de pantalla tiene que recorrer todo el menú del header en
   cada una de las 6 páginas antes de llegar al contenido real. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 1000;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--fs-ui);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 16px; }

/* Scroll reveal: sections and grid items fade/slide into view the first
   time they cross into the viewport. See js/main.js for the
   IntersectionObserver that toggles .is-visible. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.08s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.16s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.24s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.32s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.4s; }
.reveal-stagger.is-visible > *:nth-child(n+7) { transition-delay: 0.46s; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-stagger > * {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

.section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gray);
  margin: 0 0 16px;
}
/* Sobre superficies oscuras el gris cálido no alcanza contraste, y el azul
   de marca tampoco (1.42:1). El azul acero da 5.29:1 y además queda
   subordinado al titular, que es hueso — un eyebrow no debe competir. */
.eyebrow--dark {
  color: var(--accent-soft);
}

.button {
  display: inline-block;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-ui);
  text-decoration: none;
  padding: 14px 30px;
  border-radius: 999px;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.button:hover { opacity: 0.85; transform: translateY(-1px); }

/* Sobre las superficies oscuras el azul del botón queda a 1.42:1 del fondo
   (invisible). Ahí el botón se invierte: hueso sobre oscuro. */
.hero-panel .button {
  background: var(--paper);
  color: var(--ink);
}

/* ---------------------------------------------------
   Header
--------------------------------------------------- */
/* Fondo sólido, sin backdrop-filter: un desenfoque detrás de un
   header pegajoso obliga al navegador a recalcularlo en cada
   fotograma del scroll. A 90% de opacidad casi no se veía nada
   detrás de todos modos (comparado visualmente, sin diferencia). */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  transition: transform 0.3s ease;
}
.site-header.is-hidden {
  transform: translateY(-100%);
}

.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  font-family: var(--font-body);
  font-size: var(--fs-ui);
  font-weight: 800;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.brand--boxed {
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--fs-label);
}
.brand-dot { color: var(--accent); }

.main-nav {
  display: flex;
  gap: 32px;
  margin-left: auto;
}
.main-nav a {
  font-size: var(--fs-ui);
  font-weight: 600;
  text-decoration: none;
  color: var(--accent);
  transition: opacity 0.2s ease;
}
.main-nav a:hover,
.main-nav a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* "Bitácora" nav dropdown */
.nav-dropdown-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.nav-dropdown-trigger:hover,
.nav-dropdown-trigger[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.nav-dropdown-caret {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.nav-dropdown-wrap:hover .nav-dropdown-caret,
.nav-dropdown-wrap.is-open .nav-dropdown-caret {
  transform: rotate(180deg);
}
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s;
  z-index: 60;
}
.nav-dropdown-wrap:hover .nav-dropdown,
.nav-dropdown-wrap.is-open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.nav-dropdown-panel {
  min-width: 250px;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 10px 0;
  transform: translateY(-8px);
  transition: transform 0.2s ease;
}
.nav-dropdown-wrap:hover .nav-dropdown-panel,
.nav-dropdown-wrap.is-open .nav-dropdown-panel {
  transform: translateY(0);
}
.main-nav .nav-dropdown-link {
  display: block;
  padding: 12px 22px;
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: none;
  transition: background-color 0.15s ease;
}
.main-nav .nav-dropdown-link:hover { background: var(--surface); }
.main-nav .nav-dropdown-link--featured {
  color: var(--accent);
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
  padding-bottom: 14px;
}

.search-trigger {
  display: flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  padding: 6px 0;
  /* Buscar vive fuera de .main-nav, así que ya recibe los 24px de
     separación que .header-inner pone entre sus piezas. Estos 8px
     completan los 32px del menú, para que la distancia hasta "Acerca
     de" sea idéntica a la que hay entre los demás enlaces.
     Antes eran 28px, que sumados daban 52 — un número que nadie
     eligió: era la suma de dos reglas escritas por separado.
     Si algún día cambia el gap de .header-inner, hay que rehacer
     esta cuenta. En móvil no interviene: allá manda margin-left: auto. */
  margin-left: 8px;
  color: var(--accent);
  font-family: var(--font-body);
  font-size: var(--fs-ui);
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.search-trigger:hover { opacity: 0.7; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 22px;
  background: var(--accent);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------------------------------------------------
   Hero — a floating dark card on the white page, like
   Huberman Lab's framed hero carousel.
--------------------------------------------------- */
.hero {
  background: var(--paper);
  padding: 40px clamp(24px, 6vw, 100px) 24px;
}
.hero-carousel {
  position: relative;
  max-width: var(--max-width);
  margin: 0 auto;
}
.hero-viewport {
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.hero-track {
  display: flex;
  transition: transform 0.5s ease;
}
.hero-slide {
  flex: 0 0 100%;
  width: 100%;
}
.hero-panel {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--ink);
  display: flex;
  align-items: stretch;
  min-height: 620px;
}
.hero-text {
  flex: 1 1 52%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 48px;
  min-width: 0;
}
.hero-heading {
  color: var(--paper);
  font-size: var(--fs-display);
  margin-bottom: 22px;
}
.hero-lead {
  color: var(--paper);
  font-size: var(--fs-lead);
  line-height: 1.65;
  margin: 0 0 20px;
}
.hero-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--paper);
  font-size: var(--fs-h3);
  line-height: 1.4;
  margin: 0 0 32px;
}
.hero-photo-wrap {
  flex: 1 1 48%;
  position: relative;
  min-width: 260px;
}
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: grayscale(1);
}

.hero-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-width);
  margin: 20px auto 0;
}
.hero-arrows {
  display: flex;
  gap: 10px;
}
.hero-arrow {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.hero-arrow:hover {
  background: var(--accent);
  color: var(--paper);
}

.hero-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 28px;
  margin-left: 12px;
}
.hero-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(18, 25, 42, 0.2);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.hero-dot.is-active {
  background: var(--accent);
  transform: scale(1.2);
}

.hero-subscribe-form {
  display: flex;
  gap: 10px;
  max-width: 420px;
}
.hero-subscribe-input {
  flex: 1;
  min-width: 0;
  padding: 14px 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
}
.hero-subscribe-input::placeholder {
  color: var(--gray);
}
/* El foco se dibuja entre el input (hueso) y el panel (oscuro), así que
   necesita verse contra ambos: 3.06:1 y 5.29:1. */
.hero-subscribe-input:focus {
  outline: none;
  border-color: var(--accent-soft);
}
/* Azul acero, no el azul de marca: sobre el panel oscuro --accent queda a
   1.42:1 (invisible). Tampoco hueso, porque el input de al lado ya es hueso
   y se confundirían. Este da 5.29:1 contra el panel y 3.06:1 contra el input. */
.hero-subscribe-btn {
  flex-shrink: 0;
  padding: 14px 26px;
  border-radius: 999px;
  border: none;
  background: var(--accent-soft);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-ui);
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.hero-subscribe-btn:hover {
  opacity: 0.85;
}
.hero-subscribe-feedback {
  margin: 14px 0 0;
  font-size: var(--fs-ui);
  color: var(--paper);
}
.hero-subscribe-feedback.is-error {
  color: #ff8a80;
}

/* ---------------------------------------------------
   Criterio del día — inline button below the hero carousel
   (homepage only)
--------------------------------------------------- */
.quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-h1);
  color: var(--accent);
  line-height: 1.35;
  margin: 0 0 28px;
}
.quote footer {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gray);
}

.criterio-inline-wrap {
  position: relative;
  display: flex;
  justify-content: flex-start;
  max-width: var(--max-width);
  margin: 12px auto 0;
}
.criterio-inline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--paper);
  border: 1.5px solid var(--accent);
  color: var(--accent);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.criterio-inline-btn:hover {
  background: var(--surface);
  transform: scale(1.06);
}
.criterio-inline-popover {
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 10px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s;
  z-index: 40;
}
.criterio-inline-wrap:hover .criterio-inline-popover,
.criterio-inline-wrap.is-open .criterio-inline-popover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.criterio-inline-popover-panel {
  position: relative;
  width: 280px;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 24px 26px;
  transform: translateY(-8px);
  transition: transform 0.2s ease;
}
.criterio-inline-wrap:hover .criterio-inline-popover-panel,
.criterio-inline-wrap.is-open .criterio-inline-popover-panel {
  transform: translateY(0);
}
.criterio-inline-popover-panel::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 20px;
  width: 12px;
  height: 12px;
  background: var(--paper);
  transform: rotate(45deg);
  box-shadow: -2px -2px 4px rgba(18, 25, 42, 0.04);
}
.criterio-inline-popover-panel .quote p {
  font-size: var(--fs-lead);
  margin: 0 0 10px;
}
.criterio-inline-popover-panel .quote footer {
  font-size: var(--fs-label);
}

/* ---------------------------------------------------
   Placeholder sections (Podcast, Recursos)
--------------------------------------------------- */
.placeholder-section {
  padding: var(--band-lg) 0 var(--band);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.placeholder-section--solo {
  min-height: 70vh;
  display: flex;
  align-items: center;
  padding: var(--band-lg) 0 var(--band);
}
/* La columna de esta página estaba limitada a 640px, que era lo correcto
   cuando Bitácora era una página de "Próximamente" con un párrafo: una
   columna angosta se lee bien. Para una biblioteca de episodios es
   demasiado estrecha — no caben dos tarjetas una al lado de la otra.
   Ahora la sección usa el ancho normal del sitio, y el texto de entrada
   conserva sus 640px para que se lea exactamente igual que antes. */
.placeholder-section .section-inner { max-width: var(--max-width); }
.placeholder-section .eyebrow,
.placeholder-section h1,
.placeholder-section .section-lead { max-width: 640px; }
.placeholder-section h1 { font-size: var(--fs-h1); }
.section-lead {
  font-size: var(--fs-lead);
  color: var(--ink);
  max-width: 640px;
}

/* Episode sort control (Bitácora — "Explorar todos los episodios") */
.episode-sort-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin: 40px 0 0;
}
.episode-sort-label {
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--ink);
}
.sort-dropdown-wrap { position: relative; }
.sort-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 10px 18px;
  font-family: var(--font-body);
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.sort-dropdown-chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.sort-dropdown-wrap.is-open .sort-dropdown-chevron { transform: rotate(180deg); }
.sort-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 230px;
  list-style: none;
  margin: 0;
  padding: 8px 0;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 60;
}
.sort-dropdown-wrap.is-open .sort-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.sort-dropdown-option {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 10px 18px;
  font-family: var(--font-body);
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.sort-dropdown-option:hover { background: var(--surface); }
.sort-dropdown-option.is-selected,
.sort-dropdown-option.is-selected:hover {
  background: var(--accent);
  color: var(--paper);
}
.episode-list {
  display: grid;
  /* auto-FILL y no auto-fit: con auto-fit, cuando hay un solo episodio
     las columnas vacías se colapsan y esa única tarjeta se estira a lo
     ancho de toda la fila. auto-fill conserva los espacios, así que la
     tarjeta mantiene su tamaño desde el primer episodio hasta el número
     cuarenta. */
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 20px;
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}
.episode-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* Antes tenía max-width: 290px encima, así que la tarjeta se negaba a
     crecer aunque la columna diera para más. Ahora el ancho lo decide la
     rejilla: tres por fila en pantalla ancha, y menos según el espacio. */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.episode-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.episode-card a {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 28px;
  text-decoration: none;
  color: inherit;
}
.episode-card-tag {
  align-self: flex-start;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(30, 53, 87, 0.08);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.episode-card-date {
  font-size: var(--fs-label);
  color: var(--gray);
  margin: 0 0 10px;
}
.episode-card h3 {
  font-size: var(--fs-h3);
  margin: 0 0 10px;
}
.episode-card-excerpt {
  font-size: var(--fs-body);
  color: var(--gray);
  flex-grow: 1;
  margin: 0 0 20px;
  /* La descripción se corta a dos líneas. Sin este límite ocupaba siete
     — 179px, el 42% de toda la tarjeta — y eso convertía la tarjeta en
     un bloque vertical de texto: 429px de alto contra 344 de ancho.
     Con dos líneas la tarjeta baja a 301px y se vuelve horizontal, que
     es como se ve una tarjeta y no una columna.
     El texto completo no se pierde: sigue en la página del episodio.
     flex-grow se conserva para que el enlace "Ver episodio" quede
     alineado abajo aunque unas tarjetas tengan títulos más largos. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.episode-card-link {
  font-size: var(--fs-ui);
  font-weight: 700;
  color: var(--accent);
}
.episode-card:hover .episode-card-link { text-decoration: underline; }

/* ---------------------------------------------------
   Bitácora — individual episode page
--------------------------------------------------- */
.episode-page {
  padding: var(--band-lg) 0 var(--band);
  background: var(--paper);
}
.episode-page .section-inner { max-width: 820px; }
.episode-back-link {
  display: inline-block;
  font-size: var(--fs-ui);
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  margin-bottom: 24px;
}
.episode-back-link:hover { text-decoration: underline; }
.episode-page h1 {
  font-size: var(--fs-h1);
  margin: 0 0 12px;
}
.episode-page-date {
  color: var(--gray);
  font-size: var(--fs-ui);
  margin: 0 0 20px;
}

/* Compartir — usa el share nativo si el navegador lo tiene (celular,
   la mayoría de navegadores de escritorio modernos); si no, copia el
   enlace, mismo patrón de feedback que footer-email-copy. */
.episode-share {
  position: relative;
  display: inline-flex;
  margin-bottom: 32px;
}
.episode-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-ui);
  padding: 13px 20px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.episode-share-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.episode-share-btn:hover,
.episode-share-btn:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}
.episode-share-feedback {
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-4px);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--fs-label);
  font-weight: 600;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.episode-share-feedback.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.episode-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink);
}
.episode-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.episode-page-body {
  margin-top: 28px;
}
.episode-page-body p {
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--ink);
  max-width: 720px;
}

/* Fuentes citadas (Bitácora) — solo texto y espacio, sin tarjetas ni
   líneas divisorias. Usa .eyebrow (ya existe) para el rótulo; se queda
   en Inter a propósito — Fraunces cursiva está reservada solo para el
   pull-quote de "Criterio del día". Agregar solo con fuentes reales y
   completas del episodio; nunca parciales ni inventadas. */
.episode-sources {
  margin-top: 48px;
  max-width: 720px;
}
.episode-sources-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.episode-source-name {
  display: block;
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--ink);
}
.episode-source-detail {
  display: block;
  font-size: var(--fs-ui);
  color: var(--gray);
  margin-top: 2px;
}

/* ---------------------------------------------------
   Episode quiz (Bitácora)
--------------------------------------------------- */
.quiz {
  padding: var(--band) 0;
}
.quiz .section-inner { max-width: 720px; }
.quiz-card {
  background: var(--quiz-bg);
  border-radius: var(--radius);
  padding: 48px;
}
.quiz-card h2 {
  font-size: var(--fs-h2);
  margin: 0 0 8px;
}
.quiz-progress {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  color: var(--gray);
  margin: 0 0 28px;
}
.quiz-question {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 24px;
}
.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}
.quiz-option {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 18px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.quiz-option:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--paper);
}
.quiz-option:disabled { cursor: default; }
.quiz-option.is-correct {
  border-color: var(--quiz-correct);
  background: rgba(63, 107, 71, 0.12);
  color: var(--quiz-correct);
  font-weight: 700;
}
.quiz-option.is-incorrect {
  border-color: var(--quiz-incorrect);
  background: rgba(156, 74, 60, 0.12);
  color: var(--quiz-incorrect);
  font-weight: 700;
}
.quiz-feedback {
  background: var(--paper);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 24px;
}
.quiz-feedback-result {
  font-size: var(--fs-lead);
  font-weight: 700;
  margin: 0 0 8px;
}
.quiz-feedback-result.is-correct { color: var(--quiz-correct); }
.quiz-feedback-result.is-incorrect { color: var(--quiz-incorrect); }
.quiz-feedback-explanation {
  font-size: var(--fs-body);
  color: var(--gray);
  line-height: 1.6;
  margin: 0;
}
.quiz-results { text-align: center; }
.quiz-score {
  font-size: var(--fs-h1);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 12px;
}
.quiz-message {
  font-size: var(--fs-body);
  color: var(--gray);
  margin: 0 0 28px;
}

/* ---------------------------------------------------
   Cine y Filosofía
--------------------------------------------------- */
.cine {
  padding: var(--band) 0;
  background: var(--paper);
}
/* El banner ya ocupa el espacio superior de la página, igual que el
   hero real de Acerca de mí — no necesita el padding-top normal. */
.cine--page { padding-top: 0; }
.cine .section-lead { margin-bottom: var(--band-sm); margin-top: var(--band-sm); }
.cine h1 { font-size: var(--fs-h1); }

/* Banner de Cine y Filosofía — ancho completo, pegado al header. El
   recorte (silueta completa, con aire arriba y abajo) ya viene hecho
   en el propio archivo de imagen, no por CSS — así que aquí solo se
   muestra a su proporción real, sin trucos de altura ni object-fit.
   No es una foto de Carolina, así que tampoco lleva
   filter: grayscale(1) — esa regla es solo para sus propias fotos. */
.cine-hero {
  width: 100%;
  margin-bottom: 48px;
  background: var(--ink);
}
.cine-hero-photo {
  display: block;
  width: 100%;
  height: auto;
  /* El banner es lo primero de la página. Sin esta proporción declarada
     el navegador le da altura cero hasta que llega la foto, y entonces
     todo lo de abajo salta — justo encima de la transición de entrada,
     que es lo que se veía como un parpadeo. */
  aspect-ratio: 1600 / 491;
}

/* En celular la foto original (muy apaisada, 3,26 a 1) quedaba en 115px
   de alto: el 14% de la pantalla, y la silueta se volvía una mota.
   Acá se recorta más alta, así que se pierde ciudad por los lados pero
   la persona se ve. En pantalla ancha quieres el panorama; en pantalla
   angosta quieres al sujeto. La foto es la misma. */
@media (max-width: 760px) {
  .cine-hero-photo {
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: center;
  }
}

.cine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.cine-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cine-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.cine-tag {
  align-self: flex-start;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(30, 53, 87, 0.08);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.cine-card h3 {
  font-size: var(--fs-h3);
  margin-bottom: 12px;
}
.cine-card p {
  font-size: var(--fs-body);
  color: var(--gray);
  flex-grow: 1;
  margin: 0 0 22px;
}
.cine-card a {
  font-size: var(--fs-ui);
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}
.cine-card a:hover { text-decoration: underline; }

/* Filtro por categoría — Cine y Filosofía / Recursos.
   Se inserta por JS solo cuando hay 2+ categorías; con una sola no aporta nada. */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 32px;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 13px 18px;
  font-family: var(--font-body);
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.filter-chip:hover { border-color: var(--accent); color: var(--accent); }
.filter-chip.is-active,
.filter-chip.is-active:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}
.cine-card.is-filtered-out,
.extension-category.is-filtered-out { display: none; }

/* Filtro de Cine y Filosofía y de Atención Digital (Recursos): lista
   lateral minimalista en vez de píldoras. En escritorio se acomoda a
   la izquierda del contenido con CSS Grid; en celular vuelve a ser
   una fila normal arriba, por espacio. */
.cine--page .filter-bar,
.atencion-digital-categories .filter-bar { margin-bottom: 32px; }
.cine--page .filter-chip,
.atencion-digital-categories .filter-chip {
  background: none;
  border: none;
  border-left: 2px solid transparent;
  border-radius: 0;
  padding: 12px 0 12px 14px;
  color: var(--gray);
  text-align: left;
}
.cine--page .filter-chip:hover,
.atencion-digital-categories .filter-chip:hover {
  background: none;
  border-left-color: var(--line);
  color: var(--ink);
}
.cine--page .filter-chip.is-active,
.cine--page .filter-chip.is-active:hover,
.atencion-digital-categories .filter-chip.is-active,
.atencion-digital-categories .filter-chip.is-active:hover {
  background: none;
  border-left-color: var(--accent);
  color: var(--ink);
}
@media (min-width: 761px) {
  .cine--page .section-inner {
    display: grid;
    grid-template-columns: 150px 1fr;
    column-gap: 40px;
    align-items: start;
  }
  .cine--page .section-inner > h1,
  .cine--page .section-inner > .section-lead {
    grid-column: 1 / -1;
  }
  .cine--page .filter-bar {
    grid-column: 1;
    grid-row: 3;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 2px;
  }
  .cine--page .cine-grid { grid-column: 2; grid-row: 3; }

  /* Atención Digital: el envoltorio nuevo (.atencion-digital-categories)
     agrupa las 4 categorías; el filtro ocupa la columna izquierda y
     abarca todas las filas, las categorías se apilan en la derecha. */
  .atencion-digital-categories {
    display: grid;
    grid-template-columns: 150px 1fr;
    column-gap: 40px;
    align-items: start;
  }
  .atencion-digital-categories .filter-bar {
    grid-column: 1;
    grid-row: 1 / -1;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 2px;
  }
  .atencion-digital-categories .extension-category { grid-column: 2; }
}

/* ---------------------------------------------------
   Recursos — Herramientas
--------------------------------------------------- */
.herramientas {
  padding: var(--band) 0;
  background: var(--paper);
}
.herramientas--page { padding-top: var(--band-lg); }
.herramientas .section-lead { margin-bottom: var(--band-sm); }
.herramientas h1 { font-size: var(--fs-h1); }

.herramientas-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.herramientas-entry {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 320px;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 28px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.herramientas-entry:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.herramientas-entry svg {
  width: 30px;
  height: 30px;
  color: var(--ink);
  margin-bottom: 18px;
}
.herramientas-entry h3 {
  font-size: var(--fs-h3);
  color: var(--ink);
  margin: 0 0 8px;
}
.herramientas-entry p {
  font-size: var(--fs-body);
  color: var(--gray);
  margin: 0 0 16px;
}
.herramientas-entry-link {
  font-size: var(--fs-ui);
  font-weight: 700;
  color: var(--accent);
}
.herramientas-entry:hover .herramientas-entry-link { text-decoration: underline; }

/* ---------------------------------------------------
   Recursos — Atención Digital (extensiones)
--------------------------------------------------- */
.atencion-digital {
  padding: var(--band) 0;
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.atencion-digital .section-lead { margin-bottom: var(--band-sm); }
.atencion-digital h2 { font-size: var(--fs-h1); }

.extension-category { margin-bottom: 56px; }
.extension-category:last-child { margin-bottom: 0; }
.extension-category-title {
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 20px;
}

.extension-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.extension-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  max-width: 290px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.extension-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.extension-card-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 80px;
  height: 80px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  margin-bottom: 18px;
}
.extension-card-logo img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.extension-card h3 {
  font-size: var(--fs-h3);
  margin: 0 0 10px;
}
.extension-card p {
  font-size: var(--fs-body);
  color: var(--gray);
  flex-grow: 1;
  margin: 0 0 20px;
}
.extension-card a {
  font-size: var(--fs-ui);
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}
.extension-card a:hover { text-decoration: underline; }
.extension-card-links {
  display: flex;
  gap: 16px;
  flex-grow: 1;
  align-items: flex-end;
  margin: 0 0 20px;
}
.extension-card-links a { margin: 0; }

/* ---------------------------------------------------
   Acerca de mí
--------------------------------------------------- */
.acerca-de {
  padding-bottom: var(--band);
  background: var(--paper);
}
.acerca-de .section-inner { max-width: 720px; }

.acerca-de-hero {
  position: relative;
  min-height: 76vh;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background: var(--ink);
  margin-bottom: 64px;
}
.acerca-de-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 26%;
  filter: grayscale(1);
}
.acerca-de-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(18, 25, 42, 0.92) 0%, rgba(18, 25, 42, 0.5) 45%, rgba(18, 25, 42, 0.1) 70%, rgba(18, 25, 42, 0.3) 100%);
}
.acerca-de-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  padding: 0 24px 56px;
}
.acerca-de-hero-inner .eyebrow { margin-bottom: 12px; }
.acerca-de-hero-inner h1 {
  color: var(--paper);
  font-size: var(--fs-display);
  margin: 0;
}

.acerca-de-text p {
  color: var(--ink);
  font-size: var(--fs-lead);
  line-height: 1.75;
  margin: 0 0 22px;
}

/* ---------------------------------------------------
   Marquee (Acerca de mí gallery) — auto-scrolling,
   infinite loop, pauses on hover. Pure CSS animation.
--------------------------------------------------- */
.marquee {
  margin-top: 56px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  gap: 16px;
  animation: marquee-scroll 32s linear infinite;
}
.marquee:hover .marquee-track {
  animation-play-state: paused;
}
.marquee-item {
  flex: 0 0 auto;
  height: 340px;
  width: 250px;
  border-radius: var(--radius);
  overflow: hidden;
}
.marquee-item--wide { width: 400px; }
.marquee-item-btn {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.marquee-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: transform 0.3s ease;
}
.marquee-item-btn:hover img { transform: scale(1.04); }

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 8px)); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ---------------------------------------------------
   Lightbox (opens a marquee photo full-size)
--------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(18, 25, 42, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  filter: grayscale(1);
  border-radius: var(--radius-sm);
}
.lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  color: var(--paper);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.2); }

/* ---------------------------------------------------
   Explorar (homepage teaser grid)
--------------------------------------------------- */
.explore {
  padding: var(--band) 0;
  background: var(--paper);
}
.explore-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.explore-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.explore-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.explore-card a {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 28px;
  text-decoration: none;
}
.explore-card-tag {
  align-self: flex-start;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(30, 53, 87, 0.08);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.explore-card h3 {
  font-size: var(--fs-h3);
  margin-bottom: 8px;
}
.explore-card p {
  font-size: var(--fs-body);
  color: var(--gray);
  flex-grow: 1;
  margin: 0 0 16px;
}
.explore-card-link {
  font-size: var(--fs-ui);
  font-weight: 700;
  color: var(--accent);
}
.explore-card:hover .explore-card-link { text-decoration: underline; }

/* ---------------------------------------------------
   Últimos episodios (homepage)
--------------------------------------------------- */
.ultimos-episodios {
  padding: var(--band) 0;
  background: var(--paper);
}
.ultimos-episodios .section-lead { margin-bottom: var(--band-sm); }
.ultimos-episodios h2 { font-size: var(--fs-h1); }

.episode-preview {
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.episode-preview:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.episode-preview-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--surface);
}
.episode-preview-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.episode-preview-media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  /* La caja vacía guarda exactamente el mismo 16:9 que ocupará la
     miniatura real. Es a propósito: así la tarjeta se ve hoy igual que
     el día que haya episodio, y no hay que rediseñar nada después.
     Se probó achatarla mientras estuviera vacía y se descartó por eso
     mismo: cambiaba de tamaño al publicar. */
  aspect-ratio: 16 / 9;
}
.episode-preview-media--placeholder svg {
  width: 40px;
  height: 40px;
  color: var(--gray);
}
.episode-preview-soon {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  padding: 5px 10px;
  border-radius: 999px;
  z-index: 1;
}
.episode-preview-body { padding: 24px; }
.episode-preview-date {
  font-size: var(--fs-label);
  color: var(--gray);
  /* Antes compartía renglón con la etiqueta de categoría. Esa etiqueta
     se quitó porque duplicaba la lista de temas del pie de la tarjeta,
     así que la fecha queda sola y sin sangría. */
  margin: 0;
}
.episode-preview-body h3 {
  font-size: var(--fs-h3);
  /* El aire antes lo ponía el margen inferior de la etiqueta. Ahora que
     la etiqueta y la fecha comparten renglón, ese margen es cero, así
     que la separación la pone el título por arriba. Sin esto el título
     queda pegado al renglón de etiqueta y fecha. */
  margin: 12px 0 10px;
}
.episode-preview-excerpt {
  font-size: var(--fs-body);
  color: var(--gray);
  margin: 0 0 16px;
}
.episode-preview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.episode-preview-tags li {
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  padding: 4px 10px;
  border-radius: 999px;
}

.episode-preview--feature {
  display: flex;
  flex-direction: row;
  margin-bottom: 20px;
}
.episode-preview--feature .episode-preview-media {
  flex: 0 0 45%;
  aspect-ratio: auto;
  align-self: stretch;
}
.episode-preview--feature .episode-preview-body {
  flex: 1;
  padding: 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.episode-preview--feature .episode-preview-body h3 {
  font-size: var(--fs-h2);
}

.episode-preview-grid {
  display: grid;
  gap: 20px;
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}
/* Todas las tarjetas secundarias miden lo mismo. Antes las medianas iban
   de dos por fila, lo que las obligaba a 526px de ancho — y como la
   miniatura es 16:9, ese ancho fijaba 295px de alto solo de imagen: el
   55% de la tarjeta. A tres por fila quedan en 344px de ancho y la
   imagen baja a 193px. La altura de estas tarjetas la manda el ancho,
   no el texto. */
.episode-preview-grid--medium { grid-template-columns: repeat(3, 1fr); }
.episode-preview-grid--small { grid-template-columns: repeat(3, 1fr); margin-bottom: 48px; }
.episode-preview-grid li { display: flex; }
.episode-preview--medium,
.episode-preview--small {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.episode-preview--small .episode-preview-body { padding: 20px; }


.episode-preview-subheading {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 20px;
}
.episode-preview-cta-wrap { text-align: center; }

/* ---------------------------------------------------
   Ya está pasando (homepage casos hito)
--------------------------------------------------- */
/* Deliberately the one dark band in the middle of the page: breaks up the
   white scroll and makes the color photos (the site's only color imagery)
   pop. Text/borders use white-alpha tints, same treatment as the hero. */
.hitos {
  padding: var(--band) 0;
  background: var(--ink);
}
.hitos h2 { font-size: var(--fs-h1); color: var(--paper); }
.hitos .section-lead { margin-bottom: var(--band-sm); color: rgba(255, 255, 255, 0.72); }

.hitos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hito-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 290px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.hito-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.07);
}
.hito-card-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.hito-card-body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.hito-date {
  font-size: var(--fs-label);
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 14px;
}
.hito-card h3 {
  font-size: var(--fs-h3);
  line-height: 1.35;
  margin: 0 0 12px;
  color: var(--paper);
}
.hito-excerpt {
  font-size: var(--fs-body);
  color: rgba(255, 255, 255, 0.7);
  flex-grow: 1;
  margin: 0 0 20px;
}
.hito-source {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.hito-source span {
  font-size: var(--fs-ui);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
}
.hito-source a {
  font-size: var(--fs-ui);
  font-weight: 700;
  color: var(--paper);
  text-decoration: none;
  white-space: nowrap;
}
.hito-source a:hover { text-decoration: underline; }

/* ---------------------------------------------------
   ¿Buscas algo específico? (homepage topics grid)
--------------------------------------------------- */
.topics {
  padding: var(--band) 0;
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.hero ~ .topics {
  border-top: none;
}
.topics .section-inner { max-width: 880px; text-align: center; }
.topics h2 { font-size: var(--fs-h1); margin-bottom: 14px; }
.topics-subtitle {
  color: var(--gray);
  font-size: var(--fs-lead);
  margin: 0 0 40px;
}

.topics-search-form {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 540px;
  margin: 0 auto 56px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 14px 22px;
  transition: border-color 0.2s ease;
}
.topics-search-form:focus-within { border-color: var(--accent); }
.topics-search-input {
  flex: 1;
  border: none;
  outline: none;
  background: none;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink);
}
.topics-search-input::placeholder { color: var(--gray); }
.topics-search-submit {
  border: none;
  background: none;
  color: var(--accent);
  cursor: pointer;
  padding: 4px;
  display: flex;
}

.topics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 0 0 48px;
}
.topics-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  background: var(--surface);
  border: none;
  border-radius: var(--radius);
  padding: 24px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.topics-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.topics-card svg { width: 28px; height: 28px; color: var(--ink); flex-shrink: 0; }
.topics-card span {
  font-size: var(--fs-ui);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
}

.topics-cta-wrap { text-align: center; }

/* ---------------------------------------------------
   Suscripción — CTA de cierre en páginas de contenido
   (todas menos Inicio, que ya tiene su propio formulario en el hero).
   Reutiliza .eyebrow--dark, .hero-heading, .hero-lead y .hero-subscribe-*
   tal cual — esos colores ya están verificados para fondo oscuro; no es
   una nueva combinación. No compite con la regla de .hitos como "la
   única banda oscura" de Inicio: es un cierre de página distinto, en
   páginas distintas.
--------------------------------------------------- */
.subscribe-cta {
  padding: var(--band) 0;
  background: var(--ink);
}
.subscribe-cta .section-inner { max-width: 640px; }
.subscribe-cta .hero-heading { font-size: var(--fs-h1); }

/* ---------------------------------------------------
   Footer
--------------------------------------------------- */
.site-footer {
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding: 40px 0;
}
.footer-inner { text-align: center; }
.brand--footer {
  color: var(--accent);
  font-size: var(--fs-lead);
  margin: 0 0 10px;
}
.footer-note {
  color: var(--gray);
  font-size: var(--fs-ui);
  margin: 0 0 18px;
}
.footer-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 22px;
}
.footer-whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-ui);
  text-decoration: none;
  padding: 11.5px 26.5px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background: var(--accent);
  color: var(--paper);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.footer-whatsapp-btn svg {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
}
.footer-whatsapp-btn:hover,
.footer-whatsapp-btn:focus-visible {
  background-color: var(--ink);
}
.footer-email {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.footer-email-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-ui);
  text-decoration: none;
  padding: 11.5px 26.5px;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.footer-email-btn svg {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
}
.footer-email-btn:hover,
.footer-email-btn:focus-visible {
  background: var(--accent);
  color: var(--paper);
}
.footer-email-revealed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.footer-email-revealed[hidden] { display: none; }
.footer-email-text {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-ui);
  color: var(--accent);
}
.footer-email-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--accent);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.footer-email-copy:hover,
.footer-email-copy:focus-visible {
  background: rgba(30, 53, 87, 0.08);
}
.footer-email-copy svg {
  width: 18px;
  height: 18px;
}
.footer-email-copied {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--fs-label);
  font-weight: 600;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.footer-email-copied.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.footer-social {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin: 0 0 18px;
}
.footer-social a {
  display: inline-flex;
  color: var(--ink);
  transition: color 0.2s ease;
}
.footer-social a:hover,
.footer-social a:focus-visible {
  color: var(--accent);
}
.footer-social svg {
  width: 22px;
  height: 22px;
}
.footer-copy {
  color: var(--gray);
  font-size: var(--fs-label);
  margin: 0;
}

/* ---------------------------------------------------
   Search overlay
--------------------------------------------------- */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--paper);
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.search-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.search-overlay-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}
.search-overlay-close:hover { opacity: 0.6; }

.search-overlay-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 120px 24px 80px;
}
.search-overlay-title {
  text-align: center;
  font-size: var(--fs-h2);
  margin-bottom: 36px;
}

.search-form {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 14px;
  margin-bottom: 48px;
  transition: border-color 0.2s ease;
}
/* El input quitaba el outline por defecto sin poner nada en su lugar:
   alguien navegando con teclado no podía saber que estaba escribiendo
   ahí. Se resuelve igual que .topics-search-form: el borde del
   contenedor cambia de color cuando el input interno recibe el foco. */
.search-form:focus-within { border-color: var(--accent); }
.search-input {
  flex: 1;
  border: none;
  outline: none;
  background: none;
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  color: var(--ink);
}
.search-input::placeholder { color: var(--gray); }
.search-submit {
  border: none;
  background: none;
  color: var(--accent);
  cursor: pointer;
  padding: 4px;
  display: flex;
}

.search-quicklinks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.search-quicklinks[hidden] { display: none; }
.search-quicklinks h3 {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gray);
  margin: 0 0 14px;
}
.search-quicklinks ul { display: flex; flex-direction: column; gap: 10px; }
.search-quicklinks a {
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.search-quicklinks a:hover { color: var(--accent); }
.search-quicklinks-empty {
  font-size: var(--fs-ui);
  color: var(--gray);
  font-style: italic;
}

.search-results { display: flex; flex-direction: column; gap: 4px; }
.search-results[hidden] { display: none; }
.search-result {
  display: block;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.search-result-category {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 6px;
}
.search-result-title {
  font-size: var(--fs-lead);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
}
.search-result-excerpt {
  font-size: var(--fs-body);
  color: var(--gray);
  margin: 0;
}
.search-no-results {
  color: var(--gray);
  font-size: var(--fs-body);
}

@media (max-width: 640px) {
  .search-overlay-inner { padding: 96px 20px 60px; }
  .search-quicklinks { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------------------------------------------------
   Responsive
--------------------------------------------------- */
@media (max-width: 760px) {
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    gap: 0;
    padding: 8px 24px 16px;
    display: none;
  }
  .main-nav.is-open { display: flex; }
  .main-nav a {
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }
  .main-nav a:last-child { border-bottom: none; }
  .nav-toggle { display: flex; }

  .nav-dropdown-wrap {
    flex-direction: column;
    align-items: stretch;
    border-bottom: 1px solid var(--line);
  }
  .nav-dropdown-trigger {
    justify-content: space-between;
    width: 100%;
    padding: 12px 0;
  }
  .nav-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    padding-top: 0;
    display: none;
  }
  .nav-dropdown-wrap.is-open .nav-dropdown { display: block; }
  .nav-dropdown-panel {
    transform: none;
    box-shadow: none;
    /* En celular esto deja de ser un panel flotante y pasa a ser una
       lista dentro del menú desplegado: sin sombra y sin esquinas. */
    border-radius: 0;
    padding: 0 0 8px 16px;
  }
  .main-nav .nav-dropdown-link { padding: 10px 0; }
  .search-trigger { margin-left: auto; }
  .search-trigger span { display: none; }
  .criterio-inline-popover-panel { width: 240px; }

  .hero { padding: 24px 16px 24px; }
  /* Excepción a propósito, no un valor heredado: en celular el panel
     del héroe es mucho más chico, y los 28px de escritorio lo dejarían
     desproporcionadamente redondo. */
  .hero-viewport { border-radius: 20px; }
  .hero-panel { flex-direction: column; min-height: 0; }
  .hero-text { padding: 40px 28px 32px; }
  .hero-photo-wrap { flex: 0 0 280px; min-width: 0; }
  .hero-arrow { width: 24px; height: 24px; }
  .hero-dots { height: 24px; }
  .hero-subscribe-form { flex-direction: column; max-width: none; }
  .criterio, .cine, .placeholder-section, .explore, .topics, .ultimos-episodios, .hitos { padding: 72px 0; }
  .topics-grid { grid-template-columns: repeat(2, 1fr); }
  .placeholder-section--solo { padding: 100px 0; min-height: 0; }
  .cine--page { padding-top: 0; }
  .acerca-de { padding-bottom: 72px; }
  .acerca-de-hero { min-height: 60vh; margin-bottom: 48px; }

  .episode-preview--feature { flex-direction: column; }
  .episode-preview--feature .episode-preview-media { flex: none; aspect-ratio: 16 / 9; }
  .episode-preview--feature .episode-preview-body { padding: 24px; }
  .episode-preview-grid--medium,
  .episode-preview-grid--small { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------
   Página 404 — excepción deliberada de marca

   Esta sección NO usa los tokens de :root a propósito: es la única
   página del sitio con estética propia (cyberpunk, fondo oscuro,
   acentos neón), aislada aquí y sin tocar el sistema de diseño global.
   El header y footer siguen siendo los normales del sitio para no
   perder la orientación — solo el contenido central rompe el molde.
--------------------------------------------------- */
.error-404 {
  position: relative;
  overflow: hidden;
  padding: var(--band-lg) 0 var(--band);
  background: #080b14;
  color: #eaf4ff;
  text-align: center;
}
.error-404-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(77, 217, 255, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77, 217, 255, 0.09) 1px, transparent 1px);
  background-size: 42px 42px;
  animation: error-404-grid-drift 16s linear infinite;
}
.error-404::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 40%, transparent 25%, #080b14 82%);
}
@keyframes error-404-grid-drift {
  from { background-position: 0 0; }
  to { background-position: 42px 42px; }
}
.error-404-inner {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.error-404-art {
  position: relative;
  width: min(460px, 100%);
  margin-bottom: 4px;
}
.error-404-art img {
  width: 100%;
  height: auto;
  display: block;
  /* Misma razón que el banner de Cine: reservar el alto desde el
     primer cuadro para que el texto de abajo no salte. */
  aspect-ratio: 640 / 485;
}
/* Funde la imagen con el fondo pintando ENCIMA el mismo color exacto
   de la sección (#080b14) — más confiable que recortar la imagen con
   una máscara, porque no depende de adivinar qué tan oscuro es su
   propio fondo. Mismo recurso que ya usa el hero real de Acerca de mí
   para fundir su foto con --ink. */
.error-404-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 58% 55% at center, transparent 30%, #080b14 92%);
  pointer-events: none;
}
.error-404 .eyebrow { color: #4dd9ff; }
.error-404 h1 {
  font-size: var(--fs-h2);
  color: #eaf4ff;
  margin-bottom: 16px;
}
.error-404-lead {
  color: #a8bdd6;
  font-size: var(--fs-body);
  line-height: 1.6;
  margin: 0 0 36px;
  max-width: 460px;
}
.error-404-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 24px;
}
.error-404 .button {
  background: transparent;
  border: 1.5px solid #4dd9ff;
  color: #4dd9ff;
  box-shadow: 0 0 0 rgba(77, 217, 255, 0);
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.error-404 .button:hover {
  background: #4dd9ff;
  color: #080b14;
  box-shadow: 0 0 26px rgba(77, 217, 255, 0.45);
}
.error-404-link {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--fs-ui);
  font-weight: 700;
  color: #ff4fc3;
  cursor: pointer;
  text-decoration: none;
}
.error-404-link:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .error-404-grid {
    animation: none !important;
  }
}

/* ---------------------------------------------------
   Zonas táctiles

   El cursor del mouse es preciso al píxel; la yema de un dedo mide unos
   10mm (~44px). Estos controles se diseñaron pequeños a propósito, así
   que en vez de agrandarlos —y romper el diseño— se expande solo su
   zona sensible con un ::after invisible.

   Va dentro de (pointer: coarse), o sea solo dispositivos táctiles: si
   se aplicara también en escritorio, los hover se dispararían desde
   fuera del elemento visible, que es peor que el problema original.
--------------------------------------------------- */
@media (pointer: coarse) {
  /* Cajas sin fondo ni borde visible: se pueden agrandar directamente,
     no cambia nada de cómo se ven. */
  .nav-toggle,
  .footer-email-copy {
    width: 44px;
    height: 44px;
  }

  /* Estos sí tienen fondo o borde visible, así que crecen "por debajo". */
  .hero-arrow,
  .hero-dot,
  .criterio-inline-btn {
    position: relative;
  }
  .hero-arrow::after,
  .hero-dot::after,
  .criterio-inline-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
  }

  /* Las dos flechas quedan a 34px entre centros y sus zonas de 44px se
     solaparían: separándolas 20px quedan justo contiguas, sin pisarse. */
  .hero-arrows { gap: 20px; }

  /* Los puntos son de 8px y están muy juntos para zonas de 44px. Se les
     da 32px y se separan 24px: quedan contiguas y sin solaparse. */
  .hero-dots { gap: 24px; }
  .hero-dot::after {
    width: 32px;
    height: 32px;
  }
}