/* ============================================================
   UNA TAPA DE BOTELLA — hoja de estilo
   Paleta tomada de los fotogramas de la película:
   papel cálido de la escena interior · azul profundo del mar ·
   blanco de la tapa · ámbar de la superficie.
   ============================================================ */

:root{
  --paper:#F4EFE5;
  --paper-2:#EAE2D3;
  --ink:#131E24;
  --ink-soft:#46555C;
  --ink-faint:#7A878C;

  --deep:#07151D;
  --deep-2:#0C222D;
  --deep-3:#123340;

  --teal:#2C6E6B;
  --teal-light:#8FBDB9;
  --aqua:#CFE3E0;
  --amber:#C98B4B;
  --amber-light:#E3B27E;

  --line:rgba(19,30,36,.16);
  --line-strong:rgba(19,30,36,.28);
  --line-light:rgba(244,239,229,.18);

  --font-display:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",
                 "Songti SC","STSong",Georgia,serif;
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",
              "PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;

  --wrap:1280px;
  --gutter:clamp(20px,5vw,64px);
  --ease:cubic-bezier(.22,.68,0,1);
  --nav-h:78px;
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 16px);
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:clamp(15px,1.02vw,17px);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{max-width:100%;display:block;height:auto}
button{font:inherit;color:inherit}
a{color:inherit}

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

:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
  border-radius:2px;
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.skip{
  position:fixed;left:16px;top:-100px;z-index:200;
  background:var(--ink);color:var(--paper);
  padding:12px 20px;border-radius:2px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;
  text-decoration:none;transition:top .25s var(--ease);
}
.skip:focus{top:16px}

.wrap{
  width:100%;max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ── utilidades tipográficas ───────────────────────────────── */

.h2{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(2rem,4.4vw,3.5rem);
  line-height:1.06;
  letter-spacing:-.018em;
  margin:0;
  max-width:24ch;
  text-wrap:balance;
}
.h2--light{color:var(--paper)}

.h3{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.45rem,2.2vw,2rem);
  line-height:1.15;
  letter-spacing:-.012em;
  margin:0 0 .55em;
}

.lead{
  font-size:clamp(1rem,1.28vw,1.16rem);
  line-height:1.66;
  color:var(--ink-soft);
  max-width:56ch;
  margin:1.6rem 0 0;
  text-wrap:pretty;
}
.lead--tight{max-width:42ch;margin-top:0}

.kicker{
  display:flex;align-items:center;gap:.75em;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 1.5rem;
}
.kicker::before{
  content:"";width:22px;height:1px;background:currentColor;flex:none;opacity:.6;
}
.kicker--light{color:rgba(244,239,229,.58)}

.eyebrow{
  display:flex;align-items:center;gap:.7em;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  margin:0;
}
.eyebrow--light{color:rgba(244,239,229,.72)}
.eyebrow .dot{
  width:6px;height:6px;border-radius:50%;background:var(--amber-light);
  box-shadow:0 0 0 4px rgba(227,178,126,.18);
  animation:pulse 3.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 3px rgba(227,178,126,.16)}
  50%{box-shadow:0 0 0 7px rgba(227,178,126,.05)}
}

.section{padding-block:clamp(72px,10vw,148px)}

.section__head{margin-bottom:clamp(40px,6vw,76px)}
.section__head .lead{margin-top:1.7rem}
.section__head--split{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(28px,5vw,80px);
  align-items:end;
}

/* ── barra de progreso de lectura ─────────────────────────── */

.progress{
  position:fixed;inset:0 0 auto;height:2px;z-index:120;
  background:transparent;pointer-events:none;
}
.progress span{
  display:block;height:100%;width:100%;
  background:linear-gradient(90deg,var(--teal),var(--amber));
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .12s linear;
}

/* ── navegación ───────────────────────────────────────────── */

