/* =========================================================================
   Navegación y acabado editorial · v2 · 14-08-2026
   Se carga DESPUÉS de styles.css y styles-extended.css: solo añade y afina.
   Convención tomada de 1-WEB-LISTA-PARA-SUBIR (eclipse / siete-vueltas):
   nombres internos sencillo|completo, llave mirada:nivel, píldoras de 999px.
   ========================================================================= */

@font-face{font-family:"Instrument Sans Local";font-style:normal;font-weight:400 700;
  font-stretch:75% 100%;font-display:swap;
  src:url("fonts/instrument-sans-latin.woff2") format("woff2")}
@font-face{font-family:"Newsreader Local";font-style:normal;font-weight:300 800;
  font-display:swap;src:url("fonts/newsreader-latin.woff2") format("woff2")}
@font-face{font-family:"Newsreader Local";font-style:italic;font-weight:300 800;
  font-display:swap;src:url("fonts/newsreader-latin-italic.woff2") format("woff2")}

:root{
  --grupo-anc:74.75%; --grupo-der:3%;
  --lmt-sans:"Instrument Sans Local",ui-sans-serif,-apple-system,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  --lmt-serif:"Newsreader Local",ui-serif,"Iowan Old Style","Palatino Linotype",Georgia,serif;
  --lmt-ink:#f6f3ed; --lmt-ink-2:#d1d4dc; --lmt-muted:#9299a8;
  --lmt-rule:rgb(178 193 220 / .18);
  --lmt-acento:#ffb34c;
}
/* Franja que la barra inferior reserva al texto. Se declara ANTES que las
   medias queries de pantalla corta, o el valor base las anularia y los 62 y
   56 px nunca llegarian a aplicarse. */
:root{ --banda-controles:74px }

