/* ===========================================================
   alejandrosanchezmartinez.com — sistema visual 2026
   Dirección de arte: adaptación del sistema de stevenbartlett.com
   (referencia pedida por Alejandro) a su propio contenido y a su
   propia marca.

   Qué se toma de la referencia (ideas y técnica, no activos):
   lienzo negro con una única tensión cromática, display condensado
   en versales enormes, tarjetas a sangre con overlay que se oscurece
   al pasar el ratón, flecha que sale por la derecha y entra otra por
   la izquierda con retardo, foto en escala de grises que satura y
   escala, marquesinas de miniaturas en direcciones opuestas, línea
   de tiempo con la guía que se dibuja al entrar en pantalla, menú a
   pantalla completa en color de marca, rejilla de redes con relleno
   que barre de izquierda a derecha.

   Qué NO se toma, a propósito:
   - Zuume y Paralucent son tipografías comerciales de Adobe Fonts.
     Aquí: Big Shoulders Display (SIL OFL) para el display condensado
     e Inter Tight para el texto. Autoalojadas, sin CDN de terceros.
   - Ni el amarillo ácido #DBFF00, ni el logotipo, ni los patrones,
     ni una sola imagen o icono de ese sitio. El voltaje es el rojo
     #F04438 de eldiariodelpoder.com: es lo que une las dos webs.
   =========================================================== */

/* ---------- Fuentes autoalojadas (RGPD: ninguna IP sale a Google) ---------- */
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(../fonts/big-shoulders-latin-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(../fonts/big-shoulders-latin-ext-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/inter-tight-latin-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/inter-tight-latin-ext-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===========================================================
   1. Tokens
   =========================================================== */
:root {
  color-scheme: light;

  /* ─── Paleta literal (nombres que no mienten) ─────────────────────── */
  --white:  #FFFFFF;
  --bone:   #FAFAF9;   /* fondo del sitio */
  --sand:   #F1EEEA;   /* banda alterna */
  --near:   #0A0A0A;   /* tinta principal */
  --char:   #4A4643;   /* tinta suave — 8,9:1 sobre bone */
  --hair:   #E2DFDA;   /* línea */
  --coal:   #0A0A0A;   /* superficie oscura: ahora es la excepción */
  --coal-2: #141414;

  /* ─── Roles. EL SITIO ES CLARO POR DEFECTO (rebranding 29/09/2026) ───
     Antes era al revés: negro por defecto y una sola banda clara. */
  --bg:        var(--bone);
  --surface:   var(--white);
  --surface-2: var(--sand);
  --fg:        var(--near);
  --fg-soft:   var(--char);
  --rule:      var(--hair);
  --accent:        #B8332A;   /* 5,9:1 sobre claro — válido para texto */
  --accent-bright: #F04438;   /* el rojo de DDP: fondos y banda roja */
  --accent-dim:    rgba(184, 51, 42, 0.10);
  --focus:         #B8332A;

  /* ─── Alias de compatibilidad ───────────────────────────────────────
     Las ~1.800 líneas de CSS anteriores se escribieron a oscuras. En vez
     de reescribirlas una a una —y dejarse alguna— estos nombres pasan a
     apuntar a los roles claros. La excepción oscura los reasigna abajo. */
  --black:         var(--bg);
  --ink:           var(--surface);
  --ink-2:         var(--surface);
  --ink-3:         var(--surface-2);
  --paper:         var(--surface);
  --paper-2:       var(--surface-2);
  --on-dark:       var(--fg);
  --on-dark-soft:  var(--fg-soft);
  --on-light:      var(--fg);
  --on-light-soft: var(--fg-soft);
  --line:          var(--rule);
  --line-soft:     var(--rule);
  --line-light:    var(--rule);
  --signal:        var(--accent);
  --signal-deep:   var(--accent);
  --signal-dim:    var(--accent-dim);

  /* Tipografía */
  --display: "Big Shoulders Display", "Arial Narrow", "Haettenschweiler", Impact, sans-serif;
  --sans:    "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Escala de display. Reajustada el 29/09/2026: al pasar de la condensada
     a la grotesca ancha, el mismo cuerpo ocupa ~40 % más de línea. */
  --d-hero: clamp(2.6rem, min(11vw, 14vh), 7.5rem);
  --d-1:    clamp(1.85rem, 4.6vw, 3.3rem);
  --d-2:    clamp(1.45rem, 3vw, 2.15rem);
  --d-3:    clamp(1.2rem, 1.9vw, 1.5rem);
  --d-4:    1.25rem;

  /* Escala Robbins: display en caja ancha y caja baja, no versales condensadas */
  --r-hero: clamp(2.5rem, 6.2vw, 5.25rem);
  --r-1:    clamp(1.95rem, 4.2vw, 3.25rem);
  --r-2:    clamp(1.5rem, 2.8vw, 2.1rem);

  /* Escala de texto */
  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-md:   1.0625rem;
  --t-lg:   clamp(1.125rem, 0.98rem + 0.7vw, 1.375rem);

  /* Ritmo vertical (referencia: 60px móvil / 100px escritorio) */
  --sect:   clamp(3.75rem, 7vw, 6.25rem);
  --sect-s: clamp(2.5rem, 5vw, 4rem);
  --sect-l: clamp(5rem, 10vw, 8.5rem);

  /* Cajas */
  --r:      20px;
  --r-s:    12px;
  --pill:   999px;
  --gut:    20px;

  /* Movimiento */
  --dur:    0.4s;
  --dur-l:  0.5s;
  --ease:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-io: ease-in-out;
}

/* ===========================================================
   2. Base
   =========================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
svg { display: block; }

h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }

a { color: inherit; text-decoration: none; }

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--signal); color: #fff;
  padding: 0.75rem 1.25rem; font-weight: 600;
}
.skip:focus { left: 0; }

/* ===========================================================
   3. Tipografía
   =========================================================== */
/* Rebranding 29/09/2026: los titulares pasan de la condensada (Big Shoulders)
   a la grotesca ancha (Inter Tight) en peso 800, que es el registro de la
   referencia. Big Shoulders no se va: se queda para epígrafes, botones y
   etiquetas, que es donde una condensada en versales rinde de verdad. */
h1, h2, h3, h4, .display {
  font-family: var(--sans);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--fg);
  text-wrap: balance;
}
.display--condensed, .kicker, .btn, .btn--ghost, .cta, .pillar__go, .fcol h3 {
  font-family: var(--display);
}

h1 { font-size: var(--d-1); }
h2 { font-size: var(--d-1); }
h3 { font-size: var(--d-3); }
h4 { font-size: var(--d-4); }

strong, b { font-weight: 600; }
em { font-style: italic; }

p { font-size: var(--t-base); }

.lede {
  font-size: var(--t-lg);
  line-height: 1.5;
  color: var(--on-dark);
  font-weight: 400;
}

/* Epígrafe: pequeño, versales, rojo. Sustituye al mono del sistema anterior. */
.kicker {
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 0.9rem;
  display: block;
}

.head {
  display: grid;
  gap: 1rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.head h2 { max-width: 16ch; }
.head__aside {
  color: var(--on-dark-soft);
  font-size: var(--t-md);
  max-width: 44ch;
}
@media (min-width: 62rem) {
  .head { grid-template-columns: 1.15fr 1fr; gap: 2.5rem; align-items: end; }
  .head__aside { justify-self: end; }
}

.prose { max-width: 62ch; }
.prose p { color: var(--on-dark-soft); margin-bottom: 1.15em; font-size: var(--t-md); }
.prose p:last-child { margin-bottom: 0; }
.prose .lede { color: var(--on-dark); }
.prose h2 { margin: 2.2em 0 0.5em; }
.prose h3 { margin: 1.9em 0 0.4em; }
.prose h2 + p, .prose h3 + p { margin-top: 0; }
.prose strong { color: var(--on-dark); font-weight: 600; }
.prose a:not(.btn):not(.btn--ghost):not(.arrow) {
  color: var(--signal);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur) var(--ease);
}
.prose a:not(.btn):not(.btn--ghost):not(.arrow):hover { color: var(--fg); }
.prose__cta { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; align-items: center; margin-top: 2rem; }

.dropcap::first-letter {
  font-family: var(--display);
  font-weight: 700;
  font-size: 3.6em;
  line-height: 0.76;
  float: left;
  padding: 0.08em 0.12em 0 0;
  color: var(--signal);
}

.pull {
  font-family: var(--display);
  font-size: var(--d-2);
  line-height: 1;
  text-transform: uppercase;
  color: var(--on-dark);
  border-left: 3px solid var(--signal);
  padding-left: clamp(1rem, 3vw, 2rem);
}
.pull cite {
  display: block;
  margin-top: 1.25rem;
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signal);
}

