.cubo-container {
      width: 80px;
      height: 80px;
      perspective: 900px;
    }

    .cubo {
      width: 100%;
      height: 100%;
      position: relative;
      transform-style: preserve-3d;
      animation: girar 20s linear infinite;
    }

    .cara {
      position: absolute;
      width: 80px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      backface-visibility: hidden;
    }

    .cara img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      filter: drop-shadow(0 0 5px #00ffff) drop-shadow(0 0 15px #00ccff);
    }

    .frente    { transform: rotateY(  0deg) translateZ(40px); }
    .atras     { transform: rotateY(180deg) translateZ(40px); }
    .derecha   { transform: rotateY( 90deg) translateZ(40px); }
    .izquierda { transform: rotateY(-90deg) translateZ(40px); }
    .arriba    { transform: rotateX( 90deg) translateZ(40px); }
    .abajo     { transform: rotateX(-90deg) translateZ(40px); }

    @keyframes girar {
      0%   { transform: rotateX(0deg) rotateY(0deg); }
      100% { transform: rotateX(360deg) rotateY(360deg); }
    }