.nav{
  position:fixed;inset:0 0 auto;z-index:100;
  height:var(--nav-h);
  display:flex;align-items:center;gap:clamp(16px,3vw,48px);
  /* alineado con la columna de contenido (.wrap) en pantallas grandes */
  padding-inline:max(var(--gutter),calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  color:var(--paper);
  transition:background .45s var(--ease),color .45s var(--ease),
             box-shadow .45s var(--ease),height .35s var(--ease);
}
.nav::after{
  content:"";position:absolute;inset:auto 0 0;height:1px;
  background:var(--line);opacity:0;transition:opacity .45s var(--ease);
}
.nav.is-solid{
  background:rgba(244,239,229,.94);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  backdrop-filter:blur(18px) saturate(1.2);
  color:var(--ink);
  box-shadow:0 1px 24px -12px rgba(7,21,29,.35);
}
.nav.is-solid::after{opacity:1}

/* sobre las secciones oscuras (el mar, el pie) */
.nav.is-solid.is-dark{
  background:rgba(7,21,29,.84);
  color:var(--paper);
  box-shadow:0 1px 30px -10px rgba(0,0,0,.55);
}
.nav.is-solid.is-dark::after{opacity:0}

.nav__mark{
  display:flex;align-items:center;gap:12px;
  text-decoration:none;flex:none;
}
.cap-icon{width:26px;height:26px;flex:none;overflow:visible}
.cap-icon circle{fill:none;stroke:currentColor;stroke-width:1.5}
.cap-icon__inner{opacity:.55}
.cap-icon__ridges path{stroke:currentColor;stroke-width:1.1;opacity:.7}
.nav__mark:hover .cap-icon{animation:spincap 2.4s linear infinite}
@keyframes spincap{to{transform:rotate(360deg)}}
.nav__name{
  font-family:var(--font-display);
  font-size:15px;line-height:1.05;letter-spacing:.01em;
}

.nav__links{
  display:flex;gap:clamp(14px,2.2vw,34px);
  margin-inline:auto;
}
.nav__links a{
  position:relative;
  font-size:13px;
  letter-spacing:.04em;
  text-decoration:none;
  padding-block:6px;
  opacity:.85;
  transition:opacity .3s var(--ease);
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:0 50%;
  transition:transform .35s var(--ease);
}
.nav__links a:hover{opacity:1}
.nav__links a:hover::after{transform:scaleX(1)}

.nav__right{display:flex;align-items:center;gap:18px;flex:none;margin-left:auto}
.lang{
  display:flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;
}
.lang__btn{
  background:none;border:0;padding:6px 2px;cursor:pointer;
  color:inherit;opacity:.5;letter-spacing:inherit;
  transition:opacity .25s var(--ease);
}
.lang__btn:hover{opacity:.85}
.lang__btn.is-active{opacity:1;position:relative}
.lang__btn.is-active::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;
}
.lang__sep{opacity:.3}

/* ── HERO ─────────────────────────────────────────────────── */

.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  align-items:end;
  isolation:isolate;
  overflow:hidden;
  background:var(--deep);
  color:var(--paper);
  padding-block:calc(var(--nav-h) + 40px) clamp(36px,6vw,64px);
}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__img{
  width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  filter:brightness(.82) saturate(1.06) contrast(1.02);
  transform:scale(1.04);
  animation:kenburns 26s ease-in-out infinite alternate;
}
@keyframes kenburns{
  from{transform:scale(1.02) translate3d(0,0,0)}
  to{transform:scale(1.11) translate3d(0,-1.2%,0)}
}
.hero__veil{
  position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(7,21,29,.97) 0%,rgba(7,21,29,.78) 32%,
                    rgba(7,21,29,.34) 62%,rgba(7,21,29,.55) 100%),
    radial-gradient(120% 90% at 78% 18%,rgba(7,21,29,0) 0%,rgba(7,21,29,.45) 100%);
}
.hero__grain{
  position:absolute;inset:0;opacity:.42;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}

.hero__inner{
  width:100%;max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.hero__title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(2.9rem,8.4vw,7.6rem);
  line-height:.94;
  letter-spacing:-.025em;
  margin:clamp(20px,3vw,34px) 0 0;
  text-wrap:balance;
}
.hero__line{display:block}
.hero__line--it{
  font-style:italic;
  letter-spacing:-.015em;
  color:var(--aqua);
  padding-left:.06em;
}