/* ===========================================================
   4. Rejilla y bandas
   =========================================================== */
.wrap {
  width: 100%;
  max-width: 82rem;
  margin-inline: auto;
  padding-inline: var(--gut);
}
.wrap--wide { max-width: none; }

.band   { padding-block: var(--sect); }
.band--s{ padding-block: var(--sect-s); }
.band--l{ padding-block: var(--sect-l); }

/* El sitio es CLARO. La alterna es arena; .band--paper queda como alias
   sin efecto propio, porque lo que antes era la excepción ahora es la norma. */
.band--tint  { background: var(--surface-2); }
.band--paper { background: var(--surface); }

/* Banda oscura: ESTA es ahora la excepción. En vez de escribir una regla por
   componente, reasigna los roles: todo lo que caiga dentro se adapta solo. */
.band--ink, .videoband {
  --bg: var(--coal); --surface: var(--coal-2); --surface-2: #1D1D1D;
  --fg: #FFFFFF; --fg-soft: #B3ADA6; --rule: #2A2A2A;
  --accent: var(--accent-bright);
  --black: var(--bg); --ink: var(--surface); --ink-2: var(--surface); --ink-3: var(--surface-2);
  --paper: var(--surface); --paper-2: var(--surface-2);
  --on-dark: var(--fg); --on-dark-soft: var(--fg-soft);
  --on-light: var(--fg); --on-light-soft: var(--fg-soft);
  --line: var(--rule); --line-soft: var(--rule); --line-light: var(--rule);
  --signal: var(--accent); --signal-deep: var(--accent);
  background: var(--bg);
  color: var(--fg);
}
.band--ink h1, .band--ink h2, .band--ink h3, .band--ink h4 { color: var(--fg); }
.band--ink p:not(.kicker) { color: var(--fg-soft); }
.band--ink .kicker { color: var(--accent); }

/* Banda roja: rojo vivo de DDP y tinta NEGRA, nunca blanca
   (blanco sobre #F04438 da 3,8:1 y suspende). */
