/* Estilo de las paginas estaticas publicas (privacidad.html, terminos.html).
   Los valores salen de src/tokens.js — la idea es que quien salta de la landing
   a la politica sienta que sigue en el mismo sitio, y no en tres sitios
   distintos pegados con cinta.

   Va como archivo externo (y no inline como en index.html) porque estas dos
   paginas no son criticas para el primer pintado y asi el CSS se escribe una
   sola vez. style-src 'self' del CSP lo permite. */

:root{
  --bg:#ECEBE7; --card:#FFFFFF; --card-soft:#F6F5F1;
  --ink:#1F1F1F; --soft:#7A7A72; --faint:#9A9A90;
  --line:rgba(31,31,31,0.07); --accent:#354D3F; --accent-soft:#D8EAD8;
  --shadow:0 2px 8px rgba(62,54,38,.07);
  --r:14px; --fo:'Outfit',system-ui,-apple-system,sans-serif;
}

*{ box-sizing:border-box }

body{
  margin:0;
  padding:0 clamp(20px,5vw,40px) 80px;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--fo);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* Todo el contenido queda en una columna legible sin tener que envolver el
   HTML existente en un contenedor: se centra cada bloque de nivel superior. */
body > *{ max-width:760px; margin-inline:auto }

/* ── Cabecera con la marca y la vuelta al inicio ─────────────────── */
.site-head{
  max-width:760px; margin:0 auto; padding-block:22px 34px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.site-head a{ text-decoration:none }
.site-head .brand{
  display:flex; align-items:center; gap:10px;
  font-weight:700; font-size:17px; color:var(--ink); letter-spacing:-.02em;
}
.site-head .back{
  font-size:14px; font-weight:600; color:var(--ink);
  background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow);
  border-radius:var(--r); padding:9px 18px;
}

/* ── Tipografia del documento ────────────────────────────────────── */
h1{
  font-size:clamp(30px,5vw,42px); font-weight:800; letter-spacing:-.03em;
  line-height:1.1; margin:8px auto 0; text-wrap:balance;
}
h2{
  font-size:clamp(19px,2.6vw,23px); font-weight:700; letter-spacing:-.02em;
  margin:44px auto 14px; padding-bottom:12px;
  border-bottom:1px solid var(--line); color:var(--ink);
}
h3{ font-size:17px; font-weight:700; margin:28px auto 8px }
p{ margin:0 auto 14px }
ul,ol{ margin:0 auto 16px; padding-left:22px }
li{ margin-bottom:8px }
a{ color:var(--ink); font-weight:600; text-underline-offset:3px }
strong{ font-weight:700 }
hr{ border:none; border-top:1px solid var(--line); margin-block:48px 0 }

.last-update{
  color:var(--faint); font-size:13px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; margin:14px auto 34px;
}

/* Los bloques que el HTML ya usaba, reinterpretados con la paleta calida. */
.section{
  background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow);
  border-radius:var(--r); padding:clamp(20px,3.5vw,30px); margin:0 auto 18px;
}
.section > :first-child{ margin-top:0 }
.section > :last-child{ margin-bottom:0 }
.section h2{ margin-top:0 }

.destacado{
  background:#FBF3DC; border:1px solid #E2CE93; border-radius:var(--r);
  padding:18px 22px; margin:20px auto;
}
.destacado p:first-child{ margin-top:0 }
.destacado p:last-child{ margin-bottom:0 }

/* Pie de version al final de cada documento. */
.pie{ color:var(--faint); font-size:12.5px; margin-top:26px }

@media (max-width:520px){
  body{ font-size:15.5px }
}