ou
O app.js mostra/esconde conforme a resposta da P4.
-------------------------------------------------------------------------- */
.objecao {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--space-lg);
margin-block: var(--space-md);
}
.objecao-pergunta {
font-style: italic;
font-weight: 600;
color: var(--text);
margin-bottom: var(--space-md);
padding-left: var(--space-sm);
border-left: 3px solid var(--coral);
}
.objecao-resposta { color: var(--text-muted); }
.objecao-resposta p { margin-bottom: var(--space-sm); }
.objecao-resposta p:last-child { margin-bottom: 0; }
.objecao-resposta strong { color: var(--text); }
/* --------------------------------------------------------------------------
12. BLOCO GARANTIA (7 dias)
-------------------------------------------------------------------------- */
.garantia {
display: flex;
gap: var(--space-sm);
align-items: flex-start;
background: var(--success-soft);
border: 1px solid rgba(74, 222, 128, 0.35);
border-radius: var(--radius-md);
padding: var(--space-lg);
margin-block: var(--space-lg);
}
.garantia-check { flex-shrink: 0; color: var(--success); font-weight: 800; font-size: 1.125rem; }
.garantia-texto { font-size: 0.9375rem; }
.garantia-texto strong { color: var(--success); }
/* --------------------------------------------------------------------------
13. BOTÕES CTA
-------------------------------------------------------------------------- */
.btn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 56px;
padding: var(--space-md) var(--space-lg);
border-radius: var(--radius-md);
font-weight: 700;
font-size: 1.0625rem;
text-align: center;
letter-spacing: 0.01em;
transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
-webkit-tap-highlight-color: transparent;
user-select: none;
}
.btn:active { transform: scale(0.98); }
/* CTA primário: coral, glow, full-width */
.btn-primary {
background: linear-gradient(135deg, var(--coral), var(--coral-strong));
color: #fff;
box-shadow: var(--glow-coral);
}
.btn-primary:hover { box-shadow: 0 10px 40px rgba(255, 77, 109, 0.5); }
/* CTA secundário: contorno discreto */
.btn-secondary {
background: transparent;
color: var(--text);
border: 1px solid var(--border);
}
.btn-secondary:hover { background: var(--surface-2); }
/* --------------------------------------------------------------------------
14. BLOCO PS (aviso honesto no final)
-------------------------------------------------------------------------- */
.ps {
border-top: 1px solid var(--border);
margin-top: var(--space-xl);
padding-top: var(--space-lg);
font-size: 0.9375rem;
color: var(--text-muted);
}
.ps strong { color: var(--text); }
/* --------------------------------------------------------------------------
15. QUIZ — barra de progresso, card de pergunta, opções
(o app.js gera essa estrutura dentro de #quiz-app)
-------------------------------------------------------------------------- */
.quiz-progress {
width: 100%;
height: 6px;
background: var(--surface-2);
border-radius: var(--radius-pill);
overflow: hidden;
margin-bottom: var(--space-sm);
}
.quiz-progress-bar {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--coral), var(--coral-strong));
border-radius: var(--radius-pill);
transition: width 400ms ease;
}
.quiz-contador {
font-size: var(--fs-micro);
color: var(--text-muted);
margin-bottom: var(--space-lg);
}
.quiz-card { animation: quizIn 300ms ease both; }
@keyframes quizIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: none; }
}
.quiz-pergunta {
font-size: 1.375rem;
font-weight: 700;
line-height: 1.35;
margin-bottom: var(--space-lg);
}
.quiz-opcoes { display: flex; flex-direction: column; gap: var(--space-sm); }
/* Opção: botão grande, selecionável, avanço automático */
.quiz-opcao {
width: 100%;
min-height: 56px;
text-align: left;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--space-md) var(--space-lg);
font-size: 1rem;
line-height: 1.4;
color: var(--text);
transition: border-color var(--transition), background var(--transition), transform var(--transition);
-webkit-tap-highlight-color: transparent;
}
.quiz-opcao:hover { background: var(--surface-2); }
.quiz-opcao:active { transform: scale(0.98); }
.quiz-opcao.selected {
border-color: var(--coral);
background: var(--coral-soft);
box-shadow: var(--glow-coral-soft);
}
/* --------------------------------------------------------------------------
16. TELA "ANALISANDO" (labor illusion entre P5 e captura)
-------------------------------------------------------------------------- */
.analise {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-lg);
padding-block: var(--space-2xl);
text-align: center;
}
.analise-spinner {
width: 48px;
height: 48px;
border-radius: 50%;
border: 3px solid var(--surface-2);
border-top-color: var(--coral);
animation: spin 800ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.analise-passos { display: flex; flex-direction: column; gap: var(--space-sm); }
.analise-passo {
font-size: 1rem;
color: var(--text-muted);
opacity: 0.35;
transition: opacity 300ms ease, color 300ms ease;
}
.analise-passo.done { opacity: 1; color: var(--text); }
.analise-passo.done::after { content: ' ✓'; color: var(--success); font-weight: 700; }
/* --------------------------------------------------------------------------
17. FORM DE CAPTURA (nome + whatsapp)
-------------------------------------------------------------------------- */
.captura-titulo {
font-size: 1.25rem;
font-weight: 700;
line-height: 1.4;
margin-bottom: var(--space-lg);
}
.form-captura { display: flex; flex-direction: column; gap: var(--space-md); }
.form-group { display: flex; flex-direction: column; gap: var(--space-xs); }
.form-label { font-size: var(--fs-small); font-weight: 600; color: var(--text-muted); }
.form-input {
width: 100%;
min-height: 56px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--space-md) var(--space-lg);
font-size: 1.0625rem;
color: var(--text);
outline: none;
transition: border-color var(--transition), box-shadow var(--transition);
}
.form-input::placeholder { color: rgba(163, 159, 173, 0.55); }
.form-input:focus { border-color: var(--coral); box-shadow: var(--glow-coral-soft); }
.form-input.invalid { border-color: var(--coral-strong); }
.form-erro {
display: none;
font-size: var(--fs-micro);
color: var(--coral);
font-weight: 600;
}
.form-erro.visible { display: block; }
/* --------------------------------------------------------------------------
18. VSL (frame vertical 9:16 centrado)
-------------------------------------------------------------------------- */
.vsl-section { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); }
.vsl-frame {
width: min(320px, 82vw);
aspect-ratio: 9 / 16;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-card);
position: relative;
}
.vsl-frame iframe,
.vsl-frame video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: none;
object-fit: cover;
}
/* Player VTurb: wrapper de largura controlada, SEM travar altura
(o player define a própria altura pelo aspect ratio do vídeo). */
.vsl-player {
width: min(360px, 86vw);
margin: 0 auto;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-card);
background: var(--surface);
min-height: 200px;
}
.vsl-player vturb-smartplayer { display: block; width: 100%; }
.vsl-loading {
display: flex; align-items: center; justify-content: center;
min-height: 200px; padding: 24px;
color: var(--text-muted); font-size: 0.85rem;
}
/* Frase-gatilho minimalista abaixo do vídeo (enquanto o CTA está oculto). */
.vsl-gatilho {
text-align: center;
font-size: 0.95rem;
font-weight: 600;
color: var(--text-muted);
max-width: 32ch;
margin-left: auto;
margin-right: auto;
}
/* Conteúdo liberado por tempo de vídeo (delay de VSL).
Nasce escondido aqui no CSS (carrega no ) → sem flash, nunca aparece
antes da hora. O JS troca .delay-oculto por .revelado aos 180s do vídeo. */
.delay-oculto { display: none; }
#conteudo-pos-vsl.revelado { display: block; animation: surgirPosVsl 0.6s ease both; }
@keyframes surgirPosVsl {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
#conteudo-pos-vsl.revelado { animation: none; }
}
/* --------------------------------------------------------------------------
19. MICROCOPY (linha de confiança sob CTA/form)
-------------------------------------------------------------------------- */
.microcopy {
font-size: var(--fs-micro);
color: var(--text-muted);
text-align: center;
margin-top: var(--space-sm);
}
/* --------------------------------------------------------------------------
20. REVEAL ON SCROLL (.reveal ganha .visible via IntersectionObserver)
Gate por classe .js (setada por inline script no de cada página):
sem JS — ou se o app.js falhar/demorar — tudo aparece estático, nada de
página de vendas em branco em in-app browser com 3G.
-------------------------------------------------------------------------- */
.js .reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity 600ms ease, transform 600ms ease;
}
.js .reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.js .reveal { opacity: 1; transform: none; transition: none; }
.quiz-card { animation: none; }
html { scroll-behavior: auto; }
}
/* --------------------------------------------------------------------------
21. FOOTER (disclaimers discretos)
-------------------------------------------------------------------------- */
.footer {
border-top: 1px solid var(--border);
margin-top: var(--space-2xl);
padding-block: var(--space-xl);
font-size: var(--fs-micro);
color: rgba(163, 159, 173, 0.6);
text-align: center;
line-height: 1.5;
}
.footer p { margin-bottom: var(--space-xs); }
/* --------------------------------------------------------------------------
22. UTILITÁRIAS
-------------------------------------------------------------------------- */
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.text-coral { color: var(--coral); }
.text-gold { color: var(--gold); }
.hidden { display: none !important; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }