/* Hoja de los documentos legales (Terminos, Privacidad, Eliminar cuenta).
   Se sirve desde el backend Y desde claimealo.com: el script `sync:legal` del
   frontend copia esta carpeta en cada build, asi que la fuente de verdad es
   esta, no `frontend/public/legal/`.

   Antes era un documento serif sobre papel claro, sin relacion visual con el
   sitio. Ahora usa la paleta de la marca -- el azul oscuro de la landing --
   manteniendo la serif para el cuerpo, que es lo que hace legible un texto
   largo. Las paginas las abre tambien la app movil, asi que no dependen de
   ningun asset del sitio: el logo es tipografico. */

:root {
  --bg: #121c26;          /* el mismo azul de la primera zona de la landing */
  --paper: #16222e;
  --ink: #f2f2f2;         /* --color-text-mint */
  --ink-soft: #cdcdcd;    /* --color-text-ivory */
  --rule: rgba(205, 205, 205, 0.16);
  --accent: #2f93d6;      /* --color-accent-strong */
  --highlight: #d6409f;
  --sans: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
}

body {
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--ink);
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

/* Barra superior, equivalente al navbar del sitio */
.topbar {
  border-bottom: 1px solid var(--rule);
  background: rgba(7, 6, 12, 0.35);
}

.topbar-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.topbar .wordmark {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
}

.topbar .wordmark .accent { color: var(--accent); }

.topbar .back {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink-soft);
  text-decoration: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 6px 14px;
  white-space: nowrap;
}

.topbar .back:hover { border-color: var(--accent); color: var(--ink); }

.page {
  max-width: 760px;
  margin: 0 auto;
  padding: 44px 24px 88px;
}

/* El bloque de titulo, separado del cuerpo por una tarjeta tenue */
.masthead {
  margin-bottom: 28px;
}

.masthead .brand {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

h1 {
  font-family: var(--sans);
  font-size: 27px;
  line-height: 1.25;
  margin: 12px 0 2px;
  letter-spacing: -0.01em;
}

.page > h2:first-of-type {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--ink-soft);
  text-transform: none;
}

h2 {
  font-family: var(--sans);
  font-size: 18.5px;
  border-top: 1px solid var(--rule);
  padding-top: 22px;
  margin-top: 36px;
  margin-bottom: 10px;
}

h3 {
  font-family: var(--sans);
  font-size: 15.5px;
  margin-top: 24px;
  margin-bottom: 8px;
  color: var(--accent);
}

p, ul, ol {
  font-size: 16px;
  color: var(--ink-soft);
  margin: 12px 0;
}

/* La linea de "Ultima actualizacion", que es el primer parrafo */
p:first-of-type strong {
  color: var(--ink-soft);
  font-weight: 400;
}

ul, ol { padding-left: 24px; }
li { margin: 5px 0; }

strong { font-weight: 700; color: var(--ink); }

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

.footer-note {
  margin-top: 44px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink-soft);
  opacity: 0.75;
  line-height: 1.6;
}

/* Pie, equivalente al footer del sitio */
.sitefoot {
  border-top: 1px solid var(--rule);
  background: rgba(7, 6, 12, 0.35);
}

.sitefoot-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 22px 24px 30px;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
}

.sitefoot-inner a { color: var(--ink-soft); text-decoration: none; }
.sitefoot-inner a:hover { color: var(--accent); }
.sitefoot-inner .copy { opacity: 0.7; width: 100%; margin: 0; font-size: 12px; }

@media (max-width: 560px) {
  .page { padding: 32px 20px 64px; }
  h1 { font-size: 23px; }
  .topbar-inner { padding: 14px 20px; }
}