/* keyframes Comunes */
@keyframes titilar {
  0% { color: white; }
  33% { color: #F4B400; }
  67% { color: cyan; }
  100% { color: white; }
}
@keyframes latido {
  0% {
    transform: scale(1);
    opacity: 1;
    box-shadow: none;
  }
  50% {
    transform: scale(0.8);
    opacity: 0.7;
    /* box-shadow: 0 0 20px rgb(44, 43, 44); */
  }
  100% {
    transform: scale(1);
    opacity: 1;
    box-shadow: none;
  }
}

/* Animation Desplazamiento Fondo*/
@keyframes scrollBg {
    0% {
      background-position-y: 300px;
      background-position-x: 0px;
      opacity: 0.5;
    }
    20% {
      background-position-y: 150px;
      background-position-x: 200px;
      opacity: 1;
    }
    60% {
      background-position-y: 0px;
      background-position-x: 0px;
      opacity: 1;
    }        
    80% {
      background-position-y: 150px;
      background-position-x: 200px;
      opacity: 1;
    }
    100% {
      background-position-y: 300px;
      background-position-x: 0px;
      opacity: 0.5;
    }    
  }
/* Animation: Cubos Flotando*/  
.cc-scroll-bg {
  /* height: 10%; */
  /* position: fixed; */
  /* padding-bottom: 330px; */
  background-color: #000000;
  background-image: url('../img/logo.png');
  background-size: 100px 100px;
  /* background-repeat: no-repeat; */
  animation: scrollBg 16s linear forwards infinite;
}
.cc-scroll-bg-contenido {
  position: relative; /* Establece una posición relativa para el contenido */
  z-index: 1; /* Asegura que el contenido esté sobre la imagen de fondo */
}


.hero {
  background-color: #0040C1;
  position: relative;
  height: 20vh;
  overflow: hidden;
}

.hero__title {
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 50px;
  z-index: 1;
}

.cube {
  position: absolute;
  top: 20vh;
  left: 15vw;
  width: 10px;
  height: 10px;
  border: solid 1px #003298;
  transform-origin: top left;
  transform: scale(0) rotate(0deg) translate(-50%, -50%);
  -webkit-animation: cube 5s ease-in forwards infinite;
          animation: cube 5s ease-in forwards infinite;
}
.cube:nth-child(2n) {
  border-color: #0051f4;
}
.cube:nth-child(2) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  left: 5vw;
  top: 4vh;
}
.cube:nth-child(3) {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
  left: 7vw;
  top: 5vh;
}
.cube:nth-child(4) {
  -webkit-animation-delay: 6s;
          animation-delay: 6s;
  left: 9vw;
  top: 1vh;
}
.cube:nth-child(5) {
  -webkit-animation-delay: 8s;
          animation-delay: 8s;
  left: 1vw;
  top: 8vh;
}
.cube:nth-child(6) {
  -webkit-animation-delay: 10s;
          animation-delay: 10s;
  left: 5vw;
  top: 1vh;
}

@-webkit-keyframes cube {
  from {
    transform: scale(0) rotate(0deg) translate(-50%, -50%);
    opacity: 1;
  }
  to {
    transform: scale(20) rotate(960deg) translate(-50%, -50%);
    opacity: 0;
  }
}

@keyframes cube {
  from {
    transform: scale(0) rotate(0deg) translate(-50%, -50%);
    opacity: 1;
  }
  to {
    transform: scale(20) rotate(960deg) translate(-50%, -50%);
    opacity: 0;
  }
}