/* Complemento para el cubo 3D con selectores de mayor especificidad */
.cube-container .cube .cube-face.front {
    transform: rotateY(0deg) translateZ(150px) !important;
}

.cube-container .cube .cube-face.back {
    transform: rotateY(180deg) translateZ(150px) !important;
}

.cube-container .cube .cube-face.right {
    transform: rotateY(90deg) translateZ(150px) !important;
}

.cube-container .cube .cube-face.left {
    transform: rotateY(-90deg) translateZ(150px) !important;
}

.cube-container .cube .cube-face.top {
    transform: rotateX(90deg) translateZ(150px) !important;
}

.cube-container .cube .cube-face.bottom {
    transform: rotateX(-90deg) translateZ(150px) !important;
}

/* Asegurémonos de que el cubo sea visible */
.cube {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: rotateCube 30s infinite linear;
}

.cube-container {
    perspective: 1500px;
    width: 300px;
    height: 300px;
    transform-style: preserve-3d;
    margin: 0 auto;
}

/* Tratar el problema de z-index */
.hero-visual {
    z-index: 10;
    position: relative;
}

/* Asegurar que el cubo sea visible en móvil */
@media (max-width: 768px) {
    .cube-face.front {
        transform: rotateY(0deg) translateZ(100px);
    }
    
    .cube-face.back {
        transform: rotateY(180deg) translateZ(100px);
    }
    
    .cube-face.right {
        transform: rotateY(90deg) translateZ(100px);
    }
    
    .cube-face.left {
        transform: rotateY(-90deg) translateZ(100px);
    }
    
    .cube-face.top {
        transform: rotateX(90deg) translateZ(100px);
    }
    
    .cube-face.bottom {
        transform: rotateX(-90deg) translateZ(100px);
    }
}