/* ══════════════════════════════════════════════════════════════════════
   Hoja de las páginas legales de aora-app.com.
   Mismos tokens que la portada; sin nada de su maquetación, que aquí no
   hace falta. Un documento legal es texto: una columna, buen interlineado
   y márgenes generosos.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --ink:#2B2722;
  --soft:#8C8377;
  --faint:#A89E90;
  --gold:#A18A5E;
  --paper:#F1F3F0;
  --card:#FFFFFF;
  --line:rgba(43,39,34,.09);
  --line-soft:rgba(43,39,34,.06);
  --r-md:18px;
  --maxw:820px;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"DM Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  font-weight:500; letter-spacing:-.025em; margin:0; text-wrap:balance;
}

a{ color:var(--ink); }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 22px; }

/* ── Cabecera ──────────────────────────────────────────────────────── */
.nav{
  background:rgba(241,243,240,.9);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:10;
}
.nav-in{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-top:14px; padding-bottom:14px;
}
.brand{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); }
.brand b{ font-family:"Plus Jakarta Sans",system-ui,sans-serif; font-weight:600; font-size:21px; letter-spacing:.02em; }
.nav-back{ font-size:14.5px; color:var(--soft); text-decoration:none; transition:color .2s; }
.nav-back:hover{ color:var(--ink); }

/* ── El documento ──────────────────────────────────────────────────── */
.doc{ padding:clamp(38px,6vw,72px) 0 clamp(48px,7vw,84px); }
.doc-kicker{
  font-size:11.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--faint); margin:0 0 10px;
}
.doc h1{ font-size:clamp(28px,4.4vw,40px); margin-bottom:6px; }
.doc-lede{ font-size:16px; line-height:1.65; color:var(--soft); margin:14px 0 0; }

.doc h2{
  font-size:clamp(19px,2.2vw,22px);
  margin:clamp(30px,4vw,44px) 0 10px;
  padding-top:clamp(24px,3vw,32px);
  border-top:1px solid var(--line-soft);
}
.doc h2:first-of-type{ border-top:0; padding-top:0; }
.doc h3{ font-size:17px; margin:26px 0 8px; }

.doc p, .doc li{ font-size:15px; line-height:1.75; color:var(--soft); }
.doc p + p{ margin-top:12px; }
.doc ul{ margin:12px 0 0; padding-left:20px; }
.doc li + li{ margin-top:7px; }
.doc strong{ color:var(--ink); font-weight:600; }
.doc code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em;
  background:rgba(43,39,34,.055); padding:1px 5px; border-radius:4px;
}

/* Una tabla de "qué guardamos y para qué" se lee mucho mejor que un
   párrafo con comas: la columna de la izquierda es el índice. */
.doc-table{ width:100%; border-collapse:collapse; margin-top:16px; }
.doc-table th, .doc-table td{
  text-align:left; vertical-align:top; padding:11px 14px 11px 0;
  border-bottom:1px solid var(--line-soft); font-size:14.5px; line-height:1.65;
}
.doc-table th{
  color:var(--ink); font-weight:600; width:34%; padding-right:22px;
}
.doc-table td{ color:var(--soft); }

.callout{
  margin-top:18px; padding:16px 18px; background:var(--card);
  border:1px solid var(--line-soft); border-radius:var(--r-md);
  font-size:14.5px; line-height:1.65; color:var(--soft);
}
.callout strong{ color:var(--ink); }

/* Lo que falta por rellenar, imposible de pasar por alto. */
mark.todo{
  background:rgba(244,199,82,.35); color:var(--ink);
  padding:1px 5px; border-radius:4px; font-weight:600;
}

.doc-updated{
  font-size:12.5px; color:var(--faint);
  margin-top:clamp(30px,4vw,44px); padding-top:20px; border-top:1px solid var(--line);
}

/* ── Pie ───────────────────────────────────────────────────────────── */
.foot{ background:#E7E9E5; border-top:1px solid var(--line); padding:30px 0; }
.foot-in{
  display:flex; flex-wrap:wrap; gap:12px 26px; justify-content:space-between;
  font-size:13.5px; color:var(--faint);
}
.foot-in nav{ display:flex; flex-wrap:wrap; gap:18px; }
.foot-in a{ color:var(--soft); text-decoration:none; transition:color .2s; }
.foot-in a:hover{ color:var(--ink); }

@media (max-width:620px){
  .doc-table, .doc-table tbody, .doc-table tr, .doc-table th, .doc-table td{ display:block; }
  .doc-table th{ width:auto; border-bottom:0; padding-bottom:2px; }
  .doc-table td{ padding-top:0; padding-bottom:14px; }
}