/* ================================================================ VARIANT B · Esconder tudo após o HERO até 4:37 do load da página ---------------------------------------------------------------- Comportamento: - Por padrão, esconde todas as
dentro do
EXCETO #hero - Footer continua visível (logo abaixo do VSL, dá harmonia visual) - Mockup iPhone (.iphone) escondido permanentemente nessa variante - Quando o JS dispara reveal (após 4m37s do carregamento): 1. adiciona classe .variant-b-revealed em 2. todas as seções intermediárias aparecem com fade-in 3. footer "desce" naturalmente porque conteúdo acima cresceu ---------------------------------------------------------------- Arquivo isolado, não afeta styles-v26.css. Pode ser removido a qualquer momento pra desativar a variante. ================================================================ */ /* === Pre-reveal: esconde sections intermediárias (mantém #hero) === */ main > section:not(.hero):not(#hero) { display: none !important; } /* === Centraliza headline e sub-headline (estilo VSL) === */ .hero__copy { text-align: center; } .hero__h1, .hero__sub, .eyebrow { margin-left: auto; margin-right: auto; } /* === Esconde mockup iPhone na variante B === Mantém o restante da section "aulas" (h2 + pitch + caption). Também esconde os dots/setas de navegação que pertenciam ao mockup. */ .iphone, .aulas__hint, .aulas__arrows { display: none !important; } /* === Bloco de preço · 12x destacado verde === */ .stack__total-now { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 12px 0; } .stack__total-now .installments-prefix { display: block; font-size: 0.95rem; font-weight: 500; color: #9a9a9a; letter-spacing: 0.02em; text-align: center; } .stack__total-now .installments-value { display: block; font-size: clamp(2.4rem, 7vw, 3.4rem); font-weight: 800; color: #2EA82E; line-height: 1; letter-spacing: -0.01em; text-align: center; } .stack__total-installments { font-size: 1.05rem; font-weight: 500; text-align: center; margin-top: 8px; } /* === Pós-reveal: seções intermediárias aparecem === IMPORTANTE: especificidade alinhada com a regra de esconder (que usa :not(#hero) — pseudo-classe com ID dentro = peso de ID). Sem essa simetria, a regra de esconder vence mesmo com !important. */ html.variant-b-revealed main > section:not(.hero):not(#hero) { display: block !important; animation: variant-b-fade-in 0.7s ease-out; } @keyframes variant-b-fade-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }