/* =========================
   NAV BASE
========================= */

#mainNav {
  position: relative;
  background-color: #000;
  border-bottom: 1px solid #000;
  overflow: hidden;
}

/* nav items NO pintan fondo */
#mainNav .navbar-nav .nav-item,
#mainNav .navbar-nav .nav-item:hover {
  background: transparent !important;
}

/* texto siempre arriba */
#mainNav .navbar-nav .nav-item a {
  position: relative;
  z-index: 1052;
  transition: color .12s linear;
}

/* texto activo */
#mainNav .navbar-nav .nav-item.active > a {
  color: #00b9ff !important;
  cursor: default;
  pointer-events: none;
}

#mainNav .navbar-nav .nav-link {
  padding: 0 10px;
  height: 100%;

  display: flex;
  align-items: center;

  color: #ffffff !important;

  opacity: 0.42;

  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.6px;

  transition:
    opacity .25s ease,
    color .25s ease,
    transform .25s ease;

  outline: none !important;
  box-shadow: none !important;
}

/* HOVER */
#mainNav .navbar-nav .nav-link:hover {
  opacity: 0.92;
}

/* Bootstrap focus states */
#mainNav .navbar-nav .nav-link:focus,
#mainNav .navbar-nav .nav-link:active,
#mainNav .navbar-nav .nav-link:focus-visible,
#mainNav .navbar-nav .show > .nav-link {
  opacity: 0.42 !important;

  outline: none !important;
  box-shadow: none !important;
}

/* ITEM ACTIVO */
#mainNav .navbar-nav .nav-item.active > .nav-link {
  opacity: 1 !important;
  color: #00b9ff !important;
}


/* =========================
   ACTIVE BAR (CSS fallback)
========================= */

#mainNav::after {
  content: '';
  position: absolute;
  bottom: 0;
  height: 5px;
  left: var(--active-left, 0);
  width: var(--active-width, 0);
  pointer-events: none;
  z-index: 1;

  background: rgba(0,185,255,.35);
  opacity: .35;
}

/* mobile: sin barrita */
@media (max-width: 991.98px) {
  #mainNav::after {
    display: none;
  }
}



.energy-wave {
  background: linear-gradient(
    120deg,
    rgba(0,185,255,.12),
    rgba(0,185,255,.55),
    rgba(0,185,255,.12)
  );
  background-size: 300% 100%;
  animation: waveMove .9s linear infinite;
}

@keyframes waveMove {
  from { background-position: 0% 50%; }
  to   { background-position: 200% 50%; }
}


@keyframes breatheGlow {
  0%, 100% {
    box-shadow:
      0 0 12px rgba(0,185,255,.35),
      0 0 26px rgba(0,185,255,.15);
  }
  50% {
    box-shadow:
      0 0 18px rgba(0,185,255,.6),
      0 0 38px rgba(0,185,255,.25);
  }
}