/* public/css/responsive.css */
/* Ajustes de layout para tablets e celulares. Mobile-first via breakpoints decrescentes. */

@media (max-width: 992px) {
  .grid-produtos { grid-template-columns: repeat(2, 1fr); }
  .grid-diferenciais { grid-template-columns: repeat(2, 1fr); }
  .grid-mvv { grid-template-columns: 1fr; }
  .secao--split { grid-template-columns: 1fr; }
  .localizacao { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .nav {
    position: fixed; top: 72px; left: 0; width: 100%;
    background: var(--cor-fundo);
    transform: translateY(-150%);
    transition: transform var(--transicao);
    box-shadow: var(--sombra);
  }
  .nav.aberto { transform: translateY(0); }
  .nav__list { flex-direction: column; padding: 1.5rem; gap: 1rem; }
  .nav__toggle { display: flex; }
  .header__actions .btn--primario { display: none; } /* some no mobile, some pra economizar espaço */

  .hero__conteudo h1 { font-size: 2rem; }
  .formulario { grid-template-columns: 1fr; }
  .rodape__grid { grid-template-columns: 1fr; text-align: center; }
  .rodape__redes { justify-content: center; }
}

@media (max-width: 480px) {
  .grid-produtos { grid-template-columns: 1fr; }
  .grid-diferenciais { grid-template-columns: 1fr; }
  .hero { height: 100vh; }
  .btn-topo { right: 1rem; bottom: 1rem; }
}