/* ============================================================
   HelpBots — base: reset, tipografia, nav, pill, overline, rodapé
   ============================================================ */

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

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

/* O ScrollSmoother assume o scroll no desktop; sem ele, o nativo serve. */
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* NÃO usar overflow-x: hidden aqui — no body/html isso cria um
     container de scroll e quebra o ScrollSmoother/ScrollTrigger.
     Nenhuma seção transborda na horizontal; o que sangra é recortado
     pelo overflow do próprio card. */
}

::selection { background: var(--green-fill); color: var(--ink-soft); }

img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* Foco: anel verde 2px + offset. Nunca suprimir sem repor. */
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── reveal ───────────────────────────────────────────────────
   Só fade, sem deslocamento. O estado inicial só existe quando o
   JS confirma que está no ar (html.js) — sem JS, nada fica oculto.
   ─────────────────────────────────────────────────────────── */
html.js [data-reveal] { opacity: 0; }

/* Elementos que têm módulo de animação próprio (anatomia, régua).
   Pré-ocultados aqui e não pelo JS, senão há um quadro visível antes
   do gsap.set rodar. */
html.js [data-anat-ring],
html.js [data-anat-block],
html.js [data-anat-hub],
html.js [data-anat-sinapses],
html.js .anat__shade,
html.js [data-ruler-fill],
html.js [data-ruler-dots] circle { opacity: 0; }

/* Rede de segurança: GSAP não chegou ou o ticker não rodou. */
html.no-anim [data-reveal],
html.no-anim [data-anat-ring],
html.no-anim [data-anat-block],
html.no-anim [data-anat-hub],
html.no-anim [data-anat-sinapses],
html.no-anim .anat__shade,
html.no-anim [data-ruler-fill],
html.no-anim [data-ruler-dots] circle { opacity: 1 !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js [data-reveal],
  html.js [data-anat-ring],
  html.js [data-anat-block],
  html.js [data-anat-hub],
  html.js [data-anat-sinapses],
  html.js .anat__shade,
  html.js [data-ruler-fill],
  html.js [data-ruler-dots] circle { opacity: 1 !important; }
}

/* ============================================================
   Tipografia
   ============================================================ */

/* overline — o DNA da marca: mono, caixa alta, tracking largo */
.overline {
  font-family: var(--mono);
  font-size: var(--fs-over);
  font-weight: 700;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
}
.overline--green { color: var(--green); }
.overline--sm    { font-size: var(--fs-over-s); }

