/* ═══════════════════════════════════════════════════════════════ BASE — reset, elementos globais e utilitários de layout. ═══════════════════════════════════════════════════════════════ */ /* ── Reset ─────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; /* Impede que a âncora pare embaixo do menu fixo */ scroll-padding-top: calc(var(--header-h) + var(--sp-4)); -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } /* Trava o scroll quando o menu mobile está aberto */ body.is-locked { overflow: hidden; } img, svg, video { display: block; max-width: 100%; height: auto; } button, input, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; } ul, ol { list-style: none; padding: 0; } a { color: inherit; text-decoration: none; } /* ── Tipografia ────────────────────────────────────────────── */ h1, h2, h3, h4 { line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); font-weight: 700; text-wrap: balance; } h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); } h2 { font-size: var(--fs-2xl); } h3 { font-size: var(--fs-xl); } p { text-wrap: pretty; } strong { font-weight: 650; } ::selection { background: var(--accent); color: var(--paper); } /* ── Foco: visível só para teclado ─────────────────────────── */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-sm); } .skip-link { position: absolute; top: var(--sp-2); left: var(--sp-2); z-index: 200; padding: var(--sp-3) var(--sp-4); background: var(--ink-900); color: var(--text-invert); border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 600; transform: translateY(-150%); transition: transform var(--dur-base) var(--ease-out); } .skip-link:focus-visible { transform: translateY(0); } /* ── Layout ────────────────────────────────────────────────── */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--container-x); } .section { padding-block: var(--section-y); position: relative; } .section--alt { background: var(--bg-alt); border-block: 1px solid var(--border-soft); } .section__head { max-width: 46rem; margin-bottom: var(--sp-12); } .section__eyebrow { font-size: var(--fs-sm); font-weight: 650; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent); margin-bottom: var(--sp-3); } .section__eyebrow--light { color: var(--gray-400); } .section__title { margin-bottom: var(--sp-4); } .section__lead { font-size: var(--fs-lg); color: var(--text-muted); } .section__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-5); margin-top: var(--sp-12); padding-top: var(--sp-10); border-top: 1px solid var(--border); text-align: center; } .section__foot p { font-size: var(--fs-md); color: var(--text-muted); } .grid { display: grid; gap: var(--sp-5); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); } .prose > * + * { margin-top: var(--sp-4); } .prose p { color: var(--text-muted); font-size: var(--fs-md); } /* O sprite de ícones não deve ocupar espaço */ .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* ── Reveal no scroll ──────────────────────────────────────── */ /* .reveal começa invisível SÓ se o JS estiver ativo (classe js no ). Sem JS, o conteúdo aparece normalmente. */ .js .reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); transition-delay: var(--d, 0ms); } .js .reveal.is-visible { opacity: 1; transform: none; } /* ── Acessibilidade: menos movimento ───────────────────────── */ /* Reduzir não é zerar: mantemos opacidade (ajuda a compreensão), removemos o deslocamento (é o que causa enjoo). */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } /* Mata animações decorativas em loop (ping, pulse) e qualquer movimento contínuo. */ *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } /* Transições sobrevivem, mas só as de cor/opacidade: o que causa enjoo é o deslocamento, não o fade. */ *, *::before, *::after { transition-property: opacity, color, background-color, border-color, box-shadow; transition-duration: var(--dur-fast); } .js .reveal { transform: none; transition-delay: 0ms; } }