/* ============================================ ANUNCIA AÍ — base.css Reset, variáveis de design, tipografia Conceito: Mapa do Crescimento ============================================ */ /* Inter (peso 400 a 900) carregada via Google Fonts no (ver index.html). Para produção, o ideal é baixar os arquivos woff2 e self-host em /assets/fonts/ com font-display: swap, exatamente como planejado na arquitetura — isso evita uma requisição externa a mais. */ :root { /* Paleta — cores exatas extraídas do logo (logo_1.png) */ --color-bg: #FFFFFF; --color-bg-alt: #F1F3F5; /* cinza claro — seções alternadas (Dores, Serviços, FAQ) */ --color-ink: #131C2B; /* grafite azulado, nunca preto puro */ --color-ink-soft: #48566B; /* texto secundário */ --color-brand: #003D7C; /* azul-navy do logo — marca, hero, CTA final */ --color-brand-dark: #002A56; /* navy mais escuro, para fundos sólidos/hover */ --color-brand-light: #0097E2; /* azul-claro/ciano do logo — apoio, links, hover */ --color-cta: #003D7C; --color-cta-hover: #002A56; --color-accent: #F5BE09; /* amarelo do logo — destaques, badges, seções cheias */ --color-line: #D9E1EC; /* linhas divisórias, bordas sutis */ --color-white: #FFFFFF; /* Tipografia */ --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* Escala fluida */ --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem); --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); --step-2: clamp(1.6rem, 1.4rem + 1vw, 2.1rem); --step-3: clamp(2.1rem, 1.7rem + 2vw, 3.2rem); --step-4: clamp(2.6rem, 2rem + 3vw, 4.4rem); /* Espaçamento */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: 7rem; --radius-sm: 4px; --radius-md: 8px; --content-width: 1180px; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } @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; scroll-behavior: auto !important; } } body { font-family: var(--font-body); font-size: var(--step-0); line-height: 1.6; color: var(--color-ink); background: var(--color-bg); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--color-ink); } h1 { font-size: var(--step-4); } h2 { font-size: var(--step-3); } h3 { font-size: var(--step-2); } h4 { font-size: var(--step-1); } em, .em-brand { font-style: normal; font-weight: 700; color: var(--color-brand); } p { max-width: 62ch; } .eyebrow { display: inline-block; font-family: var(--font-body); font-size: var(--step--1); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-brand); margin-bottom: var(--space-sm); } .container { width: 100%; max-width: var(--content-width); margin-inline: auto; padding-inline: var(--space-md); } section { padding-block: var(--space-xl); } /* Foco visível — acessibilidade */ :focus-visible { outline: 2px solid var(--color-cta); outline-offset: 3px; } /* Utilitário de leitura para leitores de tela */ .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; }