/* Barra de navegación (incluye el estado .scrolled) — extraído de index.html (bundle) */

/* ============ NAV ============ */
.nav-wrap {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--bg-app) 86%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.nav-wrap.scrolled { border-bottom-color: var(--stroke-1); }
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-word {
  font-weight: 800; font-size: 22px; letter-spacing: -0.045em;
}
.nav-links {
  display: flex; gap: 28px;
  font-size: 14px; color: var(--ink-2); font-weight: 500;
}
.nav-links a:hover { color: var(--ink-1); }
.nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: var(--r-pill);
  background: var(--ink-1); color: var(--ink-on-dark);
  border: 0; font-weight: 600; font-size: 13px; letter-spacing: -0.01em;
  transition: transform .12s ease;
}
.nav-cta:hover { transform: translateY(-1px); }
@media (max-width: 760px){ .nav-links { display: none; } }