/* ═══════════ Las páginas legales de xnexio.com ═══════════════════════════════════════════
   Hoja compartida por privacidad, términos, aviso legal, tratamiento de datos y reembolsos.

   Es un fichero aparte y no CSS embebido en cada página, al contrario que `index.html`. La
   portada es UNA página y embeber le ahorra una petición; aquí son cinco documentos que se
   leen seguidos —quien abre los términos abre después la privacidad— y cinco copias del
   mismo bloque son cinco sitios donde el día de mañana solo se corrigen cuatro.

   Los tokens son EXACTAMENTE los de `index.html`, copiados a propósito en vez de importados:
   la portada no expone una hoja que se pueda enlazar, y una legal que se viera de otro color
   que el sitio del que cuelga parecería de otra empresa, que es justo lo contrario de lo que
   una página legal tiene que transmitir.

   No se carga la fuente display de la portada. Va incrustada allí en base64 y pesa lo que
   pesa; estas páginas son texto corrido de arriba abajo, donde una tipografía de titular no
   aporta nada y el peso sí se nota — sobre todo en el móvil de alguien que abrió esto desde
   el enlace de una tienda. Los titulares usan la misma pila de cuerpo con el interletraje
   más cerrado. */

:root {
  --tinta: #15181D;
  --papel: #F4F4EF;
  --hoja: #FFFFFF;
  --acero: #566069;
  --reticula: #D9DBD2;
  --sello: #C93A1D;
  --sello-texto: #FFFFFF;

  --cuerpo: system-ui, "Segoe UI", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;

  --railx: clamp(18px, 5vw, 64px);
  --radio: 2px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tinta: #EDEEE8;
    --papel: #101418;
    --hoja: #171C22;
    --acero: #98A2AB;
    --reticula: #262B31;
    --sello: #FF6A4A;
    --sello-texto: #1A0C08;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --tinta: #EDEEE8;
  --papel: #101418;
  --hoja: #171C22;
  --acero: #98A2AB;
  --reticula: #262B31;
  --sello: #FF6A4A;
  --sello-texto: #1A0C08;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--cuerpo);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--sello); color: var(--sello-texto);
  padding: 10px 16px; z-index: 10;
}
.skip:focus { left: var(--railx); top: 10px; }

header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px var(--railx);
  border-bottom: 1px solid var(--reticula);
  background: var(--papel);
  position: sticky; top: 0; z-index: 5;
}
header .marca { display: inline-flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; font-weight: 600; }
header .marca .trazo { stroke: var(--sello); }
header .marca .nodo { fill: var(--tinta); }
nav { display: flex; align-items: center; gap: 8px; }

.util {
  font: inherit; font-size: 13px;
  background: none; border: 1px solid var(--reticula); color: var(--acero);
  border-radius: var(--radio); padding: 5px 10px; cursor: pointer;
  text-decoration: none; line-height: 1.4;
}
.util:hover { border-color: var(--acero); color: var(--tinta); }
.util-entrar { border-color: var(--sello); color: var(--sello); }

main { max-width: 74ch; margin: 0 auto; padding: 40px var(--railx) 72px; }

.migas { font-size: 13px; color: var(--acero); margin: 0 0 22px; }
.migas a { color: var(--acero); }

h1 { font-size: clamp(26px, 4.4vw, 38px); line-height: 1.18; letter-spacing: -0.02em; margin: 0 0 8px; }
h2 { font-size: clamp(18px, 2.6vw, 22px); line-height: 1.3; letter-spacing: -0.01em; margin: 40px 0 10px; }
h3 { font-size: 16px; margin: 26px 0 6px; }

.actualizado { color: var(--acero); font-size: 14px; margin: 0 0 6px; }

/* El resumen de arriba. No sustituye al texto y lo dice; está porque una política que nadie
   lee protege a nadie, y las cinco líneas que la mayoría necesita caben aquí. */
.resumen {
  background: var(--hoja);
  border: 1px solid var(--reticula);
  border-left: 3px solid var(--sello);
  border-radius: var(--radio);
  padding: 16px 20px; margin: 26px 0 34px;
}
.resumen h2 { margin: 0 0 8px; font-size: 15px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--acero); }
.resumen ul { margin: 0; padding-left: 20px; }
.resumen li + li { margin-top: 4px; }

p, ul, ol { margin: 0 0 14px; }
ul, ol { padding-left: 22px; }
li + li { margin-top: 5px; }
a { color: var(--sello); }
strong { font-weight: 650; }

.tabla-envoltorio { overflow-x: auto; margin: 0 0 18px; }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; min-width: 30rem; }
th, td { border: 1px solid var(--reticula); padding: 8px 11px; text-align: left; vertical-align: top; }
th { background: var(--hoja); font-weight: 600; }

/* Un dato que José todavía no ha rellenado. Se ve a propósito: una identificación legal con
   un hueco que no se nota es peor que el hueco. */
.pendiente {
  font-family: var(--mono); font-size: 0.92em;
  background: color-mix(in srgb, var(--sello) 14%, transparent);
  border-bottom: 1px dashed var(--sello);
  padding: 0 4px;
}

footer {
  border-top: 1px solid var(--reticula);
  padding: 22px var(--railx);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  font-size: 13.5px; color: var(--acero);
}
footer a { color: var(--acero); }
footer .marca .trazo { stroke: var(--sello); }
footer .marca .nodo { fill: var(--acero); }

[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }