/* ============================================================
   TABLET  ≤ 1024px
   ============================================================ */
@media (max-width: 1024px) {
  .sobre-grid    { gap: 2.5rem; }
  .numeros-grid  { grid-template-columns: repeat(2, 1fr); }
  .contato-grid  { gap: 2.5rem; }
}

/* ============================================================
   MOBILE  ≤ 768px
   ============================================================ */
@media (max-width: 768px) {

  /* Nav mobile */
  .btn-menu-mobile { display: flex; }

  .nav-principal {
    position: fixed;
    top: 0; right: 0;
    width: 280px;
    height: 100vh;
    background: var(--cor-branco);
    box-shadow: -4px 0 24px rgba(0,0,0,.15);
    transform: translateX(100%);
    transition: transform var(--transicao);
    padding: 5rem 2rem 2rem;
    z-index: 999;
  }
  .nav-principal.aberto { transform: translateX(0); }

  .nav-principal ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
  .nav-principal a {
    color: var(--cor-texto);
    font-size: 1.1rem;
  }

  .nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 998;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transicao);
  }
  .nav-overlay.ativo { opacity: 1; pointer-events: all; }

  /* Hero */
  .hero-acoes { flex-direction: column; }
  .hero-acoes .btn { text-align: center; justify-content: center; }

  /* Sobre */
  .sobre-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .sobre-foto::after { display: none; }
  .sobre-diferenciais { grid-template-columns: 1fr; }

  /* Números */
  .numeros-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }

  /* Contato */
  .contato-grid { grid-template-columns: 1fr; gap: 2rem; }
  .contato-mapa iframe { height: 260px; }

  /* Footer */
  .footer-inner { flex-direction: column; text-align: center; }

  /* Pedidos */
  .pedido-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   MOBILE PEQUENO  ≤ 480px
   ============================================================ */
@media (max-width: 480px) {
  .secao { padding: 3rem 0; }
  .numeros-grid { grid-template-columns: 1fr 1fr; }
  .catalogo-grid { grid-template-columns: 1fr; }
}