.hero__foot{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:clamp(24px,4vw,56px);
  margin-top:clamp(30px,4.4vw,52px);
  padding-top:clamp(22px,3vw,32px);
  border-top:1px solid var(--line-light);
  max-width:1040px;
}
.hero__sub{
  margin:0;
  max-width:44ch;
  font-size:clamp(.98rem,1.15vw,1.1rem);
  line-height:1.6;
  color:rgba(244,239,229,.78);
  text-wrap:pretty;
}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;
  border-radius:100px;
  border:1px solid transparent;
  font-size:13.5px;
  letter-spacing:.02em;
  text-decoration:none;
  cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease),
             border-color .3s var(--ease),transform .3s var(--ease);
  white-space:nowrap;
}
.btn__icon{width:15px;height:15px;fill:currentColor;flex:none}
.btn--solid{background:var(--paper);color:var(--deep)}
.btn--solid:hover{background:var(--amber-light);transform:translateY(-2px)}
.btn--ghost{
  border-color:rgba(244,239,229,.34);
  color:var(--paper);
  background:rgba(244,239,229,.04);
}
.btn--ghost:hover{border-color:rgba(244,239,229,.8);background:rgba(244,239,229,.1)}
.btn:active{transform:translateY(0)}

.hero__top{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px 32px;flex-wrap:wrap;
}
.hero__meta{
  display:flex;align-items:center;gap:.7em;flex-wrap:wrap;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(244,239,229,.5);
  margin:0;
}

/* ── marquesina ───────────────────────────────────────────── */

