.bg-gradient-animated {
  background: linear-gradient(-45deg, #05df72, #7bf1a8, #00c950);
  background-size: 400% 400%;
  animation: gradientShift 12s ease infinite;
  border-radius: 0.75rem; /* opcional, para mantener el estilo rounded-xl */
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* .bg-gradient-animated {
  background: linear-gradient(-45deg, #05df72, #b9f8cf, #7bf1a8, #00c950);
  background-size: 400% 400%;
  animation: gradientShift 12s ease infinite, pulse 6s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

.bg-gradient-animated::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.15) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: sparkle 10s linear infinite;
  pointer-events: none;
}

@keyframes sparkle {
  from { background-position: 0 0; }
  to { background-position: 100px 100px; }
} */