/*
 * Estilos de las páginas legales (aviso legal y privacidad).
 *
 * Van en un fichero aparte y no en línea, al revés que la portada: son dos
 * páginas que comparten todo, se leen una vez y no tienen que pintar en el
 * primer fotograma. La portada sí lleva el CSS dentro porque es lo primero
 * que ve alguien y una petición de más se nota.
 *
 * Los colores salen de los mismos tokens que el programa. Si cambian allí,
 * cambian aquí — están copiados a mano porque la CSP no admite importar nada
 * de fuera y estas páginas no pasan por el bundle.
 */

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/SourceSerif4-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

:root {
  --fondo: #1f1d1a;
  --fondo-elevado: #292622;
  --texto: #f5f0e6;
  --texto-medio: #b0a99c;
  --texto-debil: #948d80;
  --linea: #332f2a;
  --linea-fuerte: #45403a;
  --acento: #f5a356;
  --aviso-fondo: #2e2312;
  --aviso-texto: #f5c069;
  --aviso-borde: #4a3a1c;
}
@media (prefers-color-scheme: light) {
  :root {
    --fondo: #faf9f5;
    --fondo-elevado: #ffffff;
    --texto: #1f1d1a;
    --texto-medio: #55524a;
    --texto-debil: #6b6659;
    --linea: #eae7de;
    --linea-fuerte: #dcd8cc;
    --acento: #7c3a0a;
    --aviso-fondo: #fff7ed;
    --aviso-texto: #92400e;
    --aviso-borde: #f7d9ae;
  }
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
a {
  color: var(--acento);
}
.contenedor {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
}

header {
  border-bottom: 1px solid var(--linea);
  padding: 18px 0;
}
header .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--texto);
  text-decoration: none;
}
.marca svg {
  width: 26px;
  height: 26px;
}

main {
  padding: 56px 0 72px;
}
h1 {
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 600;
  font-size: clamp(30px, 5vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.fecha {
  margin: 0 0 40px;
  color: var(--texto-debil);
  font-size: 14px;
}
h2 {
  font-size: 20px;
  font-weight: 600;
  margin: 40px 0 12px;
}
h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 26px 0 8px;
}
p,
li {
  color: var(--texto-medio);
}
ul {
  padding-left: 20px;
}
li {
  margin-bottom: 7px;
}
table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 15px;
}
th,
td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--linea);
  vertical-align: top;
}
th {
  color: var(--texto);
  font-weight: 600;
}
td {
  color: var(--texto-medio);
}

/*
 * El recuadro de "esto falta por rellenar". Es deliberadamente llamativo:
 * una página legal a medio rellenar publicada sin que nadie se dé cuenta es
 * peor que no tenerla, porque aparenta cumplimiento donde no lo hay.
 */
.pendiente {
  border: 1px solid var(--aviso-borde);
  background: var(--aviso-fondo);
  color: var(--aviso-texto);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 0 0 36px;
  font-size: 15px;
}
.pendiente strong {
  font-weight: 600;
}
mark {
  background: var(--aviso-fondo);
  color: var(--aviso-texto);
  border: 1px solid var(--aviso-borde);
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 0.94em;
}

footer {
  border-top: 1px solid var(--linea);
  padding: 22px 0 40px;
  font-size: 13.5px;
  color: var(--texto-debil);
}
footer .contenedor {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
}