/* =========================================================
   Páginas de texto (política de privacidad)
   Colores, tipografías, header y pie salen de styles.css; acá va solo el formato del texto largo.
   ========================================================= */
.legal { padding: calc(var(--header-h) + 64px) 0 112px; }
.legal__inner { max-width: 760px; }
.legal__title { font-size: clamp(2.1rem, 5vw, 3rem); letter-spacing: -.03em; }
.legal__updated { margin-top: 14px; font-family: var(--mono); font-size: .78rem; letter-spacing: .06em; color: var(--muted); }
.legal__lead { margin-top: 26px; font-size: 1.1rem; color: var(--text); max-width: 62ch; }

/* Índice */
.legal__toc {
  margin-top: 36px; padding: 20px 24px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.legal__toc-title { font-family: var(--mono); font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.legal__toc ol { margin-top: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; }
.legal__toc a { display: flex; gap: 10px; font-size: .92rem; color: var(--text); transition: color .2s; }
.legal__toc a:hover { color: var(--violet); }
.legal__toc .num { font-family: var(--mono); font-size: .8rem; color: var(--violet); padding-top: 2px; }

/* Secciones */
.legal section { margin-top: 56px; scroll-margin-top: calc(var(--header-h) + 20px); }
.legal h2 { font-size: 1.35rem; display: flex; align-items: baseline; gap: 12px; }
.legal h2 .num { font-family: var(--mono); font-size: .85rem; font-weight: 500; color: var(--violet); }
.legal section p, .legal section li { color: var(--muted); max-width: 68ch; }
.legal section p { margin-top: 14px; }
.legal section ul { margin-top: 14px; display: grid; gap: 10px; }
.legal section li { position: relative; padding-left: 22px; }
.legal section li::before {
  content: ""; position: absolute; left: 3px; top: .7em;
  width: 6px; height: 6px; background: var(--violet); border-radius: 1px; transform: rotate(45deg);
}
.legal strong { color: var(--text); font-weight: 600; }
.legal__inner a:not(.btn), .legal__toc a { overflow-wrap: anywhere; }
.legal section a, .legal__lead a, .legal__end a { color: var(--violet); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.legal section a:hover, .legal__lead a:hover, .legal__end a:hover { color: var(--text); }
.legal code { font-family: var(--mono); font-size: .88em; color: var(--text); }

/* Cierre */
.legal__end {
  margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px; color: var(--muted);
}

@media (max-width: 640px) {
  .legal { padding: calc(var(--header-h) + 36px) 0 80px; }
  .legal__toc { padding: 18px; }
  .legal__toc ol { grid-template-columns: 1fr; }
  .legal section { margin-top: 44px; }
}

/* Modo claro: los violetas pasan al oscuro (contraste AA sobre claro) */
:root[data-theme="light"] .legal__toc .num,
:root[data-theme="light"] .legal h2 .num,
:root[data-theme="light"] .legal section a,
:root[data-theme="light"] .legal__lead a,
:root[data-theme="light"] .legal__end a,
:root[data-theme="light"] .legal__toc a:hover { color: var(--violet-dark); }
:root[data-theme="light"] .legal section li::before { background: var(--violet-dark); }
:root[data-theme="light"] .legal section a:hover,
:root[data-theme="light"] .legal__lead a:hover,
:root[data-theme="light"] .legal__end a:hover { color: var(--ink); }