.band--signal { background: var(--accent-bright); color: #000; }
.band--signal h1, .band--signal h2, .band--signal h3, .band--signal h4 { color: #000; }
.band--signal p:not(.kicker) { color: #0A0A0A; }
.band--signal .kicker { color: #000; }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

.grid { display: grid; gap: 0.75rem; }
@media (min-width: 40rem) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 48rem) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62rem) { .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ===========================================================
   5. Cabecera, hamburguesa y menú a pantalla completa
   =========================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  height: 84px;
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}
@media (min-width: 62rem) { .site-header { height: 118px; } }
/* Con el menú abierto el degradado sobra: mancharía el panel rojo. */
.menu-open .site-header { background: none; }

/* Sobre la banda blanca y sobre la roja, la tinta de la cabecera se
   invierte: si no, el degradado negro mancha el papel y el rótulo
   blanco desaparece sobre el rojo. */
.site-header.is-light { background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 100%); }
.site-header.is-light .wordmark { color: #000; }
.site-header.is-light .wordmark span { color: var(--signal-deep); }
.site-header.is-light .wordmark:hover { color: var(--signal-deep); }
.site-header.is-light .nav-toggle { color: #000; }
.site-header.is-light .burger i { background: #000; }
.site-header.is-signal { background: linear-gradient(180deg, rgba(240,68,56,0.65) 0%, rgba(240,68,56,0) 100%); }
.site-header.is-signal .wordmark, .site-header.is-signal .wordmark span,
.site-header.is-signal .nav-toggle { color: #000; }
.site-header.is-signal .burger i { background: #000; }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.site-header a, .site-header button { pointer-events: auto; }

.wordmark {
  font-family: var(--display);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1;
  letter-spacing: 0.01em;
  color: #fff;
  display: inline-flex;
  flex-direction: column;
  transition: color var(--dur) var(--ease);
}
@media (min-width: 48rem) { .wordmark { font-size: 1.35rem; } }
.wordmark span { color: var(--signal); font-weight: 500; }
.wordmark:hover { color: var(--signal); }

/* La barra de navegación clásica desaparece: la referencia solo
   tiene hamburguesa, en móvil y en escritorio. */
.nav { display: none; }

.nav-toggle {
  -webkit-appearance: none; appearance: none;
  background: none; border: 0; padding: 6px 0 0 0; margin: 0;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  z-index: 202;
}
.nav-toggle svg { display: none; }
.nav-toggle .burger {
  position: relative;
  width: 30px; height: 18px;
  display: block;
}
.nav-toggle .burger i {
  position: absolute; left: 0;
  width: 100%; height: 2px;
  background: #fff;
  transition: transform var(--dur) var(--ease), opacity 0.2s var(--ease), background-color var(--dur) var(--ease);
}
.nav-toggle .burger i:nth-child(1) { top: 0; }
.nav-toggle .burger i:nth-child(2) { top: 8px; }
.nav-toggle .burger i:nth-child(3) { top: 16px; }
.nav-toggle[aria-expanded="true"] { color: #000; }
.nav-toggle[aria-expanded="true"] .burger i { background: #000; }
.nav-toggle[aria-expanded="true"] .burger i:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .burger i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .burger i:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.nav-panel {
  position: fixed;
  top: 0; bottom: 0; right: 0;
  width: min(86%, 620px);
  z-index: 190;
  background: var(--signal);
  display: flex;
  align-items: center;
  padding: 5.5rem var(--gut) 2rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(105%);
  transition: transform 0.7s var(--ease-io);
}
.nav-panel[data-open="true"] { transform: none; }

.nav-panel__list { display: block; width: 100%; }
.nav-panel__list > a {
  display: block;
  position: relative;
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(2.4rem, 11vw, 4rem);
  line-height: 1.12;
  color: #000;
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.nav-panel__list > a:hover { color: rgba(0, 0, 0, 0.38); }
.nav-panel__list > a[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -14px; top: 50%;
  width: 0; height: 7px;
  background: #000;
  transform: translateY(-50%);
  transition: width 0.6s var(--ease-io) 0.75s;
}
.nav-panel[data-open="true"] .nav-panel__list > a[aria-current="page"]::before { width: 8px; }
.nav-panel__meta {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 2px solid rgba(0,0,0,0.18);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #000;
}
.nav-panel__meta a { border-bottom: 1px solid rgba(0,0,0,0.35); }
.nav-panel__meta a:hover { border-color: #000; }

.nav-scrim {
  position: fixed; inset: 0; z-index: 180;
  background: rgba(0, 0, 0, 0.72);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-l) var(--ease);
}
.nav-scrim[data-open="true"] { opacity: 1; pointer-events: auto; }

/* ===========================================================
   6. Botones y enlaces con flecha
   La flecha va con máscara: un solo SVG que toma el color actual,
   así el mismo botón sirve sobre negro, sobre blanco y sobre rojo.
   =========================================================== */
.btn {
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M0 8h20.5M14 1.5 20.5 8 14 14.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
  position: relative;
  display: inline-block;
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--signal);
  padding-right: 3rem;
  transition: color var(--dur) var(--ease);
  cursor: pointer;
  background: none; border: 0;
}
.btn::before, .btn::after {
  content: "";
  position: absolute;
  top: 54%;
  width: 26px; height: 16px;
  transform: translateY(-50%);
  background-color: currentColor;
  -webkit-mask: var(--arrow) no-repeat right center / 22px auto;
  mask: var(--arrow) no-repeat right center / 22px auto;
  transition: left var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
/* la que se ve en reposo */
.btn::after { right: 0; left: auto; transition-delay: 0.4s; opacity: 1; }
/* la que entra desde la izquierda */
.btn::before { right: 0; opacity: 0; transform: translate(-28px, -50%); transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.btn:hover { color: var(--fg); }
.btn:hover::after { opacity: 0; transform: translate(28px, -50%); transition-delay: 0s; }
.btn:hover::before { opacity: 1; transform: translateY(-50%); transition-delay: 0.38s; }

/* El botón dibuja su propia flecha con máscara: cualquier SVG heredado
   del sistema anterior sobra (si no, aparece una flecha gigante suelta). */
.btn svg { display: none; }
.btn > span[aria-hidden="true"] { display: none; }

.band--paper .btn { color: var(--signal-deep); }
.band--paper .btn:hover { color: #000; }
.band--signal .btn { color: #000; }
.band--signal .btn:hover { color: #000; }

/* Botón píldora (el .btn2 de la referencia) */
.btn--ghost {
  display: inline-block;
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--signal);
  border: 2px solid var(--signal);
  border-radius: var(--pill);
  padding: 0.75rem 1.65rem 0.6rem;
  min-width: 10rem;
  text-align: center;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn--ghost::before, .btn--ghost::after { content: none; }
.btn--ghost:hover { background: var(--signal); color: #000; }
.band--paper .btn--ghost { color: #000; border-color: #000; }
.band--paper .btn--ghost:hover { background: #000; color: #fff; }
.band--signal .btn--ghost { color: #000; border-color: #000; }
.band--signal .btn--ghost:hover { background: #000; color: var(--signal); }

.actions { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; align-items: center; }

/* Enlace de texto con flecha (listas y pies de sección) */
a.arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  color: var(--signal);
  transition: gap var(--dur) var(--ease), color var(--dur) var(--ease);
}
a.arrow svg { width: 1.1em; height: 1.1em; stroke: currentColor; }
a.arrow:hover { gap: 1.1rem; color: var(--fg); }
.band--paper a.arrow { color: var(--signal-deep); }
.band--paper a.arrow:hover { color: #000; }

/* ===========================================================
   7. Portada: fotografía a sangre + el nombre en tres bandas
   La referencia parte el rótulo en tres franjas horizontales que
   entran y salen alternando dos textos cada seis segundos. Aquí son
   dos textos con sentido: el nombre y el medio. Es justo la
   asociación que el sitio necesita fijar (nombre → medio).
   =========================================================== */
.hero {
  position: relative;
  min-height: 560px;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--black);
  /* El hueco de abajo es del indicador de scroll: sin él, en pantallas
     bajas (1440x900 y cualquier portátil) se solapa con la línea de rol. */
  padding: 5.5rem 0 6rem;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: grayscale(1) contrast(1.05);
  opacity: 0.42;
  animation: kenburns 24s var(--ease-io) infinite alternate;
}
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.15) 32%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.95) 100%);
}
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.14); } }

.hero__names {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-inline: var(--gut);
  text-align: center;
}
.namebands { position: relative; }
.nameband {
  display: grid;
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--d-hero);
  line-height: 1.6;
  letter-spacing: -0.005em;
  color: #fff;
}
.nameband--b {
  position: absolute;
  inset: 0;
  color: var(--signal);
}
.nb-line { display: block; overflow: hidden; }
.nb-line > span { display: block; line-height: 1.6; will-change: transform; }
.nb-line + .nb-line { margin-top: -0.66em; }

/* Franja alta: el texto sube y se corta. Franja baja: baja y se corta.
   Franja media: se cierra sobre su propio eje. Ciclo de 12 s; la
   segunda capa entra con medio ciclo de retardo. */
@keyframes nbTop {
  0%      { transform: translateY(-101%); }
  9%, 42% { transform: translateY(0); }
  50%, 100% { transform: translateY(-101%); }
}
@keyframes nbBot {
  0%      { transform: translateY(101%); }
  9%, 42% { transform: translateY(0); }
  50%, 100% { transform: translateY(101%); }
}
@keyframes nbMid {
  0%      { clip-path: inset(50% 0 50% 0); }
  9%, 42% { clip-path: inset(0 0 0 0); }
  50%, 100% { clip-path: inset(50% 0 50% 0); }
}
.js .nb-line--top > span { animation: nbTop 12s var(--ease-io) infinite; }
.js .nb-line--bot > span { animation: nbBot 12s var(--ease-io) infinite; }
.js .nb-line--mid > span { animation: nbMid 12s var(--ease-io) infinite; }
.js .nameband--b .nb-line > span { animation-delay: -6s; }
html:not(.js) .nameband--b { display: none; }

.hero__role {
  position: relative;
  z-index: 2;
  margin-top: 1.5rem;
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-soft);  /* solo lo usa /en/, y ahí va sobre claro, no sobre foto */
}
@media (min-width: 48rem) { .hero__role { font-size: var(--t-base); letter-spacing: 0.3em; } }

.hero__lede {
  position: relative; z-index: 2;
  max-width: 44ch;
  margin: 1rem auto 0;
  color: var(--on-dark-soft);
  font-size: var(--t-md);
}

/* Indicador de scroll */
.next-section {
  position: absolute;
  left: 50%; bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #fff;
}
.next-section::after {
  content: "";
  width: 20px; height: 22px;
  background-color: var(--signal);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2v19M4 13.5 12 21.5l8-8' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2v19M4 13.5 12 21.5l8-8' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain;
  animation: nudge 2.4s var(--ease-io) infinite;
}
@keyframes nudge { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(6px); opacity: 0.55; } }
/* En pantallas muy bajas el indicador sobra: no hay sitio y estorba. */
@media (max-height: 520px) { .next-section { display: none; } }

/* Portada de página interior: mismo lenguaje, media altura */
.hero--page {
  height: auto;
  min-height: 0;
  padding: calc(84px + clamp(3rem, 9vw, 6rem)) 0 clamp(2.5rem, 6vw, 4rem);
  display: block;
  text-align: left;
}
@media (min-width: 62rem) { .hero--page { padding-top: calc(118px + clamp(3rem, 8vw, 6rem)); } }
.hero--page h1 { font-size: clamp(3rem, 11vw, 8rem); line-height: 0.86; font-weight: 700; }
.hero--page .hero__lede { margin-inline: 0; max-width: 52ch; }
.hero--page .kicker { margin-bottom: 1.25rem; }
.hero--page .actions { margin-top: 2rem; }

/* ===========================================================
   8. Sección de declaración con retrato
   =========================================================== */
.statement {
  position: relative;
  overflow: hidden;
  background: var(--black);
  padding-block: var(--sect-l);
}
.statement__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 62rem) { .statement__grid { grid-template-columns: 1.08fr 0.92fr; gap: 3.5rem; } }
.statement h2 {
  font-weight: 500;
  font-size: clamp(2rem, 5.4vw, 3.6rem);
  line-height: 0.98;
  max-width: 20ch;
}
.statement h2 a, .statement h2 .hl {
  color: var(--signal);
  font-weight: 700;
  transition: color var(--dur) var(--ease);
}
.statement h2 a:hover { color: var(--fg); }
.statement .btn { margin-top: 2rem; }

.statement__portrait { position: relative; isolation: isolate; }
.statement__portrait img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 18%;
  border-radius: var(--r);
  -webkit-mask-image: linear-gradient(180deg, #000 62%, rgba(0,0,0,0.35) 88%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 62%, rgba(0,0,0,0.35) 88%, transparent 100%);
}
/* Trama de puntos: el equivalente al patrón de la referencia, sin
   cargar ningún archivo. */
.statement__portrait::before {
  content: "";
  position: absolute;
  right: -6%; bottom: -4%;
  width: 62%; height: 46%;
  background-image: radial-gradient(var(--signal) 1.3px, transparent 1.3px);
  background-size: 13px 13px;
  opacity: 0.35;
  -webkit-mask-image: linear-gradient(315deg, #000 20%, transparent 78%);
  mask-image: linear-gradient(315deg, #000 20%, transparent 78%);
  z-index: 0;
}

/* ===========================================================
   9. Tarjetas grandes a sangre (los "key blocks")
   =========================================================== */
.tiles { background: var(--black); }
.tiles__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: 15px;
  padding-inline: var(--gut);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tiles__track::-webkit-scrollbar { display: none; }
@media (min-width: 48rem) {
  .tiles__track {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-columns: auto;
    gap: 0;
    padding-inline: 0;
    overflow: visible;
  }
}

.tile {
  position: relative;
  display: block;
  height: 340px;
  overflow: hidden;
  border-radius: var(--r);
  scroll-snap-align: center;
  isolation: isolate;
}
@media (min-width: 48rem) { .tile { height: 330px; border-radius: 0; } }
@media (min-width: 62rem) { .tile { height: 440px; } }
@media (min-width: 75rem) { .tile { height: 500px; } }

.tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: transform var(--dur-l) var(--ease-io), filter var(--dur-l) var(--ease-io);
}
.tile__overlay {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.28) 42%, rgba(0,0,0,0.82) 100%);
  opacity: 0.88;
  transition: opacity var(--dur-l) var(--ease-io);
}
.tile h3 {
  position: absolute;
  left: 20px; bottom: 20px; z-index: 4;
  margin: 0;
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  font-weight: 500;
  line-height: 0.92;
  color: #fff;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55);
  transition: color var(--dur) var(--ease);
}
@media (min-width: 75rem) { .tile h3 { left: 30px; bottom: 30px; } }
.tile__meta {
  position: absolute;
  left: 20px; right: 20px; bottom: 20px; z-index: 4;
  transform: translateY(150%);
  font-size: var(--t-sm);
  color: var(--on-dark-soft);
  opacity: 0;
  transition: transform var(--dur-l) var(--ease), opacity var(--dur-l) var(--ease);
}
/* Las dos flechas: la blanca sale por la derecha, la roja entra por
   la izquierda con retardo. Es el detalle que define la referencia. */
.tile::before, .tile::after {
  content: "";
  position: absolute;
  z-index: 5;
  bottom: 110px;
  width: 28px; height: 20px;
  background-color: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M0 8h20.5M14 1.5 20.5 8 14 14.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") no-repeat left center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M0 8h20.5M14 1.5 20.5 8 14 14.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") no-repeat left center / contain;
  transition: left var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.tile::before { left: 21px; opacity: 1; transition-delay: 0.4s; }
.tile::after  { left: -4px; opacity: 0; background-color: var(--signal); transition-delay: 0s; }
@media (min-width: 62rem) { .tile::before, .tile::after { bottom: 140px; } }
@media (min-width: 75rem) {
  .tile::before { left: 31px; bottom: 160px; }
  .tile::after  { left: 6px; bottom: 160px; }
}

@media (hover: hover) {
  .tile:hover img { filter: saturate(0); transform: scale(1.1); }
  .tile:hover .tile__overlay { opacity: 1; }
  .tile:hover h3 { color: var(--signal); }
  .tile:hover::before { left: 68px; opacity: 0; transition-delay: 0s; }
  .tile:hover::after  { left: 21px; opacity: 1; transition-delay: 0.4s; }
  .tile:hover .tile__meta { opacity: 1; transform: none; }
}
@media (hover: hover) and (min-width: 75rem) {
  .tile:hover::after { left: 31px; }
}
.tile:focus-visible { outline-offset: -4px; }

/* ===========================================================
   10. Banda de cifras
   =========================================================== */
.stats {
  display: grid;
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 62rem) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat {
  background: var(--black);
  padding: 1.75rem 1.25rem 1.5rem;
  display: flex; flex-direction: column; gap: 0.35rem;
  transition: background-color var(--dur) var(--ease);
}
.stat:hover { background: var(--ink-2); }
.stat dt {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal);
}
.stat dd {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.1rem, 5.4vw, 3.4rem);
  line-height: 0.88;
  color: var(--fg);
}
.stat dd small {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--t-sm);
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  color: var(--on-dark-soft);
}

/* ===========================================================
   11. Marquesinas de invitados (dos filas, sentidos opuestos)
   =========================================================== */
.showcase {
  position: relative;
  overflow: hidden;
  background: var(--black);
  padding-top: var(--sect);
}
.showcase__text { position: relative; z-index: 3; text-align: center; padding-inline: var(--gut); }
.showcase__text h2 { font-weight: 700; font-size: clamp(2.6rem, 9vw, 6.5rem); }
.showcase__text p:not(.kicker) {
  max-width: 46ch; margin: 1rem auto 1.75rem;
  color: var(--on-dark-soft); font-size: var(--t-md);
}
.showcase__text .kicker { color: var(--signal); margin: 0 0 0.9rem; }
.showcase__rows { position: relative; margin-top: clamp(2rem, 5vw, 3.5rem); }
.showcase__rows::before, .showcase__rows::after {
  content: ""; position: absolute; left: 0; right: 0; z-index: 4; height: 90px; pointer-events: none;
}
.showcase__rows::before { top: 0; background: linear-gradient(180deg, #000 4%, rgba(0,0,0,0) 100%); }
.showcase__rows::after { bottom: 0; background: linear-gradient(0deg, #000 4%, rgba(0,0,0,0) 100%); }

.marquee { overflow: hidden; }
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 46s linear infinite;
}
.marquee--rtl .marquee__track { animation-direction: reverse; animation-duration: 54s; }
.marquee__track img {
  width: 160px; height: 108px;
  margin: 8px;
  object-fit: cover;
  border-radius: var(--r);
  border: 1px solid #3A3A3A;
  background: #111;
  filter: grayscale(0.55);
  transition: filter var(--dur-l) var(--ease);
}
.marquee:hover .marquee__track img { filter: grayscale(0); }
@media (min-width: 48rem) { .marquee__track img { width: 224px; height: 150px; margin: 10px; } }
@media (min-width: 62rem) { .marquee__track img { width: 300px; height: 200px; } }
@keyframes marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

/* ===========================================================
   12. Línea de tiempo
   =========================================================== */
.timeline-wrap { overflow: hidden; }
.timeline { position: relative; padding-top: 1.5rem; }
.timeline__line {
  position: absolute;
  z-index: 2; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 2px; height: 0;
  background: #fff;
  transition: height 3s var(--ease-io);
}
.timeline.is-in .timeline__line { height: 100%; }
html:not(.js) .timeline__line { height: 100%; }

.tl-block { position: relative; padding-top: clamp(2.5rem, 6vw, 4.5rem); display: grid; gap: 1.25rem; }
.tl-block h3 {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -10%);
  z-index: 10;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  line-height: 1;
  color: var(--signal);
  background: var(--black);
  padding: 0.35rem 0.75rem;
}
.tl-half { position: relative; }
.tl-half img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-s); position: relative; z-index: 1; filter: grayscale(0.25); }
.tl-half--text { text-align: center; padding: 0 0.5rem; }
.tl-half--text h4 {
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--fg);
  position: relative; z-index: 1;
}
.tl-half--text .tl-place {
  display: inline-block;
  margin-top: 0.4rem;
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal);
  position: relative; z-index: 1;
}
.tl-half--text p {
  margin-top: 0.6rem;
  color: var(--on-dark-soft);
  font-size: var(--t-sm);
  position: relative; z-index: 1;
}
.tl-blur {
  position: absolute;
  z-index: 0;
  width: 62%; height: auto;
  top: -10%; right: 12%;
  filter: blur(11px);
  opacity: 0.32;
  border-radius: var(--r-s);
}
@media (min-width: 48rem) {
  .tl-block { grid-template-columns: 1fr 1fr; align-items: center; gap: 2rem; }
  .tl-block--flip > .tl-half:first-of-type { order: 2; }
  .tl-half { width: 90%; margin-inline: 5%; }
}
.timeline__fade {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 140px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 92%);
  z-index: 20; pointer-events: none;
}

