/* ============================================
   THREE.JS CANVAS - VERSIÓN ESPECÍFICA
   ============================================ */

/* Solo para el canvas del hero principal */
#heroCanvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    pointer-events: none !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Para canvas de otras secciones - ajustar al contenedor padre */
#strategy-hero-canvas,
#footer-canvas,
#section-canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    pointer-events: none !important;
    display: block !important;
}

/* Asegurar que los contenedores tengan position relative */
.hero,
.strategy-hero,
section.hero {
    position: relative !important;
    overflow: hidden !important;
}

/* Contenido encima del canvas */
.hero-content,
.section-content,
.container {
    position: relative !important;
    z-index: 10 !important;
}

/* Reducir opacidad en móvil si es necesario */
@media (max-width: 768px) {
    #heroCanvas,
    #strategy-hero-canvas {
        opacity: 0.7 !important;
    }
}

@media (max-width: 480px) {
    #heroCanvas,
    #strategy-hero-canvas {
        opacity: 0.5 !important;
    }
}

/* Respetar preferencias de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    #heroCanvas,
    #strategy-hero-canvas,
    #footer-canvas {
        display: none !important;
    }
}


/* Forzar que el canvas tome el tamaño completo */
#strategy-hero-canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
    pointer-events: none !important;
    display: block !important;
}

/* Asegurar que el contenedor tenga altura definida */
.strategy-hero {
    position: relative !important;
    overflow: hidden !important;
    min-height: 600px; /* Ajusta según necesites */
}