/*********************************************************************************************************************************/

.image-about-us {
    opacity: 0;
    transform: translateX(-100%);
    transition: all 1.5s ease-in-out;
  }
  
  .image-about-us.activo {
    opacity: 1;
    transform: translateX(0);
  }
  

  .contenido-textos h3,
  .contenido-textos p {
    opacity: 0;
    transform: translateX(100%);
    transition: all 1.5s ease-in-out;
  }
  
  .contenido-textos h3.activo,
  .contenido-textos p.activo {
    opacity: 1;
    transform: translateX(0);
  }

/*********************************************************************************************************************************/


@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;
}
  
/*********************************************************************************************************************************/

.servicio-ind {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.servicio-ind.activo {
  opacity: 1;
  transform: translateY(0);
}
/*********************************************************************************************************************************/

.titulo {
  opacity: 0;
  transform: translateY(-50px);
  transition: opacity 1s ease, transform 1s ease;
}

.titulo.activo {
  opacity: 1;
  transform: translateY(0);
}


@keyframes fadeOut {
  from {
      opacity: 1;
  }
  to {
      opacity: 0;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-out {
  animation: fadeOut 0.5s ease forwards;
}

.fade-in {
  animation: fadeOut 0.5s ease forwards;
}