/* Generado por web/paginas.mjs desde templates/landing.css — no editar a mano. */
:root {
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "SF Mono", "JetBrains Mono", "Fira Code", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;

    --bg: #F6F5FE;
    --surface: #FFFFFF;
    --surface-2: #F3F2FC;
    --ink: #121629;
    --ink-soft: #544C63;
    --ink-faint: #726A82;
    --line: #E4DFEE;
    --brand: #5A4CD1;
    --brand-deep: #4B3EBF;
    --brand-tint: #EEECFE;
    --brand-principal: #7062F3;
    --amber: #9A6414;
    --amber-tint: #F6E7CE;
    --online: #197F46;
    --cta: #5CE5CA;
    --cta-fg: #121629;
    --shadow: 0 1px 2px rgba(18,22,41,.05), 0 12px 40px -12px rgba(90,76,209,.20);
    --shadow-soft: 0 1px 2px rgba(18,22,41,.04), 0 8px 24px -14px rgba(90,76,209,.16);
    --stage: #0C1219;
    --stage-line: rgba(255,255,255,.08);
  }
:root[data-theme="light"] {
    --bg: #F6F5FE; --surface: #FFFFFF; --surface-2: #F3F2FC; --ink: #121629; --ink-soft: #544C63;
    --ink-faint: #726A82; --line: #E4DFEE; --brand: #5A4CD1; --brand-deep: #4B3EBF; --brand-tint: #EEECFE; --brand-principal: #7062F3;
    --amber: #9A6414; --amber-tint: #F6E7CE; --online: #197F46; --cta: #5CE5CA; --cta-fg: #121629;
    --shadow: 0 1px 2px rgba(18,22,41,.05), 0 12px 40px -12px rgba(90,76,209,.20);
    --shadow-soft: 0 1px 2px rgba(18,22,41,.04), 0 8px 24px -14px rgba(90,76,209,.16);
    --stage: #0C1219; --stage-line: rgba(255,255,255,.08);
  }
:root[data-theme="dark"] {
    --bg: #0D1117; --surface: #151B26; --surface-2: #10151E; --ink: #EAEDF4; --ink-soft: #A6AFC0;
    --ink-faint: #6E7787; --line: #232B3A; --brand: #8A7DFF; --brand-deep: #A99FFF; --brand-tint: #1E1B3D; --brand-principal: #8A7DFF;
    --amber: #D9A24C; --amber-tint: #33280F; --online: #34C97C; --cta: #5CE5CA; --cta-fg: #121629;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 18px 48px -14px rgba(0,0,0,.6);
    --shadow-soft: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px -16px rgba(0,0,0,.5);
    --stage: #0A0E14; --stage-line: rgba(255,255,255,.08);
  }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
    margin: 0;
    
    background:
      radial-gradient(140% 110% at 85% 0%, #F1EDFD 0%, #F7F4FD 46%, #FBFAFE 100%)
      var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }
:root[data-theme="dark"] body { background: var(--bg); }
body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(46% 34% at 96% -8%, color-mix(in srgb, var(--brand) 7%, transparent) 0%, transparent 68%),
      radial-gradient(36% 30% at -8% 38%, color-mix(in srgb, var(--brand) 5%, transparent) 0%, transparent 68%),
      radial-gradient(32% 26% at 102% 88%, color-mix(in srgb, var(--amber) 4%, transparent) 0%, transparent 68%);
  }
.wrap { width: 100%; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 768px) { .wrap { padding-inline: 48px; } }
@media (min-width: 1024px) { .wrap { padding-inline: 96px; } }
h1, h2, h3 { text-wrap: balance; margin: 0; letter-spacing: -0.02em; line-height: 1.08; }
p { margin: 0; }
a { color: inherit; }
.eyebrow {
    font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: var(--brand); display: inline-flex; align-items: center; gap: 9px;
  }
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--brand); border-radius: 2px; }
.nav {
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: saturate(1.4) blur(12px);
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    border-bottom: 1px solid transparent;
    transition: border-color .3s;
  }
.nav.scrolled { border-bottom-color: var(--line); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding-block: 15px; }
.brand-mark { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 21px; letter-spacing: -0.03em; text-decoration: none; }
.brand-logo, .brand-logo-oscuro { display: block; height: 32px; width: auto; }
.brand-logo-oscuro { display: none; }
:root[data-theme="dark"] .brand-logo { display: none; }
:root[data-theme="dark"] .brand-logo-oscuro { display: block; }
.brand-mark:hover img { filter: brightness(0.9); }
.nav-right { display: flex; align-items: center; gap: 14px; }
.nav-links { display: flex; align-items: center; gap: 20px; }
.nav-links a { color: var(--ink-soft); text-decoration: none; font-size: 15px; font-weight: 600; }
.nav-links a:hover { color: var(--brand); }
.theme-btn {
    width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface);
    color: var(--ink-soft); cursor: pointer; display: grid; place-items: center; font-size: 16px; transition: color .2s, border-color .2s;
  }
