.nav-menu a {
  position: relative;
  font-size: var(--texto-sm);
  font-weight: bold;
  color: var(--texto-oscuro);
  transition: color var(--transicion-base);
}

a:hover {
  color: var(--color-acento-claro);
}

.nav-menu a::after {
  content: "";
  position: absolute;
  bottom: -0.4rem;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-acento);
  transform: scaleX(0);
  opacity: 0;
  transition: opacity 0.3s ease;
}

@keyframes underline-grow-left {
  0% {
    transform: scaleX(0);
    opacity: 0;
  }
  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}

@keyframes underline-grow-right {
  0% {
    transform: scaleX(0);
    opacity: 0;
  }
  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}

.nav-menu a.animate-left::after {
  transform-origin: left center;
  animation: underline-grow-left 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.nav-menu a.animate-right::after {
  transform-origin: right center;
  animation: underline-grow-right 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.nav-menu a.active {
  color: var(--color-acento);
  font-weight: 700;
}

.nav-menu a.active::after {
  transform: scaleX(1);
  opacity: 1;
}