/* Base de responsividade da Etapa 2; refinada na Etapa 3. */
@media (max-width: 1280px) {
  .nav-list a { padding-inline: 12px; gap: 8px; }
  .nav-list a svg { width: 24px; height: 24px; }
}
@media (max-width: 1100px) {
  .cards li { flex-basis: calc((100% - 22px) / 2); }
  .carousel-next { right: 6px; }
  .hero-text { max-width: 56%; }
}
@media (max-width: 900px) {
  .header-inner { flex-wrap: wrap; justify-content: center; }
  .brand { width: min(100%, 420px); }
  .search { order: 3; flex: 1 1 100%; width: 100%; max-width: 100%; }
  .social { order: 2; }
  .nav-toggle { display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 22px; border: 0; background: none; color: var(--white); font: 700 18px var(--font); cursor: pointer; }
  .main-nav .container { border-radius: 26px; }
  .nav-list { display: none; flex-direction: column; padding: 6px 8px 12px; }
  .nav-list.is-open { display: flex; }
  .nav-list li + li::before { display: none; }
  .nav-list a { justify-content: flex-start; padding: 14px 18px; }
  .hero { position: relative; background-position: 68% center; }
  .hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2, 11, 31, .88), rgba(2, 11, 31, .4)); }
  .hero-inner { position: relative; }
  .hero-text { max-width: 100%; }
}
@media (max-width: 640px) {
  .container { width: min(100% - 28px, var(--container)); }
  .cards li { flex-basis: 84%; }
  .carousel-next { display: none; }
  .hero-text { padding-left: 18px; }
  .hero-text::before { bottom: 130px; }
  .social svg { width: 38px; height: 38px; }
  .btn-hero { padding: 12px 26px 12px 16px; }
}