/* Ocultar los divs por defecto 
.ocultar {
  display: none;
  opacity: 0;
}
*/
.mostrar {
    display: flex;
    flex-direction: column; /* Asegura que los elementos estén en una sola columna */
    align-items: center; /* Centra el contenido */
    opacity: 1;
    transform: translateY(0);
    width: 100%; /* Opcional: Asegura que ocupe todo el ancho */
}

/* ✅ Clase para ocultar con animación */
.ocultar {
    display: flex;
    flex-direction: column; /* Asegura que los elementos estén en una sola columna */
    align-items: center; /* Centra el contenido */
    opacity: 0;
    transform: translateY(20px);
}
/* Animación de entrada */
@keyframes fadeSlideIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeSlideIn {
  display: block;
  animation: fadeSlideIn 0.8s ease-out forwards; /* Duración ajustada */
}

/* Animación de salida */
@keyframes fadeSlideOut {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}

.fadeSlideOut {
  animation: fadeSlideOut 0.8s ease-in forwards;
}

/* Clases de tiempo personalizadas para entrada */
.fadeSlideIn-1 { animation-delay: 1s !important; }
.fadeSlideIn-2 { animation-delay: 2s !important; }
.fadeSlideIn-3 { animation-delay: 3s !important; }

/* Clases de tiempo personalizadas para salida */
.fadeSlideOut-1 { animation-delay: 1s !important; }
.fadeSlideOut-2 { animation-delay: 2s !important; }
.fadeSlideOut-3 { animation-delay: 3s !important; }