/* Los elementos ocultos inicialmente */
.hidden {
    visibility: hidden;
    opacity: 0;
    transform: translateX(0); /* Mantener la posición inicial */
    transition: visibility 0s, opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  }
  
  /* Animaciones cuando el elemento se vuelve visible desde la izquierda */
  .visible-left {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    animation: slideInFromLeft 1s forwards;
  }
  
  /* Animaciones cuando el elemento se vuelve visible desde la derecha */
  .visible-right {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    animation: slideInFromRight 1s forwards;
  }
  
  /* Animaciones cuando el elemento se vuelve visible desde arriba */
  .visible-top {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    animation: slideInFromTop 1s forwards;
  }
  
  /* Animaciones cuando el elemento se vuelve visible desde abajo */
  .visible-bottom {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    animation: slideInFromBottom 1s forwards;
  }
  
  /* Animación: deslizar desde la izquierda */
  @keyframes slideInFromLeft {
    from {
      transform: translateX(-50%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  /* Animación: deslizar desde la derecha */
  @keyframes slideInFromRight {
    from {
      transform: translateX(50%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  /* Animación: deslizar desde arriba */
  @keyframes slideInFromTop {
    from {
      transform: translateY(-100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  /* Animación: deslizar desde abajo */
  @keyframes slideInFromBottom {
    from {
      transform: translateY(50%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }