/* ===== KMSOFT — Tema Tech-Enterprise (Stripe/Linear) ===== */
html{scroll-behavior:smooth}
body{background:#0a0e17;font-family:Inter,system-ui,sans-serif;color:#9aabbf;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{color:#f3f6fc;letter-spacing:-0.02em}
::selection{background:rgba(76,125,255,.35);color:#fff}

/* Tipografía utilitaria */
.eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#7aa1ff}
.lead{color:#aebcce}
.accent{color:#a8c5ff}
.grad-text{background:linear-gradient(90deg,#ffffff,#9bc0ff);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Tarjeta sobria (reemplaza el viejo glass en TODO el sitio) */
.glass{background:#0e1422;border:1px solid rgba(255,255,255,.07);border-radius:14px;transition:border-color .25s ease, background .25s ease}
.glass:hover{border-color:rgba(122,161,255,.40);background:#111a2c}

/* Icono de línea */
.ico{width:42px;height:42px;display:grid;place-items:center;border-radius:11px;background:rgba(76,125,255,.10);border:1px solid rgba(76,125,255,.22);color:#9bc0ff}
.ico svg{width:20px;height:20px;stroke-width:1.8}

/* Botones */
.btn{display:inline-flex;align-items:center;gap:.5rem;border-radius:10px;font-weight:600;transition:.2s ease;line-height:1}
.btn-primary{background:#4c7dff;color:#fff;box-shadow:0 8px 24px -8px rgba(76,125,255,.6)}
.btn-primary:hover{background:#3a6bf0}
.btn-ghost{border:1px solid rgba(255,255,255,.14);color:#e8eef7}
.btn-ghost:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.25)}

/* Fondos sutiles (NADA de blobs) */
.hero-glow{position:absolute;inset:0;background:radial-gradient(55% 45% at 72% -5%,rgba(76,125,255,.16),transparent 70%);pointer-events:none;z-index:0}
.grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:radial-gradient(circle at 72% 0%,#000 25%,transparent 72%);mask-image:radial-gradient(circle at 72% 0%,#000 25%,transparent 72%);pointer-events:none;z-index:0}
.blob{display:none !important}

/* Mockup tipo ventana de producto */
.win{background:#0c1220;border:1px solid rgba(255,255,255,.10);border-radius:14px;overflow:hidden;box-shadow:0 40px 90px -40px rgba(0,0,0,.8)}
.win-bar{display:flex;align-items:center;gap:7px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.07)}
.win-bar i{width:10px;height:10px;border-radius:50%;background:#33405c;display:block}
.kpi-bar{height:8px;border-radius:4px;background:rgba(255,255,255,.08)}
.kpi-bar > span{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#4c7dff,#7aa1ff)}

/* Divisores y chips */
.divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent)}
.chip{display:inline-flex;align-items:center;gap:.4rem;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);border-radius:999px;padding:.3rem .7rem;font-size:.75rem;color:#aebcce}

/* ===== Navegación / UX ===== */
header{transition:background .3s ease, box-shadow .3s ease, border-color .3s ease}
header.scrolled{background:rgba(10,14,23,.92)!important;box-shadow:0 1px 0 rgba(255,255,255,.06),0 10px 30px rgba(0,0,0,.45)}
#km-progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:60;background:linear-gradient(90deg,#4c7dff,#9bc0ff);transition:width .08s linear}
section[id]{scroll-margin-top:5.5rem}
header nav a.active{color:#a8c5ff}
.km-skip{position:fixed;top:-100px;left:1rem;z-index:80;background:#4c7dff;color:#fff;padding:.6rem 1rem;border-radius:.6rem;font-weight:600;transition:top .2s}
.km-skip:focus{top:1rem}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid #7aa1ff;outline-offset:3px;border-radius:8px}
#mobileMenu{transition:opacity .25s ease, transform .25s ease}
body.menu-open{overflow:hidden}
#menuBtn svg{transition:transform .3s ease}
#menuBtn[aria-expanded="true"] svg{transform:rotate(90deg)}

/* Botones flotantes */
.km-fab{position:fixed;z-index:55;display:grid;place-items:center;border-radius:9999px;box-shadow:0 12px 30px rgba(0,0,0,.45);transition:opacity .3s,transform .3s,background .2s}
#km-whatsapp{right:1.25rem;bottom:1.25rem;width:54px;height:54px;background:#25d366;color:#fff}
#km-whatsapp:hover{transform:scale(1.07)}
#km-top{right:1.25rem;bottom:5.4rem;width:44px;height:44px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:#fff;opacity:0;pointer-events:none;transform:translateY(8px)}
#km-top.show{opacity:1;pointer-events:auto;transform:translateY(0)}
#km-top:hover{background:rgba(255,255,255,.14)}

/* details / FAQ */
details summary{list-style:none;cursor:pointer}
details summary::-webkit-details-marker{display:none}
details summary::after{content:'+';float:right;color:#7aa1ff;font-weight:700}
details[open] summary::after{content:'\2013'}

/* Animaciones */
.gsap-fade{opacity:0;transform:translateY(24px)}
.gsap-left{opacity:0;transform:translateX(-22px)}
.step-line::before{content:'';position:absolute;left:27px;top:56px;bottom:-28px;width:2px;background:linear-gradient(#4c7dff,transparent)}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .gsap-fade,.gsap-left{opacity:1 !important;transform:none !important}
  *{transition:none !important;animation:none !important}
}