/* 16:9 · composición propia. No es el 9:16 tumbado.
   El máster horizontal se ve entero (contain, a la izquierda).
   Una ZONA de lectura se ancla al cuadro del vídeo:
     · 16:9 / 16:10 → se superpone al 34 % derecho del fotograma
     · 21:10 / 21:9 → vive en el sobrante, sin tapar la imagen
   El motor publica --film-* y --zona-*. Valores de reserva aquí
   por si el JS aún no ha corrido. No se carga en la pieza 9:16. */

html[data-layout="desktop"]{
  --film-w: min(100vw, calc(100svh * 16 / 9));
  --film-h: min(100svh, calc(100vw * 9 / 16));
  --film-l: 0px;
  --film-t: max(0px, calc((100svh - var(--film-h)) / 2));
  --zona-w: min(42ch, calc(var(--film-w) * .34));
  --zona-l: calc(var(--film-l) + var(--film-w) - var(--zona-w));
  --zona-pad: clamp(18px, 1.6vw, 28px);
  --zona-pie: 78px;
  --lmt-sans: "Instrument Sans Local", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --lmt-serif: "Newsreader Local", ui-serif, "Iowan Old Style", Georgia, serif;
}
html[data-layout="desktop"],
html[data-layout="desktop"] body{
  margin:0; background:#000; color:#f6f3ed;
  overflow-x:hidden;
}

/* El 1080p 16:9 llena la caja más grande posible. contain en ventana
   completa lo encogía en 16:10 / 21:9. */
html[data-layout="desktop"][data-extended="true"] .viewport{
  position:fixed;
  inset:auto;
  left:50%;
  top:50%;
  right:auto;
  bottom:auto;
  transform:translate(-50%, -50%);
  width:min(100vw, calc(100svh * 16 / 9));
  height:min(100svh, calc(100vw * 9 / 16));
  border-radius:0;
  box-shadow:none;
  background:#000;
  overflow:hidden;
}
@media (min-width:520px){
  html[data-layout="desktop"][data-extended="true"] .viewport{
    width:min(100vw, calc(100svh * 16 / 9));
    height:min(100svh, calc(100vw * 9 / 16));
    border-radius:0;
    box-shadow:none;
    transform:translate(-50%, -50%);
  }
}

html[data-layout="desktop"] .film-video{
  object-fit:contain;
  object-position:50% 50%;
  transform:none;
}
html[data-layout="desktop"][data-extended="true"][data-borde="difuminado"] .film-video{
  -webkit-mask-image:none;
  mask-image:none;
}
html[data-layout="desktop"] .track{
  height:7254svh;
  min-height:62263px;
}

/* ---------- PORTADA · izquierda del fotograma, título entero ---------- */
html[data-layout="desktop"][data-extended="true"] .mobile-cover{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:flex-start;
  position:absolute;
  left:var(--film-l);
  top:var(--film-t);
  width:min(52%, calc(var(--film-w) * .52));
  height:var(--film-h);
  right:auto; bottom:auto;
  padding: clamp(28px, 5.4%, 56px) 0 0 clamp(28px, 4.2%, 52px);
  background:none;
  overflow:visible;
  text-shadow:0 2px 22px rgb(0 0 0 / .62);
}
html[data-layout="desktop"][data-extended="true"] .mobile-cover__copy{
  width:100%;
  max-width:22em;
}
html[data-layout="desktop"][data-extended="true"] .mobile-cover__eyebrow{
  margin:0 0 10px;
  font-size:clamp(11px, .92vw, 13px);
  letter-spacing:.18em;
}
html[data-layout="desktop"][data-extended="true"] .mobile-cover h1{
  width:auto;
  max-width:14em;
  font-size:clamp(42px, 4.3vw, 66px);
  font-weight:800;
  line-height:.92;
  letter-spacing:-.055em;
}
html[data-layout="desktop"][data-extended="true"] .mobile-cover h1 em{
  margin-top:10px;
  width:auto;
  max-width:18em;
  font-size:.52em;
  line-height:1.05;
}
html[data-layout="desktop"][data-extended="true"] .mobile-cover h1 em i{
  display:block;
}
html[data-layout="desktop"][data-extended="true"] .mobile-cover__intro{
  /* Elon ocupa el bajo izquierdo del primer plano. El párrafo blanco pasa al
     cielo libre de la derecha; título y sujeto dejan de competir. Está
     posicionado respecto al mismo fotograma 16:9, no respecto a la ventana. */
  position:absolute;
  left:calc(var(--film-w) * .68);
  top:clamp(148px, calc(var(--film-h) * .28), 308px);
  margin:0;
  width:min(25ch, calc(var(--film-w) * .265));
  max-width:25ch;
  font-size:clamp(17px, 1.35vw, 21px);
  font-weight:480;
  line-height:1.32;
  letter-spacing:-.01em;
}

