/* frontend/legal/legal.saas7a4.20260912.css — Sprint SaaS-7A.4
 *
 * Hoja de las dos páginas legales. Deliberadamente austera: un documento
 * legal se lee, no se navega. Una sola columna, medida de línea corta,
 * jerarquía clara y nada que compita con el texto.
 *
 * La franja de BORRADOR de arriba no es decorativa: mientras
 * platform.legal_documents.is_draft siga en true, estos textos no han pasado
 * revisión legal, y quien los lea tiene que saberlo antes de leer nada más.
 */

:root {
  color-scheme: light;
  --azul-900: #10294f;
  --azul-800: #163a76;
  --azul-600: #2563eb;
  --tinta: #0f1c2e;
  --tinta-media: #46586f;
  --tinta-suave: #6b7c93;
  --papel: #ffffff;
  --nube: #f5f9fd;
  --linea: #dde5f0;
  --ambar-fondo: #fff8e6;
  --ambar-linea: #e8c76a;
  --ambar-texto: #6b4d05;
  --radio: 14px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--papel);
  color: var(--tinta);
  font: 16px/1.7 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--azul-600); }
a:focus-visible { outline: 3px solid var(--azul-600); outline-offset: 3px; border-radius: 6px; }

.envoltura { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 20px; }

.barra {
  border-bottom: 1px solid var(--linea);
  background: var(--nube);
  padding: 16px 0;
}
.marca {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; letter-spacing: -0.02em; color: var(--tinta); text-decoration: none;
}
.marca .simbolo {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px;
  background: linear-gradient(140deg, var(--azul-600), #14b8a6);
  display: grid; place-items: center; color: #fff;
}
.marca .simbolo svg { width: 17px; height: 17px; display: block; }

/* La franja de borrador. Ámbar y no rojo: no es un error, es un estado. */
.borrador {
  background: var(--ambar-fondo);
  border-bottom: 1px solid var(--ambar-linea);
  color: var(--ambar-texto);
  padding: 12px 0;
  font-size: 0.92rem;
  line-height: 1.55;
}
.borrador strong { font-weight: 700; }

main { padding: clamp(30px, 5vw, 56px) 0 64px; }

h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 8px; }
h2 { font-size: clamp(1.1rem, 2.4vw, 1.3rem); line-height: 1.3; margin: 34px 0 10px; color: var(--azul-900); }
p { margin: 0 0 15px; color: var(--tinta-media); }
ul { margin: 0 0 15px; padding-left: 22px; color: var(--tinta-media); }
li { margin-bottom: 7px; }
strong { color: var(--tinta); }

.meta {
  margin: 0 0 26px;
  font-size: 0.9rem;
  color: var(--tinta-suave);
  padding-bottom: 20px;
  border-bottom: 1px solid var(--linea);
}
.meta code {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 0.86rem;
  background: var(--nube);
  border: 1px solid var(--linea);
  border-radius: 6px;
  padding: 2px 6px;
}

.pie {
  border-top: 1px solid var(--linea);
  margin-top: 44px;
  padding-top: 20px;
  font-size: 0.9rem;
  color: var(--tinta-suave);
}
.pie a { text-decoration: none; }
.pie a:hover { text-decoration: underline; }