/* Carrossel de banners da home — MOBILE-FIRST.
   ~60% dos acessos sao via celular, entao o padrao e o layout de telas
   pequenas; as media queries abaixo apenas ampliam para telas maiores.
   Um banner por vez (items:1), largura total, autoplay a cada 2s. */

#banners-carousel {
    width: 100%;
    background: #ffffff;
    /* margem inferior pequena para separar da area de Produtos logo abaixo */
    margin-bottom: 10px;
}

/* Proporcao FIXA por breakpoint: evita salto de layout (CLS) mesmo com
   imagens enviadas em tamanhos diferentes. A imagem preenche a caixa com
   object-fit: cover. No celular a caixa e mais alta; em telas maiores fica
   mais larga/cinematografica. */
#banners-carousel .banner-item {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

#banners-carousel .banner-item a,
#banners-carousel .banner-item img {
    display: block;
    width: 100%;
    height: 100%;
}

#banners-carousel .banner-item img {
    object-fit: cover;
    object-position: center;
}

/* Dots do Owl: alvos de toque confortaveis no celular. */
#banners-carousel .owl-dots {
    text-align: center;
    margin-top: 8px;
}
#banners-carousel .owl-dots .owl-dot span {
    width: 12px;
    height: 12px;
    margin: 5px;
}

/* Tablet */
@media (min-width: 768px) {
    #banners-carousel .banner-item { aspect-ratio: 16 / 7; }
}

/* Desktop */
@media (min-width: 992px) {
    #banners-carousel .banner-item { aspect-ratio: 21 / 8; }
}