/* ─────────────────────────────
   RESPONSIVE
───────────────────────────── */
/* A nav passa ao hambúrguer em 1320px. O NavBar do design system diz
   1000px, mas medido: entre 1000 e 1200px os seis destinos transbordam da
   tela, e até ~1280px encostam no logo. */
@media (max-width: 1320px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .nav-mobile { display: flex; }
}

@media (max-width: 900px) {
  .sec-split, .sec-intro, .peca-grid { grid-template-columns: 1fr; }
  .peca { display: none; }
  .hero-base { flex-direction: column; align-items: flex-start; gap: 28px; }
  .hero-base .hero-meta { justify-content: flex-start; flex: none; }
  /* Em duas linhas no celular, equilibradas: sem isso sobrava "isso." sozinho. */
  .sec-intro.empilhada .display { text-wrap: balance; }
  .cards-3, .grid-2, .sol-grid { grid-template-columns: 1fr; }
  .arq-visual { display: none; }
  #contato .display { font-size: clamp(32px, 8vw, 48px); }
  footer { flex-direction: column; align-items: flex-start; }
  .footer-right { text-align: left; }
}

@media (max-width: 480px) {
  .hero-title { font-size: clamp(32px, 9vw, 52px); }
  .page-hero .hero-title { font-size: clamp(40px, 11vw, 60px); }
}

/* Campo com menos de 16px faz o Safari do iOS dar zoom ao receber foco, e a
   página fica deslocada depois. 16px só no toque: no desktop o 14px do
   sistema permanece. */
@media (max-width: 900px) {
  .campo input,
  .campo textarea { font-size: 16px; }
}