html[data-extended="true"] .extended-intro,
html[data-extended="true"] .extended-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  will-change: opacity, transform;
}

html[data-extended="true"] .mobile-comparison {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  transform: none;
  background: #000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  will-change: opacity;
}

html[data-extended="true"] .mobile-comparison.visible {
  opacity: 1;
  visibility: visible;
}

/* El relato utiliza cuatro lenguajes distintos: texto de transición, tarjeta
   técnica, infográfico sobre imagen y cartela breve. Todos comparten el mismo
   relevo, pero solo las tarjetas llevan la caja editorial completa. */
html[data-extended="true"] .story-layer {
  position: absolute;
  z-index: 3;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  color: #f7f8fb;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-extended="true"] .story-unit {
  --unit-opacity: 0;
  --unit-y: 28px;
  --unit-blur: 8px;
  --top-alpha: 1;
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: max(16px, env(safe-area-inset-bottom));
  overflow: hidden;
  opacity: var(--unit-opacity);
  transform: translate3d(0, var(--unit-y), 0);
  filter: blur(var(--unit-blur));
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,var(--top-alpha)) 0%, #000 18%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,var(--top-alpha)) 0%, #000 18%);
  visibility: hidden;
  will-change: opacity, transform, filter;
}

html[data-extended="true"] .story-unit.is-visible { visibility: visible; }

html[data-extended="true"] .story-card {
  max-height: min(55svh, 472px);
  padding: 17px 17px 14px;
  border: 1px solid rgba(180,211,234,.18);
  border-radius: 24px;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(42,91,122,.26) 0%, rgba(42,91,122,0) 52%),
    linear-gradient(150deg, rgba(9,18,27,.95), rgba(3,8,14,.91));
  box-shadow: 0 24px 70px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.045);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
  backdrop-filter: blur(18px) saturate(1.12);
}

/* Capítulo técnico denso. La densidad se obtiene encadenando unidades, no
   reduciendo la letra. Cada pieza sigue cabiendo completa bajo el metraje
   panorámico que queda anclado arriba a partir de 25,1 s. */
html[data-extended="true"] .story-card--dense {
  max-height: min(56svh, 490px);
  padding: 15px 16px 13px;
  border-radius: 21px;
}

html[data-extended="true"] .story-card--dense h2 {
  max-width: 24ch;
  font-size: clamp(22px, 6.25vw, 27px);
  line-height: 1.01;
}

html[data-extended="true"] .story-card--dense .story-body {
  margin-top: 9px;
  font-size: clamp(13.5px, 3.62vw, 15px);
  line-height: 1.27;
}

html[data-extended="true"] .story-card--dense .story-metrics { margin-top: 10px; }
html[data-extended="true"] .story-card--dense .story-note { margin-top: 8px; }

html[data-extended="true"] .story-prose {
  max-height: min(52svh, 440px);
  padding: 17px 18px 16px;
  border-left: 2px solid #ffb34c;
  border-radius: 0 20px 20px 0;
  background:
    linear-gradient(105deg, rgba(3,8,14,.97) 0%, rgba(3,8,14,.91) 70%, rgba(3,8,14,.76) 100%);
  box-shadow: 0 22px 60px rgba(0,0,0,.48);
  -webkit-backdrop-filter: blur(15px) saturate(1.08);
  backdrop-filter: blur(15px) saturate(1.08);
}

html[data-extended="true"] .story-prose h2 {
  margin: 8px 0 0;
  max-width: 22ch;
  color: #fff;
  font-size: clamp(24px, 6.85vw, 30px);
  font-weight: 760;
  line-height: 1;
  letter-spacing: -.045em;
  text-wrap: balance;
}

html[data-extended="true"] .story-prose > p:not(.story-kicker) {
  margin: 11px 0 0;
  color: rgba(241,245,249,.88);
  font-size: clamp(14px, 3.85vw, 16px);
  font-weight: 470;
  line-height: 1.31;
  letter-spacing: -.012em;
}

html[data-extended="true"] .story-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

html[data-extended="true"] .story-kicker {
  margin: 0;
  color: #a8d7f4;
  font-size: 10px;
  font-weight: 780;
  line-height: 1.05;
  letter-spacing: .16em;
}

html[data-extended="true"] .evidence {
  flex: none;
  padding: 5px 7px 4px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .105em;
  white-space: nowrap;
}

