/* ==========================================================================
   Adaptive — base compartilhada (fontes, tokens, logo, botões)
   ========================================================================== */

/* Fontes servidas pelo próprio site (sem enviar dados do visitante a terceiros) */
@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 500 800;
    font-display: swap;
    src: url('../fonts/bricolage-grotesque-latin.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/inter-latin.woff2') format('woff2');
}

:root {
    --ink: #0d1117;
    --ink-2: #161c27;
    --ink-3: #232b3a;
    --paper: #f5f4ee;
    --paper-2: #ecebe3;
    --white: #ffffff;
    --lime: #c8f542;
    --lime-2: #b4e02c;
    --lime-soft: #eef9cc;
    --text: #0d1117;
    --muted: #5b6170;
    --muted-dark: #9aa3b5;
    --line: #dedcd2;
    --line-dark: rgba(255, 255, 255, .1);

    --whatsapp: #25d366;
    --instagram: #e1306c;
    --pix: #32bcad;
    --google: #fbbc04;

    --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
    --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;

    --radius: 18px;
    --radius-lg: 28px;
    --container: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--font-display); line-height: 1.08; margin: 0; letter-spacing: -.025em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }

.icon { width: 1.25em; height: 1.25em; flex-shrink: 0; }

:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; border-radius: 8px; }

/* Logo ------------------------------------------------------------------ */

.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo__mark { width: 34px; height: 34px; flex-shrink: 0; }
.logo__word { font-family: var(--font-display); font-weight: 750; font-size: 1.45rem; letter-spacing: -.045em; line-height: 1; }

.logo--light .logo__tag { fill: var(--ink); }
.logo--light .logo__dot { fill: var(--lime); }
.logo--light .logo__waves { stroke: var(--lime); }
.logo--light .logo__word { color: var(--ink); }

.logo--dark .logo__tag { fill: var(--lime); }
.logo--dark .logo__dot { fill: var(--ink); }
.logo--dark .logo__waves { stroke: var(--ink); }
.logo--dark .logo__word { color: var(--white); }

/* Botões ---------------------------------------------------------------- */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font: 600 .95rem/1 var(--font-body);
    padding: 14px 22px; border-radius: 999px; border: 1.5px solid transparent;
    cursor: pointer; white-space: nowrap;
    transition: transform .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--sm { padding: 10px 18px; font-size: .9rem; }
.btn--lg { padding: 17px 28px; font-size: 1rem; }

.btn--lime { background: var(--lime); color: var(--ink); }
.btn--lime:hover { background: var(--lime-2); }
.btn--dark { background: var(--ink); color: var(--white); }
.btn--dark:hover { background: var(--ink-3); }
.btn--ghost-dark { color: var(--white); border-color: rgba(255, 255, 255, .22); }
.btn--ghost-dark:hover { border-color: var(--white); }

.eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font: 600 .78rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink); background: var(--lime-soft); border: 1px solid #dcef9f;
    padding: 8px 14px; border-radius: 999px;
}
.eyebrow--dark { color: var(--lime); background: rgba(200, 245, 66, .08); border-color: rgba(200, 245, 66, .25); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}