/* ===========================================================
   13. Prensa: la única banda blanca, con carril horizontal
   =========================================================== */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 82%;
  gap: 15px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 0.5rem;
  -webkit-overflow-scrolling: touch;
}
.rail::-webkit-scrollbar { display: none; }
@media (min-width: 48rem) { .rail { grid-auto-columns: 42%; gap: 20px; } }
@media (min-width: 62rem) { .rail { grid-auto-columns: 30%; gap: 28px; } }

.rail-head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.rail-nav { display: flex; gap: 0.6rem; flex: none; }
.rail-nav button {
  width: 44px; height: 44px;
  border: 0; border-radius: var(--pill);
  background: var(--signal);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
  position: relative;
}
.rail-nav button::after {
  content: "";
  position: absolute; inset: 0;
  background-color: #000;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 4 8 8-8 8' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E") no-repeat center / 13px auto;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 4 8 8-8 8' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E") no-repeat center / 13px auto;
}
.rail-nav button[data-dir="prev"]::after { transform: scaleX(-1); }
.rail-nav button:hover { background: #000; }
.rail-nav button:hover::after { background-color: #fff; }
.band--paper .rail-nav button:hover { background: #000; }
@media (max-width: 47.99rem) { .rail-nav { display: none; } }

.rail--bleed { margin-right: calc(-1 * var(--gut)); padding-right: var(--gut); }
@media (min-width: 62rem) { .rail--bleed { margin-right: 0; padding-right: 0; } }

.press { display: grid; gap: 0.75rem; }
@media (min-width: 48rem) { .press { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Fuera del carril (páginas interiores) cada recorte es una caja */
.press .press__item {
  display: flex; flex-direction: column; gap: 0.55rem;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.5rem 1.35rem 1.35rem;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.press .press__item:hover { border-color: var(--signal); transform: translateY(-4px); background: var(--ink-2); }
.press .press__outlet {
  font-size: 1.5rem;
  color: var(--signal);
  text-shadow: none;
  transition: color var(--dur) var(--ease);
}
.press .press__head { margin-top: 0; font-size: var(--t-base); }
.press .press__date { margin-top: 0.35rem; align-self: flex-start; }
.band--paper .press .press__item { background: var(--paper-2); border-color: var(--line-light); }
.band--paper .press .press__outlet { color: var(--signal-deep); }
.press__item {
  display: block;
  scroll-snap-align: start;
  color: inherit;
}
.press__plate {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 210px;
  border-radius: var(--r);
  overflow: hidden;
  background: #111;
  text-align: center;
  padding: 1rem;
}
.press__plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-l) var(--ease-io), filter var(--dur-l) var(--ease-io); }
.press__outlet {
  position: relative; z-index: 2;
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  line-height: 0.95;
  color: var(--fg);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85);
}
.press__plate::before {
  content: "";
  position: absolute; inset: 0; z-index: 3;
  background: var(--signal);
  opacity: 0;
  transition: opacity var(--dur-l) var(--ease) 0.3s;
}
.press__plate::after {
  content: "Leer";
  position: absolute; z-index: 4;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.9rem;
  color: #000;
  opacity: 0;
  transition: opacity var(--dur-l) var(--ease);
}
.press__head {
  display: block;
  margin-top: 1.1rem;
  font-size: var(--t-md);
  font-weight: 500;
  line-height: 1.35;
  color: var(--fg);
}
.press__date {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.25rem 0.6rem 0.2rem;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}
@media (hover: hover) {
  .press__item:hover .press__plate img { filter: saturate(0); transform: scale(1.06); }
  .press__item:hover .press__plate::before { opacity: 0.88; transition-delay: 0s; }
  .press__item:hover .press__plate::after { opacity: 1; transition-delay: 0.3s; }
  .press__item:hover .press__outlet { color: #000; }
}
/* La banda blanca es la excepción, no la regla */
.band--paper .press__head { color: var(--on-light); }
.band--paper .press__date { color: var(--on-light-soft); }

/* ===========================================================
   14. Invitados
   =========================================================== */
.guests { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 48rem) { .guests { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .guests { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.guest {
  position: relative;
  display: block;
  border-radius: var(--r-s);
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}
.guest__img { display: block; position: relative; }
.guest__img::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,0.9) 100%);
  transition: opacity var(--dur-l) var(--ease);
}
.guest__img img {
  width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  filter: grayscale(0.7);
  transition: transform var(--dur-l) var(--ease-io), filter var(--dur-l) var(--ease-io);
}
.guest strong {
  position: absolute; left: 0.8rem; right: 0.8rem; bottom: 1.9rem; z-index: 2;
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--fg);
  transition: color var(--dur) var(--ease);
}
.guest span:not(.guest__img) {
  position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0.7rem; z-index: 2;
  font-size: 0.6875rem;
  line-height: 1.25;
  color: var(--on-dark-soft);
}
@media (hover: hover) {
  .guest:hover .guest__img img { filter: grayscale(0); transform: scale(1.06); }
  .guest:hover strong { color: var(--signal); }
}

.thumbs { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.thumbs img { width: 68px; height: 85px; object-fit: cover; border-radius: 8px; filter: grayscale(0.6); }

/* ===========================================================
   15. Fichas, índice, preguntas
   =========================================================== */
.ficha { border-top: 1px solid var(--line); }
.ficha__row {
  display: grid; gap: 0.35rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 48rem) { .ficha__row { grid-template-columns: 15rem 1fr; gap: 2rem; } }
.ficha dt {
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Tinta suave, no acento: a 12 px el rojo se queda en 4,47:1 mientras la
     animación .reveal lo tiene a media opacidad. Y un rótulo lee mejor así. */
  color: var(--fg-soft);
}
.ficha dd { margin: 0; color: var(--on-dark-soft); font-size: var(--t-sm); line-height: 1.55; }
.ficha dd a { color: var(--fg); border-bottom: 1px solid var(--signal); }
.ficha dd a:hover { color: var(--signal); }
.ficha--compact .ficha__row { grid-template-columns: 1fr; gap: 0.3rem; }
.band--paper .ficha { border-color: var(--line-light); }
.band--paper .ficha__row { border-color: var(--line-light); }
.band--paper .ficha dt { color: var(--signal-deep); }
.band--paper .ficha dd { color: var(--on-light-soft); }
.band--paper .ficha dd a { color: #000; }

.index { border-top: 1px solid var(--line); }
.index__row {
  display: grid;
  gap: 0.35rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--line);
  transition: background-color var(--dur) var(--ease), padding-inline var(--dur) var(--ease);
}
@media (min-width: 48rem) {
  .index__row { grid-template-columns: 3.5rem 1fr 1fr auto; align-items: baseline; gap: 1.5rem; }
}
a.index__row:hover { background: var(--ink-2); padding-inline: 1rem; }
.index__n {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--signal);
  line-height: 1;
}
.index__title {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1.4rem;
  line-height: 1.05;
  color: var(--fg);
}
.index__who { font-size: var(--t-sm); color: var(--on-dark-soft); }
.index__meta {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}

.faq { display: grid; gap: 0.6rem; }
.faq details {
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease);
}
.faq details[open] { border-color: var(--signal); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 3rem 1.05rem 1.25rem;
  position: relative;
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.12;
  color: var(--fg);
  transition: color var(--dur) var(--ease);
}
.faq summary:hover { color: var(--signal); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute; right: 1.15rem; top: 1.35rem;
  width: 16px; height: 16px;
  background:
    linear-gradient(var(--signal), var(--signal)) center / 100% 2px no-repeat,
    linear-gradient(var(--signal), var(--signal)) center / 2px 100% no-repeat;
  transition: transform var(--dur) var(--ease);
}
.faq details[open] summary::after { transform: rotate(90deg); background-size: 100% 2px, 0 100%; }
.faq__a { padding: 0 1.25rem 1.35rem; }
.faq__a p { color: var(--on-dark-soft); font-size: var(--t-sm); max-width: 70ch; }
.faq__a a { color: var(--signal); text-decoration: underline; text-underline-offset: 3px; }

/* ===========================================================
   16. Pilares, láminas y sección de solapamiento
   =========================================================== */
.pillar {
  position: relative;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.75rem 1.35rem 1.5rem;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.pillar:hover { border-color: var(--signal); transform: translateY(-4px); }
.pillar__n {
  display: block;
  font-family: var(--display);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--signal);
  margin-bottom: 0.75rem;
}
.pillar h3 { margin-bottom: 0.6rem; }
.pillar p { font-size: var(--t-sm); color: var(--on-dark-soft); }
.pillar__links { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.1rem; }
.pillar__links a {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  color: var(--on-dark-soft);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pillar__links a:hover { border-color: var(--signal); color: var(--fg); }

.plate-band { margin-block: clamp(1.5rem, 4vw, 3rem); }
.plate { margin: 0; position: relative; }
.plate img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.plate figcaption {
  display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem;
  padding: 0.85rem var(--gut) 0;
  max-width: 82rem; margin-inline: auto;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}
.plate figcaption span:first-child { color: var(--signal); }

/* Sección con fotos solapadas y columna de texto desplazada */
.overlap { position: relative; overflow: hidden; background: var(--ink); }
.overlap__media { position: relative; min-height: 320px; }
.overlap__media img { height: auto; border-radius: var(--r); object-fit: cover; }
.overlap__media img:first-child { width: 78%; aspect-ratio: 4 / 3; }
.overlap__media img:last-child {
  position: absolute; right: 0; bottom: -1.5rem;
  width: 46%; aspect-ratio: 3 / 2;
  border: 4px solid var(--ink);
}
.overlap__text { margin-top: 3.5rem; }
@media (min-width: 62rem) {
  .overlap__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 4rem; align-items: center; }
  .overlap__text { margin-top: 0; }
  .overlap__media { min-height: 460px; }
}

/* ===========================================================
   17. Pie
   =========================================================== */
.social-grid { border-top: 1px solid var(--line); }
.social-grid ul { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.social-grid li { flex: 1 1 33.333%; border-right: 1px solid var(--line); }
.social-grid li:nth-child(3n) { border-right: 0; }
@media (min-width: 48rem) {
  .social-grid ul { flex-wrap: nowrap; }
  .social-grid li { flex: 1 1 0; border-right: 1px solid var(--line); }
  .social-grid li:nth-child(3n) { border-right: 1px solid var(--line); }
  .social-grid li:last-child { border-right: 0; }
}
.social-grid a {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 78px;
  overflow: hidden;
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--fg);
  transition: color var(--dur) var(--ease);
}
@media (min-width: 62rem) { .social-grid a { height: 110px; font-size: 1.35rem; } }
.social-grid a::before {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 0; height: 100%;
  background: var(--signal);
  transition: width var(--dur-l) var(--ease);
}
.social-grid a span { position: relative; z-index: 1; }
.social-grid a:hover { color: #000; }
.social-grid a:hover::before { width: 100%; }

.site-footer { background: var(--black); padding-block: 0 0; }
.site-footer h2 {
  font-size: clamp(2.2rem, 7vw, 4.5rem);
  font-weight: 700;
  color: var(--fg);
}
.footer-name {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 1.15rem;
  letter-spacing: 0.16em;
  color: var(--signal);
  margin-top: 0.4rem;
}
.footer-bio { color: var(--on-dark-soft); font-size: var(--t-sm); max-width: 46ch; margin-top: 1rem; }
.footer-grid { display: grid; gap: 2.5rem; padding-block: clamp(3rem, 6vw, 4.5rem); }
@media (min-width: 48rem) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; } }
.site-footer h3 {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  font-family: var(--sans);
  color: var(--signal);
  margin-bottom: 1rem;
}
.footer-list { display: grid; gap: 0.6rem; }
.footer-list a { color: var(--on-dark-soft); font-size: var(--t-sm); transition: color var(--dur) var(--ease); }
.footer-list a:hover { color: var(--signal); }
.colophon {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between;
  padding-block: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}

/* ===========================================================
   18. Aparición al hacer scroll y paralaje
   =========================================================== */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
html:not(.js) .reveal { opacity: 1; transform: none; }

[data-parallax] { will-change: transform; }

/* ===========================================================
   19. Movimiento reducido e impresión
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .hero__media img { animation: none; }
  .nameband--b { display: none; }
  .marquee__track { animation: none; }
  .timeline__line { height: 100%; transition: none; }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .nav-panel, .nav-scrim, .next-section, .showcase__rows, .social-grid { display: none !important; }
  body { background: #fff; color: #000; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ===========================================================
   20. Añadidos: claim, compensación de la cabecera fija
   =========================================================== */
.claim {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.4rem, 9vw, 6rem);
  line-height: 0.9;
  color: #000;
  max-width: 18ch;
  margin-inline: auto;
}
.claim__cite {
  margin-top: 1.25rem;
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #000;
}

