/* ============================================================
   MYPHONE PRO — páginas de texto legal
   Usa os mesmos tokens de css/style.css. Carregado só por
   privacidade.html; não afeta nenhuma outra página.

   Ordem importa: as regras genéricas de texto vêm primeiro e as
   específicas depois, senão o parágrafo genérico sobrescreve o
   eyebrow e o texto do resumo.
   ============================================================ */

body.pagina-legal { background: var(--bg); overflow-x: hidden; }

.legal {
  position: relative; z-index: 2;
  padding: calc(var(--header-h) + clamp(40px, 7vw, 88px)) 0 clamp(56px, 8vw, 104px);
}
.legal__wrap { width: min(100% - clamp(32px, 7vw, 80px), 760px); margin-inline: auto; }

/* ---------- texto corrido (genérico, vem antes das exceções) ---------- */
.legal p, .legal li {
  margin: 0 0 14px; color: var(--muted);
  font-size: .98rem; line-height: 1.75;
}
.legal ul { margin: 0 0 14px; padding-left: 22px; }
.legal li { margin-bottom: 8px; }
.legal strong { color: var(--ink-dim); font-weight: 600; }

.legal h2 {
  margin: clamp(38px, 5vw, 54px) 0 14px;
  font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 600;
  letter-spacing: -.02em; color: var(--ink);
}
.legal h3 {
  margin: 26px 0 10px;
  font-size: 1rem; font-weight: 600; color: var(--ink-dim);
}

/* links só dentro do texto: não pega o botão nem o "voltar" */
.legal p a, .legal li a {
  color: var(--ink); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: rgba(255, 59, 69, .55);
  transition: color .2s var(--ease), text-decoration-color .2s var(--ease);
}
.legal p a:hover, .legal li a:hover { color: #fff; text-decoration-color: var(--red-hot); }

/* ---------- cabeçalho da página ---------- */
.legal__cab { margin-bottom: clamp(32px, 5vw, 56px); }
.legal__cab .eyebrow { color: var(--red-hot); margin-bottom: 14px; }
.legal__data {
  margin: 18px 0 0; font-size: .82rem; letter-spacing: .04em; color: var(--muted);
}

/* ---------- resumo em destaque ---------- */
.legal__resumo {
  margin: clamp(24px, 4vw, 36px) 0 0;
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--line); border-radius: 18px;
  background: linear-gradient(180deg, #0f0f13, #0a0a0d);
}
.legal__resumo p { margin: 0; color: var(--ink-dim); font-size: 1rem; line-height: 1.7; }
.legal__resumo p + p { margin-top: 12px; }

/* ---------- bloco de contato do titular ---------- */
.legal__contato {
  margin-top: clamp(32px, 5vw, 48px);
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid rgba(255, 59, 69, .28); border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 59, 69, .07), rgba(255, 59, 69, .02));
}
.legal__contato h2 { margin-top: 0; }
.legal__contato .btn { margin-top: 6px; }

/* ---------- voltar ---------- */
.legal__voltar {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: clamp(36px, 5vw, 52px);
  color: var(--muted); font-size: .9rem; text-decoration: none;
  transition: color .2s var(--ease);
}
.legal__voltar:hover { color: #fff; }

/* especificidade maior que a regra genérica .legal p */
.legal .legal__nota { margin-top: 16px; }