/* ═══════════════════════════════════════════════════════
   SIMS - páginas legais (privacidade / termos)
   ═══════════════════════════════════════════════════════ */

.legal { padding-top: var(--nav-h); }

/* cabeçalho */
.legal__hero {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--plum-950), var(--plum-800) 70%, var(--pink-ink));
  color: var(--paper);
  padding: 64px 28px 56px;
}
.legal__hero-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(40% 62% at 14% 10%, rgba(180, 81, 126, .38), transparent 70%),
    radial-gradient(34% 50% at 86% 0%, rgba(124, 107, 196, .3), transparent 70%),
    radial-gradient(26% 40% at 70% 100%, rgba(255, 164, 2, .12), transparent 70%);
}
.legal__hero-inner { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; }
.legal__kicker {
  font-weight: 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--lav); margin-bottom: 12px;
}
.legal__hero h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(30px, 4vw, 46px); line-height: 1.12; letter-spacing: -.02em;
  margin-bottom: 12px;
}
.legal__meta { font-size: 14px; color: rgba(251, 244, 235, .62); }

/* corpo em duas colunas */
.legal__body {
  max-width: 1120px; margin: 0 auto;
  padding: 52px 28px 84px;
  display: grid; grid-template-columns: 234px 1fr; gap: 52px; align-items: start;
}

/* índice */
.legal__toc {
  position: sticky; top: calc(var(--nav-h) + 24px);
  display: flex; flex-direction: column; gap: 2px;
  padding: 22px 20px;
  background: #fff; border: 1px solid rgba(51, 16, 40, .09);
  border-radius: var(--radius);
  box-shadow: 0 2px 12px -6px rgba(51, 16, 40, .12);
}
.legal__toc-title {
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  letter-spacing: .11em; text-transform: uppercase; color: var(--ink);
  margin-bottom: 10px;
}
.legal__toc a {
  font-size: 13.5px; color: var(--ink-soft); text-decoration: none;
  padding: 7px 10px; border-radius: 9px; line-height: 1.35;
  border-left: 2px solid transparent;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.legal__toc a:hover { background: rgba(180, 81, 126, .07); color: var(--pink-deep); border-left-color: var(--pink); }

/* texto */
.legal__content { max-width: 720px; }
.legal__content section { scroll-margin-top: calc(var(--nav-h) + 24px); }
.legal__content section + section { margin-top: 40px; }
.legal__content h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: 21px; line-height: 1.25; letter-spacing: -.015em;
  color: var(--ink); margin-bottom: 14px;
  padding-bottom: 12px; border-bottom: 1px solid rgba(51, 16, 40, .1);
}
.legal__content p { font-size: 15.5px; line-height: 1.72; color: var(--ink-soft); margin-bottom: 14px; }
.legal__content strong { color: var(--ink); font-weight: 700; }
.legal__content ul { margin: 0 0 16px; padding-left: 4px; list-style: none; }
.legal__content li {
  position: relative; padding-left: 22px; margin-bottom: 9px;
  font-size: 15.5px; line-height: 1.65; color: var(--ink-soft);
}
.legal__content li::before {
  content: ''; position: absolute; left: 4px; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--pink);
}
.legal__content a { color: var(--pink-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.legal__content a:hover { color: var(--orange-deep); }

/* card de contato */
.legal__card {
  background: linear-gradient(150deg, #fff, var(--paper-2));
  border: 1px solid rgba(51, 16, 40, .1);
  border-left: 4px solid var(--pink);
  border-radius: 16px; padding: 22px 24px; margin: 18px 0 20px;
}
.legal__card p { margin-bottom: 10px; }
.legal__card p:last-child { margin-bottom: 0; }

.legal__seealso {
  margin-top: 44px; padding-top: 22px;
  border-top: 1px solid rgba(51, 16, 40, .1);
  font-size: 15px; color: var(--ink-soft);
}

/* rodapé enxuto nessas páginas */
.legal ~ .footer { padding-top: 0; }
.legal ~ .footer .footer__bottom { padding-top: 28px; border-top: none; }

@media (max-width: 900px) {
  .legal__body { grid-template-columns: 1fr; gap: 32px; padding: 36px 20px 64px; }
  .legal__toc {
    position: static; flex-direction: row; flex-wrap: wrap; gap: 6px;
    padding: 18px 16px;
  }
  .legal__toc-title { width: 100%; margin-bottom: 6px; }
  .legal__toc a { border-left: none; background: rgba(180, 81, 126, .06); font-size: 13px; padding: 8px 12px; }
  .legal__hero { padding: 44px 20px 40px; }
  .legal__content h2 { font-size: 19px; }
  .legal__content p, .legal__content li { font-size: 15px; }
}

/* Nas páginas legais o header não tem botão de menu; abaixo de 760px o
   style.css esconde .nav__links e .nav__cta e a navegação sumia por
   completo. Aqui os links viram uma linha compacta e o CTA reaparece. */
@media (max-width: 760px) {
  .legal-nav .nav__inner { flex-wrap: wrap; height: auto; padding: 12px 20px 14px; gap: 10px; }
  .legal-nav .nav__links {
    display: flex; order: 3; width: 100%; gap: 16px;
    overflow-x: auto; padding-bottom: 2px;
    scrollbar-width: none;
  }
  .legal-nav .nav__links::-webkit-scrollbar { display: none; }
  .legal-nav .nav__links a { font-size: 13.5px; white-space: nowrap; }
  .legal-nav .nav__cta { display: inline-flex; margin-left: auto; padding: 10px 16px; font-size: 13.5px; }
}