@media screen and (max-width: 768px) {
  html, body { overflow-x: hidden; }
  .home .container { padding-left: 12px !important; padding-right: 12px !important; }

  /* desmonta carrossel no mobile */
  .slick-slider .slick-dots,
  .slick-slider .slick-arrow { display: none !important; }
  .slick-slider .slick-track { transform: none !important; width: 100% !important; }
  .slick-slider .slick-slide { width: 100% !important; float: none !important; display: block !important; }

  /* força todos os banners a aparecerem empilhados */
  .box-banner-list,
  .home-banners,
  .banner,
  .box-banner { display: block !important; }

  .box-banner-list li { display: block !important; }
  .box-banner-list li + li { margin-top: 12px !important; }

  .box-banner-list a,
  .home-banners a,
  .banner a,
  .box-banner a { display: block !important; }

  .box-banner-list img,
  .home-banners img,
  .banner img,
  .box-banner img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08) !important;
  }
}
/* Header: alinhar logo à esquerda (desktop e mobile) */
.header,
.topo,
#header { text-align: left !important; }

.header .logo,
.topo .logo,
#header .logo {
  margin-left: 0 !important;
  justify-content: flex-start !important;
}

.header .logo,
.topo .logo,
#header .logo {
  display: flex !important;
  align-items: center !important;
}
/* ===== Área das marcas e informações (fundo preto + texto branco) ===== */
.box-banner-list,
.home-banners,
.categorias-marcas,
.lista-marcas,
.marcas {
  background-color: #000 !important;   /* fundo preto */
  padding: 20px 0 !important;
}

.box-banner-list a,
.home-banners a,
.categorias-marcas a,
.lista-marcas a,
.marcas a,
.box-banner-list li,
.home-banners li,
.categorias-marcas li,
.lista-marcas li,
.marcas li {
  color: #fff !important;              /* texto branco */
}

.box-banner-list a:hover,
.home-banners a:hover,
.categorias-marcas a:hover,
.lista-marcas a:hover,
.marcas a:hover {
  color: #ff0000 !important;           /* cor ao passar o mouse (ex.: vermelho da sua identidade) */
}