/* Páginas de texto legal de la landing (política de privacidad y política de
   tratamiento de datos). Comparten la voz de marca —Arial, morado #7a39ff,
   noche #06062d— pero no el CSS de la landing: aquí manda la lectura, así que
   la columna es angosta y la jerarquía es de documento, no de portada. */

:root {
  --tinta: #07082b;
  --morado: #7a39ff;
  --morado-claro: #a56dff;
  --noche: #06062d;
  --gris: #5a5a76;
  --lavanda: #f5f3ff;
  --linea: #e1dcf5;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #fff;
  color: var(--tinta);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--morado); }
a:hover { color: #5924d3; }

/* Botón que reabre el aviso de permisos desde el cuerpo del documento. Se ve
   como un enlace porque en medio de un párrafo eso es lo que la persona
   espera, pero es <button> porque hace algo aquí y no lleva a otra página. */
.enlace-permisos {
  font: inherit;
  color: var(--morado);
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
}
.enlace-permisos:hover { color: #5924d3; }
.enlace-permisos:focus-visible { outline: 2px solid var(--morado-claro); outline-offset: 2px; }

/* ── Cabecera ─────────────────────────────────────────────────────────── */
.barra {
  background: var(--noche);
  padding: 18px 6vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.barra img { width: 168px; height: auto; display: block; }
.barra a { color: #d7d4ee; font-size: 14px; text-decoration: none; }
.barra a:hover { color: #fff; }

/* ── Cuerpo ───────────────────────────────────────────────────────────── */
.hoja { max-width: 760px; margin: 0 auto; padding: 56px 24px 80px; }

.hoja h1 {
  font-size: clamp(32px, 5vw, 46px);
  line-height: 1.12;
  letter-spacing: -1.5px;
  font-weight: 400;
  margin: 0 0 10px;
}
.hoja h2 {
  font-size: 23px;
  line-height: 1.3;
  letter-spacing: -0.5px;
  margin: 46px 0 12px;
  padding-top: 22px;
  border-top: 1px solid var(--linea);
}
.hoja h3 { font-size: 18px; margin: 26px 0 8px; }
.hoja p, .hoja li { color: #2c2c46; }
.hoja ul, .hoja ol { padding-left: 22px; }
.hoja li { margin-bottom: 8px; }
.hoja li::marker { color: var(--morado); }

.entrada { color: var(--gris); font-size: 18px; margin-bottom: 6px; }
.sello { color: var(--gris); font-size: 14px; margin: 0 0 34px; }

/* Dato que todavía no está confirmado. Se ve, a propósito: un documento
   legal con un hueco invisible es peor que uno con el hueco marcado. */
.pendiente {
  background: #fff3d6;
  border-bottom: 2px solid #e0a800;
  padding: 0 4px;
  font-weight: 700;
  white-space: nowrap;
}

/* Aviso de borrador. Desaparece borrando el bloque cuando el abogado
   valide el texto. */
.borrador {
  background: #fff8e6;
  border: 1px solid #e8c56a;
  border-radius: 14px;
  padding: 18px 20px;
  font-size: 15px;
  margin-bottom: 34px;
}
.borrador strong { color: #8a5b00; }

.destacado {
  background: var(--lavanda);
  border-left: 3px solid var(--morado);
  border-radius: 0 14px 14px 0;
  padding: 18px 22px;
  margin: 24px 0;
  font-size: 16px;
}

table { border-collapse: collapse; width: 100%; font-size: 15px; margin: 18px 0; }
th, td { border: 1px solid var(--linea); padding: 10px 12px; text-align: left; vertical-align: top; }
th { background: var(--lavanda); font-size: 14px; }
.tabla { overflow-x: auto; }

code {
  background: var(--lavanda);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 15px;
}

/* ── Pie ──────────────────────────────────────────────────────────────── */
.pie {
  background: #03031f;
  color: #aaa6bd;
  padding: 34px 6vw;
  font-size: 13px;
  text-align: center;
}
.pie a { color: var(--morado-claro); }

@media (width <= 560px) {
  body { font-size: 16px; }
  .hoja { padding: 36px 20px 60px; }
  .barra img { width: 140px; }
}