*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
	background:#fff;
	color:#111;
	font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
	display:flex;
	flex-direction:column;
	min-height:100svh;
}

/* ── Barra de escassez ──
   Texto do Theo, sem data: "a qualquer momento" não expira, então não existe o
   risco de a página amanhecer prometendo uma data que já passou — que é o
   defeito clássico de barra com contagem escrita à mão. */
.barra{
	background:#000;
	color:#fff;
	text-align:center;
	font-weight:800;
	font-size:clamp(1rem,2.4vw,1.75rem);
	line-height:1.25;
	letter-spacing:.01em;
	padding:clamp(.7rem,1.6vw,1.1rem) 1rem;
}

.palco{
	flex:1 1 auto;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:flex-start;
	gap:clamp(1rem,2.5vw,1.75rem);
	padding:clamp(1rem,3vw,2.25rem) 1rem clamp(1.5rem,4vw,3rem);
}

/* A caixa do vídeo reserva a proporção ANTES de o player montar. Sem isso a
   página salta quando ele registra o custom element, e o salto acontece
   exatamente quando a pessoa está lendo a barra. */
/* A VTurb injeta o botão "Comprar agora" DENTRO do <vturb-smartplayer>, num
   `div.vturb-light-dom-inject` que vem depois do vídeo. Por isso a caixa aqui
   NÃO pode ter altura travada nem `overflow:hidden`: medido, o container do
   botão fica com altura 0 até o momento configurado e, quando a VTurb lhe dá
   tamanho, ele nasceria por cima do vídeo ou cortado pela borda.
   `min-height` em vez de `aspect-ratio`: reserva o espaço do vídeo antes de o
   player montar (sem salto de layout) e ainda deixa a caixa CRESCER quando o
   botão entra. 1,7778 = 16/9 da largura, que é a proporção do vídeo. */
.vsl{
	width:100%;
	max-width:min(26rem,92vw);
	min-height:calc(min(26rem,92vw) * 1.7778);
	margin-inline:auto;
	border-radius:.5rem;
}
.vsl vturb-smartplayer{
	display:block;
	width:100%;
	/* o player.js grava `--player-vertical-width` INLINE em runtime; inline
	   vence folha e vence herança, e !important é o único caminho previsto
	   pela spec para passar por cima de valor cravado por lib de terceiro */
	--player-vertical-width:100%!important;
}

/* O CTA normal NÃO mora aqui. Quem o desenha e revela é a VTurb, pelo painel:
   "Comprar agora", com o link e o segundo de aparição definidos POR VARIANTE
   (583, 585, 590 e 595s nas quatro do teste A/B, conferidos em 19/09 — todos
   apontando para pay.kiwify.com.br/iOMO5mO).
   Manter um botão meu ALÉM do dela poria DOIS na tela, com textos e cores
   diferentes, aparecendo em momentos distintos. E deixaria o horário do pitch
   dependendo de deploy, quando o time já o controla no painel.

   ── Rede de segurança ──
   O botão abaixo é a EXCEÇÃO disso: ele só entra na tela se, no momento em que
   o CTA deveria estar visível, o da VTurb NÃO estiver.

   Existe porque a página não pode depender de uma caixa de seleção no painel de
   um terceiro para ter como vender: se alguém desativar o CTA, o único caminho
   de compra desaparece sem emitir erro nenhum — nem no console, nem no CI.

   ATENÇÃO à premissa, corrigida em 26/09 lendo o bundle da VTurb
   (smartplayer-wc/v4): as quatro variantes estão com
   `show_to_returning_viewer: false`, mas isso NÃO tira o botão de quem volta.
   Esse sinalizador só faz o CTA aparecer ADIANTADO na segunda visita; o caminho
   normal (`played && isInBetweenRange`) continua revelando quando a pessoa
   reassiste até o pitch. Medido no estado F de `scripts/prova-rede-cta.mjs`.
   Consequência real: quem volta precisa reassistir ~10 min para ver o botão —
   isso é assunto de configuração do painel, não desta rede.
   Cores e tipografia copiam as do botão dela (#1890ff, raio 12, Inter 18/150)
   para o visitante não perceber que caiu num plano B. */
.cta-rede{
	display:inline-block;
	background:#1890ff;
	color:#fff;
	font:400 18px/1.5 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
	letter-spacing:.06em;
	text-decoration:none;
	border-radius:12px;
	padding:.9rem 2.2rem;
	text-align:center;
	max-width:100%;
}
.cta-rede:hover,.cta-rede:focus-visible{background:#0f7ae0}
/* `hidden` é o estado inicial no HTML. Declarar o display aqui garante que ele
   vença o `display:inline-block` de cima — sem isto, o atributo não esconde. */
.cta-rede[hidden]{display:none}

.rodape{
	background:#1a1a1a;
	color:#bdbdbd;
	text-align:center;
	font-size:.72rem;
	letter-spacing:.06em;
	text-transform:uppercase;
	padding:1.1rem 1rem;
}
.rodape a{color:inherit}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}