/* Hoja compartida de las páginas legales (privacidad, términos, eliminación de
   datos). Se separa del resto del sitio a propósito: son documentos que se leen
   seguidos, no una landing, y viven aquí las tres para no triplicar estilos.
   Los tokens son los mismos que usa el resto de kaisfera.com. */
:root{
  --coral:#d97757;--indigo:#5b5bd6;--teal:#0d9488;
  --grad:linear-gradient(100deg,var(--coral),var(--indigo) 52%,var(--teal));
  --bg:#fff;--surface:#fff;--surface-2:#fafbfc;--border:#e7e8f0;--border-hi:#dbdce7;
  --text:#15161e;--muted:#5d6072;--subtle:#9a9cb0;
  --sh-sm:0 1px 1px rgba(20,22,35,.04),0 0 0 1px rgba(20,22,35,.02);
  --sans:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;--wrap:1120px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:15px;
  line-height:1.62;letter-spacing:-.006em;-webkit-font-smoothing:antialiased}
a{color:var(--indigo);text-decoration:none}
a:hover{text-decoration:underline}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

.nav{height:66px;border-bottom:1px solid var(--border);display:flex;align-items:center}
.nav .in{max-width:var(--wrap);margin:0 auto;padding:0 28px;width:100%;display:flex;align-items:center;gap:16px}
.nav .brand{font-weight:800;font-size:20px;letter-spacing:-.02em}
/* El degradado de la marca gana siempre: si otra regla fija un color, el
   texto sale negro porque .grad-text necesita color:transparent. */
.nav .brand.grad-text,.foot2 .brand.grad-text{color:transparent}
.nav .back{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:8px 15px;border-radius:9px;
  font-size:14px;font-weight:600;color:var(--muted);background:var(--surface);border:1px solid var(--border-hi);
  box-shadow:var(--sh-sm);transition:background .15s,color .15s,border-color .15s}
.nav .back:hover{background:var(--surface-2);color:var(--text);border-color:var(--muted);text-decoration:none}

/* Columna de lectura: ~72 caracteres, que es donde el ojo no se pierde de línea. */
.doc{max-width:760px;margin:0 auto;padding:56px 28px 88px}
.doc h1{font-size:32px;line-height:1.18;letter-spacing:-.028em;margin:0 0 8px}
.doc .fecha{color:var(--subtle);font-size:13.5px;margin:0 0 40px}
.doc h2{font-size:19px;letter-spacing:-.02em;margin:40px 0 10px;padding-top:22px;border-top:1px solid var(--border)}
.doc h2:first-of-type{border-top:0;padding-top:0}
.doc h3{font-size:15.5px;margin:24px 0 6px}
.doc p{margin:0 0 14px;color:var(--text)}
.doc ul,.doc ol{margin:0 0 16px;padding-left:22px}
.doc li{margin:0 0 6px}
.doc .dato{font-family:var(--mono);font-size:13.5px}
.doc .caja{border:1px solid var(--border);border-radius:12px;padding:18px 20px;margin:0 0 18px;background:var(--surface-2)}
.doc .caja p:last-child,.doc .caja ul:last-child{margin-bottom:0}
.doc .indice{font-size:14px}
.doc .indice a{color:var(--muted)}

.foot2{border-top:1px solid var(--border);padding:34px 0 44px;background:var(--surface-2)}
.foot2 .in{max-width:var(--wrap);margin:0 auto;padding:0 28px;display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.foot2 .brand{font-weight:800;font-size:17px;letter-spacing:-.02em}
.foot2 .lnk{display:flex;flex-wrap:wrap;gap:16px;font-size:14px}
.foot2 .lnk a{color:var(--muted)}
.foot2 .cp{margin-left:auto;color:var(--subtle);font-size:13px}

@media (max-width:640px){
  .doc{padding:40px 20px 64px}
  .doc h1{font-size:26px}
  .foot2 .cp{margin-left:0}
}

/* Pie en COLUMNAS. Con once enlaces en una sola fila no se lee nada. La rejilla
   se adapta sola: no hay un ancho magico donde se rompa. */
.foot2 .in{display:grid;gap:32px 28px;align-items:start;
  grid-template-columns:minmax(200px,1.3fr) repeat(auto-fit,minmax(150px,1fr))}
.foot2 .col h4{margin:0 0 12px;font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--subtle,#9a9cb0)}
.foot2 .col a{display:block;margin:0 0 9px;color:var(--muted);font-size:14px}
.foot2 .col a:hover{color:var(--text)}
.foot2 .marca .brand{display:inline-block;margin-bottom:10px}
.foot2 .cp{margin:0;color:var(--subtle,#9a9cb0);font-size:13px}
@media (max-width:700px){
  .foot2 .in{grid-template-columns:1fr 1fr}
  .foot2 .marca{grid-column:1 / -1}
}