/* ============================================================= BASE — reset, tipografia e elementos Só elemento puro aqui (sem classe). Duas fontes: Outfit nos títulos (mais geométrica, combina com a logo) e Inter no corpo. ============================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* overflow-x aqui no e não só no : o `clip` NÃO propaga do body para a viewport (só o `hidden` propaga), então sem esta linha a página arrastava de lado no celular quando alguma animação entrava deslocada. Usar `clip` e NÃO `hidden`: o `hidden` criaria contexto de rolagem e quebraria o position:sticky da galeria da home. */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 1.0625rem; line-height: 1.7; color: var(--ink); background: #DCF0FB; /* cor de espera até o .aqua-bg entrar */ overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { font: inherit; cursor: pointer; border: none; background: none; } /* Foco visível só para quem navega no teclado (não polui o clique de mouse) */ :focus-visible { outline: 3px solid var(--c-blue-500); outline-offset: 3px; border-radius: 4px; } h1, h2, h3, h4 { font-family: 'Outfit', sans-serif; line-height: 1.08; font-weight: 700; color: var(--c-navy); letter-spacing: -.02em; } h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); } h2 { font-size: clamp(1.9rem, 4vw, 3rem); } h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); } /* ATENÇÃO: este --muted é pensado para

dentro de card claro. Solto sobre o fundo azul ele some — nesse caso use .lead ou .prose. */ p { color: var(--muted); }