/* La cabecera es fija: cualquier página que no arranque con una
   portada necesita el hueco, o el título se queda debajo del menú. */
main > :first-child:not(.hero):not(.hero--page):not(.tiles) { padding-top: calc(84px + var(--sect)); }
@media (min-width: 62rem) {
  main > :first-child:not(.hero):not(.hero--page):not(.tiles) { padding-top: calc(118px + var(--sect)); }
}

/* Portada de página interior sobre fondo negro con foto lateral */
.hero--page .hero__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 62rem) { .hero--page .hero__grid { grid-template-columns: 1.15fr 0.85fr; gap: 3.5rem; } }
.hero--page .hero__grid--top { align-items: start; }
.hero__portrait { margin: 0; position: relative; }
.hero__portrait img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r);
  filter: grayscale(0.35);
}
.hero__portrait figcaption {
  margin-top: 0.85rem;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
}

/* Cinta de color del sistema anterior: aquí, una regla roja */
.ribbon { display: flex; gap: 4px; margin-top: clamp(2rem, 5vw, 3.5rem); }
.ribbon span { height: 4px; flex: 1; background: var(--line); }
.ribbon span:first-child { background: var(--signal); flex: 2; }

/* Subtítulo dentro del H1: mantiene la entidad completa en el encabezado
   sin romper la escala del rótulo grande. */
