/* ========================================================================= base.css — reset, tipografia base, utilitários compartilhados ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Trava de rolagem usada pelo menu overlay */ body.is-locked { overflow: hidden; } /* A regra do navegador para [hidden] é `display: none`, mas qualquer `display` declarado aqui a vence — e vários componentes usam grid/flex. Sem este !important, marcar hidden pelo JS não esconde nada. */ [hidden] { display: none !important; } img, video, svg { display: block; max-width: 100%; } button, input, textarea { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); text-wrap: balance; } p { text-wrap: pretty; } :focus-visible { outline: 2px solid var(--orange-600); outline-offset: 3px; border-radius: 4px; } /* ---------- Utilitários ---------- */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--page-x); } .section { padding-block: var(--section-y); } .eyebrow { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-muted); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip-link { position: absolute; left: var(--page-x); top: -100px; z-index: 100; padding: 0.75rem 1.25rem; background: var(--ink); color: var(--white); border-radius: var(--r-pill); transition: top var(--dur-fast) var(--ease-out-expo); } .skip-link:focus { top: 1rem; } /* Botão circular de ícone — usado no menu, no FAQ e no footer */ .icon-btn { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(22, 22, 22, 0.06); color: currentColor; transition: background var(--dur-fast) var(--ease-out-expo), transform var(--dur-fast) var(--ease-out-expo); } .icon-btn:hover { background: rgba(22, 22, 22, 0.12); } .on-dark .icon-btn, .icon-btn--dark { background: rgba(255, 255, 255, 0.1); } .on-dark .icon-btn:hover, .icon-btn--dark:hover { background: rgba(255, 255, 255, 0.18); } .icon-btn svg { width: 18px; height: 18px; } /* Botão principal da marca */ .btn { display: inline-flex; align-items: center; gap: 0.625rem; padding: 0.9rem 1.5rem; border-radius: var(--r-pill); background: var(--grad-brand); color: var(--white); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); transition: transform var(--dur-fast) var(--ease-out-expo), box-shadow var(--dur-fast) var(--ease-out-expo); } .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(240, 106, 0, 0.32); } .btn svg { width: 16px; height: 16px; } /* ---------- Entrada em cena (IntersectionObserver em js/reveal.js) ---------- */ /* Só esconde se houver JS para revelar depois — ver o script no */ .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease-out-expo), transform var(--dur-slow) var(--ease-out-expo); transition-delay: var(--reveal-delay, 0ms); } .reveal.is-in { opacity: 1; transform: none; } /* ---------- Preferência por menos movimento ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .reveal { opacity: 1; transform: none; } }