/* Tipografia da marca: Bricolage Grotesque 700 nos títulos, Inter no resto.
 *
 * A escolha não é decorativa e está na página 03 do manual: a Bricolage é mais
 * estreita e mais editorial que as grotescas de SaaS — ocupa menos largura num
 * lockup de header e tem cara de coisa impressa, não de app. As duas são SIL
 * OFL e estão no Google Fonts, então aqui entram por <link>, não como data:
 * URI (aqueles existem por causa do export de canvas e aqui só atrapalhariam
 * o cache do navegador).
 */

:root {
  --fonte-titulo: 'Bricolage Grotesque', 'Inter', system-ui, -apple-system, sans-serif;
  --fonte-texto: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fonte-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
}

body {
  font-family: var(--fonte-texto);
  font-size: 17px;
  line-height: 1.6;
  color: var(--texto);
  background: var(--ground-claro);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- títulos ------------------------------------------------------------
   Escala apertada e letter-spacing negativo: é assim que as peças foram
   compostas, e a página precisa soar como elas. */
.t-hero {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: clamp(38px, 5.6vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

.t-h1 {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

.t-h2 {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1.14;
  letter-spacing: -0.02em;
}

.t-h3 {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.24;
  letter-spacing: -0.015em;
}

/* --- corpo --------------------------------------------------------------- */
.t-lead {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55;
  color: var(--texto-apoio);
  max-width: 60ch;
}
.t-corpo { font-size: 17px; line-height: 1.6; }
.t-pequeno { font-size: 15px; line-height: 1.55; }
.t-mini { font-size: 13.5px; line-height: 1.5; }

/* --- rótulo -------------------------------------------------------------
   O kicker das peças: caixa alta, tracking aberto, sempre acima do título.
   É o elemento que amarra a página às peças mais do que qualquer outro. */
.t-rotulo {
  font-family: var(--fonte-texto);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--link-claro);
}
.sobre-escuro .t-rotulo { color: var(--sobre-escuro-apoio); }

.t-mono { font-family: var(--fonte-mono); font-size: 13px; letter-spacing: -0.01em; }

/* Números tabulares onde dígitos se alinham em coluna — a agenda depende
   disso para as horas não dançarem entre as linhas. */
.tabular { font-variant-numeric: tabular-nums; }

/* --- inversão -----------------------------------------------------------
   Um bloco só, aplicado no <section>. Cor de texto definida fora de um
   contexto assim é o jeito mais fácil de escrever branco sobre branco. */
.sobre-escuro { color: var(--sobre-escuro); }
.sobre-escuro .t-hero,
.sobre-escuro .t-h1,
.sobre-escuro .t-h2,
.sobre-escuro .t-h3 { color: var(--sobre-escuro); }
.sobre-escuro .t-lead { color: var(--sobre-escuro-apoio); }
/* :not(.btn) e' o ponto do arquivo que mais custou: sem ele este seletor
   (0,1,1) vence o .btn-cta (0,1,0) e pinta o texto do CTA de indigo-300 sobre
   coral. Fica ilegivel e nao da erro nenhum -- so o axe pegou. */
.sobre-escuro a:not(.btn) { color: var(--link-escuro); }