.spinner-squares {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Cuadrados */
.spinner-squares span {
  width: 14px;
  height: 14px;
  animation: squarePulse 1s infinite ease-in-out;
  transform-origin: center;
}

/* Colores + retrasos */
.spinner-squares span:nth-child(1) {
  background-color: #339c33;
  animation-delay: 0s;
}

.spinner-squares span:nth-child(2) {
  background-color: #ffc733;
  animation-delay: 0.15s;
}

.spinner-squares span:nth-child(3) {
  background-color: #9cccff;
  animation-delay: 0.3s;
}

/* Animación */
@keyframes squarePulse {
  0%, 100% {
    transform: scale(0.6);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.4);
    opacity: 1;
  }
}