/* ---- Nav ---- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  padding: 0 var(--gutter); transition: background .5s var(--ease), color .4s var(--ease), border-color .4s, transform .6s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled { background: rgba(8,11,18, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-color: var(--line-dark); }
.nav[data-theme="light"] { color: var(--ink); }
.nav[data-theme="light"].is-scrolled { background: rgba(245,247,250, .72); border-color: var(--line-light); }
.nav[data-theme="light"] .btn { background: var(--ink); color: var(--ice); box-shadow: none; }
.nav[data-theme="light"] .btn::before { display: none; }

.brand { display: inline-flex; align-items: center; gap: .7rem; color: inherit; }
.brand__word { width: 76px; height: 27px; color: currentColor; }
.brand__tech { font-family: var(--f-display); font-weight: 500; font-size: .66rem; letter-spacing: .38em; padding-left: .7rem; border-left: 1px solid currentColor; opacity: .7; line-height: 1.7; }
.nav__links { display: flex; gap: clamp(1.2rem, 3vw, 2.8rem); font-family: var(--f-display); font-size: .86rem; font-weight: 500; letter-spacing: .02em; }
.nav__links a { position: relative; opacity: .72; transition: opacity .3s; padding: .4rem 0; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.nav__links a:hover { opacity: 1; }
.nav__links a:hover::after { transform: none; }

/* ---- Botones ---- */
.btn {
  --glow: rgba(40,120,255, .55);
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: .8rem;
  padding: .95rem 1.7rem; border-radius: 999px; overflow: hidden;
  font-family: var(--f-display); font-weight: 600; font-size: .95rem; letter-spacing: .01em; color: #fff;
  background: var(--grad-electric);
  box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset, 0 12px 40px -12px var(--glow);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  will-change: transform;
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120px circle at var(--bx, 50%) var(--by, 0%), rgba(255,255,255,.35), transparent 70%); opacity: 0; transition: opacity .4s; }
.btn:hover { box-shadow: 0 0 0 1px rgba(255,255,255,.22) inset, 0 18px 54px -10px var(--glow); }
.btn:hover::before { opacity: 1; }
.btn--sm { padding: .62rem 1.2rem; font-size: .84rem; }
.btn--xl { padding: 1.35rem 2.4rem; font-size: clamp(1.05rem, 2vw, 1.5rem); }
.btn--ghost { background: rgba(255,255,255,.04); box-shadow: 0 0 0 1px var(--line-dark) inset; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn--ghost:hover { box-shadow: 0 0 0 1px rgba(255,255,255,.4) inset; }
.btn--warm { --glow: rgba(40,120,255,.5); background: var(--electric); color: #fff; }
.btn__arrow { position: relative; width: 1.1em; height: 1px; background: currentColor; transition: transform .5s var(--ease); }
.btn__arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.btn:hover .btn__arrow, a:hover > .btn__arrow, .node:hover .btn__arrow { transform: translateX(5px); }

/* ---- Indicadores ---- */
.pulse { position: relative; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); margin-right: .55rem; vertical-align: middle; }
.pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: ping 2.4s var(--ease) infinite; }
.pulse--warm { background: var(--electric); }
@keyframes ping { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(3.4); opacity: 0; } }

@media (max-width: 860px) {
  .nav__links { display: none; }
  .brand__tech { display: none; }
}
@media (prefers-reduced-motion: reduce) { .pulse::after { animation: none; } }