/* ═══════════════════════════════════════════════════════════════════════
   NAVBAR.CSS — Navigation bar, hamburger menu, y scrolling effects
   ═════════════════════════════════════════════════════════════════════════ */

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5%;
  height: 100px;
  background: rgba(10, 40, 64, .96);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(41, 171, 226, .15);
  transition: box-shadow .3s;
}

nav.scrolled {
  box-shadow: 0 4px 32px rgba(0, 0, 0, .3);
}

.nav-logo {
  text-decoration: none;
  display: flex;
  align-items: center;
}

.nav-logo-box {
  display: flex;
  align-items: center;
  padding: 0;
}

.nav-logo-box img {
  height: 88px;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  gap: 30px;
  align-items: center;
}

.nav-links a {
  color: rgba(255, 255, 255, .72);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: .2px;
  transition: color .2s;
}

.nav-links a:hover {
  color: var(--cyan);
}

.nav-cta {
  background: var(--orange) !important;
  color: #fff !important;
  font-weight: 700 !important;
  padding: 10px 22px;
  border-radius: 8px;
  transition: background .2s, transform .2s !important;
  box-shadow: 0 4px 14px rgba(232, 97, 42, .4);
}

.nav-cta:hover {
  background: var(--orange-d) !important;
  transform: translateY(-1px);
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: all .3s;
}

/* Mobile Hamburger States */
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(8px, 8px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -7px);
}

/* ── Mobile dropdown panel (fuera de nav para evitar backdrop-filter trap) ── */
#mobile-overlay{
  position:fixed;top:100px;left:0;right:0;
  background:rgba(8,32,52,.98);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(41,171,226,.18);
  flex-direction:column;align-items:stretch;gap:0;
  z-index:9999;
  max-height:0;overflow:hidden;
  display:flex;
  transition:max-height .35s cubic-bezier(.4,0,.2,1), box-shadow .35s;
  box-shadow:none;
}
#mobile-overlay.open{
  max-height:420px;
  box-shadow:0 12px 40px rgba(0,0,0,.35);
}
#mobile-overlay a{
  color:rgba(255,255,255,.82);font-size:15px;font-weight:600;
  text-decoration:none;letter-spacing:.3px;
  text-align:center;
  padding:16px 24px;
  border-bottom:1px solid rgba(255,255,255,.07);
  transition:background .18s, color .18s;
  display:block;
}
#mobile-overlay a:last-child{border-bottom:none}
#mobile-overlay a:hover{background:rgba(41,171,226,.10);color:#fff}
#mobile-overlay .mob-cta{
  margin:16px 20px 20px;
  background:var(--orange)!important;color:#fff!important;
  padding:14px 24px;border-radius:10px;font-weight:700!important;font-size:15px!important;
  text-align:center;border-bottom:none!important;
  box-shadow:0 4px 16px rgba(232,97,42,.4);
  transition:background .2s,transform .2s!important;
}
#mobile-overlay .mob-cta:hover{background:var(--orange-d)!important;transform:translateY(-1px)}

/* Responsive */
@media (max-width: 768px) {
  nav {
    padding: 0 20px;
  }

  .nav-links {
    display: none;
  }

  .hamburger {
    display: flex;
  }
}