/* ============================================
   SLIDER RESPONSIVO - MOBILE E DESKTOP
   ============================================ */

/* Garantir que o slider não sobreponha o header */
.main_slider_area {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 0 !important;
}

.header_bottom_area,
.header_logo_area,
.header_top_area {
    position: relative !important;
    z-index: 999 !important;
    background: #fff !important;
}

.tp-banner-container {
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important;
}

.navbar {
    position: relative !important;
    z-index: 1000 !important;
}

/* Garantir que li tenha apenas uma imagem visível */
.tp-banner ul li {
    overflow: hidden !important;
}

/* Desktop: mostrar apenas desktop images */
.tp-banner .slider-img-desktop,
.tp-banner-container .slider-img-desktop,
.slider-img-desktop {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    z-index: 10 !important;
}

.tp-banner .slider-img-mobile,
.tp-banner-container .slider-img-mobile,
.slider-img-mobile {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    z-index: -1 !important;
}

/* MOBILE (≤768px): mostrar apenas mobile images */
@media screen and (max-width: 768px) {
    /* ESCONDER imagens desktop completamente */
    .tp-banner .slider-img-desktop,
    .tp-banner-container .slider-img-desktop,
    .tp-banner ul li img.slider-img-desktop,
    .tp-banner li img.slider-img-desktop,
    li img.slider-img-desktop,
    img.slider-img-desktop,
    .slider-img-desktop {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        max-width: 0 !important;
        max-height: 0 !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
        z-index: -1 !important;
        pointer-events: none !important;
    }
    
    /* MOSTRAR imagens mobile - FORÇAR VERTICAL */
    .tp-banner .slider-img-mobile,
    .tp-banner-container .slider-img-mobile,
    .tp-banner ul li img.slider-img-mobile,
    .tp-banner li img.slider-img-mobile,
    li img.slider-img-mobile,
    img.slider-img-mobile,
    .slider-img-mobile {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: none !important;
        min-height: auto !important;
        object-fit: contain !important;
        object-position: center top !important;
        z-index: 999 !important;
        pointer-events: auto !important;
        margin: 0 auto !important;
        transform: none !important;
    }
    
    /* Desabilitar Revolution Slider em mobile */
    .tp-banner,
    .tp-banner-container {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    .tp-banner ul,
    .tp-banner ul li {
        height: auto !important;
        min-height: auto !important;
        background: none !important;
        background-image: none !important;
        position: relative !important;
        overflow: visible !important;
    }
    
    /* Forçar área do slider a expandir com a imagem */
    .main_slider_area {
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
    }
    
    /* Esconder elementos do Revolution Slider em mobile */
    .tp-bannertimer,
    .tp-leftarrow,
    .tp-rightarrow,
    .tp-bullets {
        display: none !important;
    }
    
    /* Ajustar textos para mobile */
    .tp-caption {
        position: relative !important;
        transform: none !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
    }
    
    .tp-caption {
        font-size: 32px !important;
        line-height: 1.2 !important;
        padding: 0 15px !important;
        text-align: center !important;
    }
    
    .black_heavy_70 {
        font-size: 28px !important;
    }
    
    .tp-caption a.largeredbtn {
        padding: 12px 25px !important;
        font-size: 13px !important;
        display: block !important;
        margin: 10px auto !important;
        max-width: 280px;
    }
    
    .tp-banner,
    .tp-banner-container {
        height: 500px !important;
        min-height: 500px !important;
    }
}

/* Timer verde sincronizado (8 segundos) */
.tp-bannertimer {
    height: 5px !important;
    background: rgba(0, 157, 148, 0.3) !important;
    position: relative !important;
}

.tp-bannertimer:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #009d94 !important;
    animation: slideProgress 8s linear infinite;
}

@keyframes slideProgress {
    0% { width: 0%; }
    100% { width: 100%; }
}

/* Regras adicionais para mobile detectado via JavaScript */
.mobile-device .slider-img-desktop {
    display: none !important;
    visibility: hidden !important;
}

.mobile-device .slider-img-mobile {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    height: auto !important;
    position: static !important;
    object-fit: contain !important;
}

.mobile-device .tp-banner,
.mobile-device .tp-banner-container {
    height: auto !important;
    overflow: visible !important;
}

.mobile-device .tp-bannertimer,
.mobile-device .tp-leftarrow,
.mobile-device .tp-rightarrow,
.mobile-device .tp-bullets {
    display: none !important;
}

/* Slider mobile simples - SEM Revolution Slider */
.mobile-simple-slider {
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    overflow: hidden !important;
}

.mobile-simple-slider ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
}

.mobile-simple-slider ul li {
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    display: none !important;
    transition: opacity 0.8s ease-in-out !important;
}

.mobile-simple-slider ul li:first-child {
    display: block !important;
}

.mobile-simple-slider img.slider-img-mobile {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    position: relative !important;
    margin: 0 !important;
}

.mobile-simple-slider img.slider-img-desktop {
    display: none !important;
}

/* Ocultar textos e botões no mobile */
@media (max-width: 768px) {
    .mobile-simple-slider .tp-caption {
        display: none !important;
    }
}

/* ============================================
   MOBILE STATIC IMAGE - Apenas 1 imagem (≤768px)
   ============================================ */

/* Desktop: Esconder imagem mobile */
.mobile-static-image {
    display: none;
}

/* Mobile: Mostrar imagem mobile e esconder Revolution Slider */
@media screen and (max-width: 768px) {
    /* Mostrar imagem mobile estática */
    .mobile-static-image {
        display: block;
        width: 100%;
        height: 100vh;
        position: relative;
        overflow: hidden;
        background-color: #000;
    }
    
    .mobile-static-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        display: block;
    }
    
    /* Esconder Revolution Slider completamente no mobile */
    .tp-banner-container,
    .tp-banner {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
    }
}