.active span {
  animation: underline 0.3s forwards;
}

.line-wrapper {
  overflow: hidden;
  display: block;
}

.fade-up {
  opacity: 0;
  transform: translateY(50px);
}

.splide__arrow {
  background-color: white;
  opacity: 1;
}

.whats {
  max-width: 60px;
  position: fixed;
  right: 15px;
  bottom: 20px;
  z-index: 999;
  transition: all .3s ease;
}

.fade-element {
  animation: fadeInOut 15s ease-in-out forwards;
  opacity: 0;
}

#contacto {
  background-image: url(../img/contacto.webp);
}

@keyframes underline {
  from {
    width: 0;
    transform-origin: center;
  }

  to {
    width: 100%;
    transform-origin: center;
  }
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }

  20% {
    opacity: 1;
    transform: translateY(0);
  }

  90% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;    
  }
}