html[data-extended="true"] .evidence--status {
  color: #bde9d5;
  border-color: rgba(121,216,169,.25);
  background: rgba(33,116,78,.20);
}

html[data-extended="true"] .evidence--source {
  color: #b9def5;
  border-color: rgba(109,182,229,.27);
  background: rgba(39,107,151,.21);
}

html[data-extended="true"] .evidence--claim {
  color: #ffd08b;
  border-color: rgba(255,178,71,.30);
  background: rgba(155,92,22,.22);
}

html[data-extended="true"] .evidence--calculation {
  color: #dccdff;
  border-color: rgba(172,142,239,.28);
  background: rgba(91,62,160,.22);
}

html[data-extended="true"] .evidence--application {
  color: #ffbdb8;
  border-color: rgba(255,119,108,.28);
  background: rgba(151,52,45,.22);
}

html[data-extended="true"] .story-card h2 {
  margin: 0;
  max-width: 19ch;
  color: #fff;
  font-size: clamp(25px, 7.2vw, 31px);
  font-weight: 760;
  line-height: .98;
  letter-spacing: -.045em;
  text-wrap: balance;
}

html[data-extended="true"] .story-body {
  margin: 11px 0 0;
  color: rgba(241,245,249,.88);
  font-size: clamp(14px, 3.85vw, 16px);
  font-weight: 470;
  line-height: 1.29;
  letter-spacing: -.012em;
}

html[data-extended="true"] .story-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 13px 0 0;
}

html[data-extended="true"] .story-metrics > div {
  min-width: 0;
  padding-top: 9px;
  border-top: 1px solid rgba(174,203,223,.18);
}

html[data-extended="true"] .story-metrics dt {
  overflow: hidden;
  margin: 0;
  color: #ffb34c;
  font-size: clamp(16px, 5.1vw, 21px);
  font-weight: 760;
  line-height: 1;
  letter-spacing: -.035em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-extended="true"] .story-metrics .metric--wide dt {
  font-size: clamp(14px, 4.35vw, 18px);
}

html[data-extended="true"] .story-metrics dd {
  margin: 4px 0 0;
  color: rgba(216,227,236,.66);
  font-size: 9px;
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: .045em;
  text-transform: uppercase;
}

html[data-extended="true"] .story-note {
  margin: 11px 0 0;
  padding: 9px 10px;
  color: rgba(229,235,241,.78);
  border-left: 2px solid rgba(255,179,76,.68);
  background: rgba(255,255,255,.035);
  font-size: 11px;
  line-height: 1.25;
}

html[data-extended="true"] .story-source {
  margin: 10px 0 0;
  color: rgba(173,197,214,.50);
  font-size: 8.5px;
  font-weight: 620;
  line-height: 1.15;
  letter-spacing: .055em;
  text-transform: uppercase;
}

html[data-extended="true"] .story-equation {
  margin: 12px 0 0;
  padding: 9px 11px;
  color: rgba(233,242,249,.82);
  border: 1px solid rgba(133,194,231,.14);
  border-radius: 12px;
  background: rgba(93,153,192,.07);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .02em;
}

