/* ============================================================
   01-hero · topo: copy à esquerda, player 9:16 à direita, CTA.
   Keyframes com prefixo h-. Media queries no FIM do arquivo.
   Modos do player: .vsl.reel (montagem muda, sem botão de som)
   e .vsl.mode-vsl (VSL com botão de som, toque, pausa, barra e
   painel "continuar de onde parou"). A grade é a mesma nos dois
   modos e o botão nunca sai do lugar no DOM: nada muda de posição
   quando o JS entra.
   ============================================================ */

/* ---------- grade ---------- */
.hero{--vsl-h:clamp(400px,66vh,700px);--h-glow:rgba(255,106,43,.14);position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"copy vsl" "cta vsl";gap:0 72px;align-items:center;padding:clamp(28px,calc(22vh - 114px),84px) 0 110px}
.hero::before{content:"";position:absolute;right:-14%;top:-30%;width:900px;height:900px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,90,40,.24),transparent 72%);pointer-events:none;z-index:-1;opacity:0;transition:opacity 1.2s var(--e-reveal)}
.hero.is-ready::before{opacity:1}
.hero-copy{grid-area:copy;align-self:end;min-width:0}
.hero-cta{grid-area:cta;align-self:start;margin-top:clamp(20px,calc(6.4vh - 22px),36px);display:flex;flex-wrap:wrap;align-items:center;gap:0 22px}

/* ---------- tipografia da copy ---------- */
.hero .eyebrow{font-size:10px;letter-spacing:.15em}
.hero .eyebrow .live-dot{width:6px;height:6px;box-shadow:0 0 15px var(--v2);animation:none}
.hero h1{font-weight:700;font-size:clamp(34px,3.6vw,52px);line-height:1.08;letter-spacing:-.05em;max-width:620px;margin:0 0 24px}
.hero h1 em{color:var(--v1)}
.hero .lead{color:var(--mut);font-size:15px;line-height:1.8;max-width:455px;margin:0 0 clamp(16px,calc(4vh - 10px),26px)}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:0;font-size:12px;font-weight:600;line-height:1.3;padding:8px 13px 8px 11px;border-radius:8px;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.02);color:var(--tx)}
.chip svg{width:17px;height:17px;margin-right:8px;flex:none}
.chip small{margin-left:4px;color:var(--mut2);font-weight:500;font-size:inherit}

/* ---------- abaixo do botão: link discreto ao lado, garantia embaixo; requisito só no celular ---------- */
.h-row{display:contents}
.hero-cta .mais-link{margin-left:0}
.h-req{align-items:center;justify-content:center;gap:7px;font-size:12px;line-height:1.4;font-weight:500;color:var(--mut)}
.h-req svg{width:15px;height:15px;flex:none;color:var(--v1)}
.hero .note{color:var(--mut);flex:0 0 100%}

/* ---------- entrada coreografada (JS põe .is-ready 60 ms depois do DOM) ---------- */
.js .h-in{opacity:0;transform:translateY(18px);transition:opacity .7s var(--e-reveal),transform .7s var(--e-reveal);transition-delay:calc(var(--i,0)*80ms)}
.js .vsl-stage.h-in{transform:translateY(18px) scale(.96)}
.js .hero.is-ready .h-in{opacity:1;transform:none}
/* h1 palavra a palavra (o h1 em si não leva .h-in) */
.h-w{display:inline-block}
.js .h-w{opacity:0;transform:translateY(18px);transition:opacity .7s var(--e-reveal),transform .7s var(--e-reveal);transition-delay:calc(80ms + var(--w,0)*35ms)}
.js .hero.is-ready .h-w{opacity:1;transform:none}
/* rede de segurança: se o JS quebrar antes de pôr .is-ready, tudo aparece aos 2,5 s */
.js .hero:not(.is-ready) .h-in,.js .hero:not(.is-ready) .h-w{animation:h-safe 0s 2.5s forwards}
@keyframes h-safe{to{opacity:1;transform:none}}

