/* css/nav.css — Kronos Code Studio */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem var(--sp-8);
  background: rgba(6, 6, 8, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--card-border);
  transition: padding var(--mid), background var(--mid);
}
.nav.scrolled {
  padding-top: 0.7rem; padding-bottom: 0.7rem;
  background: rgba(6, 6, 8, 0.96);
  box-shadow: 0 4px 30px rgba(0,0,0,0.4);
}

@media (max-width: 768px) {
  /* El blur de fondo (backdrop-filter) es de lo más caro de calcular en
     celulares de gama baja. Bajamos la intensidad solo en pantallas
     chicas — el efecto se sigue viendo, pero cuesta mucho menos. */
  .nav { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
}

/* Logo */
.nav__logo {
  font-family: var(--font-orb);
  font-weight: 900; font-size: 1rem;
  letter-spacing: 0.06em; text-decoration: none;
  transition: opacity var(--fast);
}
.nav__logo:hover { opacity: 0.85; }
.nav__logo-k { color: var(--red); text-shadow: 0 0 14px var(--red-glow); }
.nav__logo-c { color: var(--red); text-shadow: 0 0 14px var(--red-glow); }
.nav__logo-rest { color: var(--gold); text-shadow: 0 0 10px var(--gold-glow-sm); }

/* Links */
.nav__links {
  display: flex; align-items: center; gap: var(--sp-8);
}
.nav__link {
  font-family: var(--font-raj);
  font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-2); text-decoration: none;
  position: relative;
  transition: color var(--fast);
}
.nav__link::after {
  content: '';
  position: absolute; bottom: -3px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--red), var(--gold));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--mid) var(--ease);
}
.nav__link:hover, .nav__link.active { color: var(--text); }
.nav__link:hover::after, .nav__link.active::after { transform: scaleX(1); }

/* CTA */
.nav__link--cta {
  color: var(--red) !important;
  border: 1px solid rgba(192,24,42,0.5);
  padding: 0.4rem 1rem;
  text-shadow: 0 0 8px var(--red-glow-sm);
  box-shadow: 0 0 12px rgba(192,24,42,0.1), inset 0 0 10px rgba(192,24,42,0.04);
  transition: background var(--fast), box-shadow var(--fast), color var(--fast) !important;
}
.nav__link--cta::after { display: none; }
.nav__link--cta:hover {
  color: #fff !important;
  background: rgba(192,24,42,0.15);
  box-shadow: 0 0 24px rgba(192,24,42,0.4), inset 0 0 16px rgba(192,24,42,0.08);
}

/* Hamburger */
.nav__hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: var(--sp-2);
}
.nav__hamburger span {
  display: block; width: 24px; height: 1.5px;
  background: var(--text-2);
  transition: transform var(--mid) var(--ease), opacity var(--fast), background var(--fast);
}
.nav__hamburger:hover span { background: var(--gold); }
.nav__hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__hamburger.open span:nth-child(2) { opacity: 0; }
.nav__hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile */
@media (max-width: 768px) {
  .nav { padding: 1rem var(--sp-4); }
  .nav__hamburger { display: flex; }
  .nav__links {
    position: fixed; top: 56px; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: rgba(6,6,8,0.97);
    border-bottom: 1px solid var(--card-border);
    max-height: 0; overflow: hidden;
    transition: max-height var(--slow) var(--ease);
  }
  .nav__links.open { max-height: 400px; }
  .nav__link {
    width: 100%; padding: var(--sp-4) var(--sp-8);
    border-bottom: 1px solid rgba(192,24,42,0.08);
    font-size: 1rem;
  }
  .nav__link--cta { border: none; border-bottom: 1px solid rgba(192,24,42,0.08); box-shadow: none; }
  .nav__link::after { display: none; }
}