/* ============================================================
   ELIA · PÁGINAS LEGALES (Términos / Privacidad) — MODO PAPEL
   Piel editorial coherente con la landing: tokens del brandkit,
   Cormorant para títulos, Work Sans para cuerpo. Columna de lectura
   centrada (~720px) con márgenes laterales generosos en móvil.
   Fuente de color: elia-tokens.css (cero hex inventado).
   ============================================================ */
@import 'elia-tokens.css';

:root {
  /* Alias cortos → tokens canónicos del brandkit. */
  --paper:   var(--elia-paper);        /* #FBF9F5 fondo */
  --tinta:   var(--elia-tinta);        /* #1C2A3A tinta */
  --mute:    var(--elia-tinta-mute);   /* #5A6B7E secundario */
  --oro:     var(--elia-oro-500);      /* #C4912F acento */
  --oro-txt: var(--elia-oro-600);      /* oro legible sobre papel */
  --linea:   var(--elia-linea);        /* filete divisor */
  --borde:   var(--elia-paper-border);
  --card:    var(--elia-card);
  --paper-2: var(--elia-paper-2);
  --ed:      var(--elia-font-editorial);
  --ui:      var(--elia-font-ui);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--paper);
  color: var(--tinta);
  font-family: var(--ui);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ---------- ENCABEZADO ---------- */
.doc-header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(251, 249, 245, .92);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--linea);
}
.doc-header .inner {
  max-width: 720px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px clamp(22px, 6vw, 40px);
}
.doc-header .brand { display: inline-flex; align-items: center; }
.doc-header .brand svg { height: 21px; width: auto; display: block; }
.volver {
  font-family: var(--ui); font-size: 13.5px; font-weight: 500;
  color: var(--mute); text-decoration: none; white-space: nowrap;
  letter-spacing: .01em;
}
.volver:hover { color: var(--oro-txt); }

/* ---------- COLUMNA DE LECTURA ---------- */
.doc {
  counter-reset: sec;
  max-width: 720px; margin: 0 auto;
  /* Márgenes laterales generosos también en móvil (nunca pegados al borde). */
  padding: 40px clamp(24px, 6vw, 40px) 96px;
}

.doc .kicker {
  font-family: var(--ui); font-size: 11px; font-weight: 600;
  letter-spacing: .19em; text-transform: uppercase; color: var(--oro-txt);
  margin-bottom: 14px;
}

.doc h1 {
  font-family: var(--ed); font-weight: 600; color: var(--tinta);
  font-size: clamp(30px, 7vw, 42px); line-height: 1.12; letter-spacing: -.01em;
}
.doc .vigente {
  font-family: var(--ed); font-style: italic; font-weight: 500;
  color: var(--mute); font-size: 16px; margin-top: 8px;
}

.doc h2 {
  counter-increment: sec;
  font-family: var(--ed); font-weight: 600; color: var(--tinta);
  font-size: clamp(21px, 4.6vw, 26px); line-height: 1.22;
  margin: 42px 0 12px;
}
.doc h2::before {
  content: counter(sec) " · ";
  color: var(--oro-txt); font-weight: 600;
}

.doc p { font-size: 15.5px; line-height: 1.72; color: var(--tinta); margin: 12px 0; }
.doc strong { font-weight: 600; color: var(--tinta); }
.doc em { font-style: italic; }

.doc ul { list-style: none; margin: 12px 0; padding: 0; }
.doc li {
  position: relative; font-size: 15.5px; line-height: 1.7; color: var(--tinta);
  padding-left: 20px; margin: 8px 0;
}
.doc li::before {
  content: ""; position: absolute; left: 4px; top: .72em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--oro);
}
.doc li strong { color: var(--tinta); }

.doc hr {
  border: 0; height: 1px; background: var(--linea); margin: 28px 0;
}

/* ---------- TABLA (transferencias / encargados) ---------- */
.doc .tabla-wrap { overflow-x: auto; margin: 18px 0; }
.doc table {
  width: 100%; border-collapse: collapse; font-size: 14.5px;
  background: var(--card); border: 1px solid var(--borde); border-radius: 12px;
  overflow: hidden;
}
.doc th, .doc td {
  text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--linea);
  vertical-align: top;
}
.doc thead th {
  font-family: var(--ui); font-weight: 600; font-size: 12px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--mute);
  background: var(--paper-2);
}
.doc tbody tr:last-child td { border-bottom: none; }
.doc td strong { font-weight: 600; }

/* ---------- PIE ---------- */
.doc-foot {
  max-width: 720px; margin: 0 auto;
  padding: 0 clamp(24px, 6vw, 40px) 64px;
  text-align: center;
}
.doc-foot .rule { height: 1px; background: var(--linea); margin-bottom: 20px; }
.doc-foot p { font-size: 12.5px; color: var(--mute); letter-spacing: .02em; }
.doc-foot a { color: var(--oro-txt); text-decoration: none; }
.doc-foot a:hover { text-decoration: underline; }

/* ---------- FOCO ACCESIBLE (brandkit) ---------- */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--oro); outline-offset: 3px; border-radius: 6px;
}