/* ============================================================
   STREAMPASS — legal.css
   Estilo compartilhado por termos-de-uso.html e politica-de-privacidade.html.
   Mesmo sistema visual de index.html (nav, botões, rodapé, tokens), num
   subconjunto menor: aqui só entra o que essas duas páginas usam.
   Fonte única de cor: brand/tokens.css (var(--sp-*), linkado antes deste
   arquivo). Nenhum hex de marca aparece aqui — só var(--sp-*) e color-mix().
   ============================================================ */
:root{
  --accent:        var(--sp-accent);
  --accent-dim:    color-mix(in srgb, var(--sp-accent) 78%, black);
  --accent-ink:    var(--sp-accent-light);
  --ink-on-accent: var(--sp-text-primary);

  --bg-0:var(--sp-bg);
  --bg-1:var(--sp-surface);

  --fg-0:var(--sp-text-primary);
  --fg-1:color-mix(in srgb, var(--sp-text-primary) 88%, var(--sp-bg));
  --fg-2:var(--sp-text-secondary);
  --fg-3:color-mix(in srgb, var(--sp-text-secondary) 75%, var(--sp-bg));

  --line:var(--sp-border);
  --line-soft:color-mix(in srgb, var(--sp-border) 70%, var(--sp-bg));

  --f-display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --f-body:'Inter',system-ui,-apple-system,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,'SF Mono',Consolas,monospace;

  --max:1180px;
  --r:6px;
  --ease:cubic-bezier(.22,1,.36,1);
}
[data-theme="light"]{
  --accent-ink:var(--sp-accent);
}

*,*::before,*::after{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-0); color:var(--fg-1);
  font-family:var(--f-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent-ink); outline-offset:3px; border-radius:2px}
.wrap{width:100%; max-width:var(--max); margin-inline:auto; padding-inline:clamp(18px,5vw,40px)}
.skip{position:absolute;left:12px;top:-64px;z-index:99;background:var(--accent);color:var(--ink-on-accent);
  padding:10px 16px;border-radius:var(--r);font-weight:600;transition:top .18s;text-decoration:none}
.skip:focus{top:12px}

h1,h2{font-family:var(--f-display); color:var(--fg-0); line-height:1.1;
  letter-spacing:-.03em; margin:0; font-weight:800}

/* ---------- nav (mesma estrutura de index.html) ---------- */
.nav{position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg-0) 88%, transparent);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--line-soft)}
.nav-in{display:flex; align-items:center; gap:28px; height:62px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand-logo{height:26px;width:auto;flex:none}
.brand-logo-light{display:none}
[data-theme="light"] .brand-logo-dark{display:none}
[data-theme="light"] .brand-logo-light{display:block}
.nav-links{display:flex; gap:22px; margin-left:auto; list-style:none; padding:0; margin-block:0}
.nav-links a{font-size:.88rem; color:var(--fg-2); text-decoration:none; transition:color .18s}
.nav-links a:hover{color:var(--fg-0)}
.nav-act{display:flex; align-items:center; gap:12px}
@media (max-width:900px){ .nav-links{display:none} .nav-in{gap:14px} .nav-act{margin-left:auto} }

.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--f-body); font-weight:600; font-size:.95rem; line-height:1;
  padding:15px 24px; border-radius:var(--r); border:1px solid transparent; cursor:pointer;
  text-decoration:none; transition:background .18s var(--ease), transform .18s var(--ease)}
.btn-primary{background:var(--accent); color:var(--ink-on-accent)}
.btn-primary:hover{background:var(--accent-dim); transform:translateY(-1px)}
.btn-sm{padding:10px 16px; font-size:.85rem}

/* ---------- conteúdo legal ---------- */
main{display:block}
.legal{max-width:74ch; padding-block:clamp(40px,6vw,72px)}
.legal-notice{background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r);
  padding:14px 16px; font-size:.9rem; color:var(--fg-2); margin:0 0 28px}
.legal h1{font-size:clamp(1.7rem,4vw,2.5rem)}
.legal-meta{font-family:var(--f-mono); font-size:.78rem; color:var(--fg-3); margin:14px 0 0}
.legal h2{font-size:clamp(1.15rem,2.2vw,1.4rem); margin-top:clamp(36px,5vw,52px); padding-top:clamp(24px,3vw,32px);
  border-top:1px solid var(--line)}
.legal p{margin:16px 0 0; color:var(--fg-1); font-size:.98rem}
.legal ul{margin:16px 0 0; padding-left:1.2em; color:var(--fg-1); font-size:.98rem; display:grid; gap:8px}
.legal li{padding-left:.2em}
.legal a{color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px}
.legal table{width:100%; border-collapse:collapse; margin-top:16px; font-size:.88rem}
.legal th,.legal td{text-align:left; padding:9px 10px; border-bottom:1px solid var(--line-soft); vertical-align:top}
.legal th{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-3)}
.legal table{display:block; overflow-x:auto}
.tbd{color:var(--accent-ink); border-bottom:1px dashed var(--accent-ink); font-weight:600; white-space:normal}

/* ---------- footer (mesma estrutura de index.html) ---------- */
footer{border-top:1px solid var(--line); background:var(--bg-1); padding:52px 0 34px; margin-top:0}
.f-grid{display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:32px}
@media (max-width:760px){ .f-grid{grid-template-columns:1fr 1fr; gap:28px} }
@media (max-width:430px){ .f-grid{grid-template-columns:1fr} }
footer h3{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fg-3); margin:0 0 14px; font-weight:400}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
footer a{font-size:.9rem; color:var(--fg-2); text-decoration:none}
footer a:hover{color:var(--accent-ink)}
.f-note{font-size:.86rem; color:var(--fg-2); margin-top:14px; max-width:38ch}
.f-plat{font-family:var(--f-mono); font-size:.72rem; color:var(--fg-3); margin-top:12px}
.f-bot{margin-top:44px; padding-top:22px; border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  font-size:.82rem; color:var(--fg-3)}
.mono{font-family:var(--f-mono); font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important}
}