html[data-extended="true"] .story-equation strong { color: #ffb34c; }

/* Gramática Profundizar 9:16: el razonamiento se lee como párrafo; la
   evidencia cuantitativa vive al pie de una tarjeta y se reconoce de un
   vistazo. Estas reglas están aisladas del montaje 16:9. */
html[data-layout="mobile"][data-extended="true"] .story-card--lecture {
  border-color: rgba(255,179,76,.20);
  background:
    radial-gradient(115% 92% at 0 0, rgba(34,96,135,.26), transparent 58%),
    linear-gradient(150deg, rgba(7,16,25,.975), rgba(2,7,12,.94));
}

html[data-layout="mobile"][data-extended="true"] .story-card--lecture .story-metrics {
  gap: 8px;
  margin-top: 12px;
}

html[data-layout="mobile"][data-extended="true"] .story-card--lecture .story-metrics > div {
  padding-top: 10px;
  border-top-color: rgba(255,179,76,.28);
}

html[data-layout="mobile"][data-extended="true"] .story-card--lecture .story-metrics dt,
html[data-layout="mobile"][data-extended="true"] .story-card--equation .story-metrics dt {
  overflow: visible;
  color: #ffb13f;
  font-size: clamp(19px, 5.85vw, 25px);
  font-weight: 820;
  letter-spacing: -.052em;
  text-overflow: clip;
}

html[data-layout="mobile"][data-extended="true"] .story-card--lecture .story-metrics dd,
html[data-layout="mobile"][data-extended="true"] .story-card--equation .story-metrics dd {
  color: rgba(235,239,243,.72);
  font-size: 8.5px;
  line-height: 1.14;
}

html[data-layout="mobile"][data-extended="true"] .story-card--equation {
  border-color: rgba(111,187,232,.22);
  background:
    radial-gradient(120% 100% at 100% 0, rgba(42,102,140,.25), transparent 56%),
    linear-gradient(150deg, rgba(6,15,24,.98), rgba(2,7,12,.95));
}

html[data-layout="mobile"][data-extended="true"] .story-equation--hero {
  padding: 10px 12px 9px;
  color: rgba(227,237,244,.72);
  font-size: 11px;
  line-height: 1.18;
  text-transform: uppercase;
}

html[data-layout="mobile"][data-extended="true"] .story-equation--hero strong {
  display: block;
  margin-top: 5px;
  color: #ffb13f;
  font-size: clamp(23px, 7vw, 30px);
  font-weight: 840;
  line-height: .96;
  letter-spacing: -.055em;
  text-transform: none;
}

html[data-layout="mobile"][data-extended="true"] .story-card--micro {
  max-height: min(27svh, 226px);
  padding: 12px 14px 11px;
  border-radius: 18px;
  background: linear-gradient(150deg, rgba(4,11,18,.95), rgba(2,7,12,.88));
}

html[data-layout="mobile"][data-extended="true"] .story-card--micro .story-body {
  margin-top: 5px;
  font-size: clamp(12px, 3.35vw, 14px);
  line-height: 1.22;
}

html[data-layout="mobile"][data-extended="true"] .story-card--micro .story-metrics {
  margin-top: 8px;
}

html[data-layout="mobile"][data-extended="true"] .story-card--micro .story-metrics dt {
  font-size: clamp(17px, 5vw, 21px);
}

html[data-layout="mobile"][data-extended="true"] .story-card--bay-top {
  top: max(12px, env(safe-area-inset-top));
  bottom: auto;
  max-width: 94%;
  margin-inline: auto;
}

html[data-layout="mobile"][data-extended="true"] .story-card--comparison {
  max-height: min(48svh, 405px);
}

html[data-layout="mobile"][data-extended="true"] .story-text--verdict.story-text--dense {
  max-height: 68svh;
}

html[data-extended="true"] .story-text {
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 61svh;
  padding: 104px 22px max(42px, calc(env(safe-area-inset-bottom) + 26px));
  background: linear-gradient(180deg, rgba(1,4,8,0) 0%, rgba(1,5,10,.76) 24%, rgba(1,5,10,.96) 62%, #010409 100%);
}

html[data-extended="true"] .story-text h2 {
  margin: 10px 0 0;
  max-width: 15ch;
  color: #fff;
  font-size: clamp(33px, 9.2vw, 42px);
  font-weight: 770;
  line-height: .98;
  letter-spacing: -.052em;
  text-wrap: balance;
}

html[data-extended="true"] .story-text > p:not(.story-kicker) {
  margin: 13px 0 0;
  max-width: 27ch;
  color: rgba(241,245,249,.84);
  font-size: clamp(17px, 4.7vw, 20px);
  font-weight: 510;
  line-height: 1.18;
  letter-spacing: -.02em;
}

html[data-extended="true"] .story-strip {
  padding: 12px 14px 13px;
  border: 1px solid rgba(180,211,234,.17);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(7,15,23,.95), rgba(2,6,11,.91));
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

html[data-extended="true"] .story-strip h2 {
  margin: 6px 0 0;
  color: #fff;
  font-size: clamp(22px, 6vw, 26px);
  line-height: 1;
  letter-spacing: -.04em;
}

html[data-extended="true"] .story-strip > p:not(.story-kicker) {
  margin: 5px 0 0;
  color: rgba(236,242,247,.77);
  font-size: 12px;
  line-height: 1.22;
}

html[data-extended="true"] .story-strip--bay {
  bottom: max(10px, env(safe-area-inset-bottom));
  max-height: 118px;
}

html[data-extended="true"] .story-strip--mass { max-height: 150px; }
html[data-extended="true"] .story-strip--mass .story-head { margin-bottom: 6px; }
html[data-extended="true"] .story-strip--mass h2 { font-size: clamp(19px, 5.2vw, 23px); }

html[data-extended="true"] .story-infographic {
  padding: 15px 16px 13px;
  border-top: 1px solid rgba(173,207,229,.22);
  background: linear-gradient(180deg, rgba(2,7,12,.58), rgba(2,7,12,.94));
  box-shadow: 0 -16px 50px rgba(0,0,0,.26);
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
  backdrop-filter: blur(12px) saturate(1.08);
}

html[data-extended="true"] .story-infographic h2 {
  margin: 8px 0 0;
  color: #fff;
  font-size: clamp(24px, 6.8vw, 30px);
  line-height: 1;
  letter-spacing: -.045em;
  text-wrap: balance;
}

html[data-extended="true"] .story-infographic--dense {
  max-height: min(54svh, 458px);
  padding: 14px 16px 13px;
  border-radius: 19px 19px 0 0;
  background:
    radial-gradient(110% 110% at 0 0, rgba(46,105,143,.18), transparent 55%),
    linear-gradient(180deg, rgba(3,10,16,.90), rgba(1,5,9,.97));
}

html[data-extended="true"] .story-infographic--dense h2 {
  max-width: 22ch;
  font-size: clamp(22px, 6.2vw, 28px);
}

html[data-extended="true"] .story-timeline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 11px;
}

html[data-extended="true"] .story-timeline > div {
  min-height: 52px;
  padding: 8px 9px;
  border: 1px solid rgba(158,198,224,.14);
  background: rgba(255,255,255,.028);
}

html[data-extended="true"] .story-timeline strong,
html[data-extended="true"] .story-timeline span { display: block; }

html[data-extended="true"] .story-timeline strong {
  color: #ffb34c;
  font-size: 12px;
  letter-spacing: .015em;
}

html[data-extended="true"] .story-timeline span {
  margin-top: 3px;
  color: rgba(226,235,241,.72);
  font-size: 10px;
  line-height: 1.18;
}

html[data-extended="true"] .cost-ladder {
  display: grid;
  gap: 5px;
  margin-top: 11px;
}

html[data-extended="true"] .cost-ladder > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 9px;
  border-left: 2px solid rgba(104,188,233,.62);
  background: rgba(255,255,255,.028);
}

