/* ============================================================
   STINT · legal.css
   Paginas /termos e /privacidade. Carregado SO nessas duas paginas.
   Arquivo separado de proposito: em 11/09 a especificidade de CSS
   derrubou cor em silencio 3 vezes neste site. Nada aqui encosta
   nas secoes da home.
   Depende de tokens.css e base.css.
   ============================================================ */

/* ---------- container ----------
   O container--narrow (780px) do site e estreito demais aqui: com o sumario de
   250px sobram ~370px para o documento, e o cartao de identificacao espreme a
   coluna de valor (medido no render de 14/09). 1120px devolve ~690px ao texto,
   que e o teto de 72ch do proprio .legal-doc. */
.container--legal { max-width: 1120px; }

/* ---------- hero ---------- */
.legal-hero { padding-block: clamp(40px, 6vw, 88px) clamp(36px, 5vw, 72px); }
.legal-hero h1 {
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.2rem);
  line-height: var(--lh-head);
  margin-top: var(--sp-3);
  max-width: 20ch;
}
.legal-hero .lead { margin-top: var(--sp-5); max-width: 66ch; }

.legal-voltar {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); color: var(--muted);
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.legal-voltar:hover { color: var(--text); border-bottom-color: var(--accent); }

.legal-meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5);
  margin-top: var(--sp-6); padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}
.legal-meta span {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); color: var(--muted);
}
.legal-meta span::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); flex: 0 0 auto;
}

/* ---------- layout: sumario + documento ---------- */
.legal-layout { display: grid; gap: var(--sp-7); align-items: start; }
@media (min-width: 960px) {
  .legal-layout { grid-template-columns: 250px minmax(0, 1fr); gap: var(--sp-8); }
  .legal-toc { position: sticky; top: var(--sp-5); }
}
.legal-layout > * { min-width: 0; }

/* ---------- sumario ---------- */
.legal-toc__head {
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--label); margin-bottom: var(--sp-4);
}
.legal-toc nav { border-left: 2px solid var(--border); }
.legal-toc a {
  display: flex; gap: var(--sp-3); align-items: baseline;
  padding: 7px var(--sp-4); margin-left: -2px;
  border-left: 2px solid transparent;
  font-size: var(--fs-sm); color: var(--muted); line-height: 1.35;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.legal-toc a:hover { color: var(--text); border-left-color: var(--accent); }
.legal-toc a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }
.legal-toc a .n {
  font-variant-numeric: tabular-nums; font-size: .75rem;
  font-weight: 600; color: var(--muted-2); flex: 0 0 auto;
}
@media (max-width: 959px) {
  .legal-toc {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: var(--sp-5);
  }
  .legal-toc nav { max-height: 240px; overflow-y: auto; }
}

/* ---------- documento ---------- */
.legal-doc { max-width: 72ch; }
.legal-doc > p { color: var(--muted); line-height: var(--lh-body); }
.legal-doc > p + p { margin-top: var(--sp-4); }

.legal-doc .legal-section { margin-top: var(--sp-8); scroll-margin-top: var(--sp-5); }
.legal-doc .legal-section:first-of-type { margin-top: var(--sp-7); }

.legal-doc h2 {
  display: flex; gap: var(--sp-4); align-items: baseline;
  font-size: clamp(1.15rem, 1.02rem + .55vw, 1.45rem);
  line-height: var(--lh-head);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-5);
}
.legal-doc h2 .sec-num {
  font-family: var(--font-serif);
  font-size: .95rem; font-variant-numeric: tabular-nums;
  color: var(--accent); flex: 0 0 auto; padding-top: 2px;
}

.legal-doc .legal-section p { color: var(--muted); line-height: var(--lh-body); }
.legal-doc .legal-section p + p { margin-top: var(--sp-4); }

.legal-doc ul { margin: var(--sp-4) 0; }
.legal-doc ul li {
  position: relative; padding-left: var(--sp-5);
  color: var(--muted); line-height: var(--lh-body);
}
.legal-doc ul li + li { margin-top: var(--sp-2); }
.legal-doc ul li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: 7px; height: 1px; background: var(--accent-line);
}
.legal-doc ul + p { margin-top: var(--sp-4); }

.legal-doc a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent-line);
}
.legal-doc a:hover { text-decoration-color: var(--accent); }

/* ---------- cartao de identificacao ---------- */
.legal-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
  margin-block: var(--sp-5);
}
.legal-card-row {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-5);
}
.legal-card-row + .legal-card-row { border-top: 1px solid var(--border); }
@media (min-width: 560px) {
  .legal-card-row { grid-template-columns: 180px minmax(0, 1fr); gap: var(--sp-5); align-items: baseline; }
}
.legal-card-row .k {
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--muted-2);
}
.legal-card-row .v { color: var(--text); line-height: 1.5; overflow-wrap: anywhere; }

/* ---------- caixa de contato no fim ---------- */
.legal-callout {
  margin-top: var(--sp-8); padding: var(--sp-6);
  background: var(--surface-teal);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-lg);
  color: var(--text); line-height: var(--lh-body);
}

/* ---------- aviso de escopo ---------- */
.legal-nota {
  margin-top: var(--sp-7); padding: var(--sp-5);
  border: 1px dashed var(--border-2); border-radius: var(--r-lg);
  font-size: var(--fs-sm); color: var(--muted-2); line-height: var(--lh-body);
}