/* ============================================
   SOLUÇÃO FINAL - 2 SEÇÕES SEPARADAS
   CSS Limpo - Sem JavaScript Necessário
   Michel Aquaflex
   ============================================ */

/* ===========================
   CONFIGURAÇÕES BASE
   =========================== */

.hero-video-desktop .cs_hero.cs_style_1,
.hero-slider-mobile .cs_hero.cs_style_1 {
    min-height: 650px;
    position: relative;
    display: flex;
    align-items: center;
}

.cs_hero .container {
    position: relative;
    z-index: 3;
}

/* ===========================
   VÍDEO - Estilos Base
   =========================== */

.vb-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.vb-video-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 1;
}

.vb-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(1, 15, 52, 0.65);
    z-index: 2;
}

/* ===========================
   DESKTOP (≥992px)
   Mostrar APENAS a seção de vídeo
   =========================== */
@media screen and (min-width: 992px) {
    
    /* MOSTRAR: Seção do vídeo */
    .hero-video-desktop {
        display: block !important;
    }
    
    /* ESCONDER: Seção do slider de imagens */
    .hero-slider-mobile {
        display: none !important;
    }
}

/* ===========================
   MOBILE/TABLET (≤991px)
   Mostrar APENAS a seção de slider
   =========================== */
@media screen and (max-width: 991px) {
    
    /* ESCONDER: Seção do vídeo */
    .hero-video-desktop {
        display: none !important;
    }
    
    /* MOSTRAR: Seção do slider de imagens */
    .hero-slider-mobile {
        display: block !important;
    }
    
    /* Garantir que as imagens apareçam */
    .hero-slider-mobile .cs_hero.cs_bg_filed {
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }
    
    /* Overlay escuro nas imagens para legibilidade */
    .hero-slider-mobile .cs_hero.cs_bg_filed::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(1, 15, 52, 0.5);
        z-index: 1;
    }
    
    /* Conteúdo acima do overlay */
    .hero-slider-mobile .cs_hero.cs_bg_filed .container {
        position: relative;
        z-index: 2;
    }
}

/* ===========================
   AJUSTES RESPONSIVOS
   =========================== */

/* Tablets */
@media screen and (min-width: 768px) and (max-width: 991px) {
    .hero-video-desktop .cs_hero.cs_style_1,
    .hero-slider-mobile .cs_hero.cs_style_1 {
        min-height: 550px;
    }
}

/* Mobile */
@media screen and (max-width: 767px) {
    .hero-video-desktop .cs_hero.cs_style_1,
    .hero-slider-mobile .cs_hero.cs_style_1 {
        min-height: 500px;
    }
    
    .cs_hero_title.cs_fs_74 {
        font-size: 36px !important;
        line-height: 1.2 !important;
    }
    
    .cs_hero_subtitle {
        font-size: 15px !important;
    }
    
    .cs_hero_mini_title {
        font-size: 14px !important;
    }
}

/* Mobile muito pequeno */
@media screen and (max-width: 480px) {
    .hero-video-desktop .cs_hero.cs_style_1,
    .hero-slider-mobile .cs_hero.cs_style_1 {
        min-height: 450px;
    }
    
    .cs_hero_title.cs_fs_74 {
        font-size: 28px !important;
    }
    
    .cs_hero_subtitle {
        font-size: 14px !important;
    }
}

/* ===========================
   OTIMIZAÇÃO
   =========================== */

/* Performance do vídeo */
@media screen and (min-width: 992px) {
    .vb-video-bg {
        will-change: transform;
    }
}