html[data-extended="true"] .cost-ladder > div:last-child {
  border-left-color: #ffb34c;
  background: rgba(255,179,76,.07);
}

html[data-extended="true"] .cost-ladder span {
  color: rgba(218,231,239,.68);
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
}

html[data-extended="true"] .cost-ladder strong {
  color: #fff;
  font-size: 16px;
  letter-spacing: -.025em;
}

html[data-extended="true"] .power-ladder {
  display: grid;
  grid-template-columns: 1fr 12px 1fr 12px 1.25fr;
  align-items: center;
  gap: 5px;
  margin-top: 14px;
}

html[data-extended="true"] .power-ladder > div {
  min-width: 0;
  padding-top: 8px;
  border-top: 1px solid rgba(155,199,226,.20);
}

html[data-extended="true"] .power-ladder strong,
html[data-extended="true"] .power-ladder span { display: block; }

html[data-extended="true"] .power-ladder strong {
  color: #ffb34c;
  font-size: clamp(13px, 3.8vw, 16px);
  line-height: 1;
  letter-spacing: -.025em;
}

html[data-extended="true"] .power-ladder span {
  margin-top: 5px;
  color: rgba(218,230,238,.58);
  font-size: 8px;
  line-height: 1.15;
  text-transform: uppercase;
}

