.oculto {
  display: none !important;
}

.pantalla-carga {
  position: fixed;
  inset: 0;
  background-color: rgba(60, 60, 60, 0.792);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.cargador {
  position: relative;
  width: 96px;
  height: 96px;
  transform: rotate(45deg);
}

.cuadro-cargador {
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  margin: 2px;
  border-radius: 4px;
  background: #ffffff;
  animation: animacion-cuadro 10s ease-in-out infinite both;
}


.cuadro-cargador:nth-of-type(1) { animation-delay: -1.428s; }
.cuadro-cargador:nth-of-type(2) { animation-delay: -2.857s; }
.cuadro-cargador:nth-of-type(3) { animation-delay: -4.285s; }
.cuadro-cargador:nth-of-type(4) { animation-delay: -5.714s; }
.cuadro-cargador:nth-of-type(5) { animation-delay: -7.142s; }
.cuadro-cargador:nth-of-type(6) { animation-delay: -8.571s; }
.cuadro-cargador:nth-of-type(7) { animation-delay: -10s; }


@keyframes animacion-cuadro {
  0%, 10.5% {
    left: 0; top: 0;
    background: #ffffff;
  }
  12.5%, 23% {
    left: 32px; top: 0;
    background: #d12ae1;
  }
  25%, 35.5% {
    left: 64px; top: 0;
    background: #007ffb;
  }
  37.5%, 48% {
    left: 64px; top: 32px;
    background: #fe8a00;
  }
  50%, 60.5% {
    left: 32px; top: 32px;
    background: #d1b699;
  }
  62.5%, 73% {
    left: 32px; top: 64px;
    background: #019f6e;
  }
  75%, 85.5% {
    left: 0; top: 64px;
    background: #007ffb;
  }
  87.5%, 98% {
    left: 0; top: 32px;
    background: #fe8a00;
  }
  100% {
    left: 0; top: 0;
    background: #ffffff;
  }
}