/* kaisfera.com — construcción por piezas. AHORA: solo el header. */
:root{
  --coral:#d97757; --indigo:#5b5bd6; --indigo-hi:#4f46e5; --teal:#0d9488;
  --grad:linear-gradient(100deg,var(--coral),var(--indigo) 52%,var(--teal));
  --bg:#ffffff; --surface:#ffffff; --surface-2:#fafbfc; --surface-hi:#eeeef4;
  --border:#e7e8f0; --border-hi:#dbdce7;
  --text:#15161e; --muted:#5d6072; --subtle:#9a9cb0;
  --coral-soft:#fbeee8; --teal-soft:#eafaf7;
  --sh-sm:0 1px 1px rgba(20,22,35,.04),0 0 0 1px rgba(20,22,35,.02);
  --sh-lg:0 14px 34px -12px rgba(20,22,55,.16),0 2px 8px -3px rgba(20,22,55,.07);
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --wrap:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.55;
  letter-spacing:-.006em;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ── Header ── */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.8);backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;transition:border-color .3s}
.nav.scrolled{border-bottom-color:var(--border)}
.nav-in{display:flex;align-items:center;gap:28px;height:66px;max-width:var(--wrap);margin:0 auto;padding:0 26px}
.brand{font-weight:800;font-size:20px;letter-spacing:-.02em}

.nav-links{display:flex;align-items:center;gap:2px;margin-left:10px}
.nav-links > a,.drop > button{background:none;border:none;color:var(--muted);font:inherit;font-size:14px;font-weight:500;
  padding:8px 13px;border-radius:9px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:color .15s,background .15s}
.nav-links > a:hover,.drop > button:hover{color:var(--text);background:var(--surface-hi)}
.drop{position:relative}
.drop > button svg{width:12px;height:12px;opacity:.6;transition:transform .2s}
.drop:hover > button svg{transform:rotate(180deg)}
.drop-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:320px;background:#fff;border:1px solid var(--border);
  border-radius:14px;padding:8px;box-shadow:var(--sh-lg);opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .18s,transform .18s,visibility .18s}
.drop:hover .drop-menu{opacity:1;visibility:visible;transform:translateY(0)}
.drop-menu a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;transition:background .15s}
.drop-menu a:hover{background:var(--surface-2)}
.drop-menu .ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex-shrink:0}
.drop-menu .ico svg{width:20px;height:20px}
.drop-menu .kair .ico{background:var(--coral-soft);color:var(--coral);border:1px solid #f2d3c6}
.drop-menu .kais .ico{background:var(--teal-soft);color:var(--teal);border:1px solid #cceeea}
.drop-menu b{display:block;font-size:14px;font-weight:600;color:var(--text)}
.drop-menu span{display:block;font-size:12.5px;color:var(--subtle);margin-top:1px}

.nav-cta{margin-left:auto;display:flex;align-items:center;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font:inherit;height:38px;padding:0 15px;
  font-size:13.5px;font-weight:600;letter-spacing:-.01em;border-radius:8px;cursor:pointer;border:1px solid transparent;transition:.14s}
.btn:active{transform:translateY(.5px)}
.btn-ghost{background:var(--surface);color:var(--muted);border-color:var(--border-hi);box-shadow:var(--sh-sm)}
.btn-ghost:hover{background:var(--surface-2);color:var(--text)}
.btn-primary{background:var(--indigo);color:#fff;box-shadow:0 1px 2px rgba(79,70,229,.26),inset 0 1px 0 rgba(255,255,255,.18)}
.btn-primary:hover{background:var(--indigo-hi)}

/* zona de trabajo temporal */
.wip{max-width:var(--wrap);margin:0 auto;padding:120px 26px;text-align:center;color:var(--subtle)}
.wip .mono{font-family:var(--mono);font-size:13px;letter-spacing:.02em}

@media(max-width:720px){.nav-links{display:none}}