/* Tranky · portada película (scroll-film): escenario fijo mientras se baja, cuadro del video, textos por etapa y medidor de brillo. */
.film{position:relative;height:620vh;background:var(--fondo)}
.film-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate;background:#120b08}
.film-fondo{position:absolute;inset:-12%;width:124%;height:124%;filter:blur(26px) brightness(.42) saturate(1.25);z-index:-3}
.film-cv{position:absolute;display:block;z-index:-2;-webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 80%,transparent);mask-image:linear-gradient(180deg,transparent,#000 14%,#000 80%,transparent)}
.film.horizontal .film-cv{-webkit-mask-image:linear-gradient(90deg,transparent,#000 24%);mask-image:linear-gradient(90deg,transparent,#000 24%)}
.film-grano{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.13;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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grano .5s steps(3) infinite}
.film-vin{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 60% 45%,transparent 45%,rgba(0,0,0,.55)),linear-gradient(180deg,rgba(6,8,12,.55),transparent 22%,transparent 55%,rgba(6,8,12,.9))}
.film.horizontal .film-vin{background:radial-gradient(ellipse at 70% 50%,transparent 40%,rgba(0,0,0,.5)),linear-gradient(90deg,rgba(6,8,12,.92),rgba(6,8,12,.55) 34%,transparent 60%)}
.film-fin{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;background:linear-gradient(180deg,rgba(7,7,7,0),var(--fondo) 92%)}
@keyframes grano{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}}

/* Textos que aparecen en cada etapa */
.beat{position:absolute;left:var(--pad);right:var(--pad);bottom:max(96px,13svh);max-width:560px;opacity:0;visibility:hidden;will-change:opacity,transform;z-index:2}
.film.horizontal .beat{top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;max-width:min(560px,42vw)}
.film.horizontal .beat h2{font-size:clamp(44px,min(6.4vw,11vh),96px)}
.film.horizontal .beat-hero h1{font-size:clamp(48px,min(7.4vw,13vh),128px)}
.film.horizontal .beat-fin h2{font-size:clamp(48px,min(6.8vw,12vh),110px)}
.beat .beat-n{display:inline-flex;align-items:center;gap:10px;font:800 13px/1 var(--sans);letter-spacing:.22em;color:var(--amarillo);margin-bottom:14px}
.beat .beat-n::before{content:"";width:30px;height:3px;border-radius:3px;background:currentColor}
.beat h2{font-size:clamp(44px,7.4vw,92px);font-style:italic;text-shadow:0 6px 40px rgba(0,0,0,.55)}
.beat p{margin:14px 0 0;font-size:clamp(16px,1.6vw,19px);color:#e3e7ee;max-width:430px;text-shadow:0 2px 18px rgba(0,0,0,.7)}
.beat-hero{opacity:1;visibility:visible}
.beat-hero .eyebrow{margin-bottom:16px}
.beat-hero h1{font-size:clamp(54px,10vw,132px);font-style:italic;text-shadow:0 8px 50px rgba(0,0,0,.6)}
.beat-hero h1 .l{display:block;overflow:hidden;padding-bottom:.04em}
.beat-hero h1 .l>span{display:inline-block}
.beat-hero h1 em,.beat h2 em,.beat-fin h2 em{font-style:italic;color:var(--amarillo)}
.beat-hero .chips{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.beat-hero .chips li{font:600 13px/1 var(--sans);padding:9px 13px;border-radius:999px;background:rgba(10,10,12,.55);border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.beat-fin{max-width:600px}
.beat-fin h2{font-size:clamp(50px,8.4vw,112px)}
.beat-fin .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.beat-fin .chips{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:8px;font:600 13px/1.2 var(--sans);color:#d2d8e2}
.beat-fin .chips li+li::before{content:"·";margin-right:8px;color:var(--amarillo)}
.beat:not(.activo) a{pointer-events:none}

/* Medidor de brillo (avance de la película) */
.medidor{position:absolute;right:var(--pad);bottom:28px;z-index:2;display:flex;flex-direction:column;align-items:flex-end;gap:6px;font:700 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#fff;pointer-events:none;transition:opacity .5s}
.medidor-fila{display:flex;align-items:baseline;gap:10px}
.medidor-et{color:var(--amarillo)}
.medidor-num{font:800 italic 30px/1 var(--cond);letter-spacing:0;min-width:2.2ch;text-align:right}
.medidor-num::after{content:"%";font-size:.55em;margin-left:2px}
.medidor-bar{width:150px;height:3px;border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden}
.medidor-bar i{display:block;height:100%;background:linear-gradient(90deg,#c9662b,var(--amarillo) 50%,#fff);transform-origin:left;transform:scaleX(0)}
.film:not(.horizontal) .medidor{left:var(--pad);right:auto;align-items:flex-start;bottom:auto;top:84px}
.film:not(.horizontal) .medidor-fila{flex-direction:row-reverse}

/* Indicador de bajar y carga */
.film .bajar{z-index:2;transition:opacity .4s}
.film.empezo .bajar{opacity:0}
.film-carga{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:4;background:rgba(255,255,255,.08);transition:opacity .6s}
.film-carga i{display:block;height:100%;background:var(--amarillo);transform-origin:left;transform:scaleX(0);transition:transform .3s}
.film-carga.fuera{opacity:0}


@media (prefers-reduced-motion:reduce){.film-grano{animation:none}}
@media (max-width:420px){.beat h2{font-size:44px}.beat-hero h1{font-size:52px}.beat-fin h2{font-size:50px}.beat-fin .ctas .btn{width:100%}}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* El body con overflow hidden rompe el escenario fijo (sticky): clip recorta igual sin romperlo */
body{overflow-x:clip}