/* ============================================================
   Kuidaka — estilos de las PÁGINAS LEGALES
   (privacidad · términos · eliminar-cuenta)
   Sobrias y muy legibles. Comparten nav/footer con la landing.
   ============================================================ */

.legal-hero{background:var(--cream);border-bottom:1px solid var(--line);padding:52px 0 40px}
.legal-hero .eyebrow{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--copper)}
.legal-hero h1{font-family:var(--serif);font-weight:700;font-size:clamp(30px,7vw,46px);
  line-height:1.06;letter-spacing:-.02em;color:var(--ink);margin:10px 0 0}
.legal-hero .updated{margin-top:14px;font-size:14px;color:var(--muted)}
.legal-hero .intro{margin-top:18px;font-size:17px;color:var(--ink-soft);max-width:62ch}

/* ---------- Cuerpo del documento ---------- */
.legal{padding:44px 0 72px}
.legal .doc{max-width:760px;margin:0 auto}
.legal h2{font-family:var(--serif);font-weight:700;font-size:24px;line-height:1.2;color:var(--ink);
  margin:40px 0 12px;scroll-margin-top:84px}
.legal h2:first-child{margin-top:0}
.legal h3{font-family:var(--serif);font-weight:600;font-size:19px;color:var(--ink);margin:24px 0 8px}
.legal p{font-size:16px;color:var(--ink-soft);margin:12px 0}
.legal ul,.legal ol{margin:12px 0 12px 22px}
.legal li{font-size:16px;color:var(--ink-soft);margin:7px 0}
.legal strong{color:var(--ink);font-weight:600}
.legal a{color:var(--copper-d);text-decoration:underline;text-underline-offset:2px}
.legal a:hover{color:var(--copper)}

/* ---------- Índice de contenidos ---------- */
.toc{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin:0 0 8px;
  box-shadow:0 6px 18px rgba(92,46,14,.05)}
.toc h2{font-size:14px!important;text-transform:uppercase;letter-spacing:.06em;color:var(--copper);
  margin:0 0 12px!important;font-family:var(--sans);font-weight:700}
.toc ol{margin:0;padding-left:20px}
.toc li{margin:6px 0;font-size:15px}
.toc a{color:var(--ink-soft);text-decoration:none}
.toc a:hover{color:var(--copper-d);text-decoration:underline}

/* ---------- Bloque destacado (llamada de atención) ---------- */
.callout{background:rgba(196,122,58,.07);border:1px solid rgba(196,122,58,.22);border-radius:14px;
  padding:18px 20px;margin:20px 0}
.callout p{margin:6px 0}
.callout p:first-child{margin-top:0}
.callout p:last-child{margin-bottom:0}

/* ---------- Pasos numerados (eliminar cuenta) ---------- */
.steplist{list-style:none;margin:16px 0;padding:0;display:grid;gap:14px}
.steplist li{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:18px 20px 18px 58px;box-shadow:0 6px 18px rgba(92,46,14,.05)}
.steplist li:before{counter-increment:st;content:counter(st);position:absolute;left:16px;top:16px;
  width:30px;height:30px;border-radius:9px;background:var(--grad);color:#fff;font-family:var(--serif);
  font-weight:700;display:grid;place-items:center;font-size:15px}
.steplist{counter-reset:st}
.steplist strong{display:block;margin-bottom:2px}

/* ---------- Dos columnas "qué se borra / qué se conserva" ---------- */
.cols{display:grid;gap:16px;margin:20px 0}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 24px;
  box-shadow:0 6px 18px rgba(92,46,14,.05)}
.card h3{margin-top:0}
@media(min-width:720px){.cols{grid-template-columns:1fr 1fr}}