/* SteerFlow: base das páginas do site. Valores do design system (design-system/tokens.json):
   tema Marfim, ou Verde profundo quando o sistema do visitante está escuro. */

@font-face { font-family: "Inclusive Sans"; src: url(/fontes/inclusive-sans.woff2) format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inclusive Sans"; src: url(/fontes/inclusive-sans-italico.woff2) format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  color-scheme: light dark;
  --fundo: #f7f5ef; --superficie: #ffffff; --superficie-suave: #dde7de;
  --borda: #dde7de; --texto: #202725; --texto-apagado: #53766b;
  --destaque: #123c36; --sobre-destaque: #d4f36a; --foco: #123c36; --marca: #202725;
  --espaco-4: 16px; --espaco-8: 32px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #123c36; --superficie: #1b4a43; --superficie-suave: #23554d;
    --borda: #2b5c54; --texto: #f7f5ef; --texto-apagado: #a9c1b6;
    --destaque: #d4f36a; --sobre-destaque: #123c36; --foco: #d4f36a; --marca: #d4f36a;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 400 16px/1.55 "Inclusive Sans", system-ui, sans-serif; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 4px; }

.pagina { max-width: 1040px; margin: 0 auto; padding: 0 var(--espaco-4); }
.cabecalho { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-4); padding: 24px 0; }
.assinatura { display: inline-flex; align-items: center; gap: 10px; color: var(--marca); text-decoration: none; }
.assinatura svg { width: 34px; height: 31px; fill: currentColor; flex: none; }
.assinatura span { font: italic 700 26px/1 "Inclusive Sans", system-ui, sans-serif; letter-spacing: -0.01em; }
.navegacao { display: flex; gap: 20px; font-weight: 500; font-size: 14px; }
.navegacao a { text-decoration: none; }
.navegacao a:hover { text-decoration: underline; }

h1 { font-weight: 700; font-size: clamp(36px, 7vw, 56px); line-height: 1.02; letter-spacing: -0.02em; margin: 0; }
h2 { font-weight: 700; font-size: 20px; line-height: 1.3; margin: var(--espaco-8) 0 8px; }
p, li { max-width: 65ch; }
.apagado { color: var(--texto-apagado); }
.rotulo { font-weight: 500; font-size: 12px; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-apagado); }

.botao { display: inline-block; padding: 12px 20px; border-radius: 8px; background: var(--destaque); color: var(--sobre-destaque); font-weight: 500; font-size: 15px; line-height: 1; text-decoration: none; }
.botao:hover { filter: brightness(1.12); }

.rodape { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; padding: var(--espaco-8) 0 40px; margin-top: 64px; border-top: 1px solid var(--borda); font-size: 14px; color: var(--texto-apagado); }
.rodape nav { display: flex; gap: 20px; }

@media (max-width: 560px) {
  .navegacao { display: none; }
}