/* ─── TERMINOS.CSS ────────────────────────────────────────────────────────────
   Estilo de public/terminos.html. Salio de un <style> inline el 30 jul 2026
   para que el CSP pueda cerrar style-src-elem: la pagina se sirve bajo el
   mismo header que la app, asi que un <style> inline aqui obligaba a dejar
   'unsafe-inline' abierto para TODO el dominio.

   REALINEADA A LA MARCA VIGENTE EL 31 JUL 2026. Traía los 8 colores del
   sistema anterior al rediseño del 18 jul — lo detectó check-palette.mjs en
   su primera corrida. El cambio de fondo no es cosmético: la página usaba el
   ORO como primario (enlaces, botones, degradado del encabezado), y en el
   sistema vigente el primario es el navy `sage` — el oro quedó restringido a
   gráficos, botones y anillos, nunca a texto (CLAUDE.md, sección de paleta).
   Un enlace dorado incumplía esa regla además de ir un rebrand atrás.

   ⚠️ Los hex están escritos a mano porque un CSS estático no puede importar
   theme.js — misma excepción declarada que print.css y boot.css. Centralizados
   abajo en :root y cotejados contra C_LIGHT. check-palette.mjs tumba el build
   si alguno deja de existir en la paleta.
   ────────────────────────────────────────────────────────────────────────── */
:root {
  --sage:       #2E3A8C;
  --sage-dark:  #1E2B66;
  --sage-pale:  #EBE9F6;
  --navy:       #1B2238;
  --navy-light: #2C3E63;
  --navy-muted: #6A6E82;
  --beige:      #F5F6F9;
  --beige-deep: #E8E1D2;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--beige);
  color: var(--navy);
  font-family: 'Inter',sans-serif;
  font-size: 15px;
  line-height: 1.7;
  padding: 0 0 60px;
}
.header {
  background: linear-gradient(135deg, var(--sage), var(--sage-dark));
  padding: 40px 24px 32px;
  text-align: center;
}
/* El color era heredado del body (navy) y nunca se declaró: sobre el degradado
   dorado anterior apenas se leía, y sobre el navy vigente el wordmark quedaba
   invisible. Va en blanco, como el h1 hermano. Detectado el 31 jul al mirar el
   render, no al leer el código. */
.logo { font-size: 28px; margin-bottom: 6px; color: white; }
.header h1 {
  font-family: 'Fraunces',serif;
  color: white;
  font-size: 22px;
  font-weight: 700;
}
.header p {
  color: rgba(255,255,255,0.75);
  font-size: 13px;
  margin-top: 4px;
}
.container {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 20px;
}
.tabs {
  display: flex;
  gap: 8px;
  margin: 24px 0 20px;
}
.tab {
  flex: 1;
  padding: 12px 0;
  border-radius: 14px;
  border: 2px solid var(--beige-deep);
  background: white;
  font-family: 'Inter',sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy-muted);
  cursor: pointer;
  transition: all .2s;
  text-align: center;
}
.tab.active {
  background: var(--sage);
  border-color: var(--sage);
  color: white;
}
.section { display: none; }
.section.active { display: block; }
.card {
  background: white;
  border-radius: 20px;
  padding: 22px 20px;
  margin-bottom: 14px;
  /* navy vigente (27,34,56) al 5.5% — antes era el navy anterior (30,45,64) */
  box-shadow: 0 2px 14px rgba(27,34,56,0.055);
}
h2 {
  font-family: 'Fraunces',serif;
  font-size: 17px;
  color: var(--navy);
  margin-bottom: 10px;
}
h3 {
  font-family: 'Fraunces',serif;
  font-size: 15px;
  color: var(--navy-light);
  margin: 14px 0 6px;
}
p { color: var(--navy-muted); font-size: 14px; margin-bottom: 8px; }
ul { padding-left: 18px; margin-bottom: 8px; }
ul li { color: var(--navy-muted); font-size: 14px; margin-bottom: 4px; }
.highlight {
  background: var(--sage-pale);
  border-left: 3px solid var(--sage);
  border-radius: 0 10px 10px 0;
  padding: 12px 16px;
  margin: 12px 0;
}
.highlight p { color: var(--sage-dark); font-weight: 700; margin: 0; }
a { color: var(--sage); }
.update-date {
  text-align: center;
  color: var(--navy-muted);
  font-size: 12px;
  margin: 16px 0 24px;
}
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--sage);
  color: white;
  text-decoration: none;
  font-family: 'Inter',sans-serif;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 24px;
  border-radius: 14px;
  margin: 8px 0 0;
}