/* ===== CSS RESPONSIVO ===== */

/* Tablets e notebooks menores */
@media (max-width: 980px) {
  .menu {
    gap: 0.8rem;
  }

  .banner-texto h1 {
    font-size: 1.8rem;
  }

  .cards {
    gap: 1rem;
  }

  .card {
    width: 260px;
  }
}

/* Smartphones */
@media (max-width: 640px) {
  .topo-conteudo {
    flex-direction: column;
    gap: 0.8rem;
  }

  .menu {
    flex-wrap: wrap;
    justify-content: center;
  }

  .banner {
    height: 55vh;
    min-height: 360px;
  }

  .banner-texto h1 {
    font-size: 1.6rem;
  }

  .cards {
    flex-direction: column;
    align-items: center;
  }

  .card {
    width: 90%;
  }

  footer {
    font-size: 0.8rem;
  }
}