/* =============================================
   RESPONSIVO — carregado por último para vencer no cascade
   ============================================= */

@media (max-width: 1000px) {
  .nav-links { display: none; }
}

@media (max-width: 900px) {
  .split, .hero-grid, .faq-grid, .contato-grid { grid-template-columns: 1fr; gap: var(--space-12); }
  section { padding-block: var(--space-16); }
  .hero { min-height: 0; }
  .hero-foto img { aspect-ratio: 4 / 3; }
  .hero-selo { left: var(--space-4); bottom: var(--space-4); }
  .galeria-lista { grid-template-columns: repeat(2, 1fr); }
  .itens-lista { grid-template-columns: 1fr; }
  .faq-grid .section-head, .contato-grid .section-head { margin-bottom: var(--space-6); }
}

@media (max-width: 720px) {
  #nav-toggle { display: block; }
  .nav-cta { display: none; }
  :root { --space-24: 4rem; }
  .container, #navbar, .galeria-lista { padding-inline: var(--space-6); }
  .cardapio-atalhos { top: 60px; }
  /* celular: card com foto vira linha (foto pequena à esquerda), senão a página fica enorme */
  .itens-grade { grid-template-columns: 1fr; gap: var(--space-3); }
  .itens-grade .item { grid-template-columns: 96px 1fr; grid-template-rows: 1fr auto; column-gap: var(--space-3); padding: var(--space-3); }
  .itens-grade .item-foto { grid-row: 1 / 3; width: 96px; height: 100%; min-height: 112px; aspect-ratio: auto; border-radius: var(--radius); }
  .itens-grade .item-texto, .itens-grade .item-rodape { padding: 0; }
  .itens-grade .item-texto h4 { margin-bottom: 2px; }
  .itens-lista .item { gap: var(--space-4); }
  .pedido-caixa { padding: var(--space-6) var(--space-4); }
  .agenda-dados { grid-template-columns: 1fr; }
  .pedido-itens li { grid-template-columns: 1fr auto; row-gap: var(--space-2); }
  .pedido-nome { grid-column: 1 / -1; }
  .sacola-barra svg:last-child { display: none; }
  .sacola-barra { gap: var(--space-2); left: var(--space-4); width: calc(100% - var(--space-4) * 2 - var(--space-6) - 56px); }
}

@media (max-width: 400px) {
  .container, #navbar, .galeria-lista { padding-inline: var(--space-4); }
  .nav-logo span { font-size: var(--text-base); }
  .hero-acoes > * { width: 100%; }
  #wa-float { width: 52px; height: 52px; right: var(--space-4); bottom: var(--space-4); }
  .sacola-barra { bottom: var(--space-4); width: calc(100% - var(--space-4) * 3 - 52px); min-height: 52px; padding-inline: var(--space-3); }
  .sacola-barra > svg { display: none; }
  #back-top { right: calc(var(--space-4) + 4px); }
}