/* =========================
NAVBAR PREMIUM
========================= */
body{
  overflow-x:hidden;
}
.navbar{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:999;
  background:rgba(10,10,10,0.95);
  backdrop-filter:blur(10px);
  padding:18px 0;
}

.nav-container{
  width:90%;
  max-width:1300px;
  margin:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.logo{
  color:#d4af37;
  font-size:1.8rem;
  font-weight:700;
  letter-spacing:1px;
}

.menu{
  display:flex;
  align-items:center;
  gap:30px;
  list-style:none;
  margin:0;
}

.menu a{
  color:#fff;
  text-decoration:none;
  font-weight:500;
  transition:0.3s;
}

.menu a:hover{
  color:#d4af37;
}

/* =========================
BOTÓN PREMIUM
========================= */

.btn-primary{
  background:#d4af37 !important;
  border:none !important;
  padding:12px 24px !important;
  border-radius:50px !important;
  color:#000 !important;
  font-weight:600 !important;
  transition:0.3s;
}

.btn-primary:hover{
  transform:translateY(-2px);
  background:#f1c84c !important;
}

/* =========================
HAMBURGUESA
========================= */

.hamburger{
  display:none;
  flex-direction:column;
  gap:6px;
  cursor:pointer;
  z-index:1001;
}

.hamburger span{
  width:30px;
  height:3px;
  background:#fff;
  border-radius:10px;
  transition:0.4s;
}

/* =========================
ANIMACIÓN X
========================= */

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

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

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

/* =========================
RESPONSIVE
========================= */
@media(max-width:991px){

  .hamburger{
    display:flex;
  }

  .menu{
    position:fixed;
    top:0;
    right:-100%;
    width:280px;
    height:100vh;
    background:#111;

    display:flex;
    flex-direction:column;

    justify-content:flex-start; /* 👈 IMPORTANTE (quita el aire raro) */
    align-items:center;

    gap:25px;

    margin:0;
    padding:80px 0 0 0; /* 👈 espacio superior controlado */

    list-style:none; /* 👈 elimina bullets */
    transition:0.4s;
  }

  .menu li{
    list-style:none;
    margin:0;
    padding:0;
  }

  .menu a{
    font-size:1.2rem;
  }

  .menu.active{
    right:0;
  }
}