/* ========================================================================= Base — reset, tipografia e utilitários. @font-face fica em templates/layout.php para usar o mesmo URL dos preloads (necessário quando a LP vive em subdiretório). ========================================================================= */ /* -- Reset -------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--space-sm)); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-body); color: var(--color-text); background-color: var(--color-green-800); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, picture, svg { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } h1, h2, h3, h4 { line-height: var(--lh-heading); font-weight: var(--fw-bold); text-wrap: balance; } ul { list-style: none; padding: 0; } :focus-visible { outline: 3px solid var(--color-lime-400); outline-offset: 3px; border-radius: 4px; } /* -- Utilitários ------------------------------------------------------ */ .container { width: 100%; max-width: calc(var(--container-max) + var(--container-pad) * 2); margin-inline: auto; padding-inline: var(--container-pad); } .icon { display: inline-block; width: 1em; height: 1em; fill: currentColor; flex-shrink: 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Palavra sublinhada nos títulos de seção (padrão do Figma) */ .u-underline { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } /* Animação de entrada das seções. Só esconde quando o JS está ativo (classe .js no ) — assim a página continua 100% legível sem JavaScript. */ .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); } .js .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }