/* =====================================================================
   Termos e privacidade.

   Documento para ler, não interface para operar: coluna estreita, tipo
   maior, hierarquia clara. Consome marca/astria.tokens.css — nenhuma cor
   é declarada aqui.
   ===================================================================== */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  transition: background .3s ease, color .3s ease;
}

a { color: var(--acao); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--acao-hover); }
:focus-visible { outline: 2px solid var(--acao); outline-offset: 3px; border-radius: 6px; }

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

.env { max-width: 720px; margin: 0 auto; padding: 0 24px; }

/* ------------------------------------------------------------------ topo */

.topo {
  border-bottom: 1px solid var(--borda);
  background: var(--fundo);
}
.topo__in { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.marca__estrela { fill: var(--ouro); flex: none; }
.marca b {
  font-family: var(--fonte-display); font-weight: 400;
  font-size: 26px; letter-spacing: -.025em; line-height: 1;
}

.tema { display: inline-flex; gap: 2px; background: var(--superficie-2);
        border: 1px solid var(--borda); border-radius: var(--r-selo); padding: 3px; }
.tema__op {
  display: grid; place-items: center; width: 36px; height: 36px;
  border: 0; border-radius: 50%; background: transparent; color: var(--tinta-tenue);
  cursor: pointer; transition: background .22s ease, color .22s ease;
}
.tema__op svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.tema__op[data-tema-op="escuro"] svg { fill: currentColor; stroke: none; }
.tema__op[aria-pressed="true"] { background: var(--acao); color: var(--acao-tinta); }

/* ----------------------------------------------------------------- texto */

main { padding: 64px 0 96px; }

.olho {
  font-family: var(--fonte-mono); font-size: 13px;
  color: var(--tinta-tenue); margin: 0 0 16px;
}

h1 {
  font-family: var(--fonte-display); font-weight: 400;
  font-size: clamp(36px, 5.5vw, 54px); line-height: 1.04;
  letter-spacing: -.03em; margin: 0; text-wrap: balance;
}

.atualizado {
  font-family: var(--fonte-mono); font-size: 13px;
  color: var(--tinta-tenue); margin: 20px 0 0;
}

.resumo {
  margin: 32px 0 0; padding: 20px 22px;
  border: 1px solid var(--acao); border-radius: var(--r-cartao);
  background: color-mix(in srgb, var(--acao) 9%, transparent);
  font-size: 16.5px;
}
.resumo p { margin: 0; }
.resumo p + p { margin-top: 10px; }

h2 {
  font-family: var(--fonte-titulo); font-weight: 600;
  font-size: 24px; line-height: 1.25; letter-spacing: -.01em;
  margin: 56px 0 0; padding-top: 28px; border-top: 1px solid var(--borda);
}
h3 {
  font-family: var(--fonte-titulo); font-weight: 600;
  font-size: 18px; margin: 32px 0 0;
}
p { margin: 16px 0 0; color: var(--tinta-media); }
strong { color: var(--tinta); font-weight: 600; }

ul, ol { margin: 16px 0 0; padding-left: 22px; color: var(--tinta-media); }
li { margin-bottom: 8px; }
li::marker { color: var(--tinta-tenue); }

code {
  font-family: var(--fonte-mono); font-size: .86em;
  background: var(--superficie-2); border: 1px solid var(--borda);
  border-radius: 5px; padding: 1px 6px; color: var(--tinta);
}

/* Tabela de dados: rolagem própria, número à direita e tabular. */
.rolagem { overflow-x: auto; margin: 20px 0 0; }
table { border-collapse: collapse; width: 100%; font-size: 15.5px; min-width: 460px; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--borda); vertical-align: top; }
th {
  font-family: var(--fonte-titulo); font-weight: 600; font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-tenue);
  border-bottom-color: var(--borda-forte);
}
td { color: var(--tinta-media); }
td code { white-space: nowrap; }

.contato {
  margin: 40px 0 0; padding: 22px;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--r-cartao);
}
.contato p:first-child { margin-top: 0; }

/* Campos que dependem de decisão da autora. venda.js e legal.js usam a mesma
   marcação: enquanto o valor não existe, ele aparece destacado. */
[data-campo].pendente {
  display: inline-block;
  background: color-mix(in srgb, var(--atencao) 22%, transparent);
  outline: 1px dashed var(--atencao);
  border-radius: 3px; padding: 0 6px; color: var(--tinta);
  font-family: var(--fonte-mono); font-size: .8em; letter-spacing: .04em;
}

.rodape { border-top: 1px solid var(--borda); padding: 28px 0 60px; }
.rodape p { margin: 0 0 8px; font-size: 13.5px; color: var(--tinta-tenue); }

@media (max-width: 640px) {
  body { font-size: 16px; }
  main { padding: 44px 0 64px; }
  h2 { margin-top: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .001ms !important; }
}