/* NAVBAR */
.navbar{
  position:fixed;
  width:100%;
  z-index:999;
  transition:all .35s ease;
}

/* SCROLL INTELIGENTE */
.navbar.scrolled{
  backdrop-filter:blur(18px);
  background:rgba(8,10,18,.6);
  border-bottom:1px solid rgba(255,255,255,.08);
}

/* CONTENEDOR */
.nav-container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1.2rem 2rem;
  transition:all .3s;
}

/* NAV COMPACTO */
.navbar.scrolled .nav-container{
  padding:.7rem 2rem;
}

/* MENU */
nav{
  display:flex;
  gap:1.4rem;
  align-items:center;
}

nav a{
  color:white;
  text-decoration:none;
  font-size:.95rem;
  cursor:pointer;
}

/* BOTON */
.btn-primary{
  padding:10px 24px;
  border-radius:25px;
  background:linear-gradient(90deg,#00f0ff,#7a5cff);
}

/* ITEM */
.menu-item{
  position:relative;
}

/* MEGA MENU */
.mega-menu{
  position:absolute;
  top:120%;
  left:50%;
  transform:translateX(-50%) translateY(20px);
  opacity:0;
  pointer-events:none;
  display:flex;
  gap:40px;
  padding:25px 30px;
  border-radius:16px;
  background:rgba(10,12,18,.9);
  backdrop-filter:blur(25px);
  box-shadow:0 40px 80px rgba(0,0,0,.5);
  transition:all .35s cubic-bezier(.22,.61,.36,1);
  min-width:450px;
}

/* ACTIVACIÓN */
.menu-item:hover .mega-menu{
  opacity:1;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

/* COLUMNAS */
.menu-col{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.menu-col h4{
  font-size:.78rem;
  opacity:.6;
  margin-bottom:5px;
}

.menu-col a{
  font-size:.85rem;
  opacity:.85;
  transition:.2s;
}


.menu-col a:hover{
  opacity:1;
}

/* HERO */
.hero{
  height:100vh;
}