@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.btn-animated {
    background-color: #60a5fa; /* azul base */
}

.btn-animated::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #1d4ed8; /* azul hover */
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
    z-index: 0;
}

.btn-animated:hover::before {
    transform: scaleX(1);
}

.btn-animated:active {
    transform: scale(0.98);
}