html[data-extended="true"] .power-ladder i {
  height: 1px;
  background: linear-gradient(90deg, rgba(104,188,233,.35), #ffb34c);
}

html[data-extended="true"] .compare-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

html[data-extended="true"] .compare-panels > div {
  padding: 10px 11px;
  border: 1px solid rgba(160,200,225,.15);
  background: rgba(255,255,255,.028);
}

html[data-extended="true"] .compare-panels strong,
html[data-extended="true"] .compare-panels span,
html[data-extended="true"] .compare-panels b { display: block; }

html[data-extended="true"] .compare-panels strong { color: #fff; font-size: 14px; }
html[data-extended="true"] .compare-panels span { margin-top: 4px; color: rgba(220,232,240,.62); font-size: 10px; }
html[data-extended="true"] .compare-panels b { margin-top: 7px; color: #ffb34c; font-size: 20px; }

html[data-extended="true"] .story-formula {
  margin: 14px 0 0;
  padding: 14px;
  color: rgba(234,243,249,.88);
  border: 1px solid rgba(127,191,229,.17);
  border-radius: 14px;
  background: rgba(80,148,188,.075);
  font: 650 clamp(18px, 5.4vw, 23px)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: -.035em;
  text-align: center;
}

html[data-extended="true"] .story-formula strong { color: #ffb34c; font-size: 1.2em; }

html[data-extended="true"] .story-checklist {
  display: grid;
  gap: 5px;
  margin: 11px 0 0;
  padding: 0;
  list-style: none;
}

html[data-extended="true"] .story-checklist li {
  position: relative;
  padding: 5px 7px 5px 20px;
  color: rgba(231,239,245,.80);
  border-bottom: 1px solid rgba(164,202,225,.09);
  font-size: 11px;
  line-height: 1.17;
}

html[data-extended="true"] .story-checklist li::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 10px;
  width: 5px;
  height: 5px;
  border: 1px solid #ffb34c;
  border-radius: 50%;
}

html[data-extended="true"] .story-caption {
  margin: 10px 0 0;
  color: rgba(236,242,247,.78);
  font-size: 12px;
  line-height: 1.26;
}

html[data-extended="true"] .story-flow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 12px 0 0;
  color: #eaf5fc;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .045em;
  text-transform: uppercase;
}

html[data-extended="true"] .story-flow i {
  flex: 1;
  height: 1px;
  min-width: 7px;
  background: linear-gradient(90deg, rgba(92,179,229,.25), #ffb34c);
}

html[data-extended="true"] .story-flow--thermal { margin-top: 3px; }

html[data-extended="true"] .story-infographic--saturn {
  top: max(10px, env(safe-area-inset-top));
  bottom: auto;
  min-height: 151px;
  padding: 11px 12px 9px;
  border: 0;
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(2,7,12,.82), rgba(2,7,12,.58));
  box-shadow: none;
}

html[data-extended="true"] .compare-rockets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

html[data-extended="true"] .compare-rockets > div {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 3px 7px;
  padding-left: 9px;
  border-left: 2px solid #ffb34c;
}

html[data-extended="true"] .compare-rockets > div:last-child { border-left-color: #68bce9; }
html[data-extended="true"] .compare-rockets strong { grid-column: 1 / -1; font-size: 13px; }
html[data-extended="true"] .compare-rockets span { color: #fff; font-size: 12px; font-weight: 740; }
html[data-extended="true"] .compare-rockets small { grid-column: 1 / -1; color: rgba(219,231,239,.58); font-size: 8px; text-transform: uppercase; letter-spacing: .06em; }
html[data-extended="true"] .story-infographic--saturn .story-source { margin-top: 7px; }

html[data-extended="true"] .story-infographic--irosa { max-height: 238px; }
html[data-extended="true"] .story-infographic--irosa .story-metrics dt { font-size: 14px; }
html[data-extended="true"] .story-infographic--ai1 { max-height: 300px; }

html[data-extended="true"] .ai1-specs,
html[data-extended="true"] .orbit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 13px;
}

html[data-extended="true"] .ai1-specs > div,
html[data-extended="true"] .orbit-grid > div {
  padding: 8px 9px;
  border: 1px solid rgba(157,198,224,.13);
  background: rgba(255,255,255,.025);
}

html[data-extended="true"] .ai1-specs strong,
html[data-extended="true"] .orbit-grid strong {
  display: block;
  color: #ffb34c;
  font-size: 17px;
  line-height: 1;
  letter-spacing: -.025em;
}

html[data-extended="true"] .ai1-specs span,
html[data-extended="true"] .orbit-grid span {
  display: block;
  margin-top: 4px;
  color: rgba(220,232,240,.61);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .055em;
  text-transform: uppercase;
}

html[data-extended="true"] .story-infographic--comparison {
  top: max(10px, env(safe-area-inset-top));
  bottom: auto;
  min-height: 154px;
  padding: 12px 14px 10px;
  border: 0;
  background: linear-gradient(180deg, rgba(1,4,8,.82), rgba(1,4,8,.28));
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-extended="true"] .story-infographic--comparison h2 {
  max-width: 13ch;
  font-size: clamp(25px, 7vw, 30px);
}

html[data-extended="true"] .comparison-scale {
  display: flex;
  gap: 13px;
  margin-top: 10px;
  color: rgba(223,233,240,.66);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

html[data-extended="true"] .comparison-scale strong {
  display: block;
  color: #ffb34c;
  font-size: 16px;
  line-height: 1;
}

html[data-extended="true"] .story-infographic--orbit { max-height: 410px; }
html[data-extended="true"] .story-infographic--orbit h2 { max-width: 14ch; }

html[data-extended="true"] .story-text--verdict {
  max-height: 80svh;
  padding-top: 68px;
}

html[data-extended="true"] .story-text--dense {
  max-height: 60svh;
  padding-top: 82px;
}

html[data-extended="true"] .story-text--dense h2 {
  max-width: 18ch;
  font-size: clamp(27px, 7.6vw, 34px);
}

html[data-extended="true"] .story-text--dense > p:not(.story-kicker) {
  max-width: 34ch;
  font-size: clamp(14px, 3.9vw, 16.5px);
  line-height: 1.27;
}

html[data-extended="true"] .story-text--chapter-end { max-height: 67svh; }

html[data-extended="true"] .story-result {
  margin-top: 15px !important;
  padding-left: 12px;
  color: #ffb34c !important;
  border-left: 2px solid currentColor;
  font-size: clamp(20px, 5.7vw, 25px) !important;
  font-weight: 760 !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
}

html[data-extended="true"] .story-text--verdict h2 { max-width: 13ch; font-size: clamp(29px, 8.2vw, 37px); }
html[data-extended="true"] .story-text--verdict > p:not(.story-kicker) { font-size: clamp(14px, 4vw, 17px); line-height: 1.22; }

html[data-extended="true"] .verdict-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 14px;
}

html[data-extended="true"] .verdict-metrics span {
  padding-top: 9px;
  color: rgba(220,232,240,.65);
  border-top: 1px solid rgba(170,204,226,.18);
  font-size: 10px;
  font-weight: 670;
  line-height: 1.15;
  text-transform: uppercase;
}

html[data-extended="true"] .verdict-metrics strong {
  display: block;
  margin-bottom: 4px;
  color: #ffb34c;
  font-size: 22px;
  line-height: 1;
}

html[data-extended="true"] .story-verdict {
  padding-left: 11px;
  border-left: 2px solid #ffb34c;
}

/* En móvil real usamos todo el alto disponible. La pieza sigue componiéndose
   en vertical, pero ya no queda encerrada dentro de una ventana 9:16 cuando
   el teléfono es más alto (19.5:9, 20:9, etc.). */
html[data-extended="true"] .viewport {
  width: 100vw;
  height: 100svh;
  background: linear-gradient(180deg, #477a9d 0%, #4b9fc2 58%, #172833 100%);
}

/* Pista de scroll. Su altura tiene que ir emparejada con el reloj editorial
   del motor —duración de la fuente + pausas + tramos a cámara lenta— para que
   el número de píxeles por segundo de metraje sea el mismo en toda la pieza.
   Si se tocan las pausas o los ralentíes, hay que recalcular esto. */
html[data-extended="true"][data-level="complete"] .track {
  height: 9752svh;
  min-height: 77001px;
}

html[data-extended="true"] .extended-intro {
  z-index: 1;
  display: block;
  left: -3%;
  right: auto;
  width: 115%;
  object-fit: contain;
  object-position: 50% 100%;
  background: linear-gradient(180deg, #477a9d 0%, #4b9fc2 58%, #172833 100%);
  transform-origin: 0 0;
}

html[data-extended="true"] .extended-poster {
  z-index: 1;
  left: -3%;
  right: auto;
  width: 115%;
  background-color: #477a9d;
  background-image: url("assets/extended/hero-restored.png");
  background-position: 50% 100%;
  background-size: contain;
  background-repeat: no-repeat;
  transform-origin: 50% 100%;
}

html[data-extended="true"] .mobile-cover {
  z-index: 2;
  justify-content: flex-start;
  padding: max(27px, env(safe-area-inset-top)) 12px max(20px, env(safe-area-inset-bottom));
  background:
    linear-gradient(90deg, rgba(1,8,13,.58) 0%, rgba(2,10,16,.30) 56%, rgba(2,9,15,.03) 86%),
    linear-gradient(180deg, rgba(1,8,13,.46) 0%, rgba(2,11,18,.16) 55%, rgba(0,0,0,0) 77%);
}

html[data-extended="true"] .mobile-cover__copy {
  width: 100%;
  max-width: none;
  min-height: 0;
  display: block;
  filter: drop-shadow(0 2px 14px rgba(0,0,0,.82));
}

html[data-extended="true"] .mobile-cover__eyebrow {
  margin: 0 0 12px 1px;
  font-size: clamp(9px, 2.7vw, 11px);
  letter-spacing: .19em;
}

html[data-extended="true"] .mobile-cover h1 {
  width: 100%;
  max-width: none;
  font-size: clamp(54px, 16.6vw, 70px);
  font-weight: 820;
  line-height: .79;
  letter-spacing: -.073em;
  text-wrap: balance;
}

html[data-extended="true"] .mobile-cover h1 em {
  margin-top: 12px;
  width: 93%;
  max-width: 12em;
  color: #ffb34c;
  font-size: .48em;
  font-weight: 690;
  line-height: .96;
  letter-spacing: -.04em;
}

html[data-extended="true"] .mobile-cover__intro {
  margin: 17px 0 0;
  width: 82%;
  max-width: 21ch;
  color: rgba(255,255,255,.96);
  font-size: clamp(26px, 7.7vw, 31px);
  font-weight: 620;
  line-height: 1.08;
  letter-spacing: -.025em;
  text-wrap: balance;
}

html[data-extended="true"] .extended-scroll {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: rgba(3,10,15,.43);
  box-shadow: 0 5px 24px rgba(0,0,0,.32);
  pointer-events: none;
  will-change: opacity, transform;
}

@media (max-height: 720px) {
  html[data-extended="true"] .mobile-cover { padding-top: 20px; }
  html[data-extended="true"] .mobile-cover h1 {
    font-size: clamp(48px, 15vw, 58px);
    line-height: .80;
  }
  html[data-extended="true"] .mobile-cover h1 em {
    margin-top: 9px;
    width: 72%;
    max-width: 8em;
  }
  html[data-extended="true"] .mobile-cover__intro {
    margin-top: 13px;
    width: 76%;
    max-width: 19ch;
    font-size: clamp(20px, 6.2vw, 23px);
    line-height: 1.04;
  }
  html[data-extended="true"] .story-card {
    bottom: max(10px, env(safe-area-inset-bottom));
    max-height: 58svh;
    padding: 13px 14px 11px;
    border-radius: 20px;
  }
  html[data-extended="true"] .story-head { margin-bottom: 7px; }
  html[data-extended="true"] .story-card h2 { font-size: clamp(22px, 6.5vw, 27px); }
  html[data-extended="true"] .story-body {
    margin-top: 8px;
    font-size: clamp(12.5px, 3.45vw, 14px);
    line-height: 1.23;
  }
  html[data-extended="true"] .story-metrics { margin-top: 9px; }
  html[data-extended="true"] .story-source { margin-top: 7px; }
  html[data-extended="true"] .story-text { padding-top: 82px; }
  html[data-extended="true"] .story-text h2 { font-size: clamp(28px, 8vw, 34px); }
  html[data-extended="true"] .story-infographic--orbit { max-height: 54svh; }
  html[data-extended="true"] .story-card--dense {
    max-height: 61svh;
    padding: 12px 13px 10px;
  }
  html[data-extended="true"] .story-card--dense h2 { font-size: clamp(20px, 5.9vw, 24px); }
  html[data-extended="true"] .story-card--dense .story-body { font-size: 12.5px; line-height: 1.22; }
  html[data-extended="true"] .story-prose { max-height: 58svh; padding: 14px 15px 13px; }
  html[data-extended="true"] .story-prose h2 { font-size: clamp(22px, 6.2vw, 26px); }
  html[data-extended="true"] .story-prose > p:not(.story-kicker) { font-size: 13px; line-height: 1.25; }
  html[data-extended="true"] .story-infographic--dense { max-height: 59svh; }
}

@media (max-width: 365px) {
  html[data-extended="true"] .story-card { left: 10px; right: 10px; }
  html[data-extended="true"] .story-card h2 { font-size: 24px; }
  html[data-extended="true"] .story-body { font-size: 13.5px; }
  html[data-extended="true"] .story-metrics dt { font-size: 17px; }
  html[data-extended="true"] .story-metrics dd { font-size: 8px; }
  html[data-extended="true"] .story-text { padding-left: 18px; padding-right: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-extended="true"] .story-unit {
    --unit-blur: 0px !important;
    transform: none;
  }
}