/* ═══════════════════════════════════════════════════════════
   Novelas Turcas — página de Termos e Privacidade.
   Herda a paleta e as fontes de landing.css; aqui fica só o que um
   documento longo pede e a landing não tem: medida de leitura curta,
   hierarquia de seções e uma tabela legível no celular.
   ═══════════════════════════════════════════════════════════ */

.legal-page .wrap { max-width: 780px; }

/* ── cabeçalho ── */
.legal-header {
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.legal-brand { display: inline-block; }
.legal-brand img { height: 34px; width: auto; }

@media (max-width: 420px) {
  .legal-brand img { height: 24px; }
}

/* ── corpo ── */
.legal-main {
  padding: 44px 20px 64px;
  font-size: 16px;
}

.legal-main h1 {
  font-family: var(--romance);
  font-size: clamp(1.7rem, 5vw, 2.3rem);
  line-height: 1.2;
  color: var(--gold-soft);
  margin: 0 0 8px;
}

.legal-updated {
  color: var(--cream-dim);
  font-size: 0.85rem;
  margin: 0 0 28px;
}

.legal-lead {
  font-size: 1.05rem;
  color: var(--cream);
  border-left: 3px solid var(--crimson);
  padding-left: 16px;
  margin-bottom: 36px;
}

/* ── índice ── */
.legal-toc {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 6px 18px;
  padding: 20px;
  margin-bottom: 40px;
  background: var(--ink-2);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius);
  font-size: 0.9rem;
}

.legal-toc a {
  color: var(--cream-dim);
  text-decoration: none;
  padding: 3px 0;
}

.legal-toc a:hover,
.legal-toc a:focus-visible { color: var(--gold-soft); }

/* ── seções ── */
.legal-main section { margin-bottom: 38px; }

.legal-main h2 {
  font-family: var(--romance);
  font-size: 1.28rem;
  color: var(--gold);
  margin: 0 0 12px;
  /* Compensa o cabeçalho ao pular pelo índice, senão o título encosta no topo. */
  scroll-margin-top: 24px;
}

.legal-main p { margin: 0 0 14px; }

.legal-main ul {
  margin: 0 0 14px;
  padding-left: 22px;
}

.legal-main li { margin-bottom: 9px; }

.legal-main strong { color: var(--gold-soft); }

.legal-main code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.86em;
  background: rgba(255, 255, 255, 0.07);
  padding: 1px 6px;
  border-radius: 5px;
  color: var(--cream);
}

.legal-main a {
  color: var(--gold-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* O índice está dentro de .legal-main, e a regra acima tem a mesma
   especificidade da que vem antes — sem isto, os 14 itens saem sublinhados e
   o bloco vira um paredão de linhas. */
.legal-toc a { text-decoration: none; }

/* Destaque para os dois pontos que mais geram dúvida: não hospedamos vídeo e
   não tocamos em dado de pagamento. */
.legal-callout {
  background: var(--ink-2);
  border: 1px solid rgba(224, 180, 95, 0.28);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 0 0 18px;
}

/* ── tabela ── */
.legal-table-scroll {
  overflow-x: auto;
  margin: 0 0 16px;
  -webkit-overflow-scrolling: touch;
}

.legal-table-scroll table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 0.94rem;
}

.legal-table-scroll th,
.legal-table-scroll td {
  text-align: left;
  vertical-align: top;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.legal-table-scroll th {
  color: var(--gold);
  font-weight: 600;
  white-space: nowrap;
}

.legal-table-scroll tbody td:first-child {
  color: var(--gold-soft);
  font-weight: 500;
}

/* ── contato e rodapé do texto ── */
.legal-contact { font-size: 1.05rem; }

.legal-fineprint {
  color: var(--cream-dim);
  font-size: 0.85rem;
  margin-top: 22px;
}