/**
 * HERO SLIDESHOW FIX
 * CSS específico para garantir funcionamento correto do slideshow
 */

/* Container principal do hero */
.hero-section {
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    background-color: #0A0E16;
}

/* Container dos slides */
.hero-slideshow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Cada slide individual */
.hero-slide {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    transition: opacity 1s ease-in-out !important;
    opacity: 0 !important;
    z-index: 1 !important;
}

/* Slide ativo */
.hero-slide.active {
    opacity: 1 !important;
    z-index: 2 !important;
}

/* Garantir que o conteúdo do hero fique acima dos slides */
.hero-section .container {
    position: relative;
    z-index: 3;
}

/* Correções para mobile */
@media (max-width: 768px) {
    .hero-slide {
        background-attachment: scroll !important;
        -webkit-background-size: cover !important;
    }
}

/* Correções para iOS */
.ios-device .hero-slide {
    background-attachment: scroll !important;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Correções para Android */
.android-device .hero-slide {
    background-attachment: scroll !important;
    transform: translateZ(0);
}

/* Otimização de performance */
.hero-slide {
    will-change: opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}