/* =========================================
   RESPONSIVE — Media queries
   Sempre carregado por último para que
   os breakpoints sobrescrevam o padrão
   sem precisar de !important.
   ========================================= */

/* ── Tablet largo (≤ 1024px) ── */
@media (max-width: 1024px) {
  .sobre-grid      { grid-template-columns: 1fr; gap: 48px; }
  .sobre-right     { display: none; }
  .contato-grid    { grid-template-columns: 1fr; gap: 56px; }
  .portfolio-grid  { grid-template-columns: repeat(2, 1fr); }
  .footer-grid     { grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* ── Tablet (≤ 768px) ── */
@media (max-width: 768px) {
  nav             { display: none; }
  .hamburger      { display: flex; }

  .hero-section   { min-height: 100svh; min-height: 100dvh; padding-top: 80px; }
  .hero-title     { font-size: clamp(2.4rem, 9vw, 3.4rem); }
  .hero-sub       { font-size: 15px; }

  .portfolio-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .form-row       { grid-template-columns: 1fr; }
  .footer-grid    { grid-template-columns: 1fr; gap: 32px; }
}

/* ── Mobile (≤ 480px) ── */
@media (max-width: 480px) {
  .portfolio-grid { grid-template-columns: 1fr; }
  .hero-actions   { flex-direction: row; flex-wrap: nowrap; gap: 10px; }
  .btn            { font-size: 12px; padding: 11px 20px; }
}