/* ============================================================
   BASE — tipografia, body, helpers globais
   ============================================================ */

body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: 1.65;
    color: var(--color-text);
    background: var(--color-bg);
}

/* ---------- Headings ---------- */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-heading);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

/* h1: -10% + redução adicional pra caber hero-meta acima da fold */
h1, .display {
    font-size: clamp(16px, 2.92vw, 47px);
    font-weight: 800;
    line-height: 1.0;
    letter-spacing: -0.035em;
}

/* h2-h4: -20% pra manter hierarquia com h1 reduzido */
h2, .h2 {
    font-size: clamp(15px, 2.31vw, 34px);
    letter-spacing: -0.028em;
    line-height: 1.06;
}

h3, .h3 {
    font-size: clamp(9px, 0.94vw, 17px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.18;
}

h4 {
    font-size: clamp(7.2px, 0.7vw, 12px);
    font-weight: 700;
    letter-spacing: -0.015em;
}

/* ---------- Parágrafos ---------- */
p {
    text-wrap: pretty;
}

.lead {
    font-size: var(--fs-lg);
    line-height: 1.55;
    color: var(--color-text);
    font-weight: 400;
}

.muted {
    color: var(--color-text-soft);
}

.balance {
    text-wrap: balance;
}

strong, b {
    font-weight: 700;
    color: var(--color-heading);
}

/* ---------- Acento em texto (V4 — sem gradiente, cor chapada) ---------- */
.grad-text {
    color: var(--color-accent);
    -webkit-text-fill-color: currentColor;
    background: none;
}

/* ---------- Serifada editorial (Newsreader itálica) — destaque em headlines ---------- */
.serifx {
    font-family: var(--font-serif);
    font-weight: 500;
    font-style: italic;
    letter-spacing: -0.01em;
    color: var(--color-heading);
}

/* ---------- Eyebrow (V4 — Gantari + traço fino, não mais mono/triângulo) ---------- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.7em;
    font-family: var(--font-body);
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-label);
}

.eyebrow::before {
    content: "";
    width: clamp(15px, 1.6vw, 28px);
    height: 2px;
    flex: none;
    background: var(--color-label);
    border-radius: 0;
}

.eyebrow.center {
    justify-content: center;
}

.on-dark .eyebrow {
    color: var(--color-lilac-soft);
}

.on-dark .eyebrow::before {
    background: var(--color-lilac-soft);
}

/* ---------- Animação reveal (carregamento ao rolar) ---------- */
.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
    transition-delay: var(--d, 0ms);
}

.reveal.in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    * {
        animation-duration: 0.001ms !important;
        scroll-behavior: auto;
    }
}

/* ============================================================
   MOBILE (≤640px): hierarquia tipográfica corrigida.
   Os clamps padrão tinham px-min muito baixo (h3=9px, h4=7px)
   e ficavam menores que <p> no smartphone. Aqui px-min e vw
   sobem mantendo h1 > h2 > h3 > h4 > p > eyebrow.
   ============================================================ */
@media (max-width: 640px) {
    /* Headings */
    h1, .display {
        font-size: clamp(28px, 8vw, 47px);
        line-height: 1.05;
    }
    h2, .h2 {
        font-size: clamp(22px, 6vw, 34px);
        line-height: 1.1;
    }
    h3, .h3 {
        font-size: clamp(17px, 4.6vw, 22px);
        line-height: 1.22;
    }
    h4 {
        font-size: clamp(14px, 3.8vw, 17px);
        line-height: 1.25;
    }
    .lead {
        font-size: clamp(13.5px, 3.6vw, 18px);
        line-height: 1.55;
    }
    .eyebrow {
        font-size: clamp(11px, 3vw, 13px);
    }

    /* Texto não-semântico crítico (div/span/labels) que estava < 11px no mobile */
    .pos-statement          { font-size: clamp(15px, 4vw, 23px); }
    .hero-badge .t          { font-size: clamp(11px, 3vw, 14px); }
    .proof-slot figcaption  { font-size: clamp(11px, 3vw, 13px); }
    .seal-name              { font-size: clamp(13px, 3.6vw, 20px); }

    /* Footer (estava com 9-9.8px em texto, logo, links, h5, meta) */
    .footer-brand .fb-logo .fb-word { font-size: clamp(15px, 4.5vw, 20px); }
    .footer-brand p         { font-size: clamp(12px, 3.4vw, 14.5px); }
    .footer-meta            { font-size: clamp(12px, 3.5vw, 15px); }
    .footer-col h5          { font-size: clamp(12px, 3.5vw, 15px); }
    .footer-col a           { font-size: clamp(12px, 3.4vw, 14.5px); }
    .footer-bottom          { font-size: clamp(12px, 3.5vw, 15px); }

    /* Botões */
    .nav-cta .btn           { font-size: clamp(13px, 3.5vw, 16px); }
    .btn                    { font-size: clamp(14px, 3.8vw, 16px); }

    /* Mega menu (no mobile vira lista expandida) — sublinks +10% */
    .mega-link .mt          { font-size: clamp(16px, 4.4vw, 18.5px); font-weight: 500; line-height: 1.4; }
    .mega-feature .mf-tag   { font-size: clamp(11px, 3vw, 14px); }

    /* Submenu mobile aberto: padding-vertical -15% pra altura compactada */
    .nav-links.open .mega-link {
        padding-top: clamp(5.5px, 0.65vw, 12px);
        padding-bottom: clamp(5.5px, 0.65vw, 12px);
    }

    /* Números de destaque (5M+, B2B, 6 anos, 14,6%) — ousados no mobile */
    .hero-meta .num         { font-size: clamp(32px, 9vw, 38px); line-height: 1; letter-spacing: -0.035em; }
    .stat .n                { font-size: clamp(32px, 8.5vw, 58px); line-height: 1; }
    .res-callout .n         { font-size: clamp(28px, 7.5vw, 43px); }

    /* Labels que acompanham os números (cliques orgânicos, anos refinando, SaaS Indústria...) */
    .hero-meta .lbl         { font-size: clamp(13px, 3.6vw, 16px); margin-top: 8px; line-height: 1.35; }
    .stat .l                { font-size: clamp(13px, 3.6vw, 16px); line-height: 1.4; }

    /* Trust statement: palavras SaaS, Indústria, Fintech, Consultoria (com /) */
    .trust-statement .sct   { font-size: clamp(18px, 5vw, 34px); }
    .trust-statement .arr   { font-size: clamp(13px, 3.6vw, 18px); }

    /* Título de card relacionado (ex: "Método 3 Tempos") */
    .rl-name                { font-size: clamp(17px, 4.4vw, 19px); line-height: 1.18; }
    .rl-arrow svg           { width: clamp(18px, 4.6vw, 22px); height: clamp(18px, 4.6vw, 22px); }

    /* Menu mobile ABERTO: links principais (SEO, Social Media, etc.) e Blog/Quem somos — -10% */
    .nav-links.open .nav-trigger,
    .nav-links.open > a {
        font-size: clamp(14.5px, 4vw, 17px);
        font-weight: 600;
    }
    .nav-links.open .nav-trigger .chev {
        width: clamp(14px, 3.6vw, 18px);
        height: clamp(14px, 3.6vw, 18px);
    }
    /* Ícone dos sublinks (Operação 3 Tempos, Consultoria, etc.) */
    .nav-links.open .mega-link .mi svg {
        width: clamp(18px, 4.6vw, 22px);
        height: clamp(18px, 4.6vw, 22px);
    }
}