html[data-nivel="sencillo"]{--modo-ui:#ffb347;--modo-ui-2:#dd8c2e}
html[data-nivel="completo"]{--modo-ui:#9fb2ff;--modo-ui-2:#7189e8}

/* Los dos niveles conviven en el HTML; solo uno está en el flujo. */
html[data-nivel="sencillo"] [data-nivel="completo"],
html[data-nivel="completo"] [data-nivel="sencillo"]{display:none!important}
/* Sin JavaScript no hay resolvedor: se lee el Profundizar, que es el texto
   canónico y auditado, y las gemelas Esencial quedan fuera del flujo. */
html:not([data-nivel]) [data-nivel="sencillo"]{display:none!important}

/* Velo del cambio de nivel. La imagen no se toca —los dos niveles comparten
   pista y reloj, así que la posición se conserva sola—; lo que se funde es la
   capa de lectura: un velo breve baja, el nivel cambia debajo, el velo sube.
   Patrón de siete-vueltas: capturar → cambiar → sincronizar → soltar. */
.velo-nivel{
  position:absolute; inset:0; z-index:6; pointer-events:none;
  background:rgb(2 4 9 / .96); opacity:0;
  transition:opacity .26s ease;
}
.velo-nivel.activo{opacity:1}
@media (prefers-reduced-motion:reduce){ .velo-nivel{transition:none} }

/* -------------------------------------------------------------------------
   1 · ACABADO TIPOGRÁFICO
   El titular pasa a la serif de la casa; el aparato (antetítulo, etiqueta,
   cifras, fuente) se queda en la sans. Es el contraste que separa una página
   de producto de una página editorial.
   ------------------------------------------------------------------------- */
html[data-extended="true"] .story-unit h2{
  font-family:var(--lmt-serif);
  font-weight:600;
  letter-spacing:-.018em;
  font-feature-settings:"kern" 1,"liga" 1,"onum" 0;
  text-wrap:balance;
}
html[data-extended="true"] .story-prose h2{font-weight:620}
html[data-extended="true"] .story-kicker,
html[data-extended="true"] .evidence,
html[data-extended="true"] .story-source,
html[data-extended="true"] .story-metrics dd{
  font-family:var(--lmt-sans);
  font-feature-settings:"kern" 1;
}
html[data-extended="true"] .story-kicker{letter-spacing:.15em}
/* Cifras: versalitas tabulares para que no bailen de una tarjeta a otra. */
html[data-extended="true"] .story-metrics dt,
html[data-extended="true"] .verdict-metrics strong{
  font-family:var(--lmt-sans);
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
}
/* Filete más fino y frío: menos plástico, más papel. */
html[data-extended="true"] .story-metrics > div{
  border-top-width:1px;
  border-top-color:rgb(214 228 240 / .14);
}
html[data-extended="true"] .story-source{
  color:rgb(198 210 224 / .52);
  letter-spacing:.055em;
}
/* La cita de cierre en cursiva serif: cierra el artículo con voz, no con dato. */
html[data-extended="true"] .story-verdict{
  font-family:var(--lmt-serif);
  font-style:italic;
  font-weight:500;
  letter-spacing:-.005em;
}

/* -------------------------------------------------------------------------
   3 · BARRA FIJA: volver al menú + conmutador de nivel
   PERMANECE ABAJO DURANTE TODO EL RECORRIDO (16-08-2026). El conmutador de
   nivel tiene que estar siempre al alcance, así que dejó de aparecer y
   desaparecer. Solo se retira sobre la portada quieta, para que el primer
   golpe de vista sea limpio.
   La contrapartida: TODO el texto le cede su franja de forma permanente
   mediante --banda-controles. No se puede subir el alto de la barra sin
   subir esa variable, o la barra empezará a comerse los últimos renglones.
   ------------------------------------------------------------------------- */
.controles{
  /* absolute, no fixed: se ancla al borde inferior de .viewport
     (la pantalla del telefono), no al de la ventana del navegador. */
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  display:flex;justify-content:center;align-items:flex-end;gap:7px;
  padding:36px calc(12px + env(safe-area-inset-right,0px))
          calc(11px + env(safe-area-inset-bottom,0px))
          calc(12px + env(safe-area-inset-left,0px));
  background:linear-gradient(180deg,rgba(4,6,11,0) 0,rgba(4,6,11,.80) 46%,rgba(4,6,11,.96) 100%);
  pointer-events:none;
  opacity:0;transform:translateY(8px);
  transition:opacity .5s ease,transform .5s ease;
}
.controles.visible{opacity:1;transform:none}
.controles.visible > *{pointer-events:auto}

.volver-portada{
  display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 13px;
  color:var(--lmt-ink);text-decoration:none;
  background:linear-gradient(145deg,rgb(14 18 31 / .96),rgb(6 8 17 / .96));
  border:1px solid var(--lmt-rule);border-radius:999px;
  font:650 11.5px/1 var(--lmt-sans);letter-spacing:.01em;
  box-shadow:inset 0 1px rgb(255 255 255 / .06),0 14px 38px rgb(0 0 0 / .34);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.volver-portada svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.volver-portada:focus-visible{outline:2px solid var(--lmt-acento);outline-offset:3px}

.conmutador{
  display:flex;
  background:linear-gradient(145deg,rgb(14 18 31 / .96),rgb(6 8 17 / .94));
  border:1px solid rgb(159 178 255 / .30);border-radius:999px;
  box-shadow:inset 0 1px rgb(255 255 255 / .055),0 14px 38px rgb(0 0 0 / .34);
  -webkit-backdrop-filter:blur(14px) saturate(120%);backdrop-filter:blur(14px) saturate(120%);
}
.conmutador button{
  font:600 11.5px/1 var(--lmt-sans);color:var(--lmt-muted);
  background:transparent;border:0;border-radius:999px;padding:0 13px;
  min-height:42px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;
}
.conmutador button:hover:not([disabled]){color:var(--lmt-ink)}
.conmutador button[aria-pressed="true"][data-val="completo"]{
  background:linear-gradient(135deg,#dce4ff,#9fb2ff 56%,#7189e8);color:#081028;font-weight:660;
  box-shadow:inset 0 1px rgb(255 255 255 / .50),0 6px 18px rgb(89 111 211 / .28);
}
.conmutador button[aria-pressed="true"][data-val="sencillo"]{
  background:linear-gradient(135deg,#ffda98,#ffb347 58%,#d9872c);color:#180e02;font-weight:660;
}
.conmutador button[disabled]{opacity:.46;cursor:not-allowed}
.conmutador button:focus-visible{outline:2px solid var(--modo-ui);outline-offset:-3px}
.conmutador .pronto{
  font-size:8.5px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;
  padding:2px 5px;border-radius:5px;
  color:#0e1220;background:rgb(146 153 168 / .62);
}
@media (max-width:352px){
  .volver-portada span{display:none}
  .volver-portada{width:42px;padding:0;justify-content:center}
  .conmutador button{padding:0 10px;font-size:11px}
}

.oculto-visual{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

@media (prefers-reduced-motion:reduce){
  .controles{transition:none}
}

/* -------------------------------------------------------------------------
   4 · BORDE INFERIOR DEL METRAJE
   El motor mide dónde termina de verdad la imagen —no dónde termina el
   elemento, que son cosas distintas en cuanto la pantalla es más alta que
   9:16— y lo publica en --borde-fin. Ahí se difumina. En las escenas donde el
   máster ya reserva negro la máscara cae sobre negro y no hace nada, así que
   no hace falta encenderla y apagarla por tiempos.
   ------------------------------------------------------------------------- */
html[data-extended="true"][data-borde="difuminado"] .film-video{
  --borde-caida: 104px;
  -webkit-mask-image:linear-gradient(to bottom,
    #000 0,
    #000 calc(var(--borde-fin, 100%) - var(--borde-caida)),
    rgba(0,0,0,.62) calc(var(--borde-fin, 100%) - var(--borde-caida) * .52),
    rgba(0,0,0,.18) calc(var(--borde-fin, 100%) - var(--borde-caida) * .16),
    transparent var(--borde-fin, 100%));
  mask-image:linear-gradient(to bottom,
    #000 0,
    #000 calc(var(--borde-fin, 100%) - var(--borde-caida)),
    rgba(0,0,0,.62) calc(var(--borde-fin, 100%) - var(--borde-caida) * .52),
    rgba(0,0,0,.18) calc(var(--borde-fin, 100%) - var(--borde-caida) * .16),
    transparent var(--borde-fin, 100%));
}
@media (max-height: 720px){
  html[data-extended="true"][data-borde="difuminado"] .film-video{ --borde-caida: 76px; }
}

/* -------------------------------------------------------------------------
   5 · PORTADA: TÍTULO ARRIBA, ENTRADILLA AL PIE
   Elon ocupa del 47 % al 72 % de la altura en la columna izquierda. La
   entradilla estaba a 30 px y le caía encima entera (28 %-67 %). Ahora el
   bloque de título se queda arriba, la entradilla se ancla abajo justo por
   encima de la barra, y la banda central queda despejada.
   ------------------------------------------------------------------------- */
html[data-extended="true"] .mobile-cover{
  justify-content:space-between;
  background:
    linear-gradient(90deg, rgb(1 8 13 / .58) 0%, rgb(2 10 16 / .30) 56%, rgb(2 9 15 / .03) 86%),
    /* cortinilla inferior: al arrancar, ahí abajo hay nube blanca */
    linear-gradient(180deg, rgb(2 6 12 / 0) 52%, rgb(2 6 12 / .58) 74%,
                            rgb(2 6 12 / .88) 88%, rgb(2 6 12 / .96) 100%);
}
html[data-extended="true"] .mobile-cover__copy{ flex:0 0 auto; }

html[data-extended="true"] .mobile-cover__intro{
  flex:0 0 auto;
  margin:0 0 74px;            /* deja libres los 91 px de la barra */
  width:100%;
  max-width:34ch;
  font-family:var(--lmt-sans);
  font-size:clamp(17px, 5.1vw, 20px);
  font-weight:560;
  line-height:1.26;
  letter-spacing:-.012em;
  color:rgb(255 255 255 / .95);
  text-wrap:pretty;
}
/* Pantallas cortas: menos cuerpo y menos separación con la barra. */
@media (max-height:720px){
  html[data-extended="true"] .mobile-cover__intro{
    margin-bottom:64px;
    font-size:clamp(15px, 4.6vw, 17px);
    line-height:1.22;
  }
}

/* -------------------------------------------------------------------------
   6 · TITULAR DE PORTADA A TRES RENGLONES
   ------------------------------------------------------------------------- */
html[data-extended="true"] .mobile-cover h1 em i{
  display:block; font-style:normal;
}

/* -------------------------------------------------------------------------
   7 · COMPARACIÓN DE PROPULSORES · RD-270 / Raptor 3 / F-1
   Nada de tarjeta. El bloque se ancla al BORDE INFERIOR DE LA PANTALLA, no al
   cuadro del vídeo: así no queda una franja negra muerta debajo y se adapta a
   cualquier móvil. Los tres motores conservan la proporción 897:636 del
   original, que es lo que hace válida la comparación de tamaños.
   Los datos van en tabla sin caja: filete de un píxel y el rótulo escrito una
   sola vez por fila. Doce cifras sueltas no se entienden; doce etiquetadas sí.
   ------------------------------------------------------------------------- */
.motores{
  position:absolute; z-index:3; inset:0;
  pointer-events:none;
  opacity:0; visibility:hidden;
  transition:opacity .34s ease, visibility .34s;
}
.motores.visible{ opacity:var(--motores-alfa, 1); visibility:visible; }

/* El marco calza EXACTAMENTE el cuadro del vídeo: --borde-fin es la altura
   real de la imagen, que el motor ya mide. Dentro de él los porcentajes
   coinciden con el máster 1080x1920, así que los propulsores caen donde el
   usuario los compuso y no se salen de la imagen. */
.motores__marco{
  position:absolute; left:0; top:0; width:100%; height:var(--borde-fin, 100%);
}
/* El bloque se reduce un 10 % y se apoya en el margen derecho: así la banda
   izquierda queda libre para los rótulos de la tabla. Se escala ENTERO, con
   lo que la relación de tamaños entre los tres motores —que es lo que hace
   válida la comparación— queda intacta. La línea de suelo no se mueve. */
.motores__grupo{
  position:absolute;
  right:var(--grupo-der);           /* 3 %  */
  width:var(--grupo-anc);           /* 74,75 % = 83,056 % × 0,90 */
  bottom:6.771%;                    /* misma línea de suelo que el máster */
  height:29.813%;                   /* 33,125 % × 0,90 → conserva la proporción */
}
.motor{
  position:absolute; margin:0;
  left:var(--x); top:var(--y); width:var(--w); height:var(--h);
  opacity:0; transform:translateY(14px) scale(.97);
  transition:opacity .46s cubic-bezier(.2,.7,.3,1), transform .56s cubic-bezier(.2,.7,.3,1);
}
.motor.on{ opacity:1; transform:none; }
.motor img{
  display:block; width:100%; height:100%; object-fit:contain; object-position:50% 100%;
  filter:drop-shadow(0 6px 20px rgb(0 0 0 / .6));
}

/* --- tabla de datos, sin caja --- */
/* La tabla ocupa la franja negra que queda bajo la imagen: es el sitio que
   la pieza reserva al texto, y así los motores no tienen que salirse. */
.motores__tabla{
  position:absolute; left:0; right:0; bottom:clamp(14px, 3.4svh, 34px);
  font-family:var(--lmt-sans);
  text-shadow:0 1px 2px rgb(0 0 0 / .95), 0 2px 14px rgb(0 0 0 / .85);
}
/* Tres columnas iguales NUNCA cuadrarían: los motores no están repartidos en
   tercios, sino colocados por tamaño real (centros en el 16,0 %, 43,2 % y
   79,3 % del bloque). Así que la zona de valores replica exactamente la
   anchura de cada motor y sus separaciones, y centrar el texto en cada pista
   lo deja justo sobre su motor, en cualquier pantalla. */
.mt-fila{
  display:grid; grid-template-columns:1fr var(--grupo-anc) var(--grupo-der);
  align-items:end;
  padding:clamp(2px,.45svh,4px) 0;
  border-top:1px solid rgb(214 228 240 / .17);
}
.mt-zona{
  grid-column:2;
  display:grid; align-items:end;
  grid-template-columns:
    minmax(0,32.00fr)   /* RD-270      */
    minmax(0, 2.67fr)   /* separación  */
    minmax(0,17.17fr)   /* Raptor 3    */
    minmax(0, 6.58fr)   /* separación  */
    minmax(0,41.69fr);  /* F-1         */
}
.mt-val[data-col="rd270"]  { grid-column:1; }
.mt-val[data-col="raptor3"]{ grid-column:3; }
.mt-val[data-col="f1"]     { grid-column:5; }
.mt-fila--cab{ border-top:0; padding-bottom:clamp(3px,.6svh,5px); }
.mt-rot{
  grid-column:1;
  font-size:clamp(7.5px, 2.05vw, 8.5px); font-weight:650; line-height:1.12;
  letter-spacing:.02em; color:rgb(224 234 245 / .84); text-align:right;
  padding-right:7px;
}
.mt-val{
  font-size:clamp(10.5px, 3.05vw, 13px); font-weight:730; line-height:1.15;
  letter-spacing:-.015em; color:#f4f7fb; text-align:center;
  font-variant-numeric:tabular-nums lining-nums;
  opacity:0; transform:translateY(7px);
  transition:opacity .42s ease, transform .42s cubic-bezier(.2,.7,.3,1);
}
.mt-cab{ display:block; }
.mt-cab b{
  display:block; font-size:clamp(10px, 2.9vw, 12px); font-weight:780;
  letter-spacing:-.01em; color:#ffb13f;
}
.mt-cab i{
  display:block; margin-top:1px; font-style:normal; white-space:nowrap;
  font-size:clamp(7.5px, 2.05vw, 8.5px); font-weight:620; color:rgb(228 238 248 / .78);
}
.mt-cab u{
  display:block; margin-top:2px; text-decoration:none;
  font-size:clamp(7px, 2.05vw, 8.5px); font-weight:600; letter-spacing:.02em;
  color:rgb(206 219 233 / .62);
}
.mt-pie{
  padding-right:var(--grupo-der);
  margin:clamp(3px,.7svh,5px) 0 0;
  font-size:clamp(7px, 2vw, 8.5px); font-weight:600; letter-spacing:.07em;
  color:rgb(200 214 229 / .52); text-align:right;
}

/* Cada columna entra con su motor. */
.motores[data-fase="0"] .mt-val{ opacity:0; }
.motores[data-fase="1"] .mt-val[data-col="rd270"],
.motores[data-fase="2"] .mt-val[data-col="rd270"],
.motores[data-fase="2"] .mt-val[data-col="raptor3"],
.motores[data-fase="3"] .mt-val{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .motor, .mt-val{ transition:opacity .3s ease; transform:none; }
}

/* -------------------------------------------------------------------------
   8 · CINTAS SUPERIORES
   Mismo lenguaje visual que las tarjetas del relato —fondo, radio, filete y
   cuerpo de letra—, pero ancladas arriba y de solo dos o tres renglones.
   Ocupan el ancho completo menos el margen de las tarjetas, para que la
   columna de lectura sea la misma en toda la pieza.
   Las dos comparten celda de rejilla: se relevan y nunca hay dos a la vez.
   ------------------------------------------------------------------------- */
.motores__cintas{
  position:absolute; left:12px; right:12px;
  top:calc(10px + env(safe-area-inset-top,0px));
  display:grid; align-items:start;
}
.cinta{
  grid-area:1 / 1; margin:0;
  padding:14px 16px 13px;
  background:linear-gradient(150deg, rgb(6 11 19 / .93) 0%, rgb(4 8 14 / .89) 100%);
  border:1px solid rgb(190 208 232 / .17);
  border-radius:18px;
  box-shadow:0 16px 40px rgb(0 0 0 / .42), inset 0 1px 0 rgb(255 255 255 / .05);
  -webkit-backdrop-filter:blur(14px) saturate(1.08);
  backdrop-filter:blur(14px) saturate(1.08);
  font-family:var(--lmt-sans);
  font-size:clamp(13.5px, 3.95vw, 16px); font-weight:560; line-height:1.34;
  letter-spacing:-.008em; color:rgb(244 248 253 / .97);
  text-wrap:pretty;
  opacity:0; transform:translateY(-7px);
  transition:opacity .5s ease, transform .5s ease;
}
.cinta.on{ opacity:1; transform:none; }
.cinta b{ color:#ffb13f; font-weight:800; font-variant-numeric:tabular-nums lining-nums; }

@media (prefers-reduced-motion:reduce){ .cinta{ transition:opacity .3s ease; transform:none; } }

/* -------------------------------------------------------------------------
   9 · CIERRE EDITORIAL · fuentes, método y fecha de revisión
   Va después de la pista de scroll, en flujo normal. Es lo que hace que la
   pieza sea un artículo y no una demo: sin JavaScript sigue estando aquí.
   ------------------------------------------------------------------------- */
.cierre-editorial{
  position:relative; z-index:5;
  max-width:44rem; margin:0 auto; padding:clamp(28px,6vw,56px) clamp(18px,5vw,28px) clamp(48px,9vw,80px);
  font-family:var(--lmt-sans); color:rgb(214 226 238 / .82);
  background:#05070c;
}
.fuentes summary{
  cursor:pointer; list-style:none;
  font:700 11px/1 var(--lmt-sans); letter-spacing:.16em; text-transform:uppercase;
  color:var(--lmt-acento); padding:14px 0; border-top:1px solid var(--lmt-rule);
}
.fuentes summary::-webkit-details-marker{display:none}
.fuentes summary::after{content:" ⌄"; color:rgb(214 226 238 / .5)}
.fuentes[open] summary::after{content:" ⌃"}
.fuentes ul{margin:6px 0 0; padding:0 0 0 1.1em}
.fuentes li{
  margin:0 0 .85em; font-size:13.5px; line-height:1.5;
  font-variant-numeric:tabular-nums lining-nums;
}
.fuentes b{color:rgb(240 246 252 / .95); font-weight:660}
.fuentes em{font-style:italic}

/* Sin JavaScript el relato no se anima: se apila y se lee como artículo. */
html.sin-js .story-unit{
  position:static !important; opacity:1 !important; visibility:visible !important;
  transform:none !important; max-height:none !important; margin:0 0 22px;
}
html.sin-js .story-layer{position:static; height:auto; padding:24px 18px}
html.sin-js .viewport{position:static; height:auto}
html.sin-js .track{display:none}

/* Acabado profesional: sin destello azul al tocar, tipografia suavizada y
   seleccion en el ambar de la casa. El overscroll no rebota la pieza. */
html{-webkit-tap-highlight-color:transparent; overscroll-behavior-y:contain}
body{-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
::selection{background:rgb(255 179 76 / .32)}

/* Pantallas cortas (iPhone SE, Android compacto, <=700 px de alto).
   La tarjeta gana altura, la letra cede un punto y el veredicto respira.
   Sin esto, siete unidades se cortaban en 320x568 y cuatro en 360x640. */
@media (max-height:700px){
  html[data-extended="true"] .story-card,
  html[data-extended="true"] .story-card--dense{max-height:min(68svh,472px)}
  html[data-extended="true"] .story-prose{max-height:min(64svh,440px)}
  html[data-extended="true"] .story-card h2{font-size:clamp(20px,6vw,25px)}
  html[data-extended="true"] .story-card--dense h2{font-size:clamp(18px,5.4vw,23px)}
  html[data-extended="true"] .story-prose h2{font-size:clamp(19px,5.8vw,25px)}
  html[data-extended="true"] .story-body,
  html[data-extended="true"] .story-prose > p:not(.story-kicker){
    font-size:clamp(12px,3.4vw,14px); line-height:1.22}
  html[data-extended="true"] .story-card--dense .story-body{
    font-size:clamp(11.5px,3.2vw,13.5px); line-height:1.20}
  html[data-extended="true"] .story-metrics dt{font-size:clamp(14px,4.4vw,18px)}
  html[data-layout="mobile"][data-extended="true"] .story-text--verdict.story-text--dense,
  html[data-extended="true"] .story-text{max-height:94svh; padding-top:34px}
  html[data-extended="true"] .story-text > p:not(.story-kicker){margin-top:6px}
  html[data-extended="true"] .verdict-metrics{margin-top:9px}
  html[data-extended="true"] .story-verdict{margin-top:9px}
  html[data-extended="true"] .story-text h2{font-size:clamp(22px,6.6vw,27px)}
  html[data-extended="true"] .story-text > p:not(.story-kicker){
    font-size:clamp(12px,3.5vw,14px); line-height:1.24}
  html[data-extended="true"] .story-verdict{font-size:clamp(13px,3.8vw,15px)}
  html[data-extended="true"] .verdict-metrics strong{font-size:clamp(20px,5.6vw,25px)}
  :root{ --banda-controles:62px }
  .controles{padding-top:22px}
}

/* Pantallas muy cortas (iPhone SE de 1.ª generacion, 320x568). */
@media (max-height:600px){
  html[data-layout="mobile"][data-extended="true"] .story-text--verdict.story-text--dense,
  html[data-extended="true"] .story-text{max-height:96svh; padding-top:26px}
  html[data-extended="true"] .story-text h2{font-size:clamp(20px,6.2vw,24px)}
  html[data-extended="true"] .story-text > p:not(.story-kicker){
    font-size:clamp(11.5px,3.4vw,13px); line-height:1.22}
  html[data-extended="true"] .story-verdict{font-size:clamp(12px,3.6vw,14px)}
  html[data-extended="true"] .verdict-metrics strong{font-size:clamp(18px,5.2vw,22px)}
  :root{ --banda-controles:56px }
}

/* -------------------------------------------------------------------------
   BANDA DE LA BARRA · la barra permanece abajo durante todo el recorrido,
   asi que deja de ser un caso especial del final: TODO el texto le cede su
   franja de forma permanente. Un unico valor gobierna a tarjetas, prosa,
   veredicto y pasajes largos; si cambia el alto de la barra, se cambia aqui.
   ------------------------------------------------------------------------- */

html[data-extended="true"] .story-unit{
  bottom:calc(max(16px, env(safe-area-inset-bottom)) + var(--banda-controles));
}
/* El cierre a sangre completa arranca desde el suelo: se le empuja el relleno
   inferior en vez de la caja, para no perder su degradado hasta el borde. Y
   recupera en altura lo que cede en relleno, o no le cabe la frase final. */
html[data-layout="mobile"][data-extended="true"] .story-text--verdict.story-text--dense,
html[data-extended="true"] .story-text{
  bottom:0;
  max-height:min(92svh, 780px);
  padding-top:52px;
  padding-bottom:calc(max(26px, env(safe-area-inset-bottom) + 16px) + var(--banda-controles));
}

/* En pantalla ancha la pieza se enmarca como un teléfono: es vertical y se
   lee así. Vivía en un archivo temporal fuera del proyecto, de modo que al
   borrarse la carpeta el entregable salía sin marco y con la pista mal
   dimensionada, en silencio. Ahora vive aquí. */
@media (min-width:520px){
  html,body{background:#111216}
  html[data-extended="true"] .viewport{
    width:390px; height:min(844px,94svh); border-radius:28px;
    box-shadow:0 28px 90px rgb(0 0 0 / .65), 0 0 0 8px #08090b,
               0 0 0 9px rgb(255 255 255 / .12);
  }
}

/* -------------------------------------------------------------------------
   10 · RELATO LARGO · el otro registro
   Segundo lenguaje junto a las tarjetas: una columna de texto que fluye por
   la franja negra mientras la imagen avanza detrás. Es el cambio de cámara.
   Reglas que pidió el encargo:
     · sale por abajo YA legible, sin fundido de entrada;
     · se difumina arriba en una banda corta, de dos alturas de línea, justo
       donde termina la imagen (--borde-fin, que el motor ya mide);
     · conserva el filete ámbar lateral de las zonas de texto;
     · las cifras viven dentro del flujo, en cuerpo grande y ámbar, y suben y
       se difuminan con el resto en lugar de estar clavadas.
   ------------------------------------------------------------------------- */
.relato{
  position:absolute; z-index:3;
  left:0; right:0;
  /* Cada pasaje arranca donde termina la imagen de SU plano, no donde termina
     el elemento de vídeo: la bahía reserva 36-53 % de negro, los paneles 61 %
     y el tramo térmico casi nada. --relato-desde lo fija por pasaje. */
  top:calc(var(--borde-fin, 60%) * var(--relato-desde, 1));
  bottom:0;
  padding:0 clamp(14px,4.2vw,20px)
          calc(clamp(16px,4svh,40px) + var(--banda-controles))
          clamp(13px,3.6vw,18px);
  opacity:0; visibility:hidden;
  transition:opacity .4s ease, visibility .4s;
}
.relato.is-visible{ opacity:1; visibility:visible; }
/* Cortinilla suave por detrás: en los planos sin negro propio el texto cae
   sobre imagen y necesita apoyo. Empieza en nada, así no se ve el borde. */
/* Cortinilla bajo el texto largo. Estaba calculada para metraje negro; con el
   despiece del bloque de computo —renders claros de SpaceX, casi blancos— el
   texto perdia contraste en la banda alta. Sube antes y llega mas oscura. */
.relato::before{
  content:""; position:absolute; inset:-14px 0 0 0; z-index:-1;
  background:linear-gradient(180deg, rgb(3 6 12 / 0) 0%, rgb(3 6 12 / .74) 13%,
                                     rgb(3 6 12 / .93) 31%, rgb(2 4 9 / .975) 100%);
  pointer-events:none;
}
/* Seguro barato contra cualquier fotograma claro que entre por debajo. */
.relato__flujo{ text-shadow:0 1px 3px rgb(0 0 0 / .55); }

.relato__ventana{
  position:relative; height:100%; overflow:hidden;
  padding-left:clamp(11px,3vw,15px);
  border-left:2px solid var(--lmt-acento);
  /* Banda de desvanecido corta y arriba del todo: los renglones que salen de
     la zona de lectura desaparecen deprisa; el resto sigue a plena opacidad. */
  --desv: 46px;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 var(--desv), #000 100%);
  mask-image:linear-gradient(180deg, transparent 0, #000 var(--desv), #000 100%);
}
.relato__flujo{
  position:absolute; left:clamp(11px,3vw,15px); right:0; top:0;
  transform:translate3d(0, var(--relato-y, 100%), 0);
  will-change:transform;
  font-family:var(--lmt-sans);
  color:rgb(238 244 251 / .95);
}
/* Punto y aparte: una separacion que se lee como cambio de parrafo,
   no como un agujero. Antes eran 11,7 px; ahora ~6. */
.relato__flujo > *{ margin:0 0 .38em; }
.relato__flujo > *:last-child{ margin-bottom:0; }

.relato__kicker{
  font:700 9.5px/1.25 var(--lmt-sans); letter-spacing:.16em; text-transform:uppercase;
  color:var(--lmt-acento);
}
.relato__flujo h2{
  font-family:var(--lmt-serif); font-weight:620;
  font-size:clamp(21px, 6.2vw, 26px); line-height:1.1;
  letter-spacing:-.02em; color:#fff; text-wrap:balance;
  margin-bottom:.42em;
}
.relato__flujo p{
  font-size:clamp(14px, 4.05vw, 16.5px); font-weight:460; line-height:1.42;
  letter-spacing:-.008em;
  text-shadow:0 1px 2px rgb(0 0 0 / .55);
}
.relato__flujo em{ font-style:italic; color:#fff; }

/* Las cifras que venían de las tarjetas absorbidas: mismo cuerpo grande y
   mismo ámbar, pero dentro del flujo. Suben y se difuminan como el texto. */
.relato__cifra{
  display:flex; align-items:baseline; gap:.55em; flex-wrap:wrap;
  margin-top:.30em;
}
.relato__cifra > b:first-child{
  font:800 clamp(26px, 7.8vw, 34px)/1 var(--lmt-sans);
  letter-spacing:-.045em; color:#ffb13f;
  font-variant-numeric:tabular-nums lining-nums;
}
.relato__cifra span{
  font:620 clamp(10.5px, 3vw, 12px)/1.25 var(--lmt-sans);
  letter-spacing:.02em; color:rgb(220 231 243 / .78);
}
.relato__cifra span b{ color:#ffb13f; font-weight:800; }
.relato__fuente{
  font:600 9.5px/1.35 var(--lmt-sans); letter-spacing:.05em;
  color:rgb(198 210 224 / .52);
}

@media (prefers-reduced-motion:reduce){ .relato{transition:opacity .25s ease} }
html.sin-js .relato{position:static; opacity:1; visibility:visible; padding:20px 18px}
html.sin-js .relato__ventana{height:auto; overflow:visible; -webkit-mask-image:none; mask-image:none}
html.sin-js .relato__flujo{position:static; transform:none}

/* El cierre convive con la barra fija: aprieta separaciones para que la
   pregunta final quepa entera hasta en pantallas cortas. */
html[data-extended="true"] .story-text > p:not(.story-kicker){margin-top:8px}
html[data-extended="true"] .verdict-metrics{margin-top:10px}
html[data-extended="true"] .story-verdict{margin-top:10px}
@media (max-height:820px){
  html[data-extended="true"] .story-text h2{font-size:clamp(23px,6.6vw,28px)}
  html[data-extended="true"] .story-text > p:not(.story-kicker){
    font-size:clamp(12.5px,3.6vw,14.5px); line-height:1.24; margin-top:7px}
  html[data-extended="true"] .story-verdict{font-size:clamp(13px,3.8vw,15px)}
}