.marquee{
  overflow:hidden;
  border-bottom:1px solid var(--line);
  background:var(--paper);
  padding-block:clamp(16px,2vw,24px);
  user-select:none;
}
.marquee__row{
  display:flex;align-items:center;gap:2.2rem;
  width:max-content;
  animation:slide 42s linear infinite;
  will-change:transform;
}
.marquee__row span{
  font-family:var(--font-display);
  font-size:clamp(1rem,1.6vw,1.35rem);
  letter-spacing:.01em;
  white-space:nowrap;
  color:var(--ink);
  opacity:.72;
}
.marquee__row .marquee__it{font-style:italic;color:var(--teal);opacity:1}
.marquee__row .marquee__dot{color:var(--amber);opacity:1;font-size:1rem}
@keyframes slide{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

/* ── reproductor ──────────────────────────────────────────── */

.player{
  position:relative;
  background:#050F14;
  border-radius:3px;
  overflow:hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 50px 90px -50px rgba(7,21,29,.75),
    0 12px 30px -18px rgba(7,21,29,.4);
}
.player:focus-visible{outline-offset:6px}
.player__stage{
  position:relative;
  aspect-ratio:16/9;
  background:#050F14;
}
.player__video{
  width:100%;height:100%;
  object-fit:contain;
  display:block;
  background:#050F14;
}
.player__shade{
  position:absolute;inset:auto 0 0;height:32%;
  background:linear-gradient(to top,rgba(5,15,20,.62),rgba(5,15,20,0));
  pointer-events:none;
  opacity:0;transition:opacity .4s var(--ease);
}
.player.is-paused .player__shade{opacity:1}

.player__bigplay{
  position:absolute;inset:0;margin:auto;
  width:132px;height:132px;
  display:grid;place-items:center;
  gap:0;
  border:1px solid rgba(244,239,229,.42);border-radius:50%;
  background:rgba(7,21,29,.32);
  box-shadow:0 6px 28px -12px rgba(0,0,0,.55),
             0 0 0 8px rgba(244,239,229,.06);
  overflow:hidden;
  color:var(--paper);
  cursor:pointer;
  transition:opacity .4s var(--ease),transform .4s var(--ease),background .3s var(--ease);
}
.player__bigplay svg{width:34px;height:34px;fill:currentColor;margin-left:5px}
.player__bigplay-ring{
  position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(244,239,229,.5);
  animation:ring 4.5s ease-out infinite;
}
@keyframes ring{
  0%{transform:scale(.96);opacity:.9}
  70%{transform:scale(1.28);opacity:0}
  100%{transform:scale(1.28);opacity:0}
}
.player__bigplay:hover{background:rgba(7,21,29,.5);transform:scale(1.04)}
.player.is-playing .player__bigplay{opacity:0;pointer-events:none;transform:scale(.92)}

.player__noaudio{
  position:absolute;right:16px;top:16px;
  padding:8px 14px;border-radius:100px;
  background:rgba(5,15,20,.6);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(244,239,229,.22);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--paper);
  cursor:pointer;animation:fadein .5s var(--ease);
  appearance:none;-webkit-appearance:none;
}
@keyframes fadein{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.player__controls{
  display:flex;align-items:center;gap:clamp(8px,1.4vw,18px);
  padding:12px clamp(12px,2vw,22px);
  background:#050F14;
  border-top:1px solid rgba(244,239,229,.09);
  color:var(--paper);
}

.ctl{
  flex:none;
  width:38px;height:38px;
  display:grid;place-items:center;
  background:none;border:0;border-radius:50%;
  color:var(--paper);cursor:pointer;
  opacity:.82;
  transition:opacity .25s var(--ease),background .25s var(--ease);
}
.ctl:hover{opacity:1;background:rgba(244,239,229,.1)}
.ico{width:19px;height:19px;fill:currentColor}
.ctl .ico--pause{display:none}
.player.is-playing .ico--play{display:none}
.player.is-playing .ico--pause{display:block}
.ctl .ico--muted{display:none}
.player.is-muted .ico--vol{display:none}
.player.is-muted .ico--muted{display:block}

.player__time{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
  color:rgba(244,239,229,.72);
  font-variant-numeric:tabular-nums;
  flex:none;
}
.player__time-sep{opacity:.4;margin-inline:5px}

.seek-wrap{position:relative;flex:1;min-width:60px;height:32px;display:flex;align-items:center}
.seek{
  position:relative;z-index:2;
  -webkit-appearance:none;appearance:none;
  width:100%;height:32px;margin:0;
  background:transparent;cursor:pointer;
}
.seek::-webkit-slider-runnable-track{height:32px;background:transparent}
.seek::-moz-range-track{height:32px;background:transparent}
.seek::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:13px;height:13px;border-radius:50%;
  background:var(--paper);
  border:0;
  box-shadow:0 0 0 1px rgba(5,15,20,.35);
  transition:transform .2s var(--ease);
}
.seek:hover::-webkit-slider-thumb{transform:scale(1.22)}
.seek::-moz-range-thumb{
  width:13px;height:13px;border-radius:50%;background:var(--paper);border:0;
}
.seek__track{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  height:4px;border-radius:2px;
  background:rgba(244,239,229,.2);
  overflow:hidden;
  pointer-events:none;
}
.seek__buffered{
  position:absolute;inset:0 auto 0 0;width:0;
  background:rgba(244,239,229,.14);
}
.seek__played{
  position:absolute;inset:0 auto 0 0;width:0;
  background:linear-gradient(90deg,var(--teal-light),var(--amber-light));
}
.seek__ticks{position:absolute;inset:0;mix-blend-mode:difference}
.seek__ticks i{
  position:absolute;top:0;bottom:0;width:1px;
  background:rgba(255,255,255,.55);
}

/* pantalla completa */
.player:fullscreen,
.player:-webkit-full-screen{
  display:flex;flex-direction:column;
  width:100%;height:100%;
  border-radius:0;background:#000;
}
.player:fullscreen .player__stage,
.player:-webkit-full-screen .player__stage{
  flex:1;aspect-ratio:auto;height:auto;min-height:0;
}
.player:fullscreen .player__controls,
.player:-webkit-full-screen .player__controls{flex:none;padding-block:14px}

/* debajo del reproductor */

.film__under{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,4.5vw,64px);
  margin-top:clamp(32px,4vw,52px);
  padding-top:clamp(26px,3vw,36px);
  border-top:1px solid var(--line);
}