.h1-sub {
  display: block;
  margin-top: 0.35em;
  font-size: clamp(0.95rem, 2.6vw, 1.5rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--signal);
}

/* ===========================================================
   21. Movimiento: progreso de scroll, entradas escalonadas y vídeo
   Todo lo de aquí se apaga entero con prefers-reduced-motion
   (la regla está al final de la hoja) y nada de esto oculta
   contenido de forma permanente: sin JS, todo queda visible.
   =========================================================== */

/* Barra de progreso de lectura */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 3px;
  z-index: 300;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
  will-change: transform;
}

/* La portada se desvanece al salir: el rótulo no compite con la
   sección siguiente mientras se desplaza. */
.hero__names, .next-section {
  opacity: var(--hero-fade, 1);
  transform: translateY(calc((1 - var(--hero-fade, 1)) * -28px));
}

/* Entradas escalonadas: los hijos entran uno detrás de otro */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
}
.reveal-stagger.is-in > * { opacity: 1; transform: none; }
.reveal-stagger.is-in > *:nth-child(1) { transition-delay: 0.04s; }
.reveal-stagger.is-in > *:nth-child(2) { transition-delay: 0.10s; }
.reveal-stagger.is-in > *:nth-child(3) { transition-delay: 0.16s; }
.reveal-stagger.is-in > *:nth-child(4) { transition-delay: 0.22s; }
.reveal-stagger.is-in > *:nth-child(5) { transition-delay: 0.28s; }
.reveal-stagger.is-in > *:nth-child(6) { transition-delay: 0.34s; }
.reveal-stagger.is-in > *:nth-child(7) { transition-delay: 0.40s; }
.reveal-stagger.is-in > *:nth-child(8) { transition-delay: 0.46s; }
.reveal-stagger.is-in > *:nth-child(9) { transition-delay: 0.52s; }
.reveal-stagger.is-in > *:nth-child(n+10) { transition-delay: 0.58s; }
html:not(.js) .reveal-stagger > * { opacity: 1; transform: none; }

/* Variantes de entrada */
.reveal--left  { transform: translateX(-32px); }
.reveal--right { transform: translateX(32px); }
.reveal--scale { transform: scale(0.94); }
.reveal--left.is-in, .reveal--right.is-in, .reveal--scale.is-in { transform: none; }

/* Título que sube por dentro de su propia caja */
.rise { display: block; overflow: hidden; padding-top: 0.28em; margin-top: -0.28em; }
.rise > span {
  display: block;
  transform: translateY(105%);
  transition: transform 0.8s var(--ease);
}
.rise.is-in > span, html:not(.js) .rise > span { transform: none; }

/* ---------- Vídeo dentro de las tarjetas ---------- */
.tile video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.7s var(--ease);
}
.tile.is-playing video { opacity: 1; }
.tile.is-playing img { filter: saturate(0); transform: scale(1.06); }

/* Marca discreta de que la caja lleva vídeo */
.tile[data-video] .tile__badge {
  position: absolute;
  top: 16px; left: 20px; z-index: 5;
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 10px rgba(0,0,0,0.7);
}
.tile[data-video] .tile__badge::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--signal);
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } }
@media (min-width: 75rem) { .tile[data-video] .tile__badge { top: 24px; left: 30px; } }

/* ---------- Banda de vídeo a ancho completo ---------- */
.videoband {
  position: relative;
  overflow: hidden;
  min-height: 78svh;
  display: flex;
  align-items: flex-end;
  /* Oscuro explícito, no por alias: el vídeo es preload="none" y hasta que carga
     el fondo sería el de la página. Su texto es blanco: daba 1,04:1. */
  background: var(--coal);
}
.videoband__media { position: absolute; inset: 0; z-index: 0; }
.videoband video, .videoband .videoband__poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
}
.videoband video { opacity: 0; transition: opacity 0.9s var(--ease); }
.videoband.is-playing video { opacity: 1; }
.videoband__media::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.22) 38%, rgba(0,0,0,0.92) 100%);
}

/* En móvil, un vídeo apaisado dentro de una banda altísima solo enseña un
   recorte sin sentido: pasa a ser una caja 16:9 con el texto debajo. */
@media (max-width: 47.99rem) {
  .videoband { display: block; min-height: 0; }
  .videoband__media { position: relative; inset: auto; aspect-ratio: 16 / 9; }
  .videoband video, .videoband .videoband__poster { object-position: 50% 45%; }
  .videoband__media::after {
    background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.05) 45%, rgba(0,0,0,0.85) 100%);
  }
  .videoband__inner { padding-block: var(--sect-s) var(--sect); }
}
.videoband__inner {
  position: relative; z-index: 2;
  width: 100%;
  padding-block: var(--sect) var(--sect);
}
.videoband h2 { font-weight: 700; font-size: clamp(2.4rem, 8vw, 5.5rem); }
.videoband p {
  max-width: 44ch;
  margin: 1rem 0 1.75rem;
  color: #fff;
  font-size: var(--t-md);
}
.videoband__meta {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  margin-top: 1.75rem;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal);
}

/* ---------- Cifras que cuentan ---------- */
.stat dd .num { font-variant-numeric: tabular-nums; }

