@keyframes desvanecer-derecha {
    from {
      opacity: 1;
      transform: translateX(0);
    }
    to {
      opacity: 0;
      transform: translateX(100%);
    }
  }
  
  /* Animación para desvanecer hacia la izquierda */
  @keyframes desvanecer-izquierda {
    from {
      opacity: 1;
      transform: translateX(0);
    }
    to {
      opacity: 0;
      transform: translateX(-100%);
    }
  }
  
  /* Animación para aparecer desde la izquierda */
  @keyframes aparecer-izquierda {
    from {
      opacity: 0;
      transform: translateX(-100%);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  /* Clases para aplicar las animaciones */
  .desvanecer-derecha {
    animation: desvanecer-derecha 0.5s ease forwards;
  }
  
  .desvanecer-izquierda {
    animation: desvanecer-izquierda 0.5s ease forwards;
  }
  
  .aparecer-izquierda {
    animation: aparecer-izquierda 0.5s ease forwards;
  }
  
  /* Estilos para la sección textos-header */
  .textos-header {
    opacity: 1; /* Visible por defecto */
    transition: opacity 0.5s ease, transform 0.5s ease;
  }