.chapters__title{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-faint);
  margin:0 0 16px;
}
.chapters__list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:2px 10px;
}
.chapter{
  width:100%;
  display:flex;flex-direction:column;gap:2px;
  padding:10px 0;
  background:none;border:0;border-bottom:1px solid transparent;
  text-align:left;cursor:pointer;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.chapter__t{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;
  color:var(--ink-faint);
  transition:color .3s var(--ease);
}
.chapter__n{
  font-family:var(--font-display);font-size:1.02rem;letter-spacing:.005em;
}
.chapter:hover{border-bottom-color:var(--line-strong)}
.chapter.is-current .chapter__n{color:var(--teal)}
.chapter.is-current .chapter__t{color:var(--teal)}

.film__note{
  padding-left:clamp(0px,2vw,28px);
  border-left:1px solid var(--line);
}
.film__note-line{
  margin:0 0 22px;
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.06rem;
  line-height:1.5;
  color:var(--ink-soft);
  max-width:32ch;
}
.specs{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 20px;margin:0;
}
.specs div{display:flex;flex-direction:column;gap:2px}
.specs dt{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint);
}
.specs dd{margin:0;font-size:13.5px;letter-spacing:.01em}

/* ── EL VIAJE ─────────────────────────────────────────────── */

.journey{background:linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%)}

.stops{list-style:none;margin:0;padding:0}
.stop{
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
  gap:clamp(24px,5vw,72px);
  align-items:center;
  padding-block:clamp(28px,4vw,44px);
  border-top:1px solid var(--line);
}
.stop:first-child{border-top:0;padding-top:0}
.stop:last-child{padding-bottom:0}

.stop__fig{margin:0;overflow:hidden;border-radius:2px;position:relative;background:var(--paper-2)}
.stop__fig::after{
  content:"";position:absolute;inset:0;
  box-shadow:inset 0 0 0 1px rgba(19,30,36,.08);
  pointer-events:none;
}
.stop__fig img{
  width:100%;aspect-ratio:16/10;object-fit:cover;
  transition:transform 1.1s var(--ease),filter 1.1s var(--ease);
  filter:saturate(.98);
}
.stop:hover .stop__fig img{transform:scale(1.035);filter:saturate(1.05)}

.stop--rev{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}
.stop--rev .stop__fig{order:2}
.stop--rev .stop__body{order:1;padding-left:clamp(0px,2vw,32px)}
.stop__body{padding-right:clamp(0px,2vw,32px)}

.stop__num{
  display:inline-block;
  font-family:var(--font-mono);font-size:52px;line-height:1;
  letter-spacing:-.04em;
  color:transparent;
  -webkit-text-stroke:1px rgba(19,30,36,.24);
  margin-bottom:6px;
}
.stop__time{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;
  color:var(--ink-faint);
  margin:0 0 14px;
}
.stop__body p{max-width:40ch;color:var(--ink-soft);margin:0}

/* ── LOS DATOS ────────────────────────────────────────────── */

.facts{
  position:relative;
  background:
    radial-gradient(90% 70% at 12% 0%,rgba(44,110,107,.32),transparent 62%),
    radial-gradient(70% 60% at 92% 88%,rgba(19,51,64,.85),transparent 60%),
    linear-gradient(180deg,var(--deep-2),var(--deep));
  color:var(--paper);
  overflow:hidden;
}
.facts::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.facts__bubbles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.facts__bubbles span{
  position:absolute;bottom:-60px;
  border-radius:50%;
  border:1px solid rgba(207,227,224,.26);
  animation:rise 18s linear infinite;
}
.facts__bubbles span:nth-child(1){left:8%;width:12px;height:12px;animation-delay:0s;animation-duration:22s}
.facts__bubbles span:nth-child(2){left:26%;width:26px;height:26px;animation-delay:-6s;animation-duration:26s}
.facts__bubbles span:nth-child(3){left:52%;width:8px;height:8px;animation-delay:-12s;animation-duration:19s}
.facts__bubbles span:nth-child(4){left:74%;width:34px;height:34px;animation-delay:-3s;animation-duration:30s}
.facts__bubbles span:nth-child(5){left:90%;width:16px;height:16px;animation-delay:-16s;animation-duration:24s}
@keyframes rise{
  0%{transform:translateY(0) scale(.9);opacity:0}
  12%{opacity:.7}
  100%{transform:translateY(-118vh) translateX(26px) scale(1.1);opacity:0}
}

