/* Quiz e VSL no visual da landing (aprovado pelo Eric, 24/09). Base: estilo.css + lp.css + vida.css. */

/* brilho do fundo cobre a página toda (na landing ele para em 1200px) */
.lp .aurora { height: 100%; }

/* marca no topo */
.topo-marca { display: flex; justify-content: center; padding-top: 22px; font-size: 18px; }

/* palavras de destaque com o mesmo brilho da headline da landing */
.pergunta em, .manchete em {
  background: linear-gradient(100deg, var(--magenta) 0%, var(--coral) 35%, var(--magenta) 60%, var(--uva) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: brilho-texto 7s linear infinite;
}

/* ---------- quiz ---------- */
.lp .quiz { padding-top: 22px; }
.lp .progresso span.feito { background: linear-gradient(90deg, #c20d61, var(--magenta)); }
.lp .tela.ativa { animation: entra 500ms var(--ease-out); }
.lp .descobrir li { padding: 14px; border-radius: 14px; background: #1a1316; border: 1px solid #2a1c22; }
.lp .check { background: var(--rosa); color: #fff; box-shadow: 0 0 14px rgba(255, 46, 136, .5); }

/* ---------- VSL ---------- */
.lp.vsl-v2 .vsl { padding-top: 22px; }
.moldura { position: relative; isolation: isolate; width: min(100%, 402px); margin: 0 auto; padding: 2px; border-radius: 20px; }
.moldura::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: conic-gradient(from var(--giro, 0deg), #2c2629 0 55%, var(--magenta) 72%, var(--coral) 82%, #2c2629 100%);
  animation: giro 5s linear infinite;
}
.moldura .video { width: 100%; border: 0; }
.lp .play { animation: pulsa 2.4s var(--ease-out) infinite; }
.lp .vsl .faixa-wrap { margin: 34px 0 0; }
.lp .prazo { margin-top: 26px; }

/* quem te ensina em faixa creme, como na landing */
.vsl-v2 .sec.clara { margin-top: 56px; text-align: left; }
.clara .bloco { margin-top: 0; }
.clara .autoras { background: var(--creme-cartao); border-color: var(--creme-linha); }
.clara .autora h3 { color: var(--creme-tinta); }
.clara .autora .rotulo { color: var(--rosa-escuro); }
.clara .autora p { color: var(--creme-suave); }
.clara .juntas { border-color: var(--creme-linha); color: var(--creme-suave); }
.clara .bloco h2 { color: var(--creme-tinta); }

@media (prefers-reduced-motion: reduce) {
  .pergunta em, .manchete em, .moldura::before, .lp .play { animation: none; }
}