

.etiqueta {
  text-decoration: none;
  font-size: 18px;
  color: white;
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
  position: relative;
  border: none;
  background: none;
  text-transform: uppercase;
  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-duration: 400ms;
  transition-property: color;
}

.etiqueta:focus,
.etiqueta:hover {
  color: var(--color-secundario);
}

.etiqueta:focus:after,
.etiqueta:hover:after {
  width: 100%;
  left: 0%;
}

.etiqueta:after {
  content: "";
  pointer-events: none;
  bottom: -2px;
  left: 50%;
  position: absolute;
  width: 0%;
  height: 2px;
  background-color: var(--color-secundario);
  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-duration: 400ms;
  transition-property: width, left;
}

.etiquetanow {
  color: var(--color-terciario);
  
  text-decoration-color: var(--color-terciario);
  /* Grosor de la fuente */
 
  /* Separación del texto */
  margin-right: 5px;

}

.etiquetanow::after {
  content: ''; /* Obligatorio para el pseudo-elemento */
  position: absolute; /* Posición absoluta para alinear con respecto al enlace */
  width: 100%; /* Ancho igual al del enlace */
  height: 2px; /* Grosor de la línea */
  background-color: var(--color-terciario); /* Color de la línea */
  bottom: -1px; /* Separación entre la línea y el texto */
  left: 0; /* Alinear con el borde izquierdo del enlace */
}