/* =================================================================
   ESTILOS DEDICADOS PARA O MÓDULO SLIDER DE BANNERS
   Arquivo centralizado para facilitar a manutenção.
================================================================= */

/* Container principal do slider (Swiper) */
.main-slider.swiper {
    width: 100%;
    /* A altura é definida dinamicamente via PHP, mas podemos ter um fallback */
    height: 500px; 
    overflow: hidden;
    /* Necessário para alguns efeitos 3D mais complexos */
    perspective: 1200px; 
}

/* Wrapper que contém todos os slides */
.main-slider .swiper-wrapper {
    /* Esta propriedade é crucial para que os efeitos 3D funcionem corretamente */
    transform-style: preserve-3d;
}

/* Estilo de cada slide individual */
.main-slider .swiper-slide {
    display: flex;
    width: 100%;
    height: 100%; 
    background-size: cover;
    background-position: center;
    box-sizing: border-box;
}

/* Ajuste de altura para telas menores */
@media (max-width: 767.98px) {
    .main-slider.swiper {
        height: 280px; 
    }
}

/* Regras específicas para corrigir o efeito CUBO */
.swiper-cube {
    overflow: visible; 
}
.swiper-cube .swiper-slide {
    visibility: visible;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform-origin: 0 0;
}

/* Melhora a visualização do efeito COVERFLOW */
.swiper-coverflow .swiper-slide {
    background-position: center;
    background-size: cover;
}

/* Estrutura e Alinhamento do Conteúdo do Slide */
.slide-content-wrapper { 
    width: 100%; 
    height: 100%; 
    display: flex; 
    padding: 2rem; 
    box-sizing: border-box; 
    transition: transform 0.3s ease; /* Adiciona suavidade ao ajuste de offset */
}

/* Tipos de Conteúdo de Banner */

/* 1. Banner de Imagem Padrão */
.image-banner-content { 
    display: flex; 
    flex-direction: column; 
    align-items: inherit; 
    justify-content: inherit; 
    text-align: inherit; 
}
.image-banner-content h2, 
.image-banner-content .banner-price, 
.image-banner-content .banner-extra-text { 
    margin: 0.5rem 0; 
}

/* 2. Banner de Vídeo */
.video-banner-content { 
    display: flex; 
    flex-direction: row; 
    align-items: center; 
    justify-content: center; 
    gap: 3rem; 
    padding: 2rem 5%; 
    width: 100%; 
    height: 100%; 
}
.video-banner-content iframe { 
    border: 5px solid rgba(255, 255, 255, 0.8); 
    border-radius: 10px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); 
    flex-shrink: 0; 
}
.video-banner-cta { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    text-align: center; 
}

/* 3. Banner de Produto */
.product-banner-content { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 100%; 
    height: 100%; 
    gap: 2rem; 
}
.product-banner-image { 
    flex: 1 1 45%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    height: 100%; 
    padding: 1rem; 
    box-sizing: border-box; 
}
.product-banner-image img { 
    max-width: 100%; 
    max-height: 100%; 
    width: auto; 
    height: auto; 
    object-fit: contain; 
}
.product-banner-text { 
    flex: 1 1 55%; 
    text-align: left; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: flex-start; 
    max-width: 550px; 
}
.product-banner-text h2, 
.product-banner-text .banner-price, 
.product-banner-text .banner-extra-text { 
    margin-bottom: 1rem; 
}

/* Botão do Banner */
.banner-button { 
    width: fit-content; 
    transition: background-color 0.3s ease, color 0.3s ease;
}