@font-face{font-family:Archivo;src:url(fontes/archivo.woff2) format('woff2');font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:ArchivoI;src:url(fontes/archivo-italic.woff2) format('woff2');font-weight:100 900;font-stretch:62% 125%;font-style:italic;font-display:swap}

:root{
  --fundo:#1d1d1d;
  --fundo-2:#262626;
  --fundo-3:#303030;
  --texto:#f4f4f4;
  --suave:rgba(244,244,244,.74);
  --suave-2:rgba(244,244,244,.46);
  --fio:rgba(244,244,244,.14);
  --acento:#12f522;
  --acento-texto:#062a08;
  --pad:clamp(20px,5.5vw,56px);
  --larg:640px;
  --f:Archivo,system-ui,sans-serif;
  --fi:ArchivoI,Archivo,system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--fundo);color:var(--texto);font:400 1.0625rem/1.6 var(--f);font-stretch:100%;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p{margin:0}
s{text-decoration-thickness:2px}

/* ── topo ── */
.topo{display:flex;justify-content:center;padding:18px var(--pad) 6px}
.topo-logo{width:118px}

/* ── abertura: manchete + player ── */
.abertura{padding:10px var(--pad) 28px;display:flex;flex-direction:column;align-items:center;text-align:center}
.manchete{
  font:italic 800 clamp(1.55rem,6.4vw,2.6rem)/1.04 var(--fi);font-stretch:78%;
  letter-spacing:-.01em;max-width:20ch;text-wrap:balance;
}
.manchete em{font-style:italic;color:var(--acento)}
.manchete-apoio{margin-top:10px;color:var(--suave);font-size:.98rem;max-width:34ch}

.player{
  --w:min(100%, calc(74svh * 9 / 16), 420px);
  position:relative;width:var(--w);aspect-ratio:9/16;margin-top:20px;
  border-radius:18px;overflow:hidden;background:#111;
  box-shadow:0 0 0 1px var(--fio),0 30px 80px -30px rgba(18,245,34,.25);
}
.player video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#111}
.player-som,.player-pausa,.player-aviso{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  border:0;padding:24px;color:var(--texto);font:inherit;cursor:pointer;
  background:rgba(14,14,14,.55);
}
.player-som{background:linear-gradient(to bottom,rgba(14,14,14,.15),rgba(14,14,14,.7))}
.player-som strong,.player-pausa strong,.player-aviso strong{font:italic 800 1.35rem/1.1 var(--fi);font-stretch:85%}
.player-som>span:last-child,.player-pausa span{color:var(--suave);font-size:.95rem}
.player-som-icone{
  width:78px;height:78px;border-radius:50%;background:var(--acento);display:grid;place-items:center;margin-bottom:8px;
  animation:pulso 1.8s var(--mv-calmo) infinite;
}
.player-som-icone svg{width:38px;height:38px;fill:var(--acento-texto);stroke:var(--acento-texto);stroke-width:2.2;stroke-linecap:round}
.player-som-icone .x{fill:none}
@keyframes pulso{0%{box-shadow:0 0 0 0 rgba(18,245,34,.55)}70%{box-shadow:0 0 0 22px rgba(18,245,34,0)}100%{box-shadow:0 0 0 0 rgba(18,245,34,0)}}
.player-aviso{cursor:default;background:rgba(14,14,14,.82);gap:12px}
.player-btn,.player-btn-sec{font:600 1rem/1 var(--f);border-radius:999px;padding:15px 22px;cursor:pointer;border:0;width:min(100%,280px)}
.player-btn{background:var(--acento);color:var(--acento-texto)}
.player-btn-sec{background:transparent;color:var(--texto);box-shadow:inset 0 0 0 1px var(--fio)}
.player-barra{position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(255,255,255,.12);pointer-events:none}
.player-barra i{display:block;height:100%;width:0;background:var(--acento);transition:width .4s linear}
[hidden]{display:none!important}
.aviso-som{margin-top:12px;color:var(--suave-2);font-size:.85rem}