.stats{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--line-light);
}
.stat{
  padding:clamp(26px,3.4vw,44px) clamp(0px,3vw,36px) clamp(26px,3.4vw,40px) 0;
  border-bottom:1px solid var(--line-light);
}
.stat:nth-child(odd){border-right:1px solid var(--line-light);padding-right:clamp(24px,3vw,44px)}
.stat:nth-child(even){padding-left:clamp(24px,3vw,44px)}
.stat__num{
  font-family:var(--font-display);
  font-size:clamp(2.6rem,5.2vw,4.4rem);
  line-height:1;
  letter-spacing:-.03em;
  margin:0 0 .42em;
  color:var(--paper);
  display:flex;align-items:baseline;gap:.18em;
  flex-wrap:wrap;
}
.stat__unit{
  font-family:var(--font-sans);
  font-size:.24em;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--teal-light);
  transform:translateY(-.35em);
}
.stat__title{
  font-family:var(--font-mono);
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--teal-light);
  margin:0 0 12px;font-weight:400;
}
.stat__text{
  margin:0;max-width:38ch;
  color:rgba(244,239,229,.76);
  font-size:.95rem;line-height:1.62;
}

.facts__src{
  margin:clamp(28px,4vw,44px) 0 0;
  font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:.05em;line-height:1.9;
  color:rgba(244,239,229,.5);
  max-width:96ch;
}
.facts__src a{color:rgba(244,239,229,.82);text-decoration:none;border-bottom:1px solid rgba(244,239,229,.3)}
.facts__src a:hover{color:var(--paper);border-bottom-color:var(--paper)}
.facts__src-note{display:block;margin-top:8px;opacity:.72}

/* ── ACTÚA ────────────────────────────────────────────────── */

.acts{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,3vw,40px);
}
.act-card{
  border-top:1px solid var(--line-strong);
  padding-top:18px;
  position:relative;
}
.act-card__n{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;
  color:var(--amber);
  display:block;margin-bottom:clamp(28px,5vw,56px);
}
.act-card p{margin:0;color:var(--ink-soft);font-size:.95rem;max-width:32ch}
.act-card h3{margin-bottom:.45em}

.act__close{
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.4rem,2.7vw,2.15rem);
  line-height:1.32;
  letter-spacing:-.01em;
  max-width:26ch;
  margin:clamp(56px,8vw,104px) auto 0;
  text-align:center;
  text-wrap:balance;
  color:var(--ink);
}

/* ── CRÉDITOS ─────────────────────────────────────────────── */

.credits{background:var(--paper-2);border-top:1px solid var(--line)}
.credits__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(32px,6vw,88px);
  align-items:center;
}
.cred-list{
  margin:clamp(28px,4vw,44px) 0 0;
  border-top:1px solid var(--line);
}
.cred-list div{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:11px 0;
  border-bottom:1px solid var(--line);
}
.cred-list dt{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint);
}
.cred-list dd{
  margin:0;font-family:var(--font-display);font-size:15.5px;letter-spacing:.01em;
}

.credits__grid .lead{margin-top:1.4rem;max-width:44ch}

.credits__fig{margin:0}
.credits__fig img{
  width:100%;
  border-radius:2px;
  background:var(--deep);
}
.credits__fig figcaption{
  margin-top:10px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint);
}

/* ── pie ──────────────────────────────────────────────────── */