/* «Desliza para despegar»: centrado bajo el FOTOGRAMA, no bajo la ventana. */
html[data-layout="desktop"][data-extended="true"] .mobile-cover__scroll,
html[data-layout="desktop"][data-extended="true"] .extended-scroll{
  left:calc(var(--film-l) + var(--film-w) / 2);
  right:auto;
  bottom:calc(100svh - var(--film-t) - var(--film-h) + 28px);
  transform:translateX(-50%);
  white-space:nowrap;
}

/* ---------- ZONA DE LECTURA · superior derecha del fotograma ---------- */
html[data-layout="desktop"][data-extended="true"] .story-layer{
  position:absolute;
  inset:auto;
  top:var(--film-t);
  left:var(--zona-l);
  width:var(--zona-w);
  height:var(--film-h);
  right:auto; bottom:auto;
  z-index:3;
  pointer-events:none;
  background:none;
}
html[data-layout="desktop"] .story-layer::before{
  content:none;
  display:none;
}

html[data-layout="desktop"][data-extended="true"] .story-unit{
  left:var(--zona-pad);
  right:var(--zona-pad);
  top:clamp(16px, 3.2%, 28px);
  bottom:auto;
  max-height:calc(var(--film-h) - var(--zona-pie) - 28px);
  overflow:visible;
  -webkit-mask-image:none;
  mask-image:none;
  filter:none;
}
html[data-layout="desktop"][data-extended="true"] .story-card,
html[data-layout="desktop"][data-extended="true"] .story-card--dense,
html[data-layout="desktop"][data-extended="true"] .story-prose{
  max-height:none;
  overflow:visible;
  padding:20px 22px 18px;
  border-radius:18px;
}

/* Lectura sin tarjeta. El fondo pertenece al propio bloque, dentro de la
   columna que calcula el motor; por eso acompaña a las letras cuando cambia
   la proporción de pantalla y nunca queda flotando sobre el metraje. */
