/* ─────────────────────────────────────────────────────────────────────────
   base.css — reset, tipografia base, container, botões e utilitários.
   Tudo que aparece em mais de uma seção mora aqui. Valores só via var().
   ───────────────────────────────────────────────────────────────────────── */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  overflow-x: clip;                 /* clip, não hidden: preserva sticky */
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  letter-spacing: var(--tracking-title);
  text-wrap: balance;
  overflow-wrap: anywhere;
}

h1 { font-size: var(--text-h1); font-weight: var(--weight-bold); line-height: var(--leading-h1); }
h2 { font-size: var(--text-h2); font-weight: var(--weight-bold); line-height: var(--leading-h2); }
h3 { font-size: var(--text-h3); font-weight: var(--weight-bold); line-height: var(--leading-h3); }
h4 { font-size: var(--text-h4); font-weight: var(--weight-medium); line-height: var(--leading-h3); letter-spacing: normal; }

p { text-wrap: pretty; overflow-wrap: anywhere; }

img, svg, video, canvas, iframe { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* ── container fluido ───────────────────────────────────────────────────── */

.wrap {
  width: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
}

.wrap--md { max-width: var(--wrap-md); }
.wrap--sm { max-width: var(--wrap-sm); }
.wrap--xs { max-width: var(--wrap-xs); }

.wrap--md,
.wrap--sm,
.wrap--xs { width: min(100% - (var(--gutter) * 2), 100%); margin-inline: auto; }

/* ── cabeçalho de seção (badge + h2 em duas cores + subtítulo) ──────────── */

.section-head {
  width: min(100% - (var(--gutter) * 2), var(--wrap-sm));
  margin-inline: auto;
  margin-bottom: var(--gap-12);
  text-align: center;
}

.eyebrow {
  display: inline-block;
  margin-bottom: var(--gap-6);
  padding: var(--gap-2) var(--gap-3);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-soft);
  color: var(--color-muted);
  font-size: var(--text-badge);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-badge);
  text-transform: uppercase;
  line-height: 1;
}

/* 2ª linha do título em cinza claro: tratamento medido em todas as seções
   de cabeçalho da referência */
.title-mute { color: var(--color-heading-mute); display: block; }

.section-lead {
  margin-top: var(--gap-6);
  color: var(--color-muted);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

/* ── botões ─────────────────────────────────────────────────────────────── */

.btn-cta,
.btn-secondary,
.btn-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-2);
  min-height: 44px;
  padding: var(--gap-3) var(--gap-6);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-hover) ease-out,
              border-color var(--dur-hover) ease-out,
              color var(--dur-hover) ease-out;
}

/* nowrap em regra de uma linha: marca, item de nav e CTA nao podem quebrar
   em duas linhas, e e assim que o verificador enxerga o seletor. */
.btn-cta, .btn-secondary, .btn-dark { white-space: nowrap; }

.btn-cta {
  background-color: var(--btn-bg);
  color: var(--btn-text);
}

.btn-cta:hover { background-color: var(--btn-bg-hover); }

.btn-cta--lg {
  min-height: 60px;
  padding: var(--gap-4) var(--gap-8);
  font-size: var(--text-lead);
  font-weight: var(--weight-bold);
}

.btn-dark {
  background-color: var(--btn-dark-bg);
  color: var(--btn-dark-text);
}

.btn-dark:hover { background-color: var(--btn-dark-bg-hover); }

.btn-secondary {
  background-color: var(--color-bg);
  border-color: var(--color-border);
  color: var(--color-heading);
}

.btn-secondary:hover {
  background-color: var(--color-surface-softer);
  border-color: var(--color-border-hover);
}

.btn-cta:active,
.btn-dark:active,
.btn-secondary:active { transform: translateY(1px); }

/* link discreto sublinhado, como o "Ir para…" medido abaixo do CTA */
.link-quiet {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-1);
  min-height: 44px;
  color: var(--color-muted);
  font-size: var(--text-small);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color var(--dur-hover) ease-out;
}

.link-quiet:hover { color: var(--color-heading); }

.link-quiet .icon { width: 14px; height: 14px; flex: none; }

/* ── cartões ────────────────────────────────────────────────────────────── */

.card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--gap-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background-color: var(--color-bg);
  transition: border-color var(--dur-hover) ease-out;
}

.card:hover { border-color: var(--color-border-hover); }

.card--dark {
  border-color: var(--color-surface);
  background-color: var(--color-surface);
  color: var(--color-on-surface-muted);
}

.card--dark:hover { border-color: var(--color-on-surface-border); }

.card--dark h3,
.card--dark h4 { color: var(--color-on-surface); }

.card__title { margin-bottom: var(--gap-3); }

.card__text { color: var(--color-muted); }

.card--dark .card__text { color: var(--color-on-surface-muted); }

/* ── listas com marca de checagem / exclusão ────────────────────────────── */

.check-list { display: flex; flex-direction: column; gap: var(--gap-3); }

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-3);
  min-width: 0;
  font-size: var(--text-body);
}

.check-list .icon {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 3px;
  stroke-width: 2.25;
}

.check-list--yes .icon { color: var(--color-accent); }
.check-list--no .icon { color: var(--color-heading-mute); }

/* ── ícone de traço padrão ──────────────────────────────────────────────── */

.icon {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--solid { fill: currentColor; stroke: none; }

/* o sprite de <symbol> não desenha nada: fora do fluxo para não medir altura */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ── utilitários ────────────────────────────────────────────────────────── */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--gap-2);
  left: var(--gap-2);
  z-index: 60;
  padding: var(--gap-3) var(--gap-4);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface);
  color: var(--color-on-surface);
  transform: translateY(-200%);
}

.skip-link:focus-visible { transform: translateY(0); }

main { display: block; }

section[data-section] {
  position: relative;
  padding-block: var(--space-section);
}

/* seções que abrem colada na mídia da anterior levam padding só embaixo:
   é o ritmo 0/128px medido na referência */
section[data-section].is-tight-top { padding-top: 0; }