.foot{
  background:var(--deep);
  color:rgba(244,239,229,.6);
  padding-block:clamp(40px,5vw,64px);
}
.foot__inner{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(24px,4vw,56px);
  align-items:center;
}
.foot__mark{
  font-family:var(--font-display);
  font-size:15px;line-height:1.15;color:var(--paper);
  margin:0;
}
.foot__line{
  margin:0;font-size:12px;line-height:1.75;
  font-family:var(--font-mono);letter-spacing:.02em;
  color:rgba(244,239,229,.55);
}
.foot__toplink{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;
  color:rgba(244,239,229,.72);
  transition:color .3s var(--ease);
}
.foot__toplink svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.foot__toplink:hover{color:var(--paper)}
.foot__toplink:hover svg{transform:translateY(-3px)}

/* ── animaciones de entrada ───────────────────────────────── */

.reveal{
  transition:opacity 1s var(--ease),transform 1s var(--ease);
  transition-delay:var(--d,0ms);
}
/* Sólo se oculta si hay JavaScript: sin él, todo el contenido es visible. */
.js .reveal{opacity:0;transform:translateY(22px)}
.js .reveal.in{opacity:1;transform:none}

/* ── idioma chino ─────────────────────────────────────────── */

html[lang="zh"] body{
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",
              var(--font-sans);
  line-height:1.85;
  letter-spacing:.01em;
}
html[lang="zh"] .h2,
html[lang="zh"] .h3,
html[lang="zh"] .hero__title,
html[lang="zh"] .stat__num,
html[lang="zh"] .act__close,
html[lang="zh"] .cred-list dd,
html[lang="zh"] .nav__name,
html[lang="zh"] .foot__mark,
html[lang="zh"] .chapter__n,
html[lang="zh"] .marquee__row span{
  font-family:"Songti SC","STSong","Noto Serif SC",var(--font-display);
  letter-spacing:0;
}
html[lang="zh"] .hero__title{line-height:1.1}
html[lang="zh"] .hero__line--it{font-style:normal}
html[lang="zh"] .lead,html[lang="zh"] .stat__text,
html[lang="zh"] .stop__body p,html[lang="zh"] .act-card p{line-height:1.9}
html[lang="zh"] .kicker,
html[lang="zh"] .chapters__title,
html[lang="zh"] .stat__title{letter-spacing:.14em}

/* ── responsive ───────────────────────────────────────────── */

@media (max-width:1024px){
  .section__head--split{grid-template-columns:1fr;align-items:start}
  .lead--tight{max-width:52ch;margin-top:1rem}
  .acts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .act-card__n{margin-bottom:32px}
  .credits__grid{grid-template-columns:1fr;align-items:start}
  .credits__fig{order:-1;max-width:620px}
  .film__under{grid-template-columns:1fr}
  .film__note{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:26px}
  .specs{max-width:420px}
  .chapters__list{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:860px){
  :root{--nav-h:66px}
  .nav__links{display:none}
  .nav__name{font-size:14px}
  .hero{min-height:92svh}
  .hero__foot{grid-template-columns:1fr;align-items:start}
  .stop{grid-template-columns:1fr;gap:22px}
  .stop--rev .stop__fig{order:0}
  .stop--rev .stop__body{order:1;padding-left:0}
  .stop__body{padding-right:0}
  .stop__fig img{aspect-ratio:16/9}
  .stop__num{font-size:42px}
  .stats{grid-template-columns:1fr}
  .stat:nth-child(odd){border-right:0;padding-right:0}
  .stat:nth-child(even){padding-left:0}
  .foot__inner{grid-template-columns:1fr;gap:18px}
  .player__bigplay{width:100px;height:100px}
  .player__bigplay svg{width:26px;height:26px}

}

@media (max-width:600px){
  .acts{grid-template-columns:1fr}
  .chapters__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .player__time{font-size:10px}
  .player__controls{gap:6px;padding:8px 10px}
  .ctl{width:34px;height:34px}
  .ico{width:17px;height:17px}
  .btn{padding:12px 20px}
  .specs{grid-template-columns:1fr 1fr;gap:12px}
  .hero__title{font-size:clamp(2.5rem,10.5vw,3.4rem)}
}

/* ── sin movimiento ───────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js .reveal{opacity:1;transform:none}
  .marquee__row{animation:none}
  .hero__img{animation:none;transform:none}
  .facts__bubbles{display:none}
}