/* hero-cubes.css */
.hero-visual {
    position: relative;
    width: 100%;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cubes-composition {
    position: relative;
    width: 400px;
    height: 400px;
}

.floating-cube {
    position: absolute;
    width: 160px;
    height: 160px;
    transform-style: preserve-3d;
}

/* Posicionamiento de los cubos */
.cube-top {
    top: 0;
    left: 50%;
    transform: translateX(-50%) rotateX(30deg) rotateY(45deg);
    animation: floatTop 6s ease-in-out infinite;
}

.cube-bottom-left {
    bottom: 40px;
    left: 40px;
    transform: rotateX(30deg) rotateY(45deg);
    animation: floatBottomLeft 6s ease-in-out infinite;
}

.cube-bottom-right {
    bottom: 40px;
    right: 40px;
    transform: rotateX(30deg) rotateY(45deg);
    animation: floatBottomRight 6s ease-in-out infinite 0.5s;
}

.cube-face {
    position: absolute;
    width: 160px;
    height: 160px;
    border: 2px solid rgba(0, 177, 235, 0.1);
    backface-visibility: visible;
}

/* Estilos de las caras */
.cube-face.front {
    transform: translateZ(80px);
    background: rgba(0, 177, 235, 0.1);
}

.cube-face.back {
    transform: translateZ(-80px) rotateY(180deg);
    background: rgba(0, 177, 235, 0.05);
}

.cube-face.right {
    transform: rotateY(90deg) translateZ(80px);
    background: rgba(0, 177, 235, 0.15);
}

.cube-face.left {
    transform: rotateY(-90deg) translateZ(80px);
    background: rgba(0, 177, 235, 0.08);
}

.cube-face.top {
    transform: rotateX(90deg) translateZ(80px);
    background: rgba(0, 177, 235, 0.2);
}

.cube-face.bottom {
    transform: rotateX(-90deg) translateZ(80px);
    background: rgba(0, 177, 235, 0.05);
}

/* Animaciones de flotación */
@keyframes floatTop {
    0%, 100% {
        transform: translateX(-50%) rotateX(30deg) rotateY(45deg) translateY(0);
    }
    50% {
        transform: translateX(-50%) rotateX(30deg) rotateY(45deg) translateY(-30px);
    }
}

@keyframes floatBottomLeft {
    0%, 100% {
        transform: rotateX(30deg) rotateY(45deg) translateY(0);
    }
    50% {
        transform: rotateX(30deg) rotateY(45deg) translateY(-20px);
    }
}

@keyframes floatBottomRight {
    0%, 100% {
        transform: rotateX(30deg) rotateY(45deg) translateY(0);
    }
    50% {
        transform: rotateX(30deg) rotateY(45deg) translateY(-25px);
    }
}

/* Media queries */
@media (max-width: 992px) {
    .cubes-composition {
        width: 300px;
        height: 300px;
        transform: scale(0.8);
    }
}

@media (max-width: 768px) {
    .cubes-composition {
        transform: scale(0.6);
    }
}