/* Gradiente animado */
.gradient-animated {
  background: linear-gradient(270deg, #4F46E5, #8B5CF6, #3B82F6);
  background-size: 600% 600%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientMove 6s ease infinite;
}

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

.flip-card {
  background-color: transparent;
  width: 100%;
  height: 300px; /* Altura fija para que la animación funcione correctamente */
  perspective: 1000px; /* Crea el efecto de profundidad */
}

/* Contenedor interno que realiza la animación de giro. */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s; /* Duración de la animación */
  transform-style: preserve-3d; /* Mantiene los elementos en un espacio 3D */
}

/* Al pasar el cursor, el contenedor interno gira 180 grados. */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Estilos comunes para el frente y el reverso. */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Oculta la cara trasera del elemento */
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  top: 0;
  left: 0;
}

/* El reverso está girado 180 grados desde el inicio. */
.flip-card-back {
  transform: rotateY(180deg);
}

flip-card-front > * {
  width: 100%;
  height: 100%;
}