.theme-btn:hover { color: var(--brand); border-color: var(--brand); }
.btn {
    --pad: 15px 26px;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: var(--pad); border-radius: 13px; font-weight: 700; font-size: 16px; letter-spacing: -0.01em;
    text-decoration: none; cursor: pointer; border: 1px solid transparent; white-space: nowrap;
    transition: transform .15s ease, box-shadow .2s ease, background .2s;
  }
.btn-primary {
    background: var(--cta); color: var(--cta-fg);
    box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 10px 24px -10px color-mix(in srgb, var(--cta) 70%, transparent);
  }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px color-mix(in srgb, var(--cta) 75%, transparent); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); padding: 11px 18px; font-size: 15px; }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand-deep); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
footer { border-top: 1px solid var(--line); padding-block: 34px; }
@media (max-width: 860px) {
    .nav-links { display: none; }
  }

/* ── Alias: los nombres que ya usaban las páginas, apuntando al token real ── */
:root{
  --soft:var(--ink-soft); --faint:var(--ink-faint); --deep:var(--brand-deep); --tint:var(--brand-tint);
  --ok:var(--online); --warn:var(--amber); --warnbg:var(--amber-tint); --err:#C0392B;
  --card:var(--surface); --tx:var(--ink); --mut:var(--ink-soft); --ac:var(--brand); --blue:var(--brand);
  --marca:var(--brand); --texto:var(--ink); --fuerte:var(--ink); --tarjeta:var(--surface); --fondo:var(--bg);
  --acento:var(--brand-deep); --alerta:var(--amber); --brand-suave:var(--brand-tint);
  --burbuja:var(--brand-tint); --surface2:var(--surface-2); --bad:var(--err);
}
:root[data-theme="dark"]{ --err:#E96A5A; }

/* ── Documento: una columna legible, no el layout de la portada ── */
.doc{ width:100%; max-width:900px; margin-inline:auto; padding:34px 20px 90px; }
.doc-ancho{ max-width:1120px; }
.doc h1{ font-size:clamp(28px,5vw,44px); line-height:1.12; margin-bottom:12px; }
.doc h2{ font-size:clamp(20px,3vw,27px); margin:48px 0 8px; }
.doc h3{ font-size:18px; margin:26px 0 6px; }
.doc p{ margin:10px 0; }
.doc ul, .doc ol{ margin:10px 0; padding-left:22px; }
.doc li{ margin:7px 0; }
.doc a{ color:var(--brand); }
.doc code{ font-family:var(--font-mono); font-size:.9em; background:var(--surface-2); border:1px solid var(--line); border-radius:5px; padding:1px 5px; }
.doc table{ width:100%; border-collapse:collapse; font-size:15px; }
.doc thead th{ text-align:left; color:var(--ink-soft); font-weight:600; }
.doc th, .doc td{ border-bottom:1px solid var(--line); padding:9px 10px; }
.doc .scroll-x{ overflow-x:auto; }
.tarjeta{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:20px 22px; box-shadow:var(--shadow-soft); }

/* La barra y el pie son del SITIO, no de la página: una regla suelta como
   a{color:var(--marca)} —que varias páginas traen— no puede teñirles el
   logo. Encontrado mirando /roadmap, donde el logo salía morado y en el resto
   del sitio es tinta. Se gana por especificidad, no por orden de carga. */
.nav .brand-mark{ color:var(--ink); }
.nav .nav-links a{ color:var(--ink-soft); }
.nav .nav-links a:hover{ color:var(--brand); }
.nav .btn-ghost{ color:var(--ink); }
/* Varias páginas definen su propio .btn (bloque, ancho completo, color
   fuerte) para sus acciones. Dentro de la barra eso convertía "Entrar" en un
   botón gigante y relleno. Se gana por especificidad, igual que el logo. */
.nav .btn{ display:inline-flex; width:auto; padding:11px 18px; font-size:15px;
  font-weight:700; border-radius:13px; background:transparent;
  border:1px solid var(--line); text-align:center; }
.nav .btn:hover{ border-color:var(--brand); color:var(--brand-deep); }

/* ── Pie compartido ── */
.pie-sitio{ border-top:1px solid var(--line); margin-top:56px; padding:26px 0 40px; color:var(--ink-soft); font-size:14px; }
.pie-sitio nav{ display:flex; flex-wrap:wrap; gap:16px; margin-bottom:12px; }
.pie-sitio nav a{ color:var(--ink-soft); text-decoration:none; font-weight:600; }
.pie-sitio p a{ color:var(--brand); }
.pie-sitio nav a:hover{ color:var(--brand); }

@media (max-width:720px){ .nav-links{ display:none; } }
@media print{ .nav, .pie-sitio{ display:none; } body::before{ display:none; } }