/* ── a página que abre no preço ── */
.depois{display:none}
body.aberta .depois{display:block;animation:abre .9s var(--mv-chega) both}
@keyframes abre{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
body.aberta .aviso-som{display:none}

/* rodapé */
.rodape{padding:28px var(--pad) calc(28px + env(safe-area-inset-bottom));text-align:center;color:var(--suave-2);font-size:.78rem;border-top:1px solid var(--fio)}
.rodape p+p{margin-top:6px}

/* antes de abrir / depois de fechar */
.fora-do-ar{margin:0 var(--pad) 48px;padding:26px;text-align:center;background:var(--fundo-2);border-radius:22px;box-shadow:inset 0 0 0 1px var(--fio);max-width:var(--larg)}
@media (min-width:720px){.fora-do-ar{margin-inline:auto}}
.fora-titulo{font:italic 900 1.8rem/1.05 var(--fi);font-stretch:85%;color:var(--acento)}
.fora-do-ar p+p{margin-top:8px;color:var(--suave)}
body:not([data-estado="aberto"]) .depois{display:none!important}

/* pop-up de saída */
.saida{
  width:min(92vw,420px);border:0;border-radius:26px;padding:30px 24px 18px;text-align:center;
  background:var(--fundo-2);color:var(--texto);box-shadow:0 0 0 1px var(--fio),0 40px 120px rgba(0,0,0,.6);
}
.saida::backdrop{background:rgba(10,10,10,.78)}
.saida[open]{animation:abre .5s var(--mv-chega) both}
.saida-kicker{color:var(--acento);font-weight:700;font-size:.9rem}
.saida h2{margin-top:6px;font:italic 900 2.1rem/1 var(--fi);font-stretch:80%}
.saida h2>span{color:var(--acento);white-space:nowrap}
.saida p:not(.saida-kicker){margin-top:12px;color:var(--suave);font-size:.95rem}
.saida-nao{margin-top:12px;background:none;border:0;color:var(--suave-2);font:500 .9rem var(--f);padding:10px;cursor:pointer;text-decoration:underline}

/* marcação de pendência: some do layout quando o conteúdo real entrar */
.pendente{background:rgba(255,212,0,.16);color:#ffd84d;padding:1px 5px;border-radius:4px;outline:1px dashed rgba(255,212,0,.6);font-size:.92em}

@media (prefers-reduced-motion:reduce){
  body.aberta .depois,.saida[open]{animation:none}
  .player-som-icone{animation:none}
  html{scroll-behavior:auto}
}
/* ── intro: mesmo BLACK da captura, agora com tempo fixo ── */
.intro{display:none}
.com-intro .intro{
  display:grid;place-items:center;position:fixed;inset:0;z-index:50;background:#030403;overflow:hidden;cursor:pointer;
}
.com-intro body{overflow:hidden}
.intro-data{position:absolute;left:0;right:0;top:calc(50% - clamp(90px,28vw,420px)*.78);text-align:center;
  font:italic 900 clamp(13px,3.4vw,20px)/1 var(--fi);text-transform:uppercase;letter-spacing:.02em;color:var(--acento);opacity:0}
.intro-black{display:grid;place-items:center;transform-origin:47% 56%}
.intro-black span{grid-area:1/1;font:italic 900 clamp(90px,28vw,420px)/.8 var(--fi);font-stretch:88%;letter-spacing:-.02em;padding-right:.08em;white-space:nowrap}
.intro-black .contorno{color:transparent;-webkit-text-stroke:1.5px rgba(18,245,34,.55)}
.intro-black .cheio{color:var(--acento);text-shadow:0 0 30px rgba(18,245,34,.6),0 0 90px rgba(18,245,34,.35);clip-path:inset(0 100% 0 0)}
.intro-black .cheio i{display:inline-block;font-style:inherit;will-change:transform}
.intro-flash{position:absolute;inset:0;background:var(--acento);opacity:0;mix-blend-mode:screen;pointer-events:none}
.intro-grao{position:absolute;inset:0;opacity:.09;pointer-events:none;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 baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (prefers-reduced-motion:reduce){.com-intro .intro{display:none}.com-intro body{overflow:auto}}
.intro-logo{position:absolute;left:50%;top:50%;width:min(80vw,460px);margin:calc(min(80vw,460px) * -.307) 0 0 calc(min(80vw,460px) * -.5);opacity:0;filter:drop-shadow(0 18px 30px rgba(0,0,0,.7));will-change:transform}

/* ── modelo das VSLs escaladas: faixa + player, nada mais até o pitch ── */
.faixa{position:sticky;top:0;z-index:20;padding:10px 16px;text-align:center;background:var(--acento);color:var(--acento-texto);
  font:italic 900 .82rem/1.2 var(--fi);font-stretch:95%;text-transform:uppercase;letter-spacing:.02em}
.faixa [data-faixa-texto]{font-variant-numeric:tabular-nums}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.topo{padding-top:14px}
.topo-logo{width:96px}
.abertura{padding-top:4px}
.player{--w:min(100%, calc(78svh * 9 / 16), 440px);margin-top:12px}
.cta-player{display:none;width:min(100%,440px);margin-top:16px;text-align:center}
body.aberta .cta-player{display:block;animation:abre .6s var(--mv-chega) both}
.cta-player p{color:var(--suave);font-size:.95rem}
.cta-player p b{color:var(--acento);font:italic 900 1.15rem/1 var(--fi)}
.cta-player .botao{margin-top:12px}
.cta-ver{display:inline-block;margin-top:14px;color:var(--suave);font-size:.9rem;text-underline-offset:3px}
