*, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--fonte-texto); font-size: var(--t-corpo); line-height: 1.65; color: var(--texto); background: var(--branco); -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* O atributo [hidden] vale display:none, mas qualquer regra de display no CSS o vence — e o elemento continua na tela. Aconteceu com o item do Instagram na página de links, que é .link { display: grid }. Como o JS desta base esconde coisas por [hidden] (respostas do FAQ, detalhe do plano), a garantia fica aqui, uma vez só. */ [hidden] { display: none !important; } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: 0; background: none; } h1, h2, h3 { font-family: var(--fonte-titulo); line-height: 1.1; font-weight: 700; } h1 { font-size: var(--t-h1); } h2 { font-size: var(--t-h2); } h3 { font-size: var(--t-h3); } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); } /* Palavra em destaque dentro de títulos */ .destaque { color: var(--roxo-digital); } /* Eyebrow acima dos títulos de seção */ .selo { display: inline-block; font-family: var(--fonte-texto); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; /* --roxo-digital falha AA sobre fundos claros; --roxo-profundo é o padrão porque a maioria das seções onde .selo aparece é clara. Onde .selo cai sobre fundo escuro (.hero, .final-bloco), a página específica sobrescreve para --roxo-digital — ver lp-viva.css. */ color: var(--roxo-profundo); margin-bottom: .75rem; } .titulo-secao { max-width: 22ch; } /* Botões */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: 1rem 1.75rem; border-radius: 999px; font-family: var(--fonte-texto); font-weight: 600; font-size: .975rem; text-align: center; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; } .btn:hover { transform: translateY(-2px); } .btn:focus-visible { outline: 3px solid var(--roxo-digital); outline-offset: 3px; } .btn--primario { background: var(--roxo-profundo); color: var(--branco); box-shadow: var(--sombra-alta); } .btn--primario:hover { background: var(--roxo-digital); } .btn--contorno { border: 1.5px solid var(--cinza-lilas); color: var(--branco); } .btn--contorno:hover { border-color: var(--roxo-digital); color: var(--roxo-digital); } .btn--claro { background: var(--branco); color: var(--preto); } /* Revelação no scroll Estado padrão: totalmente visível — garante a página funcionar sem JS. Só quando o JS carrega e roda com sucesso é que a classe .js-reveal é adicionada ao (ver iniciarReveal() em main.js); só então os blocos .reveal ficam ocultos até a interseção no scroll adicionar .visivel. */ .reveal { transition: opacity .7s ease, transform .7s ease; } .js-reveal .reveal { opacity: 0; transform: translateY(24px); } .reveal.visivel { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal, .js-reveal .reveal { opacity: 1; transform: none; transition: none; } * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }