/* =========================================================
   CINE · capa cinemática de la portada
   1. Hero: apertura en formato panorámico (bandas negras que se retiran)
   2. .cx  «Plano que se abre»: una escena fijada al scroll; la ventana de la
      plantilla crece hasta llenar la pantalla en 2.39:1, con vídeo y timecode
   3. .wx  Declaración: las palabras se encienden al bajar
   Movimiento reducido y móvil: estados finales quietos.
   ========================================================= */

/* ---------- 1 · apertura del hero ---------- */
.hx .cine-lb{position:absolute;left:0;right:0;height:13vh;background:#000;z-index:5;pointer-events:none;
  transition:transform 1.5s cubic-bezier(.7,0,.2,1) .25s}
.hx .cine-lb.t{top:0;transform-origin:50% 0}
.hx .cine-lb.b{bottom:0;transform-origin:50% 100%}
.hx.cine-open .cine-lb{transform:scaleY(0)}
.hx .hx-in{transition:opacity 1.2s ease .5s,filter 1.4s ease .5s}
.hx:not(.cine-open) .hx-in{opacity:0;filter:blur(8px)}
.hx .hx-mocks{transition:translate 1.6s cubic-bezier(.2,.7,.2,1) .7s,opacity 1.2s ease .7s}
.hx:not(.cine-open) .hx-mocks{translate:0 60px;opacity:0}

/* ---------- 2 · plano que se abre ---------- */
.cx{position:relative;height:340vh;background:#050505;color:#f2f2ef;--p:0;--e:0;--t:0}
.cx-stage{position:sticky;top:var(--hdr);height:calc(100vh - var(--hdr));height:calc(100svh - var(--hdr));overflow:hidden;display:grid;place-items:center}
.cx-intro{position:absolute;left:0;right:0;top:clamp(40px,8vh,96px);z-index:3;text-align:center;display:grid;justify-items:center;
  padding-inline:var(--gl) var(--gr);opacity:calc(1 - var(--e) * 2.4);translate:0 calc(var(--e) * -70px);pointer-events:none}
.cx-kick{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#a3adff}
.cx-h{margin-top:18px;font-size:clamp(34px,4vw,64px);line-height:1.02;letter-spacing:-.045em;font-weight:500;max-width:20ch}
.cx-h em,.cx-big em{font-family:var(--serif);font-style:italic;font-weight:500;letter-spacing:-.02em}
.cx-p{margin-top:18px;max-width:52ch;font-size:clamp(15px,1.05vw,17px);line-height:1.5;color:#b9b9b2}

.cx-frame{position:relative;z-index:2;width:var(--fw,46vw);height:var(--fh,26vw);border-radius:var(--fr,14px);overflow:hidden;
  translate:0 var(--fy,12vh);box-shadow:0 60px 120px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.08);will-change:width,height}
.cx-media{position:absolute;inset:-6%;background:center 64%/cover no-repeat;scale:calc(1.18 - var(--e) * .12)}
.cx-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease}
.cx-media video.ready{opacity:1}
.cx-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,0) 35%,rgba(0,0,0,.05) 60%,rgba(0,0,0,.6))}
.cx-nav{position:absolute;left:0;right:0;top:0;display:flex;gap:clamp(14px,2vw,32px);align-items:center;padding:clamp(14px,2.2vw,30px) var(--gr) 0 var(--gl);
  font-size:clamp(11px,.9vw,14px);color:rgba(255,255,255,.85);opacity:var(--t)}
.cx-nav b{margin-right:auto;letter-spacing:.3em;font-weight:600}
.cx-copy{position:absolute;left:var(--gl);bottom:clamp(18px,3.4vw,52px);right:30%;opacity:var(--t);translate:0 calc((1 - var(--t)) * 40px)}
.cx-copy span{font-size:clamp(11px,.9vw,14px);letter-spacing:.06em;color:rgba(255,255,255,.8)}
.cx-big{margin-top:12px;font-size:clamp(34px,5.4vw,96px);line-height:.98;letter-spacing:-.045em;font-weight:500;color:#fff}

.cx-bar{position:absolute;left:0;right:0;z-index:4;display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding-inline:var(--gl) var(--gr);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#8d8d86;
  opacity:var(--t);transition:none}
.cx-bar.top{top:calc(var(--lb,0px) / 2 - 8px)}
.cx-bar.bot{bottom:calc(var(--lb,0px) / 2 - 10px)}
.cx-bar a{color:#f2f2ef;text-decoration:none;text-transform:none;letter-spacing:0;font-size:14px;border-bottom:1px solid rgba(242,242,239,.35);padding-bottom:2px;transition:border-color .2s}
.cx-bar a:hover{border-color:#f2f2ef}
.cx-bar.bot{pointer-events:auto}
.cx:not(.cx-live) .cx-bar{pointer-events:none}

/* estado quieto: móvil y movimiento reducido */
.cx.cx-still{height:auto}
.cx.cx-still .cx-stage{position:relative;height:auto;display:block;padding:clamp(72px,9vw,120px) 0 clamp(56px,7vw,96px)}
.cx.cx-still .cx-intro{position:relative;top:auto;opacity:1;translate:none}
.cx.cx-still .cx-frame{width:calc(100% - var(--gl) - var(--gr));height:auto;aspect-ratio:4/5;margin:clamp(40px,6vw,72px) auto 0;translate:none;border-radius:12px}
.cx.cx-still .cx-nav,.cx.cx-still .cx-copy{opacity:1;translate:none}
.cx.cx-still .cx-copy{right:18px}
.cx.cx-still .cx-bar{position:relative;opacity:1;margin-top:18px;text-transform:none;letter-spacing:0}
.cx.cx-still .cx-bar.top{display:none}
@media (min-width:700px){.cx.cx-still .cx-frame{aspect-ratio:2.39/1}}

/* ---------- 3 · declaración ---------- */
.wx{position:relative;height:220vh;background:var(--paper);color:var(--ink)}
.wx-stage{position:sticky;top:var(--hdr);height:calc(100vh - var(--hdr));height:calc(100svh - var(--hdr));display:grid;place-items:center;padding-inline:var(--gl) var(--gr)}
.wx-t{max-width:22ch;font-size:clamp(32px,4.4vw,76px);line-height:1.06;letter-spacing:-.045em;font-weight:500;text-align:left}
.wx-t em{font-family:var(--serif);font-style:italic;font-weight:500;letter-spacing:-.02em}
.wx-t .w{color:color-mix(in srgb,var(--ink) 16%,transparent);transition:color .35s ease}
.wx-t .w.on{color:var(--ink)}
.wx-t em .w.on{color:var(--accent)}
.wx.wx-still{height:auto}
.wx.wx-still .wx-stage{position:relative;height:auto;padding-block:clamp(88px,11vw,160px)}
.wx.wx-still .wx-t .w{color:inherit}

@media (prefers-reduced-motion:reduce){
  .hx .cine-lb{display:none}
  .hx .hx-in,.hx .hx-mocks{transition:none!important;opacity:1!important;filter:none!important;translate:none!important}
}