/* ===== páginas legais (termos de uso / política de privacidade) =====
   Derivado do DESIGN.md: tema escuro #050505, Space Grotesk, laranja #ff5e3a
   apenas como direção e ação. Documento de leitura longa, então aqui o ritmo
   tipográfico manda mais que o glow: a landing persuade, isto informa.
   Arquivo servido estaticamente — não passa pelo bundle da landing. */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/space-grotesk-latin.woff2') format('woff2');
}

:root{
  --bg:#050505;
  --card:#0a0a0a;
  --secondary:#18181b;
  --muted:#27272a;
  --fg:#ffffff;
  --mutedFg:#a1a1aa;
  --textMuted:#71717a;
  --primary:#ff5e3a;
  --cream:#f6e7be;
}

*{ 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;
  background:var(--bg);
  color:var(--mutedFg);
  font-family:'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

.wrap{
  max-width:760px;
  margin:0 auto;
  padding:0 24px;
}

/* ===== topo ===== */
.top{
  padding:28px 0 0;
}
.back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--mutedFg);
  text-decoration:none;
  font-size:13px;
  padding:6px 2px;
  border-radius:4px;
  transition:color .25s ease;
}
.back svg{ flex:none; }
@media (hover:hover) and (pointer:fine){
  .back:hover{ color:var(--primary); }
}

/* ===== cabeçalho do documento ===== */
.head{
  padding:36px 0 28px;
  border-bottom:1px solid rgba(255,255,255,.1);
  margin-bottom:36px;
}
.eyebrow{
  display:inline-block;
  background:var(--secondary);
  color:var(--cream);
  font-size:12px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:7px 14px;
  border-radius:9999px;
  margin:0 0 18px;
}
h1{
  color:var(--fg);
  font-size:1.75rem;
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.025em;
  margin:0 0 12px;
  text-wrap:balance;
}
.updated{
  margin:0;
  font-size:13px;
  color:var(--textMuted);
}

/* ===== corpo ===== */
h2{
  color:var(--fg);
  font-size:1.125rem;
  font-weight:700;
  line-height:1.3;
  margin:40px 0 12px;
  scroll-margin-top:24px;
}
/* numeração das seções: aqui a ordem importa de verdade —
   é um documento com cláusulas que se referenciam entre si. */
.doc{ counter-reset:sec; }
.doc h2{ counter-increment:sec; }
.doc h2::before{
  content:counter(sec) ". ";
  color:var(--primary);
  font-variant-numeric:tabular-nums;
}
/* o bloco de contato é apoio, não cláusula: fica fora da contagem */
.doc .contact h2{ counter-increment:none; }
.doc .contact h2::before{ content:none; }

h3{
  color:var(--fg);
  font-size:1rem;
  font-weight:600;
  line-height:1.4;
  margin:26px 0 8px;
}

p{ margin:0 0 14px; }

ul{
  margin:0 0 16px;
  padding:0;
  list-style:none;
}
li{
  position:relative;
  padding-left:22px;
  margin-bottom:9px;
}
li::before{
  content:"";
  position:absolute;
  left:2px;
  top:.62em;
  width:5px;
  height:5px;
  background:var(--primary);
  opacity:.6;
  transform:rotate(45deg);
}

strong{ color:var(--fg); font-weight:600; }

a{ color:var(--primary); }
@media (hover:hover) and (pointer:fine){
  a:hover{ color:var(--fg); }
}

/* ===== marcador de dado pendente =====
   visível de propósito: some quando o valor real entrar no lugar. */
.todo{
  display:inline-block;
  background:rgba(255,94,58,.12);
  border:1px dashed rgba(255,94,58,.5);
  color:var(--primary);
  font-size:.9em;
  font-weight:600;
  padding:1px 7px;
  border-radius:4px;
  white-space:nowrap;
}

/* ===== bloco de contato ===== */
.contact{
  background:var(--card);
  border:1px solid rgba(255,255,255,.1);
  border-radius:1.25rem;
  padding:24px;
  margin:40px 0 0;
}
.contact h2{ margin-top:0; }
.contact p:last-child{ margin-bottom:0; }

/* ===== rodapé ===== */
.foot{
  margin-top:56px;
  padding:28px 0 calc(28px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid rgba(255,255,255,.1);
  text-align:center;
  font-size:12px;
  color:var(--textMuted);
  line-height:1.5;
}
.foot nav{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px 14px;
  margin-top:14px;
}
.foot nav a{
  color:var(--mutedFg);
  text-decoration:none;
  padding:4px 2px;
  border-radius:4px;
  transition:color .25s ease;
}
@media (hover:hover) and (pointer:fine){
  .foot nav a:hover{ color:var(--primary); }
}

/* ===== foco visível ===== */
a:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:3px;
  border-radius:4px;
}

/* ===== desktop ===== */
@media (min-width:760px){
  body{ font-size:17px; }
  h1{ font-size:2.25rem; }
  h2{ font-size:1.25rem; }
  .head{ padding:44px 0 32px; }
}