@keyframes desvanecer-derecha {
    from {
      opacity: 1;
      transform: translateX(0);
    }
    to {
      opacity: 0;
      transform: translateX(100%);
    }
  }
  

  @keyframes desvanecer-izquierda {
    from {
      opacity: 1;
      transform: translateX(0);
    }
    to {
      opacity: 0;
      transform: translateX(-100%);
    }
  }
  
 
  @keyframes aparecer-izquierda {
    from {
      opacity: 0;
      transform: translateX(-100%);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
 
  .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;
  }
  
 
  .textos-header {
    opacity: 1; 
    transition: opacity 0.5s ease, transform 0.5s ease;
  }