/* ===========================================================
   22. Móvil: objetivos táctiles, holguras y detalles finos
   Medido con el dedo en mente: 44 px de alto mínimo en todo lo
   que se pulsa y no sea un enlace dentro de un párrafo.
   =========================================================== */
.pillar__links a { padding: 0.55rem 0.9rem; }

@media (max-width: 47.99rem) {
  .btn { padding-block: 0.55rem; padding-right: 2.8rem; }
  a.arrow { padding-block: 0.55rem; }
  .btn--ghost { padding: 0.85rem 1.6rem 0.7rem; }

  .footer-list a { display: inline-flex; align-items: center; min-height: 44px; }
  .nav-panel__meta { gap: 0.25rem 1.25rem; }
  .nav-panel__meta a { display: inline-flex; align-items: center; min-height: 44px; }
  .wordmark { padding: 0.35rem 0; }

  /* La ficha se lee mejor con el dato pegado a su etiqueta */
  .ficha__row { padding: 0.95rem 0; }
  .ficha dd { font-size: var(--t-base); }

  /* Cifras: dos columnas muy estrechas partían los números */
  .stat { padding: 1.35rem 1rem 1.25rem; }
  .stat dd { font-size: clamp(1.9rem, 9vw, 2.6rem); }

  /* Carriles: que se vea que hay más a la derecha */
  .tiles__track { grid-auto-columns: 82%; }
  .rail { grid-auto-columns: 86%; }

  /* Bloques de la línea de tiempo: menos aire perdido */
  .tl-block { padding-top: 3.25rem; gap: 1rem; }
  .tl-half img { aspect-ratio: 4 / 3; }

  /* El pie no necesita tres columnas apretadas */
  .colophon { gap: 0.35rem; }
}

/* Pantallas de 360 px o menos: el rótulo del pie y los titulares
   grandes se desbordaban en palabras largas */
@media (max-width: 22.5rem) {
  .site-footer h2 { font-size: 2rem; }
  .wordmark { font-size: 0.95rem; }
  .nav-panel__list > a { font-size: 2.1rem; }
  .videoband h2, .showcase__text h2 { font-size: 2.1rem; }
  h1, h2 { hyphens: auto; }
}

/* Los vídeos nunca se llevan el sitio por delante */
video { max-width: 100%; }

/* ===========================================================
   23. Línea de tiempo en móvil
   La guía centrada funciona en escritorio, donde los bloques se
   alternan a izquierda y derecha. En un móvil no hay dos columnas:
   la línea se queda cruzando por encima de las fotos y del texto.
   Aquí pasa a raíl izquierdo, con el año marcado sobre la guía.
   =========================================================== */
@media (max-width: 47.99rem) {
  .timeline { padding-left: 2.5rem; padding-top: 0.5rem; }
  .timeline__line { left: 9px; transform: none; }

  .tl-block { padding-top: 2.6rem; gap: 0.9rem; }
  .tl-block:first-of-type { padding-top: 1.25rem; }

  /* El año deja de flotar centrado y se apoya en el raíl */
  .tl-block h3 {
    position: static;
    transform: none;
    display: block;
    margin: 0 0 0 -1rem;
    padding: 0;
    background: none;
    text-align: left;
    font-size: clamp(2rem, 9vw, 2.6rem);
    line-height: 1;
  }
  .tl-block h3::before, .tl-block h3::after { content: none; }

  /* Punto rojo sobre la guía, a la altura del año */
  .tl-block::before {
    content: "";
    position: absolute;
    left: -2.25rem;
    top: 2.85rem;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--signal);
    box-shadow: 0 0 0 5px var(--black);
    z-index: 3;
  }
  .tl-block:first-of-type::before { top: 1.5rem; }

  /* Todo el contenido alineado a la izquierda: en una columna estrecha,
     centrar el texto lo vuelve ilegible */
  .tl-half { width: 100%; margin-inline: 0; align-items: stretch; }
  .tl-half--text { text-align: left; padding: 0; }
  .tl-half--text h4 { font-size: 1.35rem; }
  .tl-half--text p { margin-top: 0.5rem; }
  .tl-blur { display: none; }
}

/* ===========================================================
   18. Newsletter «Primera Mano» (/newsletter/, 19/09/2026)
   Solo lo que no existía: la figura del documento, las fuentes,
   el «por qué importa», la cifra y las viñetas dentro de .prose.
   =========================================================== */
.prose ul { margin: 0 0 1.15em; display: grid; gap: 0.7em; }
.prose li {
  position: relative;
  padding-left: 1.1rem;
  color: var(--on-dark-soft);
  font-size: var(--t-md);
}
.prose li::before {
  content: "";
  position: absolute; left: 0; top: 0.62em;
  width: 6px; height: 6px;
  background: var(--signal);
}
.doc { margin: 0.5rem 0 1.75rem; }
.doc img {
  display: block;
  width: 100%; height: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
}
.doc figcaption, .fuente {
  display: block;
  margin-top: 0.7rem;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}
.fuente a { color: var(--fg); border-bottom: 1px solid var(--signal); }
.fuente a:hover { color: var(--signal); }
.importa {
  border-left: 3px solid var(--signal);
  padding-left: clamp(1rem, 3vw, 1.5rem);
  margin: 1.75rem 0 0;
}
.prose .importa p { color: var(--on-dark); }
.pieza { padding: 1.4rem 0; border-bottom: 1px solid var(--line); }
.pieza:first-child { border-top: 1px solid var(--line); }
.pieza h3 { font-size: var(--d-4); line-height: 1.15; margin-bottom: 0.6rem; }
.pieza p { color: var(--on-dark-soft); font-size: var(--t-md); }
.cifra {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.6rem, 7vw, 4.5rem);
  line-height: 0.9;
  color: var(--fg);
  margin-bottom: 1rem;
}
/* Dentro de .prose, `.prose p` pisa al epígrafe y a la línea de fuente (0,1,1 > 0,1,0):
   salían grises y a tamaño de párrafo. Se recupera su tipografía con más especificidad. */
.prose .kicker { color: var(--signal); font-size: var(--t-xs); margin-bottom: 0.9rem; }
.prose .fuente { font-size: var(--t-xs); color: var(--on-dark-soft); margin: 0.7rem 0 0; }

/* ===========================================================
   24. Apariciones en televisión (carril con contador)
       La referencia es el carrusel de eldiariodelpoder.com. Se trae
       la anatomía —columna de título a la izquierda, carril de fichas
       a la derecha, contador y flechas al pie— pero sobre el lienzo
       oscuro: la banda clara del sitio sigue siendo una sola, la de
       la portada. Y no hay botón de reproducción: no existe un vídeo
       al que llevar, y un triángulo que no reproduce nada es una
       promesa falsa (misma regla que las cifras que cuentan).
   =========================================================== */
.tvrail { display: grid; gap: clamp(1.75rem, 4vw, 2.5rem); }
@media (min-width: 62rem) {
  .tvrail {
    /* 20rem, no 16: en versales condensadas «APARICIONES» es una sola
       palabra más ancha que 16rem y .rise, que recorta su caja, se comía
       la S final. */
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
  }
}
.tvrail__head h2 { max-width: 11ch; }
.tvrail__head .head__aside { margin-top: 1rem; }
.tvrail__head a.arrow { margin-top: 1.5rem; }
@media (min-width: 62rem) {
  .tvrail__head a.arrow {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
    width: 100%;
  }
}

/* El carril deja asomar la ficha siguiente: es lo que dice que hay más. */
.rail--tv { grid-auto-columns: 82%; }
@media (min-width: 48rem) { .rail--tv { grid-auto-columns: 58%; } }
@media (min-width: 62rem) { .rail--tv { grid-auto-columns: 66%; } }

.tvcard {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--ink-2);
  border: 1px solid var(--line);
  scroll-snap-align: start;
  transition: border-color var(--dur) var(--ease);
}
.tvcard img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: grayscale(0.4);
  transition: filter var(--dur-l) var(--ease), transform var(--dur-l) var(--ease);
}
.tvcard:hover { border-color: #3A3A3A; }
.tvcard:hover img { filter: grayscale(0); transform: scale(1.04); }

/* El degradado no es decoración: es lo que sostiene el contraste del
   texto blanco sobre una imagen que no controlamos. */
.tvcard figcaption {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  gap: 0.5rem;
  padding: clamp(3rem, 8vw, 4.5rem) clamp(1.1rem, 3vw, 1.75rem) clamp(1.1rem, 3vw, 1.5rem);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.94), rgba(0, 0, 0, 0.8) 42%, rgba(0, 0, 0, 0));
}
.tvcard__label {
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg);
}
.tvcard__head {
  font-family: var(--sans);
  font-size: var(--t-lg);
  font-weight: 500;
  line-height: 1.25;
  color: var(--fg);
  text-wrap: balance;
}

