/* Estilos de las páginas legales. Misma identidad que la portada —negro
   azulado, rojo y azul como canales, amarillo solo en trazos de un píxel—
   pero con la composición de un documento: una columna, medida corta y
   jerarquía tipográfica en vez de retícula. */

/* De la paleta del producto a los nombres de esta hoja.

   Aquí había una TERCERA copia de los mismos colores —la portada, el panel y
   estas páginas—, con un comentario que reconocía el problema: «si se cambia un
   color, hay que cambiarlo en los tres sitios». El motivo que la justificaba
   —«una hoja compartida costaría una petición más»— dejó de valer: la paleta la
   sirve el mismo dominio, la portada ya la ha pedido antes de que estas páginas
   se abran en su visor, y llega de la caché.

   Los valores viven en `/css/paleta.css`, que cargan `terminos.html` y
   `privacidad.html` con su propio `<link>` antes que esta hoja. Aquí ya no hay
   ni un color: solo la traducción a los nombres que esta hoja usa. */
:root {
  --suelo:     var(--skj-lienzo);
  --panel:     var(--skj-panel);
  --tinta:     var(--skj-tinta);
  --tenue:     var(--skj-tenue);
  --borde:     var(--skj-borde);
  --borde-vivo:var(--skj-borde);

  --rojo:      var(--skj-mal);
  --rojo-tenue:var(--skj-mal-suave);
  --azul:      var(--skj-marca);
  --amarillo:  var(--skj-acento);

  --r-campo:   var(--skj-radio-pieza);
  --r-pildora: var(--skj-radio-pieza);
  --r-tarjeta: var(--skj-radio-caja);

  --mono:  var(--skj-fuente-mono);
  --sans:  var(--skj-fuente-sans);
  --serif: var(--skj-fuente-titulo);
}

* { box-sizing: border-box; }

html, body { overflow-x: clip; }

html {
  /* La densidad del producto, en su único número. */
  font-size: var(--skj-raiz);
  scrollbar-width: thin;
  scrollbar-color: var(--borde-vivo) transparent;
}
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--suelo); }
::-webkit-scrollbar-thumb {
  background: var(--borde-vivo);
  border: 3px solid var(--suelo);
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover { background: var(--rojo); }

body {
  margin: 0;
  background: var(--suelo);
  color: var(--tinta);
  font-family: var(--sans);
  /* 1rem = los 14 px de `--skj-raiz`: la densidad se cambia en el token, no
     aquí. La medida corta de `.envoltura` va en `rem`, así que la columna se
     estrecha con la letra y la línea sigue midiendo lo mismo en caracteres,
     que es de lo que depende que un texto legal se lea. */
  font-size: 1rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

.envoltura { max-width: 44rem; margin: 0 auto; padding: 3rem 1.5rem 1rem; }

/* ---------------------------------------------------------- en visor ---
   Cuando la página se abre dentro del modal de la portada, sobran su enlace
   de vuelta y su pie: pulsarlos haría que el iframe navegara al inicio y
   acabarías viendo el sitio entero metido dentro del modal.
   La clase la pone la propia página al detectar que está enmarcada. */
.en-visor .volver,
.en-visor footer { display: none; }

.en-visor .envoltura { padding: 2rem 1.75rem 2.5rem; }
.en-visor h1 { font-size: clamp(1.4rem, 4vw, 1.7rem); }
.en-visor h2 { margin-top: 2.2rem; }

.volver { margin: 0 0 2.5rem; font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; }
.volver a { color: var(--tenue); text-decoration: none; }
.volver a:hover { color: var(--amarillo); }

h1 {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -.02em;
  margin: 0 0 .5rem;
  text-wrap: balance;
}

/* El trazo amarillo, igual que en la portada. */
h1::after {
  content: ""; display: block; width: 46px; height: 1px;
  border-radius: var(--r-pildora);
  background: var(--amarillo); margin-top: 1rem;
}

.version {
  margin: 1rem 0 2.5rem;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .06em;
  color: var(--tenue);
}

h2 {
  font-family: var(--serif);
  font-size: 1.2rem; font-weight: 500; letter-spacing: -.01em;
  margin: 3rem 0 .7rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--borde);
}

p, li { color: var(--tinta); }
ul { padding-left: 1.15rem; }
li { margin-bottom: .5rem; }
li::marker { color: var(--azul); }

a { color: var(--azul); text-decoration: none; border-bottom: 1px solid var(--borde-vivo); }
a:hover { border-color: var(--amarillo); }
a:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

code {
  font-family: var(--mono); font-size: .86em;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--r-campo);
  padding: .1em .45em;
}

table {
  width: 100%; border-collapse: collapse; margin: 1.2rem 0;
  font-size: .89rem; display: block; overflow-x: auto;
}
th, td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--borde); }
th {
  font-family: var(--mono); font-weight: 500;
  color: var(--tenue); font-size: .7rem;
  text-transform: uppercase; letter-spacing: .1em;
  border-bottom-color: var(--borde-vivo);
}

/* Marca de lo que falta antes de publicar. Roja, no amarilla: el amarillo
   está reservado a los trazos y perdería su significado si también avisara. */
.pendiente {
  background: var(--rojo-tenue);
  border: 1px solid var(--borde);
  border-left: 2px solid var(--rojo);
  border-radius: var(--r-tarjeta);
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
  font-size: .89rem;
}
.pendiente strong { color: var(--rojo); }

footer {
  border-top: 1px solid var(--borde);
  margin-top: 3.5rem; padding: 2rem 1.5rem 3rem;
  text-align: center;
  font-size: .78rem; line-height: 1.9; color: var(--tenue);
}
footer p { margin: 0; }
footer a { color: var(--tenue); }