html[data-layout="desktop"][data-extended="true"] .story-prose{
  background:
    radial-gradient(120% 130% at 0 0, rgb(39 79 105 / .16), transparent 58%),
    linear-gradient(135deg, rgb(2 7 13 / .94), rgb(1 4 8 / .82));
  border:1px solid rgb(160 196 218 / .16);
  box-shadow:0 18px 48px rgb(0 0 0 / .42);
  -webkit-backdrop-filter:blur(14px) saturate(1.08);
  backdrop-filter:blur(14px) saturate(1.08);
}
html[data-layout="desktop"][data-extended="true"] .story-card--dense h2,
html[data-layout="desktop"][data-extended="true"] .story-prose h2,
html[data-layout="desktop"][data-nivel="completo"] .story-card--dense h2,
html[data-layout="desktop"][data-propuesta="true"][data-nivel="completo"] .story-card--dense h2,
html[data-layout="desktop"][data-propuesta="true"][data-nivel="sencillo"] .story-unit h2,
html[data-layout="desktop"][data-propuesta="true"][data-nivel="sencillo"] .story-card--dense h2{
  max-width:22ch;
  font-size:clamp(26px, 2.15vw, 34px);
  line-height:1.08;
  letter-spacing:-.035em;
}
html[data-layout="desktop"][data-extended="true"] .story-card--dense .story-body,
html[data-layout="desktop"][data-propuesta="true"][data-nivel="completo"] .story-card--dense .story-body,
html[data-layout="desktop"][data-propuesta="true"][data-nivel="sencillo"] .story-body,
html[data-layout="desktop"][data-propuesta="true"][data-nivel="sencillo"] .story-card--dense .story-body{
  margin-top:10px;
  font-size:clamp(16px, 1.18vw, 18.5px);
  line-height:1.38;
}
html[data-layout="desktop"][data-extended="true"] .story-text,
html[data-layout="desktop"][data-extended="true"] .story-text--verdict,
html[data-layout="desktop"][data-extended="true"] .story-text--dense,
html[data-layout="desktop"][data-extended="true"] .story-text--chapter-end{
  left:var(--zona-pad);
  right:var(--zona-pad);
  top:clamp(16px, 3.2%, 28px);
  bottom:auto;
  max-height:calc(var(--film-h) - var(--zona-pie) - 24px);
  overflow:visible;
  padding:18px 20px 18px;
  border:1px solid rgb(160 196 218 / .14);
  border-radius:18px;
  background:
    radial-gradient(110% 130% at 0 0, rgb(36 86 118 / .16), transparent 60%),
    linear-gradient(135deg, rgb(2 7 13 / .93), rgb(1 4 8 / .80));
  box-shadow:0 18px 48px rgb(0 0 0 / .42);
  -webkit-backdrop-filter:blur(14px) saturate(1.08);
  backdrop-filter:blur(14px) saturate(1.08);
  text-shadow:0 1px 2px rgb(0 0 0 / .85), 0 10px 32px rgb(0 0 0 / .5);
}
html[data-layout="desktop"][data-extended="true"] .story-text h2,
html[data-layout="desktop"][data-extended="true"] .story-text--dense h2,
html[data-layout="desktop"][data-extended="true"] .story-text--verdict h2{
  max-width:18ch;
  font-size:clamp(28px, 2.4vw, 38px);
}

html[data-layout="desktop"][data-propuesta="true"] .story-unit.sin-metrics .story-metrics,
html[data-layout="desktop"][data-propuesta="true"] .story-unit.sin-metrics .story-equation,
html[data-layout="desktop"][data-propuesta="true"] .story-unit.sin-fuente .story-source,
html[data-layout="desktop"][data-propuesta="true"] .story-unit.sin-fuente .story-note{
  display:revert;
}

html[data-layout="desktop"][data-extended="true"] .story-metrics dt{
  overflow:visible;
  text-overflow:clip;
  white-space:nowrap;
  font-size:clamp(18px, 1.55vw, 24px);
}
html[data-layout="desktop"][data-extended="true"] .story-metrics dd{
  white-space:normal;
  font-size:10px;
}

html[data-layout="desktop"] .relato{
  left:0; right:0;
  top:16px;
  bottom:calc(var(--zona-pie) + 10px);
  height:auto;
  max-height:none;
  padding:16px var(--zona-pad) 18px;
  border:1px solid rgb(160 196 218 / .14);
  border-radius:18px;
  background:
    radial-gradient(120% 130% at 0 0, rgb(36 86 118 / .15), transparent 58%),
    linear-gradient(135deg, rgb(2 7 13 / .93), rgb(1 4 8 / .80));
  box-shadow:0 18px 48px rgb(0 0 0 / .42);
  -webkit-backdrop-filter:blur(14px) saturate(1.08);
  backdrop-filter:blur(14px) saturate(1.08);
  text-shadow:0 1px 2px rgb(0 0 0 / .85), 0 8px 28px rgb(0 0 0 / .55);
}
html[data-layout="desktop"] .relato::before{ background:none; display:none; content:none; }
html[data-layout="desktop"] .relato__ventana{
  overflow:hidden;
  -webkit-mask-image:none;
  mask-image:none;
}
html[data-layout="desktop"] .relato__flujo h2,
html[data-layout="desktop"][data-propuesta="true"][data-nivel="sencillo"] .relato__flujo h2{
  font-size:clamp(24px, 2vw, 32px);
}
html[data-layout="desktop"] .relato__flujo p,
html[data-layout="desktop"][data-propuesta="true"][data-nivel="sencillo"] .relato__flujo p,
html[data-layout="desktop"][data-propuesta="true"][data-nivel="completo"] .relato__flujo p{
  font-size:clamp(16px, 1.2vw, 18.5px);
  line-height:1.4;
}

