@media (max-width: 768px) {
  /* 1. Garante que a seção principal cresça conforme o conteúdo */
  .hero, #inicio {
    height: auto !important;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-bottom: 0 !important;
  }

  /* 2. Ajusta a barra para se comportar como um bloco normal abaixo dos cards */
  #barra-destaques {
    position: relative !important; /* Sai do fundo e entra no fluxo do texto */
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    margin-top: 40px !important;  /* Empurra para baixo dos cards */
    background: rgba(0, 0, 0, 0.25) !important;
    padding: 20px 0 !important;
  }

  /* 3. Organiza os itens para ficarem alinhados à esquerda, como na sua foto */
  #barra-destaques > div {
    border-right: none !important;
    width: 100% !important;
    justify-content: flex-start !important;
    padding: 10px 10% !important;
  }
}