/* ============================================= RESET & BASE ============================================= */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; color-scheme: light only; font-size: 16px; -webkit-text-size-adjust: 100%; overflow-y: scroll; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } :root { --bg: #eef2f7; --bg-alt: #ffffff; --ink: #101826; --ink-soft: #5b6472; --cyan: #0091ac; --cyan-bright: #00b8d9; --cyan-tint: rgba(0,145,172,0.08); --orange: #ff6b2b; --border: rgba(16,24,38,0.09); --shadow-sm: 0 6px 18px rgba(16,24,38,0.06); --shadow-md: 0 16px 34px rgba(16,24,38,0.10); --nav-h: 64px; --radius: 14px; } body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--ink); overflow-x: hidden; } img { display: block; max-width: 100%; } a { text-decoration: none; } a:focus-visible, button:focus-visible { outline: 2px solid var(--cyan-bright); outline-offset: 3px; } ::selection { background: var(--cyan-bright); color: #fff; } /* ============================================= UTILITÁRIOS ============================================= */ .wrap { max-width: 1100px; margin: 0 auto; padding: 0 5%; } .section-label { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--cyan); margin-bottom: .6rem; display: block; padding-left: 22px; position: relative; } .section-label::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 14px; height: 1px; background: var(--cyan); } .section-title { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; line-height: 1.1; margin-bottom: 1rem; color: var(--ink); } .section-sub { color: var(--ink-soft); font-size: .95rem; line-height: 1.75; max-width: 500px; } /* ============================================= SCROLL REVEAL — só esconde quando o JS confirma que está rodando (html.js, setado por um script inline no ). Sem JS (ex: pré-visualização do iOS que não executa scripts), o conteúdo já nasce visível. ============================================= */ .js .reveal, .js .reveal-left, .js .reveal-right, .js .reveal-scale { opacity: 0; transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); } .js .reveal { transform: translateY(28px); } .js .reveal-left { transform: translateX(-32px); } .js .reveal-right { transform: translateX(32px); } .js .reveal-scale { transform: scale(.92); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); } .reveal.in-view, .reveal-left.in-view, .reveal-right.in-view, .reveal-scale.in-view { opacity: 1; transform: none; } .reveal-stagger .reveal:nth-child(1) { transition-delay: 0s; } .reveal-stagger .reveal:nth-child(2) { transition-delay: .08s; } .reveal-stagger .reveal:nth-child(3) { transition-delay: .16s; } .reveal-stagger .reveal:nth-child(4) { transition-delay: .24s; } .reveal-stagger .reveal-scale:nth-child(1) { transition-delay: 0s; } .reveal-stagger .reveal-scale:nth-child(2) { transition-delay: .08s; } .reveal-stagger .reveal-scale:nth-child(3) { transition-delay: .16s; } .reveal-stagger .reveal-scale:nth-child(4) { transition-delay: .24s; } .reveal-stagger .reveal-scale:nth-child(5) { transition-delay: .32s; } .reveal-stagger .reveal-scale:nth-child(6) { transition-delay: .40s; } .reveal-stagger .reveal-scale:nth-child(7) { transition-delay: .48s; } .reveal-stagger .reveal-scale:nth-child(8) { transition-delay: .56s; } @media (prefers-reduced-motion: reduce) { .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1; transform: none; transition: none; } .hero-bg, .hero-grid { transform: none !important; } } /* ============================================= NAV nav-links fica FORA do