/* Breakpoints 1024px e 768px de todas as secoes. Carregado depois das secoes para manter a precedencia original. */

/* ── RESPONSIVE ───────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --pad: clamp(24px, 5vw, 60px); }
  #hero { justify-content: flex-start; }
  .sobre-grid { grid-template-columns: 1fr; gap: 48px; }
  #mestre { grid-template-columns: 1fr; }
  .mestre-right { min-height: 400px; max-height: 500px; margin: 24px var(--pad); }
  .mestre-stripe { display: none; }
  .sessoes-top { grid-template-columns: 1fr; gap: 32px; }
  .sessoes-grid { grid-template-columns: repeat(2, 1fr); }
  .pq-grid { grid-template-columns: repeat(2, 1fr); }
  .dep-card { flex: 0 0 calc(50% - 16px); }
}
@media (max-width: 768px) {
  :root { --pad: 24px; }
  nav { height: 80px; }
  .nav-links, .nav-right { display: none; }
  .nav-hamburger { display: block; }
  .pq-grid { grid-template-columns: 1fr; }
  .pq-item { aspect-ratio: auto; min-height: 260px; }
  .dep-card { flex: 0 0 100%; }
  .sessoes-grid { grid-template-columns: 1fr; }
  .sobre-stats { flex-wrap: wrap; gap: 24px; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 32px; }
  .footer-logo-row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-right { width: 100%; }
  .footer-socials { width: 100%; justify-content: flex-start; }
  /* Correcao: o grid de contato ficava em 2 colunas no mobile e cortava o texto. */
  .contato-grid { grid-template-columns: 1fr; gap: 48px; }
}