/* ============================================================
   Las páginas legales (privacidad.html y terminos.html)
   ------------------------------------------------------------
   Van aparte de styles.css a propósito: son páginas sueltas que
   tienen que abrirse sin la app, sin sesión y sin cargar los 116 KB
   de la hoja principal. Alguien puede llegar aquí desde un enlace
   antes incluso de tener cuenta.

   Los colores son los mismos que los de la app, pero escritos aquí:
   duplicar seis variables sale más barato que arrastrar toda la hoja
   por dos páginas que casi nadie abre dos veces.
   ============================================================ */

:root {
  color-scheme: light dark;
  --fondo: #fffbf0;
  --crema: #fdf3ce;
  --borde: #ede3ce;
  --texto: #1f1a14;
  --suave: #756a5b;
  --acento: #be5408;
  --sobre: #fff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #17130d;
    --crema: #241d13;
    --borde: #33291c;
    --texto: #f2ece1;
    --suave: #b3a794;
    /* El acento se aclara en oscuro: el terracota sobre negro se queda
       por debajo del contraste que pide AA. */
    --acento: #f0913f;
    --sobre: #17130d;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.65;
  font-size: 16px;
}

main {
  max-width: 44rem;
  margin: 0 auto;
  padding: 2rem 1.2rem 4rem;
}

header {
  border-bottom: 1px solid var(--borde);
  padding-bottom: 1.2rem;
  margin-bottom: 2rem;
}

.marca { display: flex; align-items: center; gap: .7rem; }
.marca svg { width: 42px; height: 42px; }
.marca strong { font-size: 1.05rem; }

h1 { font-size: 1.6rem; margin: 1.1rem 0 .3rem; letter-spacing: -.02em; }
.fecha { color: var(--suave); font-size: .85rem; margin: 0; }

/* Cada apartado empieza con una línea que lo separa del anterior: son
   textos largos y sin ese respiro se leen como un muro. */
h2 {
  font-size: 1.12rem;
  margin: 2.2rem 0 .6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--borde);
  letter-spacing: -.01em;
}
h3 { font-size: .98rem; margin: 1.3rem 0 .35rem; }

p, li { margin: 0 0 .8rem; }
ul { padding-left: 1.2rem; }
li { margin-bottom: .45rem; }
a { color: var(--acento); }
code {
  font-size: .88em;
  background: var(--crema);
  padding: .08em .35em;
  border-radius: 4px;
}

/* Lo que hay que leer sí o sí, aunque se lea en diagonal */
.destacado {
  background: var(--crema);
  border-radius: 14px;
  padding: 1rem 1.2rem;
  margin: 1.2rem 0;
}
.destacado p:last-child { margin-bottom: 0; }

/* Las tablas se salen en un móvil, así que se desplazan ellas y no la
   página entera. */
.envoltorio-tabla { overflow-x: auto; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
  margin: .8rem 0 1.2rem;
}
th, td {
  text-align: left;
  padding: .55rem .6rem;
  border-bottom: 1px solid var(--borde);
  vertical-align: top;
}
th {
  color: var(--suave);
  font-weight: 600;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.volver {
  display: inline-block;
  margin-top: 2.5rem;
  background: var(--acento);
  color: var(--sobre);
  padding: .7rem 1.2rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: .92rem;
}

.otra-pagina {
  margin-top: 1.5rem;
  font-size: .9rem;
  color: var(--suave);
}