/* =========================
   /assets/css/global.css
   Base visual: tipografia, containers, botões, links, elementos comuns
   Requer: tokens.css (cores, fontes, escala)
   ========================= */

/* Corpo e tipografia */
body{
  background:#fff;
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Títulos (curtos e fortes) */
h1{ font-size:var(--fs-h1); font-weight:var(--fw-black); letter-spacing:-.01em; }
h2{ font-size:var(--fs-h2); font-weight:var(--fw-black); letter-spacing:-.01em; }
h3{ font-size:var(--fs-h3); font-weight:var(--fw-bold); }
p{ font-size:var(--fs-body); }

/* Containers */
.inner,.container{
  width:min(var(--container), 100%);
  margin-inline:auto;
  padding-inline:var(--pad);
}

/* Seções padrão (surface creme) */
.section{ background:var(--surface); padding-block:clamp(48px, 6vw, 96px); }

/* Links */
a{ color:var(--brand); }
a:hover{ opacity:.96; }
a:active{ opacity:.94; }

/* Seleção de texto */
::selection{ background:color-mix(in oklab, var(--accent) 35%, transparent); color:var(--ink); }

/* Botões */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.9rem 1.1rem; border:1px solid transparent; border-radius:999px;
  font-weight:var(--fw-bold);
  transition:transform .06s ease, opacity .2s ease, background-color .2s ease, border-color .2s ease;
  will-change:transform;
}
.btn:active{ transform:translateY(1px); }

/* Variações */
.btn-primary{
  background:var(--brand); border-color:var(--brand); color:#fff;
}
.btn-primary:hover{ background:var(--brand-600); border-color:var(--brand-600); }

.btn-outline{
  background:transparent; color:var(--brand); border-color:var(--brand);
}
.btn-outline:hover{ background:color-mix(in oklab, var(--brand) 6%, white); }

/* Imagens responsivas */
img, picture{ max-width:100%; height:auto; }

/* Skip link para acessibilidade */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:var(--pad); top:var(--pad);
  width:auto; height:auto; padding:.5rem .75rem; border-radius:8px;
  background:#fff; box-shadow:var(--shadow);
}

/* Cartões base (usados em benefícios/segmentos) */
.card{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:18px;
}

/* Utilidades de texto frequentes */
.kicker{ text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-size:.85rem; }
.u-text-muted{ color:var(--muted); }
.u-text-soft{ color:#444; }

/* Grid utilitário para 4 colunas → 2 → 1 */
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:1024px){ .grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .grid-4{ grid-template-columns:1fr; } }