/* Q2tec · hero cinemático de scroll (mundo luminoso, sobre el design system del cliente) */
.vhero{height:650vh;position:relative;background:#eef1f6}
.vhero__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.vposter{position:absolute;inset:0;background-size:cover;background-position:center}
#hero{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease;will-change:transform;transform:translateZ(0)}
.vhero__stage.video-ready #hero{opacity:1}
.vhero__stage.video-failed #hero{display:none}
.vscrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 130% 95% at 50% 45%,rgba(238,241,251,0) 40%,rgba(238,241,251,.5) 100%)}

/* bandas */
.band{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center;padding-inline:clamp(20px,6vw,72px);opacity:0;pointer-events:none;color:var(--q2-ink);text-shadow:0 1px 2px rgba(255,255,255,.9),0 3px 14px rgba(243,245,252,.75),0 10px 40px rgba(243,245,252,.7)}
.band .btn{text-shadow:none;pointer-events:auto}
.band h1,.band h2{font-family:var(--font-head);color:var(--q2-ink);font-weight:700;font-size:clamp(1.9rem,4.6vw,3.6rem);line-height:1.12;max-width:16ch;margin:0;text-wrap:balance}
.band h1{color:var(--q2-teal-700)}
.band h1 .ink{color:var(--q2-ink)}
.band__sub{margin:18px 0 0;font-size:clamp(1.02rem,1.5vw,1.28rem);max-width:44ch;color:var(--q2-slate)}
.band__quote{margin:20px 0 0;font-style:italic;color:var(--q2-slate);font-size:clamp(1rem,1.4vw,1.2rem);max-width:46ch}
.band::before{content:"";position:absolute;inset:-4%;pointer-events:none;z-index:-1;opacity:calc(.3 + .7*var(--k,1))}
.band--1{align-items:center;justify-content:flex-start;padding-top:18vh;text-align:center}
.band--1 h1{max-width:15ch}
.band--1::before{background:radial-gradient(ellipse 70% 54% at 50% 28%,rgba(240,243,250,.9) 0%,rgba(240,243,250,.65) 52%,rgba(240,243,250,0) 80%)}
.band--2{align-items:flex-start}
.band--2 h2{max-width:26ch;text-align:left;font-size:clamp(1.5rem,3.2vw,2.6rem)}
.band--2 .band__sub{max-width:36ch}
.band--2::before{background:radial-gradient(ellipse 62% 76% at 24% 50%,rgba(240,243,250,.97) 0%,rgba(240,243,250,.8) 56%,rgba(240,243,250,0) 84%)}
.band--3{align-items:flex-end;text-align:right}
.band--3 h2{max-width:26ch;font-size:clamp(1.5rem,3.2vw,2.6rem)}
.band--3 .band__sub{max-width:36ch}
.band--3::before{background:radial-gradient(ellipse 56% 68% at 78% 50%,rgba(240,243,250,.92) 0%,rgba(240,243,250,.68) 52%,rgba(240,243,250,0) 80%)}
.band--4{align-items:center;justify-content:flex-end;padding-bottom:10vh;text-align:center}
.band--4 h2{max-width:15ch}
.band--4 .band__sub{max-width:56ch}
.band--4::before{background:radial-gradient(ellipse 76% 62% at 50% 74%,rgba(240,243,250,.97) 0%,rgba(240,243,250,.8) 56%,rgba(240,243,250,0) 84%)}
.band__cta{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap;justify-content:center;opacity:var(--kb,0);transform:translateY(calc((1 - var(--kb,0))*14px))}
.sub--settle{opacity:var(--ks,0);transform:translateY(calc((1 - var(--ks,0))*12px))}
.band--4{--ks:clamp(0,(var(--k,0) - .55)*4,1);--kb:clamp(0,(var(--k,0) - .72)*5,1)}

/* mecánica de texto partido */
.split .w{display:inline-block;white-space:pre}
.split .c{display:inline-block;--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);
  transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px)))}
.band--2 .split .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*-24px))}
.band--2 .split .c{opacity:1;transform:none}
.split--rise .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*20px))}
.split--rise .c{opacity:1;transform:none}
.blurpair{position:relative}
.blurpair .copy--soft{filter:blur(10px);opacity:calc(1 - var(--k,0));position:absolute;inset:0}
.blurpair .copy--sharp{opacity:var(--k,0)}

