/* Kunmap · estilos compartidos
   Tokens y base del Kunmap Design System + botón. Cada página agrega lo suyo. */

/* ---------- Tokens: color ---------- */
:root{
--km-midnight:#000C2F;
--km-navy:#001551;
--km-blue:#1923FA;
--km-violet:#7451FA;
--km-green:#1AE47A;
--km-ink:#212529;
--km-gray:#B5B5B5;
--km-mist:#F4F4F4;
--km-white:#FFFFFF;
--km-logo-slate:#4A5875;
--km-logo-teal:#9ECFCB;
--km-logo-black:#262526;
--km-k-cyan:#0078D0;
--km-k-purple:#59287A;
--surface-page:var(--km-white);
--surface-alt:var(--km-mist);
--surface-inverse:var(--km-midnight);
--surface-inverse-2:var(--km-navy);
--text-strong:var(--km-midnight);
--text-body:var(--km-ink);
--text-muted:#5F6670;
--text-inverse:var(--km-white);
--text-inverse-muted:#AEB6CC;
--accent:var(--km-blue);
--accent-hover:#0F18D6;
--accent-2:var(--km-violet);
--success:var(--km-green);
--border:#E2E3E6;
--border-strong:var(--km-gray);
--focus-ring:rgba(25,35,250,.35);
--gradient-k:linear-gradient(135deg,var(--km-k-cyan) 0%,#3A3F9A 45%,var(--km-k-purple) 75%);
--gradient-brand:linear-gradient(120deg,var(--km-blue) 0%,var(--km-violet) 100%);
}

/* ---------- Tokens: espaciado, radios, sombras, movimiento ---------- */
:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;
--container:1200px;--gutter:24px;
--radius-0:0;--radius-sm:4px;--radius-md:8px;--radius-lg:16px;--radius-pill:999px;
--shadow-sm:0 1px 2px rgba(0,12,47,.06),0 1px 3px rgba(0,12,47,.08);
--shadow-md:0 6px 20px rgba(0,12,47,.10);
--shadow-lg:0 20px 48px rgba(0,12,47,.18);
--ease-out:cubic-bezier(.22,.61,.36,1);
--dur-fast:150ms;--dur-base:250ms;--dur-slow:450ms;
}

/* ---------- Tokens: tipografía ---------- */
:root{
--font-display:'Montserrat',system-ui,sans-serif;
--font-body:'Montserrat',system-ui,sans-serif;
--font-mono:'JetBrains Mono',ui-monospace,monospace;
--fw-light:300;--fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--fw-black:800;
--fs-display:64px;--fs-h1:48px;--fs-h2:36px;--fs-h3:24px;--fs-h4:18px;
--fs-body-lg:18px;--fs-body:16px;--fs-small:14px;--fs-caption:12px;
--lh-tight:1.1;--lh-heading:1.2;--lh-body:1.6;
--ls-display:-0.02em;--ls-eyebrow:0.14em;
/* Display del sitio: Archivo expandida + color de marca */
--km-display:'Archivo',sans-serif;
--km-stretch:125%;
--brand:#1923FA;
}

/* ---------- Base ---------- */
html,body{height:100%;margin:0}
body{margin:0;font-family:var(--font-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hover);text-decoration:underline}

/* ---------- Botón (componente Button del Design System) ---------- */
.btn{font-family:var(--font-body);font-weight:600;border-radius:var(--radius-sm);cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all var(--dur-fast) var(--ease-out);box-sizing:border-box;text-decoration:none}
.btn:hover{text-decoration:none}
.btn-lg{font-size:16px;padding:16px 32px}
.btn-arrow{transition:transform var(--dur-fast)}
.btn:hover .btn-arrow{transform:translateX(4px)}
a.btn-primary,a.btn-primary:hover{color:#fff}
.btn-primary{background:var(--accent);border:1px solid transparent}
.btn-primary:hover{background:var(--accent-hover)}
a.btn-outline{color:var(--accent)}
.btn-outline{background:transparent;border:1px solid var(--accent)}
a.btn-outline:hover{background:var(--accent);color:#fff}

/* Solo móvil / solo escritorio (corte en 760px) */
@media (max-width:759.98px){.only-wide{display:none!important}}
@media (min-width:760px){.only-narrow{display:none!important}}