.tvrail__foot {
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
/* El contador se queda en móvil, donde .rail-nav se oculta: al deslizar
   es la única pista de cuántas fichas quedan. */
.tvrail__count {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  color: var(--on-dark-soft);
}

/* ===========================================================
   25. Recorte destacado de prensa (la pieza firmada)
       Va sobre la rejilla de apariciones, no dentro: es la única
       que lleva la captura del medio, y esa es la diferencia entre
       una mención y una firma.
   =========================================================== */
.presslead {
  display: grid;
  gap: 0;
  margin-bottom: 0.75rem;
  color: inherit;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease);
}
@media (min-width: 48rem) {
  .presslead {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    align-items: center;
  }
}
.presslead:hover { border-color: #3A3A3A; }
.presslead__media {
  display: block;
  overflow: hidden;
  background: var(--ink-2);
}
.presslead__media img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform var(--dur-l) var(--ease);
}
.presslead:hover .presslead__media img { transform: scale(1.02); }
.presslead__body {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.presslead__outlet {
  font-family: var(--display);
  font-size: var(--d-4);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--signal);
}
.presslead__head {
  font-family: var(--sans);
  font-size: var(--t-lg);
  font-weight: 500;
  line-height: 1.3;
  color: var(--fg);
}
.presslead__sub {
  font-size: var(--t-base);
  color: var(--on-dark-soft);
}
/* La firma es el dato que justifica la ficha: va en blanco, no en gris. */
.presslead__by {
  margin-top: 0.3rem;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
}
.presslead__date {
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}

/* ══════════════════════════════════════════════════════════════════════
   19. REBRANDING 29/09/2026 — anatomía de tonyrobbins.com
   Se toma la técnica, no los activos: ni sus tipografías, ni sus colores,
   ni una sola imagen suya. Lo que se copia es la coreografía de
   credibilidad: héroe declarativo → prueba con credencial → cifras con
   fuente → rejilla de pilares → pie temático.
   Los carruseles de la referencia se sustituyen por rejillas estáticas:
   lo que exige interacción se extrae peor por buscadores y modelos.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Héroe a sangre ─────────────────────────────────────────────────── */
.rhero {
  position: relative;
  min-height: min(86vh, 760px);
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--coal);
  isolation: isolate;
}
.rhero__media { position: absolute; inset: 0; z-index: -2; }
.rhero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Velo: garantiza 4,5:1 del texto blanco sobre cualquier zona de la foto */
.rhero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(6,6,6,0.94) 0%, rgba(6,6,6,0.72) 34%, rgba(6,6,6,0.22) 68%, rgba(6,6,6,0.34) 100%),
    linear-gradient(to right, rgba(6,6,6,0.66) 0%, rgba(6,6,6,0.10) 62%);
}
.rhero__body {
  position: relative;
  padding: var(--sect) var(--gut) clamp(2.5rem, 6vw, 4.5rem);
  max-width: 1280px; margin-inline: auto; width: 100%;
}
.rhero__kicker {
  font-family: var(--display); font-weight: 600;
  letter-spacing: var(--tracking-label, 0.12em); text-transform: uppercase;
  font-size: var(--t-sm); color: #FFFFFF; opacity: 0.92; margin: 0 0 1rem;
}
.rhero h1 {
  font-family: var(--sans);
  font-size: var(--r-hero);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: #FFFFFF;
  margin: 0 0 1.1rem;
  max-width: 19ch;
  text-wrap: balance;
}
.rhero__sub {
  font-size: var(--t-lg); line-height: 1.5; color: #EDEAE6;
  margin: 0 0 2rem; max-width: 52ch;
}
.rhero__cta { display: flex; flex-wrap: wrap; gap: 0.85rem 1rem; align-items: center; }

/* Botón macizo, el equivalente al "Get Tickets Now" de la referencia.
   Tinta NEGRA sobre el rojo: blanco sobre #F04438 da 3,8:1 y suspende. */
.cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 52px; padding: 0.9rem 1.6rem;
  background: var(--accent-bright); color: #000;
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: var(--t-sm);
  border: 0; border-radius: var(--pill); text-decoration: none; cursor: pointer;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.cta:hover { background: #FF5B4F; transform: translateY(-2px); }
.cta--ghost {
  background: transparent; color: #FFFFFF;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.55);
}
.cta--ghost:hover { background: rgba(255,255,255,0.12); color: #FFFFFF; }
.band .cta--ghost, .band--tint .cta--ghost {
  color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--fg);
}
.band .cta--ghost:hover, .band--tint .cta--ghost:hover { background: var(--fg); color: var(--surface); }

/* ── Prueba social con credencial ───────────────────────────────────── */
.proof { display: grid; gap: 1.75rem 1.25rem; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 40rem) { .proof { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 64rem) { .proof { grid-template-columns: repeat(5, minmax(0,1fr)); } }
.proof__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.7rem; }
.proof__face {
  width: 84px; height: 84px; border-radius: 50%; overflow: hidden;
  background: var(--surface-2); flex: none;
  box-shadow: 0 0 0 1px var(--rule);
}
.proof__face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proof__name { font-weight: 700; font-size: var(--t-md); color: var(--fg); line-height: 1.25; }
.proof__cred { font-size: var(--t-sm); color: var(--fg-soft); line-height: 1.4; text-wrap: balance; }

/* ── Cifras con fuente ──────────────────────────────────────────────── */
.stats { display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 56rem) { .stats { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.stat__n {
  font-family: var(--sans); font-size: var(--r-1); font-weight: 800;
  letter-spacing: -0.04em; line-height: 1; color: var(--fg); display: block;
}
.stat__label { font-size: var(--t-md); color: var(--fg); margin: 0.55rem 0 0.3rem; line-height: 1.35; }
.stat__src { font-size: var(--t-xs); color: var(--fg-soft); line-height: 1.4; }

/* ── Rejilla de pilares ─────────────────────────────────────────────── */
.pillars { display: grid; gap: 1rem; grid-template-columns: repeat(1, minmax(0,1fr)); }
@media (min-width: 34rem) { .pillars { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 60rem) { .pillars { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.pillar {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r);
  overflow: hidden; min-height: 100%;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.pillar:hover { border-color: var(--accent); transform: translateY(-3px); }
.pillar__media { aspect-ratio: 16 / 9; background: var(--surface-2); overflow: hidden; }
.pillar__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pillar__body { padding: 1.35rem 1.35rem 1.5rem; display: flex; flex-direction: column; gap: 0.45rem; flex: 1; }
.pillar__t { font-size: var(--t-lg); font-weight: 700; color: var(--fg); line-height: 1.25; }
.pillar__d { font-size: var(--t-sm); color: var(--fg-soft); line-height: 1.5; flex: 1; }
.pillar__go {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; font-size: var(--t-xs); color: var(--accent);
  display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.4rem;
}
.pillar:hover .pillar__go svg { transform: translateX(4px); }
.pillar__go svg { transition: transform var(--dur) var(--ease); }

/* ── Pie temático: muchos enlaces internos, bueno para SEO ──────────── */
.fgrid { display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 48rem) { .fgrid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.fcol h3 {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; font-size: var(--t-xs); color: var(--fg);
  margin: 0 0 0.9rem;
}
.fcol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.fcol a {
  color: var(--fg-soft); text-decoration: none; font-size: var(--t-sm);
  line-height: 1.45; display: inline-block; padding: 2px 0;
  transition: color var(--dur) var(--ease);
}
.fcol a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .cta, .pillar, .pillar__go svg { transition: none; }
  .cta:hover, .pillar:hover { transform: none; }
}

/* Texto solo para lectores de pantalla (no existía: lo pide el h2 de las cifras,
   que visualmente sobra pero la sección necesita para su nombre accesible). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* El epígrafe del carril vive sobre la foto de la placa, no sobre la página:
   ahí la tinta es blanca. Fuera de la placa hereda var(--fg), que es oscura. */
.press__plate .press__outlet { color: #fff; }

/* El indicador de scroll va centrado y absoluto al pie del héroe: en pantallas
   estrechas se montaba encima del segundo botón. Los botones mandan; el
   indicador es decorativo, así que se retira hasta que hay sitio de sobra. */
.rhero .next-section { display: none; }
@media (min-width: 60rem) {
  .rhero .next-section { display: inline-flex; }
}