/*********************************************************************************************************************************/
/*Transición de Nuestros Equipos*/
/* Animación desde la izquierda */
.image-about-us {
    opacity: 0;
    transform: translateX(-100%);
    transition: all 1.5s ease-in-out;
    width: 48%;
    margin-right: 40px;
    height: auto;
    object-fit: contain;
  }
  
  .image-about-us.activo {
    opacity: 1;
    transform: translateX(0);
  }
  
  /* Animación desde la derecha */
  .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);
  }
/* Animación voluntario */
.image-vont {
    opacity: 0;
    transform: translateX(-100%);
    transition: all 1.5s ease-in-out;
  }
  
  .image-vont {
    opacity: 1;
    transform: translateX(0);
  }

.hoja-ruta {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease, transform 1s ease;
}

.hoja-ruta.visible {
  opacity: 1;
  transform: translateY(0);
}
/*********************************************************************************************************************************/
/*Transición de texto index a productos*/
  /* Animación para desvanecer hacia la derecha */

@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;
  opacity: 0; /* Inicialmente invisible */
  animation: fade-in 4s ease-in-out forwards;
}
@keyframes fade-in {
        from {
            opacity: 0; /* Empieza con opacidad 0 */
        }
        to {
            opacity: 1; /* Termina con opacidad 1 */
        }
    }

/*********************************************************************************************************************************/
/*Transición de Nuestros Servicios*/
/* Animación inicial */
.servicio-ind {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
/* Cuando el elemento es visible (con la clase activo) */
.servicio-ind.activo {
  opacity: 1;
  transform: translateY(0);
}
/*********************************************************************************************************************************/
/* Transicion de titulos */
.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;
}