/* ===== VARIABLES ===== */
:root {
  --green-neon: #00ff9c;
  --green-strong: #00e676;
}

/* ===== NAVBAR BASE ===== */
.navbar.custom-navbar {
  background: transparent !important;
  transition: all 0.3s ease;
  padding: 15px 0;
}

/* ===== SCROLL (AQUÍ ESTÁ LA MAGIA) ===== */
.navbar.custom-navbar.scrolled {
  background: #228B22 !important; /* barra blanca como antes */
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  padding: 8px 0;
}

/* ===== LOGO ===== */
.navbar-brand {
  color: var(--green-neon) !important;
  font-weight: bold;
}

/* ===== LINKS BASE (FUERZA EL VERDE) ===== */
.navbar.custom-navbar .nav-link {
  color: var(--green-neon) !important;
  margin-left: 15px;
  transition: all 0.3s ease;
}

/* ===== HOVER ===== */
.navbar.custom-navbar .nav-link:hover {
  color: var(--green-strong) !important;
  text-shadow: 0 0 6px var(--green-neon);
}

/* ===== CUANDO HACES SCROLL (CON FONDO BLANCO) ===== */
.navbar.custom-navbar.scrolled .nav-link {
  color: #000 !important;
}

.navbar.custom-navbar.scrolled .nav-link:hover {
  color: var(--green-strong) !important;
}

/* ===== BOTÓN PRINCIPAL (ZONA) ===== */
.btn-exclusive {
  background: linear-gradient(45deg, #00ff9c, #00e676);
  color: #000;
  padding: 8px 18px;
  border-radius: 30px;
  font-size: 0.85rem;
  font-weight: bold;
  border: none;
  transition: all 0.3s ease;
}

/* HOVER */
.btn-exclusive:hover {
  background: linear-gradient(45deg, #00e676, #00ff9c);
  color: #000;
  box-shadow: 0 0 12px #00ff9c;
  transform: translateY(-2px);
}

/* ===== BOTÓN EN SCROLL ===== */
.navbar.custom-navbar.scrolled .btn-exclusive {
  background: #000;
  color: #00ff9c;
}

.navbar.custom-navbar.scrolled .btn-exclusive:hover {
  background: #111;
  color: #00ff9c;
}

/* ===== TOGGLER ===== */
.navbar-toggler {
  border-color: rgba(0,255,150,0.5);
}

.navbar-toggler-icon {
  filter: invert(1);
}

/* ===== FIX IMPORTANTE ===== */
.navbar.custom-navbar .navbar-nav .nav-link {
  color: var(--green-neon) !important;
}
/* ===== FIX MOBILE NAVBAR (CLAVE) ===== */
@media (max-width: 991px) {

  /* Navbar sólida en mobile */
  .navbar.custom-navbar {
    background: #000 !important;
  }

  /* Contenedor del menú desplegado */
  .navbar-collapse {
    background: #000;
    padding: 15px 20px;
    border-radius: 0 0 12px 12px;
  }

  /* Espaciado entre items */
  .navbar-nav .nav-link {
    margin-left: 0;
    padding: 10px 0;
  }

  /* Botón separado */
  .btn-exclusive {
    margin-top: 10px;
  }
}