/* Espaçamento entre seções */
.secao {
  margin-bottom: 50px; /* Adiciona espaçamento entre as seções */
}

/* Espaçamento dentro das seções (padding) */
.secao .container {
  padding: 30px; /* Espaço interno em cada seção */
}

/* Espaçamento entre itens dentro de carrosséis ou listas */
.carrossel, .lista-itens {
  gap: 20px; /* Espaçamento entre os itens */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* Ajusta os itens para o espaço disponível */
}

/* Espaçamento específico para itens do carrossel (quando está em flex) */
.carrossel-item {
  margin-right: 15px; /* Espaço à direita de cada item */
  margin-bottom: 15px; /* Espaço abaixo de cada item */
}

/* Espaçamento entre os banners */
.secao-banners .flexslider li {
  margin-right: 20px; /* Adiciona espaçamento entre os banners */
}

/* Ajustes de layout nas categorias ou vitrine */
.categorias-alta {
  gap: 20px; /* Espaçamento entre as categorias */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* Ajuste de espaçamento no rodapé */
#rodape {
  padding: 40px 0; /* Mais espaço no topo e embaixo do rodapé */
}

/* Espaçamento nos links do header ou menu superior */
#header .links-superior a {
  margin-right: 30px; /* Adiciona espaçamento entre os links do menu superior */
}