
/* *** trabajos *** */
.banner_trabajos{
  background-color: #1a1a1a;
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.forma{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 25%;
  margin: 0;
  padding: 0;
}

.fondo_banner{
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 100%;
}

.dron_banner{
  position: absolute;
  top: 15%;
  left: 20%;
  z-index: 3;
  width: 25%;
  transform-origin: center center;

  /* Animación configurada */
  animation: volarFlotar 10s cubic-bezier(0, 0, 0, 0) infinite;
}

.globo1_banner{
  position: absolute;
  top: 35%;
  right: 42%;
  z-index: 2;
  width: 14%;

}

.pantalla_banner{
  position: absolute;
  top: 11%;
  right: 25%;
  z-index: 2;
  width: 16%;

/* Animación configurada para durar 2s y repetirse cada 7s */
  animation: flotar 6s ease-in-out 1s infinite;
  animation-delay: 1s; /* Espera inicial de 5 segundos antes de empezar */
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  
}

.globo2_banner{
  position: absolute;
  top: 40%;
  right: 11%;
  z-index: 2;
  width: 12%;
}


/* Definir la animación de flotar */
@keyframes flotar {
  0%, 100% {
    transform: translateY(0%);
  }
  25% {
    transform: translateY(-10%);
  }
  50% {
    transform: translateY(0%);
  }
  75% {
    transform: translateY(-10%);
  }
}


/* Definir la animación de volar y flotar */
@keyframes volarFlotar {
  0% {
    transform: translate(0, 0); /* Punto A, posición inicial */
  }

  20% {
    transform: translate(30%, 170%); /* Movimiento progresivo hacia la mitad */
  }

  40% {
    transform: translate(180%, 190%); /* Movimiento progresivo hacia la mitad */
  }
  60% {
    transform: translate(200%, 20%) /* Combina el movimiento y la rotación */
  }
   75% {
    transform: translate(150%, 10%) rotate(-60deg); /* Combina el movimiento y la rotación */
  }
  85% {
    transform: translate(100px, 40px) rotate(0deg); /* Combina el movimiento y la rotación */
  }
  100% {
    transform: translate(0px, 0px) /* Combina el movimiento y la rotación */
  }
}


/** **********************  QUERYS ********************** **/
/* Estilos para dispositivos móviles */


@media (max-width: 430px) {
    
  .banner_trabajos{height: 80vh;}

  .forma{width: 100%;}

.dron_banner{
  top: 40%;
  left: 20%;
  width: 55%;
}

.globo1_banner{
  top: 75%;
  left: 6%;
  width: 25%;
}

.pantalla_banner{
  top: 65%;
  right: 35%;
  width: 30%;
}

.globo2_banner{
  top: 80%;
  right: 10%;
  width: 20%;
}


/* Definir la animación de volar y flotar */
@keyframes volarFlotar {
  0% {
    transform: translate(0, 0); /* Punto A, posición inicial */
  }

  20% {
    transform: translate(-20%, 200%); /* Movimiento progresivo hacia la mitad */
  }

  40% {
    transform: translate(10%, 250%); /* Movimiento progresivo hacia la mitad */
  }
  60% {
    transform: translate(40%, 200%) /* Combina el movimiento y la rotación */
  }
   75% {
    transform: translate(50%, -20%) rotate(-40deg); /* Combina el movimiento y la rotación */
  }
  85% {
    transform: translate(5%, 10%) rotate(0deg); /* Combina el movimiento y la rotación */
  }
  100% {
    transform: translate(0, 0) /* Combina el movimiento y la rotación */
  }
}
    
}

@media (max-width: 375px){

    .banner_trabajos{height: 80vh;}

  .forma{width: 100%;}

.dron_banner{
  top: 40%;
  left: 20%;
  width: 55%;
}

.globo1_banner{
  top: 65%;
  left: 6%;
  width: 25%;
}

.pantalla_banner{
  top: 55%;
  right: 35%;
  width: 30%;
}

.globo2_banner{
  top: 70%;
  right: 10%;
  width: 20%;
}


/* Definir la animación de volar y flotar */
@keyframes volarFlotar {
  0% {
    transform: translate(0, 0); /* Punto A, posición inicial */
  }

  25% {
    transform: translate(-20%, 100%); /* Movimiento progresivo hacia la mitad */
  }

  50% {
    transform: translate(0%, 240%); /* Movimiento progresivo hacia la mitad */
  }
  75% {
    transform: translate(50%, 10%) /* Combina el movimiento y la rotación */
  }
  100% {
    transform: translate(0, 0) /* Combina el movimiento y la rotación */
  }
}
  
}

/* Estilos para tablets */
@media (min-width: 431px) and (max-width: 768px) {
    
  .banner_trabajos{height: 92vh;}

  .forma{width: 70%;}

.dron_banner{
  top: 35%;
  left: 20%;
  width: 45%;
}

.globo1_banner{
  top: 55%;
  left: 6%;
  width: 25%;
}

.pantalla_banner{
  top: 45%;
  right: 35%;
  width: 30%;
}

.globo2_banner{
  top: 60%;
  right: 10%;
  width: 20%;
}


/* Definir la animación de volar y flotar */
@keyframes volarFlotar {
  0% {
    transform: translate(0, 0); /* Punto A, posición inicial */
  }

  20% {
    transform: translate(-20%, 100%); /* Movimiento progresivo hacia la mitad */
  }

  40% {
    transform: translate(10%, 200%); /* Movimiento progresivo hacia la mitad */
  }
  60% {
    transform: translate(50%, 320%) /* Combina el movimiento y la rotación */
  }
   75% {
    transform: translate(60%, 10%) rotate(-40deg); /* Combina el movimiento y la rotación */
  }
  85% {
    transform: translate(5%, 10%) rotate(0deg); /* Combina el movimiento y la rotación */
  }
  100% {
    transform: translate(0, 0) /* Combina el movimiento y la rotación */
  }
}

}

/* Estilos para pantallas medianas (laptops) */
@media (min-width: 769px) and (max-width: 1024px) {
    
.banner_trabajos{height: 90vh;}

.forma{width: 60%;}

.dron_banner{
  top: 30%;
  left: 20%;
  width: 35%;
}

.globo1_banner{
  top: 60%;
  left: 5%;
  width: 30%;
}

.pantalla_banner{
  top: 50%;
  right: 32%;
  width: 30%;
}

.globo2_banner{
  top: 62%;
  right: 5%;
  width: 25%;
}


/* Definir la animación de volar y flotar */
@keyframes volarFlotar {
  0% {
    transform: translate(0%, 20%); /* Punto A, posición inicial */
  }

  25% {
    transform: translate(-30%, 300%); /* Movimiento progresivo hacia la mitad */
  }

  50% {
    transform: translate(100%, 340%); /* Movimiento progresivo hacia la mitad */
  }
   80% {
    transform: translate(50%, 20%) rotate(-40deg); /* Combina el movimiento y la rotación */
  }
  100% {
    transform: translate(0%, 20%) /* Combina el movimiento y la rotación */
  }
}

}


@media (min-width: 1024px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 600px) {
    /* Estilos específicos para pantallas de 1024x1366 */
    .banner_trabajos{height: 90vh;}

.forma{width: 40%;}

.dron_banner{
  top: 30%;
  left: 20%;
  width: 25%;
}

.globo1_banner{
  top: 35%;
  left: 32%;
  width: 20%;
}

.pantalla_banner{
  top: 14%;
  right: 25%;
  width: 20%;
}

.globo2_banner{
  top: 40%;
  right: 6%;
  width: 15%;
}


/* Definir la animación de volar y flotar */
@keyframes volarFlotar {
  0% {
    transform: translate(-50%, 30%); /* Punto A, posición inicial */
  }

  20% {
    transform: translate(-20%, 200%); /* Movimiento progresivo hacia la mitad */
  }

  40% {
    transform: translate(160%, 220%); /* Movimiento progresivo hacia la mitad */
  }
  60% {
    transform: translate(200%, 20%) /* Combina el movimiento y la rotación */
  }
   75% {
    transform: translate(50%, -20%) rotate(-40deg); /* Combina el movimiento y la rotación */
  }
  85% {
    transform: translate(-30%, 10%) rotate(0deg); /* Combina el movimiento y la rotación */
  }
  100% {
    transform: translate(-50%, 30%) /* Combina el movimiento y la rotación */
  }
}

}

/* Estilos para pantallas grandes (escritorio) */
@media (min-width: 1025px) and (max-width: 1366px) {
    
.banner_trabajos{height: 90vh;}

.forma{width: 35%;}

.dron_banner{
  top: 28%;
  left: 20%;
  width: 24%;
} 

.globo1_banner{
  top: 30%;
  left: 36%;
  width: 14%;
}

.pantalla_banner{
  top: 12%;
  right: 32%;
  width: 14%;
}

.globo2_banner{
  top: 40%;
  right: 20%;
  width: 10%;
}


/* Definir la animación de volar y flotar */
@keyframes volarFlotar {
  0% {
    transform: translate(-20%, 20%); /* Punto A, posición inicial */
  }

  20% {
    transform: translate(-20%, 140%); /* Movimiento progresivo hacia la mitad */
  }

  40% {
    transform: translate(180%, 200%); /* Movimiento progresivo hacia la mitad */
  }
  60% {
    transform: translate(200%, 30%) /* Combina el movimiento y la rotación */
  }
   75% {
    transform: translate(50%, -20%) rotate(-40deg); /* Combina el movimiento y la rotación */
  }
  85% {
    transform: translate(-10%, 10%) rotate(0deg); /* Combina el movimiento y la rotación */
  }
  100% {
    transform: translate(-20%, 20%) /* Combina el movimiento y la rotación */
  }
}
    
}

/* Estilos para pantallas extra grandes (Full HD y superior) */
@media (min-width: 1367px) and (max-width: 1499px) {
    
.banner_trabajos{height: 90vh;}

.forma{width: 40%;}

.dron_banner{
  top: 25%;
  left: 20%;
  width: 26%;
  border: 1px solid red;
}

.globo1_banner{
  top: 35%;
  left: 30%;
  width: 18%;
}

.pantalla_banner{
  top: 15%;
  right: 28%;
  width: 20%;
}

.globo2_banner{
  top: 40%;
  right: 10%;
  width: 15%;
}


/* Definir la animación de volar y flotar */
@keyframes volarFlotar {
  0% {
    transform: translate(-50%, 30%); /* Punto A, posición inicial */
  }

  20% {
    transform: translate(-20%, 200%); /* Movimiento progresivo hacia la mitad */
  }

  40% {
    transform: translate(100%, 220%); /* Movimiento progresivo hacia la mitad */
  }
  60% {
    transform: translate(150%, 100%) /* Combina el movimiento y la rotación */
  }
   75% {
    transform: translate(50%, -20%) rotate(-40deg); /* Combina el movimiento y la rotación */
  }
  85% {
    transform: translate(-30%, 10%) rotate(0deg); /* Combina el movimiento y la rotación */
  }
  100% {
    transform: translate(-50%, 30%) /* Combina el movimiento y la rotación */
  }
}
    
}


@media (min-width: 1500px) and (max-width: 1999px) {
    
.banner_trabajos{height: 90vh;}

.forma{width: 40%;}

.dron_banner{
  top: 25%;
  left: 20%;
  width: 26%;
}

.globo1_banner{
  top: 35%;
  left: 40%;
  width: 14%;
}

.pantalla_banner{
  top: 15%;
  right: 28%;
  width: 16%;
}

.globo2_banner{
  top: 40%;
  right: 15%;
  width: 12%;
}


/* Definir la animación de volar y flotar */
@keyframes volarFlotar {
  0% {
    transform: translate(-50%, 30%); /* Punto A, posición inicial */
  }

  20% {
    transform: translate(-20%, 200%); /* Movimiento progresivo hacia la mitad */
  }

  40% {
    transform: translate(160%, 200%); /* Movimiento progresivo hacia la mitad */
  }
  60% {
    transform: translate(180%, 60%) /* Combina el movimiento y la rotación */
  }
   75% {
    transform: translate(50%, -20%) rotate(-40deg); /* Combina el movimiento y la rotación */
  }
  85% {
    transform: translate(-30%, 10%) rotate(0deg); /* Combina el movimiento y la rotación */
  }
  100% {
    transform: translate(-50%, 30%) /* Combina el movimiento y la rotación */
  }
}
    
}

/* *** trabajos *** */