/* Páginas legais do Hub (/termos e /privacidade). Carrega depois do site.css e só mexe no que a leitura precisa:
   cabeçalho simples, índice lateral (lista no topo no celular), coluna de ~72ch e títulos numerados por CSS. */

/* ---------- Cabeçalho ---------- */
.legal-topo {
  position: sticky; top: 0; z-index: 20;
  padding: 10px var(--margem);
  background: var(--vidro); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borda);
}
.legal-topo-in { max-width: 1080px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.legal-voltar {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: 14px; color: var(--tinta-suave); text-decoration: none;
  padding: 8px 12px; border-radius: 999px; border: 1px solid var(--borda); background: var(--cartao);
  transition: color .2s, border-color .2s;
}
.legal-voltar:hover { color: var(--titulo); border-color: var(--borda-forte); }
.legal-voltar svg { width: 16px; height: 16px; }

/* ---------- Capa ---------- */
.legal-capa { max-width: 1080px; margin: 0 auto; padding: 56px var(--margem) 8px; }
.legal-rotulo { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--violeta); }
.legal-capa h1 { margin-top: 10px; font-size: clamp(32px, 5.2vw, 52px); }
.legal-capa .legal-abre { margin-top: 16px; max-width: 72ch; font-size: 18px; color: var(--tinta-suave); }
.legal-data { margin-top: 18px; font-size: 14px; color: var(--tinta-fraca); }
.legal-data b { color: var(--tinta); font-weight: 600; }

/* ---------- Grade: índice + texto ---------- */
.legal-pagina {
  max-width: 1080px; margin: 0 auto; padding: 32px var(--margem) 72px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px;
}
@media (min-width: 900px) {
  .legal-pagina { grid-template-columns: 240px minmax(0, 72ch); gap: 56px; align-items: start; }
  .legal-indice { position: sticky; top: 84px; }
}

/* ---------- Índice ---------- */
.legal-indice { counter-reset: indice; }
.legal-indice p { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-fraca); margin-bottom: 10px; }
.legal-indice ol { display: grid; gap: 2px; }
.legal-indice li { counter-increment: indice; }
.legal-indice a {
  display: flex; gap: 10px; align-items: baseline;
  padding: 7px 10px; border-radius: 10px; border-left: 2px solid transparent;
  font-size: 14px; line-height: 1.35; color: var(--tinta-suave); text-decoration: none;
  transition: color .2s, background .2s, border-color .2s;
}
.legal-indice a::before { content: counter(indice); flex: none; min-width: 1.4em; font: 700 12px/1.6 var(--fonte-titulo); color: var(--violeta); }
.legal-indice a:hover { color: var(--titulo); background: var(--marcador); border-left-color: var(--violeta); }
@media (max-width: 899px) {
  .legal-indice { padding: 18px 18px 14px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--cartao); box-shadow: var(--sombra); }
  .legal-indice ol { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 12px; }
}

/* ---------- Texto ---------- */
.legal-texto { counter-reset: secao; overflow-wrap: anywhere; }
.legal-texto section { counter-reset: clausula; padding: 36px 0; border-top: 1px solid var(--borda); scroll-margin-top: 88px; }
.legal-texto section:first-of-type { border-top: 0; padding-top: 8px; }
.legal-texto h2 { counter-increment: secao; font-size: clamp(22px, 3vw, 28px); display: flex; gap: 14px; align-items: baseline; }
.legal-texto h2::before { content: counter(secao); flex: none; font-size: .78em; color: var(--violeta); }
.legal-texto h3 { margin-top: 26px; font-size: 17px; }
.legal-texto p { margin-top: 14px; }
.legal-texto a { color: var(--violeta); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--borda-forte); }
.legal-texto a:hover { text-decoration-color: currentColor; }
.legal-texto strong { color: var(--titulo); font-weight: 600; }
.legal-texto code { font: 500 .92em/1.4 ui-monospace, Consolas, monospace; padding: 1px 6px; border-radius: 6px; background: var(--marcador); color: var(--titulo); }

/* Listas simples (o site.css zera todas; aqui elas voltam a ter marcador). */
.legal-texto ul { margin-top: 12px; padding-left: 22px; list-style: disc; display: grid; gap: 8px; }
.legal-texto ul li::marker { color: var(--violeta); }

/* Cláusulas numeradas: "3.1", "3.2"... herdam o número da seção e seguem contando entre listas da mesma seção. */
.clausulas { margin-top: 18px; display: grid; gap: 12px; }
.clausulas > li { counter-increment: clausula; position: relative; padding-left: 52px; }
.clausulas > li::before {
  content: counter(secao) "." counter(clausula); position: absolute; left: 0; top: .15em;
  font: 700 13px/1.6 var(--fonte-titulo); color: var(--violeta); letter-spacing: .02em;
}
.clausulas > li ul { margin-top: 10px; }

/* Quadro "Em resumo" e avisos. */
.legal-resumo, .legal-aviso {
  margin-top: 18px; padding: 18px 20px; border-radius: 16px;
  border: 1px solid var(--borda); border-left: 3px solid var(--violeta);
  background: var(--cartao); box-shadow: var(--sombra);
}
.legal-resumo p:first-child, .legal-aviso p:first-child { margin-top: 0; }
.legal-resumo b, .legal-aviso b { color: var(--titulo); font-weight: 600; }
.legal-aviso { border-left-color: var(--tinta-fraca); font-size: 15px; color: var(--tinta-suave); }

/* Quadro de dados (privacidade): rótulo + descrição, em duas colunas quando cabe. */
.legal-dados { margin-top: 18px; display: grid; gap: 1px; border: 1px solid var(--borda); border-radius: 16px; overflow: hidden; background: var(--borda); }
.legal-dados > div { display: grid; gap: 4px; padding: 14px 18px; background: var(--cartao); }
.legal-dados dt { font-weight: 600; color: var(--titulo); font-size: 15px; }
.legal-dados dd { margin: 0; font-size: 15px; color: var(--tinta-suave); }
@media (min-width: 640px) {
  .legal-dados > div { grid-template-columns: 180px minmax(0, 1fr); gap: 16px; align-items: start; }
}

/* ---------- Rodapé ---------- */
.legal-rodape { max-width: 1080px; margin: 0 auto; padding: 22px var(--margem) 40px; border-top: 1px solid var(--borda); text-align: center; font-size: 14px; color: var(--tinta-fraca); }
.legal-rodape a { color: var(--tinta-suave); text-decoration: none; }
.legal-rodape a:hover { color: var(--titulo); }

/* ---------- Impressão ---------- */
@media print {
  .legal-topo, .legal-indice, .legal-rodape { display: none; }
  .legal-pagina { display: block; padding: 0; }
  .legal-texto section { break-inside: avoid; }
}