/* ---------- palco do vídeo ---------- */
.vsl-stage{grid-area:vsl;position:relative;width:calc(var(--vsl-h) * 9 / 16);min-width:0;justify-self:end;perspective:1200px}
.vsl{position:relative;z-index:2;aspect-ratio:9/16;border-radius:22px;overflow:hidden;isolation:isolate;background:#0d0706 center/cover no-repeat;border:1px solid rgba(255,170,130,.25);box-shadow:0 35px 100px rgba(2,0,6,.4),0 0 110px var(--h-glow)}
.vsl.is-tilt{will-change:transform}
.vsl-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* luz ambiente (só desktop com mouse; duas camadas que se alternam por opacity) */
.vsl-glow{position:absolute;inset:-6% -18%;z-index:0;pointer-events:none}
.vsl-glow i{position:absolute;inset:0;border-radius:50%;background:radial-gradient(closest-side,var(--c,transparent),transparent 68%);opacity:0;transition:opacity .9s var(--e-inout);will-change:opacity}
.vsl-glow i.on{opacity:1}

/* pilha de trechos atrás do player (só desktop) */
.vsl-stack{position:absolute;left:50%;top:-44px;width:0;height:0;z-index:1;pointer-events:none}
.stk{position:absolute;left:0;top:0;width:min(96px,calc(var(--vsl-h) * .18));height:min(170px,calc(var(--vsl-h) * .32));border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:0 20px 40px -14px #000;background:#1a0f0c;transform:var(--t);opacity:0;translate:0 26px;transition:opacity .7s var(--e-reveal),translate .7s var(--e-reveal);transition-delay:calc(410ms + var(--i,0)*90ms)}
.hero.is-ready .stk{opacity:.9;translate:0 0}
.stk>i{position:absolute;inset:0;display:block;animation:h-float 6s var(--e-inout) var(--d,0s) infinite;animation-play-state:paused}
.hero.is-live .stk>i{animation-play-state:running}
.stk img{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;transform:translateY(var(--oy,0%))}
@keyframes h-float{50%{transform:translateY(-6px)}}

/* ---------- superfície de toque + estado pausado (modo VSL) ---------- */
.vsl-tap{position:absolute;inset:0;z-index:1;border-radius:inherit;display:none;cursor:pointer}
.vsl.mode-vsl .vsl-tap{display:block}
.vsl-tap:focus-visible{outline:3px solid var(--v1);outline-offset:-3px}
.vsl-paused{position:absolute;inset:0;z-index:2;display:none;place-items:center;pointer-events:none;background:rgba(13,7,6,.45)}
.vsl-paused svg{width:92px;height:92px;padding:22px 20px 22px 26px;border-radius:24px;background:linear-gradient(150deg,rgba(255,138,61,.93),rgba(224,64,31,.93));color:#fff;box-shadow:0 18px 50px rgba(0,0,0,.56)}
.vsl.is-paused .vsl-paused{display:grid}

/* ---------- botão de som (modo VSL, some quando o som liga) ---------- */
.vsl-unmute{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);width:min(64%,216px);aspect-ratio:1;display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;border-radius:20px;border:1px solid rgba(255,255,255,.33);background:linear-gradient(150deg,rgba(255,138,61,.96),rgba(224,64,31,.96));color:#fff;text-align:center;box-shadow:0 22px 60px rgba(0,0,0,.63)}
.vsl-unmute::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid rgba(255,138,61,.7);opacity:0;pointer-events:none;animation:h-ring 1.9s var(--e-out) infinite}
.hero:not(.is-live) .vsl-unmute::after,.hero:not(.is-live) .vu-waves i{animation-play-state:paused}
.vsl.mode-vsl:not(.sound):not(.has-resume):not(.is-erro) .vsl-unmute{display:flex}
.vsl-unmute:hover{background:linear-gradient(150deg,#ffa060,#ef5230)}
.vsl-unmute:focus-visible{outline:3px solid #fff;outline-offset:4px}
.vu-top{font-size:13px;font-weight:600;line-height:1.3;opacity:.95;transition:opacity .3s var(--e-out)}
.vu-top.is-swap{opacity:0}
.vu-ico{display:flex;align-items:center;gap:9px}
.vsl-unmute svg{width:58px;height:58px}
.vu-waves{display:flex;align-items:center;gap:3px;height:26px}
.vu-waves i{width:4px;height:100%;border-radius:2px;background:#fff;transform:scaleY(.4);animation:h-wave .9s var(--e-inout) infinite}
.vu-waves i:nth-child(2){animation-delay:.15s}.vu-waves i:nth-child(3){animation-delay:.3s}
.vsl.is-idle .vu-waves i{animation-play-state:paused}
.vu-bottom{font:700 19px/1.15 var(--fh);letter-spacing:-.02em}
@keyframes h-ring{from{transform:scale(1);opacity:.7}70%,to{transform:scale(1.22);opacity:0}}
@keyframes h-wave{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}

/* ---------- continuar de onde parou (modo VSL, só pra quem já assistiu um pedaço) ----------
   O player estreita pela ALTURA da tela (no celular e no computador), então o texto do botão pode quebrar em qualquer largura. */
.vsl-resume{position:absolute;inset:0;z-index:3;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px 22px;text-align:center;background:rgba(13,7,6,.62);pointer-events:none}
.vsl.has-resume:not(.sound):not(.is-erro) .vsl-resume{display:flex}
.vsl-resume>*{pointer-events:auto}
.vr-tx{font-size:13px;font-weight:600;line-height:1.3;color:var(--tx)}
.vr-tx b{color:var(--v1);font-size:15px;margin-left:2px}
.vr-go{display:inline-flex;align-items:center;justify-content:center;gap:9px;max-width:100%;padding:16px 20px 16px 16px;border-radius:16px;border:1px solid rgba(255,255,255,.33);background:linear-gradient(150deg,rgba(255,138,61,.96),rgba(224,64,31,.96));color:#fff;font:700 15px/1.2 var(--fh);letter-spacing:-.02em;text-wrap:balance;box-shadow:0 22px 60px rgba(0,0,0,.63);transition:transform var(--d-ui) var(--e-out)}
.vr-go svg{width:18px;height:18px;flex:none}
.vr-go:hover{background:linear-gradient(150deg,#ffa060,#ef5230);transform:translateY(-2px)}
.vr-zero{padding:10px 14px;font-size:13px;font-weight:600;line-height:1.3;color:var(--tx);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.4)}
.vr-zero:hover{text-decoration-color:var(--v1)}
.vr-go:focus-visible,.vr-zero:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* ---------- carregando (só com som ligado) e vídeo que não abriu ---------- */
.vsl-wait{position:absolute;left:50%;top:50%;z-index:2;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;border:3px solid rgba(255,255,255,.22);border-top-color:var(--v1);opacity:0;pointer-events:none;transition:opacity .25s var(--e-out) 0s;animation:h-spin .9s linear infinite;animation-play-state:paused}
.vsl.sound.is-wait .vsl-wait{opacity:1;transition-delay:.35s;animation-play-state:running}
@keyframes h-spin{to{transform:rotate(360deg)}}
.vsl-erro{position:absolute;inset:0;z-index:5;display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px 22px;text-align:center;background:rgba(13,7,6,.72)}
.vsl.is-erro .vsl-erro{display:flex}
.vsl.is-erro .vsl-unmute,.vsl.is-erro .vsl-resume,.vsl.is-erro .vsl-tap,.vsl.is-erro .vsl-paused,.vsl.is-erro .vsl-wait{display:none}
.ve-tx{font-size:13px;font-weight:600;line-height:1.4;color:var(--tx);max-width:220px}

/* ---------- barra de progresso percebida ---------- */
.vsl-bar{position:absolute;left:0;right:0;bottom:0;z-index:4;height:7px;display:flex;gap:3px;background:rgba(255,255,255,.15);pointer-events:none}
.vsl-bar i{flex:1 1 0;display:block;height:100%}
.vsl-bar i span{display:block;height:100%;transform-origin:left center;transform:scaleX(0);background:linear-gradient(90deg,#ffb088,#ff6a2b);box-shadow:0 0 14px rgba(255,106,43,.8);will-change:transform}
/* no reel a barra é segmentada por corte, fininha e recuada */
.vsl.reel .vsl-bar{left:12px;right:12px;bottom:12px;height:4px;background:none}
.vsl.reel .vsl-bar i{background:rgba(255,255,255,.2);border-radius:2px}
.vsl.reel .vsl-bar i span{border-radius:2px;box-shadow:0 0 10px rgba(255,106,43,.7)}

/* ---------- etiqueta do reel ---------- */
.reel-tag{display:none;position:absolute;left:50%;bottom:26px;translate:-50% 0;z-index:3;max-width:calc(100% - 24px);white-space:nowrap;font-size:12px;font-weight:700;letter-spacing:.03em;line-height:1.2;padding:8px 14px;border-radius:99px;background:rgba(13,7,6,.8);border:1px solid var(--line2);align-items:center;gap:8px}
.vsl.reel .reel-tag{display:inline-flex}
.reel-tag .live-dot{width:6px;height:6px;flex:none}
/* capítulo do reel: chip no canto superior esquerdo, troca a cada corte */
.reel-cut{position:absolute;left:12px;top:12px;z-index:3;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-size:11px;font-weight:700;letter-spacing:.03em;line-height:1.2;padding:6px 10px 6px 9px;border-radius:99px;background:rgba(13,7,6,.72);border:1px solid rgba(255,255,255,.12);color:var(--v1)}
.reel-cut b{font-weight:600;color:var(--mut);font-variant-numeric:tabular-nums;padding-right:7px;border-right:1px solid rgba(255,255,255,.18)}
.reel-cut.is-new{animation:h-tag .22s var(--e-out)}
@keyframes h-tag{from{opacity:0;transform:translateY(4px)}}

/* ---------- botão do topo preso ao tempo da VSL (C.ctaGateSec) ----------
   No computador o botão e a garantia ficam invisíveis mas guardam o lugar, pra coluna do texto não pular quando
   o botão aparece; o link "ver o que vem" fica na frente. No celular (fim do arquivo) eles saem do fluxo. */
.hero.cta-locked .hero-cta{display:flex;flex-wrap:wrap;align-items:center}
.hero.cta-locked .btn,.hero.cta-locked .note{visibility:hidden;pointer-events:none}
.hero.cta-locked .hero-cta .mais-link{order:-1;margin:0}
.hero.cta-locked .note{order:2;flex:0 0 100%}
/* overshoot explícito da spec H06 (exceção local aos tokens) */
.cta-in{animation:h-ctain .7s cubic-bezier(.2,1.25,.4,1) both}
@keyframes h-ctain{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}

/* ========== RESPONSIVO ========== */
@media (max-width:1050px){
  .hero{gap:0 40px}
  .hero h1{font-size:clamp(34px,4.3vw,46px)}
  /* tablet retrato: o palco não pode comer a coluna da copy */
  .vsl-stage{width:min(calc(var(--vsl-h) * 9 / 16),40vw)}
}
@media (max-width:760px){
  /* altura do player: sobra lugar pro título em cima e pro botão com a linha de requisito embaixo, tudo na primeira tela */
  .hero{--vsl-h:max(430px,calc(100vh - 268px));display:flex;flex-direction:column;align-items:center;gap:0;padding:14px 0 50px}
  @supports (height:1svh){.hero{--vsl-h:max(430px,calc(100svh - 268px))}}
  .hero::before{width:520px;height:520px;right:-40%;top:-6%}
  .hero-copy,.hero-cta,.hero.cta-locked .hero-cta{display:contents}
  .hero.cta-locked .btn,.hero.cta-locked .note,.hero.cta-locked .h-req{display:none}
  .hero .eyebrow{display:none}
  .hero h1{order:2;font-size:clamp(21px,6vw,27px);line-height:1.12;letter-spacing:-.05em;text-align:center;margin:0 auto 12px;max-width:420px}
  .vsl-stage{order:3;width:min(100%,calc(var(--vsl-h) * 9 / 16));min-width:0;margin:0 auto;justify-self:auto;perspective:none}
  .vsl{border-radius:18px}
  .vsl-stack{display:none}
  .hero .btn{order:4;width:min(100%,calc(var(--vsl-h) * 9 / 16));min-width:0;margin-top:12px;font-size:14px;padding:16px 18px;gap:12px;white-space:nowrap}
  .h-req{order:5;display:flex;margin-top:12px;text-align:center}
  .h-row{order:6;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0 16px;width:100%;margin-top:2px}
  .hero .note{order:1;flex:0 0 auto;text-align:center;margin-top:0;font-size:12px}
  .hero-cta .mais-link,.hero.cta-locked .hero-cta .mais-link{order:2;margin:0;font-size:12px}
  .hero .lead{order:7;margin:22px auto 0;text-align:center;max-width:470px}
  .chips{order:8;justify-content:center;margin-top:18px}
  .vsl-resume{gap:10px;padding:18px 14px}
  .vr-go{font-size:13px;padding:13px 16px 13px 12px}
  /* modo curto: título parado, sem a entrada palavra por palavra */
  html.mobile-curto .h-w{opacity:1;transform:none;transition:none;animation:none}
  .chip{font-size:11px}
  .reel-tag{font-size:11px;padding:6px 12px;bottom:22px}
  .vsl-unmute{width:min(64%,196px);gap:6px;padding:12px}
  .vsl-unmute svg{width:44px;height:44px}
  .vu-waves{height:20px}
  .vu-bottom{font-size:17px}
  .vu-top{font-size:12px}
}
@media (max-width:380px){
  .reel-cut b{display:none}
  .h-req{font-size:11.5px;gap:6px}
}

/* ========== MOVIMENTO REDUZIDO: quadro estático pronto ========== */
@media (prefers-reduced-motion:reduce){
  .js .h-in,.js .vsl-stage.h-in,.js .h-w{opacity:1;transform:none;transition:none;animation:none}
  .hero::before{opacity:1;transition:none}
  .stk{opacity:.9;translate:0 0;transition:none}
  .stk>i{animation:none}
  .vsl-unmute::after{animation:none}
  .vsl-wait{animation:none;transition:none}
  .vu-waves i{animation:none;transform:scaleY(.7)}
  .vu-top{transition:none}
  .vsl-glow i{transition:none}
  .cta-in,.reel-cut.is-new{animation:none}
  .vr-go{transition:none}
  .vr-go:hover{transform:none}
}