.line_effect {
  position: relative;
  display: inline-block;
}

.line_effect::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  background-color: var(--secundario-azul);
  bottom: 0;
  left: 0;
  transition: width 0.3s ease-in-out;
}

.line_effect:hover::after,
.line_effect.line_active::after {
  width: 100%;
}

.is-active,
.nav-link:hover {
  color: var(--secundario-azul) !important;
}