/* =============================================================================
   BLOCO 1 — BANNER PRINCIPAL (carrossel do topo)
   ============================================================================= */

/* Limita a largura, centraliza e arredonda o container do banner */
.element-banner-main {
    max-width: 1150px !important;
    margin: 20px auto !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    display: block !important;
    float: none !important;
}

/* Centraliza a imagem e evita distorção, mantendo a proporção */
.element-banner-main img {
    width: 100% !important;
    height: auto !important;
    max-height: 400px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
}

/* =============================================================================
   BLOCO 2 — BANNER VITRINE 
============================================================================= */

/* Aumenta o espaço acima do banner de título (separação da vitrine de produtos) */
.element-banner-bottom {
    margin-top: -80px !important;
    margin-bottom: 0 !important;
    display: block !important;
}

/* Reduz o espaço abaixo do bloco de avaliações */
.element-testimonial-bottom {
    margin-top: 0 !important;
    display: block !important;
}

/* =============================================================================
   BLOCO 3 — BANNER INFERIOR (galeria de imagens rolando automaticamente)
   ============================================================================= */

/* Esconde o conteúdo que fica fora da área visível durante a rolagem */
.element-banner-bottom .banner-bottom-inner {
    overflow: hidden !important;
}

/* Transforma a lista em fileira única e aplica o scroll automático contínuo */
.element-banner-bottom #banner-bottom {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    align-items: center !important;
    animation: banner-bottom-scroll 300s linear infinite;
}

/* Pausa a rolagem ao passar o mouse, pra dar tempo de ver a imagem */
.element-banner-bottom #banner-bottom:hover {
    animation-play-state: paused;
}

/* Movimento do scroll: da posição normal até deslocar 100% para a esquerda */
@keyframes banner-bottom-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

/* Acessibilidade: desliga a animação para quem reduz movimento no sistema */
@media (prefers-reduced-motion: reduce) {
    .element-banner-bottom #banner-bottom {
        animation: none !important;
    }
}

/* Largura de cada imagem/slide, com espaço entre elas */
.element-banner-bottom .banner-bottom-item {
    width: 320px !important;
    max-width: 320px !important;
    flex-shrink: 0 !important;
    margin-right: 20px !important;
}

.element-banner-bottom .banner-bottom-item img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
}

/* =============================================================================
   BLOCO 4 — DEPOIMENTOS (lista de avaliações de clientes)
   ============================================================================= */

/* Esconde o conteúdo que fica fora da área visível durante a rolagem */
.element-testimonial-bottom .testimonial-bottom-inner {
    overflow: hidden !important;
}

/* Transforma a lista em fileira única e aplica o scroll automático contínuo */
.element-testimonial-bottom #testimonial-bottom {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    animation: depoimentos-scroll 50s linear infinite;
}

/* Pausa a rolagem ao passar o mouse, pra dar tempo de ler */
.element-testimonial-bottom #testimonial-bottom:hover {
    animation-play-state: paused;
}

/* Movimento do scroll: da posição normal até deslocar 100% para a esquerda */
@keyframes depoimentos-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

/* Acessibilidade: desliga a animação para quem reduz movimento no sistema */
@media (prefers-reduced-motion: reduce) {
    .element-testimonial-bottom #testimonial-bottom {
        animation: none !important;
    }
}

/* Largura fixa de cada depoimento, forçando o texto a quebrar em linhas */
.element-testimonial-bottom .testimonial-bottom-item {
    width: 400px !important;
    max-width: 400px !important;
    flex-shrink: 0 !important;
}

/* Aumenta a foto do cliente e tenta aproximar do nome (ver nota abaixo) */
.element-testimonial-bottom .author-img {
    margin-bottom: 4px !important;
    line-height: 0 !important;
}
.element-testimonial-bottom .author-img img {
    width: 60px !important;
    height: 60px !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block !important;
}

/* Justifica o texto do depoimento */
.element-testimonial-bottom .description p {
    text-align: justify !important;
}