/* base.css — base-kit BuildV. Container, tipografia utilitária, botões, seção.
   Tudo via tokens (tokens.css). Nenhuma cor/fonte fixa. */

/* Container único — TODAS as seções nesta largura (inclui CTA final e FAQ) */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--px)}

/* Ritmo de seção */
.section{padding-block:clamp(56px,9vw,120px)}
.section--dark{background:var(--c-dark);color:var(--c-white)}
.section--surface{background:var(--c-surface)}

/* Overline/eyebrow (toda seção menos o hero) */
.eyebrow{display:inline-block;font-family:var(--font-body);font-size:.72rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--c-primary);margin-bottom:14px}
.section--dark .eyebrow{color:var(--c-accent)}

/* Escala tipográfica fluida */
.h1{font-size:clamp(2rem,4.5vw + .5rem,3.5rem)}
.h2{font-size:clamp(1.6rem,2.5vw + .5rem,2.5rem)}
.h3{font-size:clamp(1.15rem,1vw + .6rem,1.4rem)}
.lead{font-size:clamp(1.05rem,.6vw + .9rem,1.25rem);color:var(--c-muted)}
.muted{color:var(--c-muted)}

/* Botões — CTA abre o Merlin (data-cta-merlin), nunca form nem wa.me */
.btn{display:inline-flex;align-items:center;gap:.5em;justify-content:center;
  padding:.9em 1.5em;border-radius:var(--r-pill);font-weight:700;line-height:1;
  transition:background .2s,transform .15s,box-shadow .2s;will-change:transform}
.btn--primary{background:var(--c-primary);color:var(--c-white)}
.btn--primary:hover{background:var(--c-primary-dark);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn--ghost{border:1px solid currentColor}
.btn--lg{padding:1.05em 1.8em;font-size:1.05rem}

/* Cards */
.card{background:var(--c-surface);border:1px solid var(--c-n200);border-radius:var(--r-md);padding:clamp(20px,3vw,32px)}
.section--dark .card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}

/* Grid utilitário — SEMPRE par/3 (nunca órfão); empilha no mobile */
.grid{display:grid;gap:clamp(16px,2vw,28px)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.grid--3{grid-template-columns:1fr}.grid--2{grid-template-columns:1fr}}

/* Header fixo */
.site-header{position:sticky;top:0;z-index:50;height:var(--header-h);display:flex;align-items:center;
  background:color-mix(in srgb,var(--c-bg) 88%,transparent);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--c-n200)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:24px}
.site-header .logo{height:40px;width:auto}   /* logo sempre transparente, nunca caixa branca */

/* utilidades */
.stack{display:flex;flex-direction:column}
.center{text-align:center}
.hidden{display:none !important}