/* cue */
.cue{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);color:var(--q2-teal);width:34px;height:34px;z-index:2}
.cue .ring{width:34px;height:34px;transform:rotate(-90deg)}
.cue.hide{opacity:0;transition:opacity .5s}
.chev{width:24px;height:24px;border-right:2px solid var(--q2-teal);border-bottom:2px solid var(--q2-teal);transform:rotate(45deg);animation:chev 2.4s cubic-bezier(.45,0,.55,1) -1.2s infinite}
@keyframes chev{0%,100%{transform:translateY(-4px) rotate(45deg);opacity:.5}50%{transform:translateY(4px) rotate(45deg);opacity:1}}
@media (max-height:560px){.cue{display:none}}

/* ============ GATES DE HÉROE ESTÁTICO (idénticas en JS) ============ */
@media (max-width: 720px){
  .vhero{height:auto}
  .vhero__stage{position:relative;height:auto;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between}
  #hero,.cue,.band--2,.band--3{display:none}
  .vposter{background-image:url("hero-ending.jpg")}
  .band{position:relative;inset:auto;opacity:1 !important;height:auto;padding-block:0}
  .band .c,.band .w{opacity:1 !important;transform:none !important}
  .band--1{--k:1;padding-top:11vh}
  .band--4{--k:1;justify-content:flex-end;padding-top:9vh;padding-bottom:7vh}
  .blurpair .copy--soft{display:none}
  .band__quote{display:none}
}
@media (orientation: portrait) and (max-width: 1024px){
  .vhero{height:auto}
  .vhero__stage{position:relative;height:auto;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between}
  #hero,.cue,.band--2,.band--3{display:none}
  .vposter{background-image:url("hero-ending.jpg")}
  .band{position:relative;inset:auto;opacity:1 !important;height:auto;padding-block:0}
  .band .c,.band .w{opacity:1 !important;transform:none !important}
  .band--1{--k:1;padding-top:11vh}
  .band--4{--k:1;justify-content:flex-end;padding-top:9vh;padding-bottom:7vh}
  .blurpair .copy--soft{display:none}
  .band__quote{display:none}
}
@media (orientation: portrait) and (pointer: coarse){
  .vhero{height:auto}
  .vhero__stage{position:relative;height:auto;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between}
  #hero,.cue,.band--2,.band--3{display:none}
  .vposter{background-image:url("hero-ending.jpg")}
  .band{position:relative;inset:auto;opacity:1 !important;height:auto;padding-block:0}
  .band .c,.band .w{opacity:1 !important;transform:none !important}
  .band--1{--k:1;padding-top:11vh}
  .band--4{--k:1;justify-content:flex-end;padding-top:9vh;padding-bottom:7vh}
  .blurpair .copy--soft{display:none}
  .band__quote{display:none}
}
@media (orientation: landscape) and (pointer: coarse) and (max-height: 560px){
  .vhero{height:auto}
  .vhero__stage{position:relative;height:auto;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between}
  #hero,.cue,.band--2,.band--3{display:none}
  .vposter{background-image:url("hero-ending.jpg")}
  .band{position:relative;inset:auto;opacity:1 !important;height:auto;padding-block:0}
  .band .c,.band .w{opacity:1 !important;transform:none !important}
  .band--1{--k:1;padding-top:11vh}
  .band--4{--k:1;justify-content:flex-end;padding-top:9vh;padding-bottom:7vh}
  .blurpair .copy--soft{display:none}
  .band__quote{display:none}
}
@media (prefers-reduced-motion: reduce){
  .vhero{height:auto}
  .vhero__stage{position:relative;height:auto;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between}
  #hero,.cue,.band--2,.band--3{display:none}
  .vposter{background-image:url("hero-ending.jpg")}
  .band{position:relative;inset:auto;opacity:1 !important;height:auto;padding-block:0}
  .band .c,.band .w{opacity:1 !important;transform:none !important}
  .band--1{--k:1;padding-top:11vh}
  .band--4{--k:1;justify-content:flex-end;padding-top:9vh;padding-bottom:7vh}
  .blurpair .copy--soft{display:none}
  .band__quote{display:none}
  .band__cta,.sub--settle{opacity:1;transform:none}
  .chev{animation:none}
}