/* u05 · bahía. Solo este pasaje: Profundizar aprieta más (tiene el doble
   de párrafos) para que «1 a 3 meses» no llegue con la imagen ya quieta.
   Esencial baja menos: el texto es corto y no puede encogerse igual. */
html[data-layout="desktop"][data-nivel="completo"] .relato[data-par="u05"] .relato__flujo h2{
  font-size:clamp(21px, 1.72vw, 28px);
}
html[data-layout="desktop"][data-nivel="completo"] .relato[data-par="u05"] .relato__flujo p{
  font-size:clamp(14.5px, 1.05vw, 16.4px);
  line-height:1.32;
}
html[data-layout="desktop"][data-nivel="completo"] .relato[data-par="u05"] .relato__flujo > *{
  margin-bottom:.30em;
}
html[data-layout="desktop"][data-nivel="sencillo"] .relato[data-par="u05"] .relato__flujo h2{
  font-size:clamp(22px, 1.85vw, 30px);
}
html[data-layout="desktop"][data-nivel="sencillo"] .relato[data-par="u05"] .relato__flujo p{
  font-size:clamp(15.5px, 1.14vw, 17.5px);
  line-height:1.36;
}

/* ---------- MOTORES · un solo bloque: recortes encima, cifras debajo.
   Misma pista 897:636 del 9:16, para que cada columna caiga bajo su motor.
   Va arriba a la izquierda del fotograma. ---------- */
html[data-layout="desktop"] .motores{
  /* Comparativa de motores: 80 % de la escala anterior y agrupada abajo.
     Así respeta el despegue en el centro de la imagen. */
  --mot-lab: 5.92em;
  --mot-w: min(416px, calc(var(--film-w) * .304));
  --mot-h: calc(var(--mot-w) * 636 / 897);
  --mot-tab-h: clamp(122px, 8.8vw, 150px);
  --mot-bottom: calc(var(--film-t) + var(--film-h) - var(--zona-pie) - 12px);
  --mot-top: calc(var(--mot-bottom) - var(--mot-h) - var(--mot-tab-h) - 6px);
  --mot-left: calc(var(--film-l) + 26px);
}
/* Profundizar tiene tres filas métricas más: la caja crece hacia arriba y
   conserva su base, de modo que la última cifra nunca cae fuera del negro. */