/* títulos: Roboto peso regular, corpo grande, tracking negativo */
.h1 {
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.h2 {
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -.02em;
  text-wrap: balance;
  max-width: 22ch;
}
.h2--wide { max-width: 34ch; }

.h3 {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* O lead não é um nível próprio: é texto normal com cor e medida
   próprias. Todo tamanho da página vive na escala de seis níveis. */
.lead {
  font-size: var(--fs-body);
  color: var(--muted);
  line-height: 1.6;
  max-width: 48ch;
}

.body   { color: var(--muted); max-width: var(--measure); }
.body--ink { color: var(--ink); }
.body + .body { margin-top: 1.1em; }

/* número de item: mono verde, como na referência */
.num {
  font-family: var(--mono);
  font-size: var(--fs-over);
  font-weight: 400;
  letter-spacing: .12em;
  color: var(--green);
}

/* highlight verde atrás do texto — fill, nunca cor de fonte */
.hl {
  background: var(--green-fill);
  padding: .06em .3em;
  margin: 0 -.05em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.strong { font-weight: 500; color: var(--ink); }

/* ============================================================
   Pill — o botão canônico do design system
   branco + borda verde → hover inverte para fill pastel
   ============================================================ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.25rem;
  background: var(--bg);
  color: var(--green);
  border: 1px solid var(--green-fill);
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-size: var(--fs-over);
  font-weight: 700;
  letter-spacing: var(--track);
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.pill:hover {
  background: var(--green-fill);
  color: var(--ink-soft);
  border-color: var(--green-fill);
}
.pill:active { transform: scale(.95); }

.pill__arrow { transition: transform var(--dur-2) var(--ease); }
.pill:hover .pill__arrow { transform: translateY(2px); }

/* O nowrap é o certo enquanto o rótulo cabe. Abaixo de ~520px o CTA
   do hero não cabe mais, e como ele é item de grid o min-content dele
   ESTICA a coluna inteira — o hero passa da sarjeta e a página ganha
   rolagem horizontal. Deixar quebrar em duas linhas resolve na raiz,
   e só onde o problema existe. */
@media (max-width: 519px) {
  .pill { white-space: normal; }
}

/* ============================================================
   Nav — fixo, FORA do #smooth-wrapper (exigência do ScrollSmoother)
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-inline: var(--gutter);
  background: rgb(255 255 255 / .82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: var(--hairline);
}

/* wordmark = tipografia, não imagem: ✨ Noto Emoji 700 + Oswald 400 */
.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: .34em;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem);
  letter-spacing: .005em;
  color: var(--ink);
  line-height: 1;
}
.wordmark__spark {
  font-family: var(--emoji);
  font-weight: 700;
  font-size: .82em;
  line-height: 1;
  transform: translateY(-.02em);
}

/* wordmark do rodapé: metade do corpo anterior — presença, não bloco */
.wordmark--xl { font-size: clamp(1.375rem, .8rem + 2.55vw, 3.25rem); }

/* ── menu ─────────────────────────────────────────────────────
   Mesma tipografia do overline: mono, caixa alta, tracking largo —
   o menu não introduz uma voz nova, é o DNA da marca em função de
   navegação. A página corrente fica em tinta, com fio verde.
   ─────────────────────────────────────────────────────────── */
/* margin-left: auto encosta o menu no CTA e joga os dois para a
   direita, sobrando todo o vão entre eles e o wordmark */
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, .4rem + 1.4vw, 2rem);
  margin-left: auto;
  min-width: 0;
}
.nav__link {
  font-family: var(--mono);
  font-size: var(--fs-over);
  font-weight: 700;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  padding-block: .35rem;
  border-bottom: 2px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav__link:hover { color: var(--ink); }
.nav__link[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--green-fill);
}

/* No mobile o pill precisa caber ao lado do wordmark em 375px */
@media (max-width: 420px) {
  .nav__cta { padding: .6rem .85rem; letter-spacing: .05em; }
}

/* Abaixo de 720px o pill sai do nav para o menu caber: cada página
   já tem o seu CTA acima da dobra, então nada de conversão se perde —
   e navegar continua possível, o que não seria o caso ao contrário. */
@media (max-width: 719px) {
  .nav__cta { display: none; }
}
/* a cauda do rótulo só cabe nas telas largas */
@media (max-width: 560px) {
  .nav__link-tail { display: none; }
  .nav__link { letter-spacing: .06em; }
}
/* em 375px os três rótulos ainda precisam caber ao lado do wordmark */
@media (max-width: 420px) {
  .nav__links { gap: .7rem; }
  .nav__link { font-size: var(--fs-over-s); letter-spacing: .04em; }
}

/* ============================================================
   Layout de seção — margens líquidas, sem max-width global
   ============================================================ */
.section {
  padding-inline: var(--gutter);
  padding-block: var(--section-y);
}
/* mesmo --gap entre todos os blocos de uma seção */
.section__head { display: grid; gap: var(--gap); }

/* divisor entre seções: fio de 1px cinza, recuado pela sarjeta */
.rule {
  height: 1px;
  margin: 0 var(--gutter);
  border: 0;
  background: var(--border);
}

/* ============================================================
   Rodapé
   ============================================================ */
/* faixa cinza estreita: só a linha legal */
.footer {
  padding: var(--stack) var(--gutter);
  border-top: var(--hairline);
  background: var(--wash);
}

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