html[data-layout="desktop"][data-nivel="completo"] .motores{
  /* La tabla de Profundizar incluye la nota metodológica: gana aire por
     arriba sin perder el margen exterior del lateral izquierdo. */
  --mot-tab-h: clamp(168px, 11.8vw, 196px);
}
html[data-layout="desktop"] .motores__marco{
  display:block;
  left:var(--film-l);
  top:var(--film-t);
  width:var(--film-w);
  height:var(--film-h);
}
html[data-layout="desktop"] .motores__grupo{
  left:calc(var(--mot-left) + var(--mot-lab) - var(--film-l));
  top:calc(var(--mot-top) - var(--film-t));
  right:auto;
  bottom:auto;
  width:var(--mot-w);
  height:var(--mot-h);
  aspect-ratio:897 / 636;
}
html[data-layout="desktop"] .motores__cintas{
  left:var(--zona-l);
  right:auto;
  width:var(--zona-w);
  top:auto;
  bottom:calc(var(--zona-pie) + 12px);
  padding:0 var(--zona-pad);
}
html[data-layout="desktop"] .motores__cintas .cinta{
  min-height:0;
  padding:17px 19px 16px;
  border:1px solid rgb(185 212 236 / .24);
  border-left:3px solid var(--modo-ui, #ffb347);
  border-radius:18px;
  background:
    radial-gradient(120% 120% at 0 0, rgb(50 106 143 / .26), transparent 58%),
    linear-gradient(145deg, rgb(8 18 30 / .96), rgb(3 8 15 / .92));
  box-shadow:0 20px 54px rgb(0 0 0 / .48), inset 0 1px rgb(255 255 255 / .075);
  -webkit-backdrop-filter:blur(16px) saturate(1.12);
  backdrop-filter:blur(16px) saturate(1.12);
  color:rgb(246 249 253 / .98);
  font-size:clamp(15px, 1.15vw, 18px);
  font-weight:560;
  line-height:1.36;
  letter-spacing:-.01em;
  text-wrap:pretty;
}
html[data-layout="desktop"] .motores__cintas .cinta__kicker{
  margin:0 0 5px;
  color:var(--modo-ui, #ffb347);
  font-size:10px;
  font-weight:760;
  line-height:1;
  letter-spacing:.13em;
}
html[data-layout="desktop"] .motores__cintas .cinta h3{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin:0 0 8px;
  color:#fff;
  font-size:clamp(18px, 1.55vw, 24px);
  font-weight:630;
  line-height:1;
  letter-spacing:-.035em;
}
html[data-layout="desktop"] .motores__cintas .cinta h3 b{
  color:var(--modo-ui, #ffb347);
  font-size:1.38em;
  font-weight:760;
  letter-spacing:-.06em;
}
html[data-layout="desktop"] .motores__cintas .cinta__body{
  max-width:47ch;
  margin:0;
  color:rgb(243 247 252 / .95);
  font-size:clamp(13px, 1vw, 15.5px);
  font-weight:500;
  line-height:1.36;
}
html[data-layout="desktop"] .motores__cintas .cinta__metric{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin:10px 0 0;
  padding-top:9px;
  border-top:1px solid rgb(196 219 239 / .18);
  color:rgb(222 232 241 / .83);
  font-size:11px;
  font-weight:560;
  line-height:1.18;
}
html[data-layout="desktop"] .motores__cintas .cinta__metric b{
  color:var(--modo-ui, #ffb347);
  font-size:clamp(20px, 1.6vw, 26px);
  font-weight:760;
  letter-spacing:-.045em;
}
html[data-layout="desktop"] .motores__tabla{
  left:calc(var(--mot-left) - 2px);
  top:calc(var(--mot-top) + var(--mot-h) + 6px);
  right:auto;
  bottom:auto;
  width:calc(var(--mot-lab) + var(--mot-w) + 20px);
  height:var(--mot-tab-h);
  box-sizing:border-box;
  padding:9px 8px 8px;
  background:linear-gradient(180deg, rgb(6 10 16 / .78), rgb(4 8 14 / .92));
  border:1px solid rgb(190 208 232 / .16);
  border-radius:14px;
  box-shadow:0 16px 40px rgb(0 0 0 / .45);
}
html[data-layout="desktop"] .mt-fila{
  grid-template-columns:var(--mot-lab) 1fr;
  padding:4px 0;
}
html[data-layout="desktop"] .mt-zona{
  grid-column:2;
  grid-template-columns:
    minmax(0,32.00fr)
    minmax(0, 2.67fr)
    minmax(0,17.17fr)
    minmax(0, 6.58fr)
    minmax(0,41.69fr);
  gap:0;
}
html[data-layout="desktop"] .mt-val[data-col="rd270"]{ grid-column:1; }
html[data-layout="desktop"] .mt-val[data-col="raptor3"]{ grid-column:3; }
html[data-layout="desktop"] .mt-val[data-col="f1"]{ grid-column:5; }
html[data-layout="desktop"] .mt-rot{
  font-size:9px;
  line-height:1.2;
  text-align:right;
  padding-right:8px;
}
html[data-layout="desktop"] .mt-val{
  font-size:clamp(11px, .92vw, 14.5px);
  text-align:center;
  white-space:nowrap;
}
html[data-layout="desktop"] .mt-cab b{
  font-size:clamp(10.5px, .84vw, 13px);
}
html[data-layout="desktop"] .mt-cab i{
  font-size:8px;
  white-space:normal;
}
html[data-layout="desktop"] .mt-pie{
  padding-right:0;
  text-align:right;
  font-size:8px;
  line-height:1;
  margin:4px 0 0;
}

/* Frases-puente: cierran un problema antes de abrir el siguiente. Son una
   respiración editorial, no otra tarjeta ni otro dato que memorizar. */
html[data-layout="desktop"] .story-bridge{
  margin:14px 0 0;
  padding-top:10px;
  border-top:1px solid rgb(207 222 238 / .16);
  color:rgb(225 233 243 / .8);
  font-size:clamp(11px, .88vw, 13px);
  font-style:italic;
  font-weight:560;
  line-height:1.35;
}
html[data-layout="desktop"] .relato .story-bridge{
  color:rgb(242 246 252 / .9);
  font-size:clamp(13px, 1.02vw, 16px);
}

/* Cambio de profundidad: patrón ya usado en «Siete vueltas y media». Solo
   se anima el bloque textual activo. La imagen sigue totalmente inmóvil. */
@media (prefers-reduced-motion:no-preference){
  html[data-layout="desktop"].cambio-nivel::view-transition-group(lmt-nivel-lectura){
    animation-duration:.68s;
    animation-timing-function:cubic-bezier(.22,1,.36,1);
  }
  html[data-layout="desktop"].cambio-nivel::view-transition-image-pair(lmt-nivel-lectura){
    isolation:isolate;
  }
  html[data-layout="desktop"].cambio-nivel::view-transition-old(lmt-nivel-lectura){
    animation:lmt-nivel-sale .30s cubic-bezier(.4,0,1,1) both;
    mix-blend-mode:normal;
  }
  html[data-layout="desktop"].cambio-nivel::view-transition-new(lmt-nivel-lectura){
    animation:lmt-nivel-entra .56s .075s cubic-bezier(.16,1,.3,1) both;
    mix-blend-mode:normal;
  }
  html[data-layout="desktop"].nivel-fusion-sale .nivel-fusion{
    animation:lmt-nivel-sale .24s cubic-bezier(.4,0,1,1) both;
  }
  html[data-layout="desktop"].nivel-fusion-entra .nivel-fusion{
    animation:lmt-nivel-entra .52s cubic-bezier(.16,1,.3,1) both;
  }
}
@keyframes lmt-nivel-sale{
  from{opacity:1;filter:blur(0);transform:none}
  55%{opacity:.52;filter:blur(2.5px)}
  to{opacity:0;filter:blur(9px);transform:translate3d(0,-.32rem,0) scale(.996)}
}
@keyframes lmt-nivel-entra{
  from{opacity:0;filter:blur(11px);transform:translate3d(0,.52rem,0) scale(.994)}
  48%{opacity:.76;filter:blur(2.2px)}
  to{opacity:1;filter:blur(0);transform:none}
}

html[data-layout="desktop"] .marcas{
  left:var(--film-l);
  top:var(--film-t);
  width:calc(var(--zona-l) - var(--film-l));
  height:var(--film-h);
  right:auto;
}
/* 16:9: el recuadro vive en la zona visible del fotograma (izquierda),
   no en las coordenadas del máster vertical. */
html[data-layout="desktop"][data-propuesta="true"] .marca--paneles .marca__caja{
  left:3%; width:94%; top:40%; height:24%;
}
html[data-layout="desktop"][data-propuesta="true"] .marca--paneles .marca__dato{
  /* El indicador de capítulo vive arriba: el dato cae junto al encuadre
     cian del satélite, no compite con la escalera editorial. */
  left:4%; top:34%;
}
html[data-layout="desktop"][data-propuesta="true"] .marca--radiadores .marca__caja{
  /* En esta segunda parada el vídeo ya dibuja los dos marcos turquesa de los
     radiadores. No se añade un rectángulo amarillo genérico encima. */
  display:none;
}
html[data-layout="desktop"][data-propuesta="true"] .marca--radiadores .marca__dato{
  left:4%; top:58%;
  width:min(276px, 30%);
  box-sizing:border-box;
  padding:14px 16px 13px;
  border:1px solid rgb(255 179 76 / .28);
  border-left:3px solid #ffb34c;
  border-radius:14px;
  background:linear-gradient(145deg, rgb(7 14 24 / .92), rgb(3 7 13 / .86));
  box-shadow:0 14px 40px rgb(0 0 0 / .42), inset 0 1px rgb(255 255 255 / .06);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  text-shadow:none;
}
html[data-layout="desktop"][data-propuesta="true"] .marca--radiadores .marca__dato b{
  font-size:clamp(28px, 2.1vw, 38px);
}
html[data-layout="desktop"][data-propuesta="true"] .marca--radiadores .marca__dato span{
  margin-top:6px;
  font-size:11px;
  line-height:1.28;
  letter-spacing:.015em;
}

html[data-layout="desktop"] .controles{
  left:var(--zona-l);
  right:auto;
  width:var(--zona-w);
  /* Comparte eje con las tarjetas: centrada en la columna de lectura, no
     apoyada contra el borde derecho del fotograma. */
  justify-content:center;
  padding:24px var(--zona-pad) 16px;
  background:none;
}
html[data-layout="desktop"] .controles.visible{ opacity:1; }

html[data-layout="desktop"] .cierre-editorial{
  position:relative;
  z-index:2;
  max-width:72ch;
  margin:0 auto;
  padding:40px 24px 80px;
}
/* Las fuentes están físicamente después de toda la pista. Esta compuerta
   adicional evita que un gesto de scroll rápido las revele mientras el vídeo
   aún alcanza el plano final: solo aparecen tras la última pregunta. */
html[data-layout="desktop"]:not(.sin-js) .cierre-editorial{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate3d(0,18px,0);
  transition:opacity .42s ease, transform .42s ease, visibility 0s linear .42s;
}
html[data-layout="desktop"]:not(.sin-js) .cierre-editorial.is-final{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:none;
  transition:opacity .42s ease, transform .42s ease;
}

/* Ultrawide: la zona ya no pisa el fotograma. Un poco más de aire. */
html[data-layout="desktop"][data-lienzo="ultra"]{
  --zona-pad: clamp(22px, 1.4vw, 36px);
}
html[data-layout="desktop"][data-lienzo="alto"] .mobile-cover h1{
  font-size:clamp(32px, 4.6vw, 48px);
}

@media (max-width:1100px){
  html[data-layout="desktop"][data-extended="true"] .story-card--dense h2{
    font-size:clamp(22px, 2.4vw, 28px);
  }
}
@media (max-height:700px){
  html[data-layout="desktop"][data-extended="true"] .mobile-cover h1{
    font-size:clamp(28px, 4vw, 40px);
  }
  html[data-layout="desktop"][data-extended="true"] .story-card--dense h2{
    font-size:clamp(22px, 2.2vw, 28px);
  }
}

/* ---------- ESENCIAL · UNA IDEA CLARA, UN DATO PRINCIPAL ----------
   No cambia el color científico del metraje. La identidad de lectura se
   concentra en tipografía, jerarquía y ámbar: menos aparato, más aire. */
html[data-layout="desktop"][data-nivel="sencillo"] .story-unit h2,
html[data-layout="desktop"][data-nivel="sencillo"] .relato__flujo h2{
  font-family:var(--lmt-sans);
  font-weight:760;
  letter-spacing:-.04em;
}
html[data-layout="desktop"][data-nivel="sencillo"] .story-kicker,
html[data-layout="desktop"][data-nivel="sencillo"] .relato__kicker{
  color:#ffc46b;
}
html[data-layout="desktop"][data-nivel="sencillo"] .story-card,
html[data-layout="desktop"][data-nivel="sencillo"] .story-prose,
html[data-layout="desktop"][data-nivel="sencillo"] .relato{
  border-color:rgb(255 187 82 / .21);
  background:
    radial-gradient(125% 138% at 0 0, rgb(143 83 23 / .15), transparent 58%),
    linear-gradient(135deg, rgb(14 10 5 / .94), rgb(5 6 9 / .83));
}
html[data-layout="desktop"][data-nivel="sencillo"] .story-metrics{
  grid-template-columns:minmax(0,1fr);
}
html[data-layout="desktop"][data-nivel="sencillo"] .story-metrics > div:not(:first-child){
  display:none;
}
html[data-layout="desktop"][data-nivel="sencillo"] .story-metrics dt{
  color:#ffc46b;
}

/* El nudo térmico deja de ser un muro de prosa en Esencial: tres momentos,
   tres respiros. Todo el contexto histórico y las cifras de ingeniería se
   conserva íntegro en Profundizar. */
html[data-layout="desktop"] .relato--esencial-termico .relato__momento{
  margin:.8em 0 0;
  padding:.78em 0 0;
  border-top:1px solid rgb(255 202 113 / .17);
}
html[data-layout="desktop"] .relato--esencial-termico .relato__momento > b{
  display:block;
  margin:0 0 .33em;
  color:#ffc46b;
  font-family:var(--lmt-sans);
  font-size:10px;
  font-weight:760;
  letter-spacing:.13em;
}
html[data-layout="desktop"] .relato--esencial-termico .relato__momento p{
  margin:.2em 0;
}
html[data-layout="desktop"] .relato--esencial-termico .relato__cifra{
  margin:.7em 0 .1em;
  padding:.58em .72em;
  border:1px solid rgb(255 187 82 / .25);
  border-radius:12px;
  background:rgb(255 179 71 / .07);
}

/* Brújula de capítulos: se limita al margen alto izquierdo del fotograma.
   No es un menú, ni tapa la narración: solo devuelve orientación. */
html[data-layout="desktop"] .chapter-progress{
  position:absolute;
  top:calc(var(--film-t) + clamp(16px, 2.2vw, 28px));
  left:calc(var(--film-l) + clamp(18px, 2.4vw, 34px));
  z-index:4;
  width:min(176px, calc(var(--film-w) * .17));
  pointer-events:none;
  opacity:0;
  transform:translate3d(-6px,0,0);
  transition:opacity .36s ease,transform .36s ease;
}
html[data-layout="desktop"] .chapter-progress.is-visible{
  opacity:1;
  transform:none;
}
html[data-layout="desktop"] .chapter-progress ol{
  display:grid;
  gap:4px;
  margin:0;
  padding:9px 10px;
  list-style:none;
  border:1px solid rgb(207 222 238 / .14);
  border-radius:12px;
  background:linear-gradient(145deg, rgb(4 9 16 / .63), rgb(3 6 11 / .34));
  box-shadow:0 10px 30px rgb(0 0 0 / .22),inset 0 1px rgb(255 255 255 / .04);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
html[data-layout="desktop"] .chapter-progress li{
  display:grid;
  grid-template-columns:21px 1fr;
  gap:5px;
  align-items:baseline;
  color:rgb(231 238 245 / .42);
  font-family:var(--lmt-sans);
  font-size:9px;
  font-weight:680;
  line-height:1.2;
  letter-spacing:.055em;
  text-transform:uppercase;
  transition:color .28s ease,opacity .28s ease;
}
html[data-layout="desktop"] .chapter-progress li span{
  color:rgb(178 194 213 / .38);
  font-variant-numeric:tabular-nums;
}
html[data-layout="desktop"] .chapter-progress li.is-complete{color:rgb(231 238 245 / .68)}
html[data-layout="desktop"] .chapter-progress li.is-active{color:#ffc46b}
html[data-layout="desktop"] .chapter-progress li.is-active span{color:#ffc46b}