/* =============================================
   SEÇÕES — hero, galeria, cardápio, pedido, sobre, dúvidas, contato, rodapé
   ============================================= */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; }
.section-head { margin-bottom: var(--space-12); }
.section-head .eyebrow { margin-bottom: var(--space-4); }

/* Hero */
.hero { min-height: 100svh; display: flex; align-items: center; padding-top: calc(var(--space-24) + var(--space-8)); }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-16); align-items: center; }
.hero h1 { margin-block: var(--space-6); }
.hero-lead { font-size: var(--text-lg); margin-bottom: var(--space-8); }
.hero-acoes { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero-foto { position: relative; }
.hero-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-xl); box-shadow: var(--shadow-foto); }
.hero-selo {
  position: absolute; left: calc(var(--space-6) * -1); bottom: var(--space-8);
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-6); border-radius: var(--radius);
  background: var(--white); box-shadow: var(--shadow-card); font-weight: 600; font-size: var(--text-sm);
}
.pulso { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; background: #2F9E5B; box-shadow: 0 0 0 4px var(--creme); animation: pulso 2s var(--ease) infinite; }
.pulso.fechado { background: var(--primary); animation: none; }
@keyframes pulso { 50% { transform: scale(.7); } }

/* Galeria: faixa de fotos */
#galeria { padding-block: 0 var(--space-24); }
.galeria-lista { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); padding-inline: var(--space-8); max-width: 1440px; margin-inline: auto; }
.galeria-lista img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; border-radius: var(--radius-lg); transition: transform .6s var(--ease); }
.galeria-lista li { overflow: hidden; border-radius: var(--radius-lg); }
.galeria-lista li:hover img { transform: scale(1.05); }

/* Cardápio: fundo escuro, mostarda nos destaques */
#cardapio { background: var(--ink); color: var(--paper); }
#cardapio h2, #cardapio h3, #cardapio h4 { color: var(--paper); }
#cardapio p { color: rgba(243, 235, 221, .72); }
#cardapio .eyebrow { color: var(--mostarda); }
#cardapio .eyebrow::before { background: var(--mostarda); }
.cardapio-atalhos {
  position: sticky; top: 64px; z-index: 5;
  display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none;
  margin-inline: calc(var(--space-2) * -1); padding: var(--space-3) var(--space-2);
  background: var(--ink);
}
.cardapio-atalhos a {
  flex-shrink: 0; display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--space-4);
  border: 1px solid rgba(243, 235, 221, .3); border-radius: var(--radius); font-size: var(--text-sm); font-weight: 600;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.cardapio-atalhos a:hover { background: var(--mostarda); border-color: var(--mostarda); color: var(--ink); }
.cardapio-cat { padding-top: var(--space-12); scroll-margin-top: 128px; }
.cardapio-cat-topo {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-6);
  padding-bottom: var(--space-4); margin-bottom: var(--space-6); border-bottom: 2px solid var(--mostarda);
}
#cardapio .cardapio-cat-topo h3 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1; color: var(--mostarda); }
.cardapio-cat-topo p { font-size: var(--text-sm); }

.item-texto h4 { font-size: var(--text-lg); line-height: 1.25; margin-bottom: var(--space-2); }
.item-texto p { font-size: var(--text-sm); }
.item-rodape { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.item-preco { font-weight: 700; font-size: var(--text-lg); white-space: nowrap; color: var(--mostarda); font-variant-numeric: tabular-nums; }

/* Com foto: cards */
.itens-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-4); }
.itens-grade .item {
  display: grid; grid-template-rows: auto 1fr auto; overflow: hidden;
  border-radius: var(--radius-lg); background: rgba(243, 235, 221, .05); border: 1px solid rgba(243, 235, 221, .12);
}
.item-foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.itens-grade .item-texto { padding: var(--space-4) 14px var(--space-3); }
.itens-grade .item-rodape { padding: 0 14px var(--space-4); }
.itens-grade .item-rodape { flex-wrap: wrap; gap: var(--space-2); }   /* card estreito: o − n + desce de linha em vez de vazar */
.itens-grade .qtd { gap: 4px; margin-left: auto; }
.itens-grade .qtd-btn { width: 44px; height: 44px; }

/* Sem foto: lista de balcão */
.itens-lista { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-12); }
.itens-lista .item {
  display: grid; grid-template-columns: 1fr auto; gap: var(--space-6); align-items: center;
  padding-block: var(--space-4); border-bottom: 1px dashed rgba(243, 235, 221, .2);
}
.itens-lista .item-rodape { justify-content: flex-end; }

/* Botão de quantidade: só o + até ter item, aí vira − n + */
.qtd { display: inline-flex; align-items: center; gap: var(--space-2); }
.qtd-btn {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius);
  border: 1px solid currentColor; transition: background-color var(--transition), transform var(--transition);
}
.qtd-btn:active { transform: scale(.92); }
#cardapio .qtd-btn:not(.qtd-mais) { color: var(--paper); border-color: rgba(243, 235, 221, .45); }
.qtd-mais { background: var(--primary); border-color: var(--primary); color: var(--white); }
.qtd-mais:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.qtd:not(.tem) .qtd-btn:not(.qtd-mais), .qtd:not(.tem) .qtd-n { display: none; }
.qtd-n { min-width: 1.5ch; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Pedido */
.pedido { align-items: start; }
.pedido-status { display: inline-flex; align-items: center; gap: var(--space-3); margin-top: var(--space-6); font-weight: 600; color: var(--ink); }
.pedido-caixa { display: grid; gap: var(--space-6); min-width: 0; }
.pedido-caixa h3 { font-size: clamp(1.75rem, 3vw, 2.25rem); }
.pedido-caixa h3:focus { outline: none; }
.pedido-vazio p { margin-bottom: 0; }
.pedido-itens li {
  display: grid; grid-template-columns: 1fr auto 6.5rem; gap: var(--space-4); align-items: center;
  padding-block: var(--space-3); border-bottom: 1px solid var(--color-border);
}
.pedido-itens li:first-child { padding-top: 0; }
.pedido-nome { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.pedido-valor { text-align: right; font-variant-numeric: tabular-nums; }
.pedido-itens .qtd-btn { width: 44px; height: 44px; color: var(--ink); }
.pedido-itens .qtd-mais { color: var(--white); }
.pedido-contas { display: grid; gap: var(--space-2); }
.pedido-contas div { display: flex; justify-content: space-between; gap: var(--space-4); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.pedido-contas .pedido-total { padding-top: var(--space-3); border-top: 2px solid var(--ink); color: var(--ink); font-family: var(--font-display); font-size: var(--text-xl); text-transform: uppercase; }
.pedido-minimo { font-size: var(--text-sm); font-weight: 600; color: var(--accent-text); }
.pedido-minimo:empty { display: none; }
.pedido-form { display: grid; gap: var(--space-6); }
.pedido-enviar { width: 100%; }
.pedido-ok { display: grid; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius); background: var(--creme); }
.pedido-ok p { color: var(--ink); }

/* Barra "Ver pedido": embaixo, à esquerda do botão do WhatsApp */
.sacola-barra {
  position: fixed; left: var(--space-6); bottom: var(--space-6); z-index: 90;
  display: flex; align-items: center; gap: var(--space-3); max-width: 26rem;
  width: calc(100% - var(--space-6) * 2 - 56px - var(--space-4));
  min-height: 56px; padding-inline: var(--space-4); border-radius: var(--radius-lg);
  background: var(--ink); color: var(--paper); box-shadow: 0 10px 28px rgba(30, 22, 18, .3);
  transition: opacity var(--transition), transform var(--transition);
}
.sacola-barra span { flex: 1; min-width: 0; font-size: var(--text-sm); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sacola-barra strong { color: var(--mostarda); white-space: nowrap; }
.sacola-barra svg { flex-shrink: 0; }
body.no-pedido .sacola-barra { opacity: 0; transform: translateY(12px); pointer-events: none; }

/* Sobre */
.sobre-foto img { width: 100%; aspect-ratio: 8 / 9; object-fit: cover; border-radius: var(--radius-xl); }
.sobre-pontos { display: grid; gap: var(--space-3); margin-top: var(--space-8); }
.sobre-pontos li { display: flex; align-items: center; gap: var(--space-3); font-weight: 500; }
.sobre-pontos svg { flex-shrink: 0; width: 32px; height: 32px; padding: 6px; border-radius: var(--radius); background: var(--creme); color: var(--primary); }

/* Dúvidas */
#duvidas { background: var(--surface); }
.faq-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--space-16); align-items: start; }
.faq-lista details { border-bottom: 1px solid var(--color-border); }
.faq-lista details:first-child { border-top: 1px solid var(--color-border); }
.faq-lista summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  padding-block: var(--space-6); cursor: pointer; list-style: none;
  font-size: var(--text-lg); font-weight: 700; color: var(--ink);
}
.faq-lista summary::-webkit-details-marker { display: none; }
.faq-lista summary::after { content: "+"; font-size: 1.75rem; font-weight: 400; line-height: 1; transition: transform var(--transition); }
.faq-lista details[open] summary::after { transform: rotate(45deg); }
.faq-lista details p { padding-bottom: var(--space-6); }

/* Contato */
.contato-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); }
.contato-dados { display: grid; gap: var(--space-8); }
.contato-dados h3 { font-size: var(--text-sm); font-family: var(--font-body); font-weight: 600; letter-spacing: .12em; color: var(--color-text-muted); margin-bottom: var(--space-3); }
.contato-dados address { font-size: var(--text-lg); line-height: 1.6; }
.horarios { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-8); font-size: var(--text-lg); }
.horarios dt { font-weight: 600; }

/* Rodapé */
footer { padding-block: var(--space-16); background: var(--ink); color: rgba(243, 235, 221, .72); font-size: var(--text-sm); }
.rodape { display: grid; gap: var(--space-3); }
.rodape p { color: inherit; max-width: none; font-size: inherit; }
.rodape-marca { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-size: var(--text-xl) !important; text-transform: uppercase; color: var(--paper) !important; }
.rodape-demo { padding: var(--space-3) var(--space-4); border: 1px dashed rgba(243, 235, 221, .3); border-radius: var(--radius); justify-self: start; }
#selo-modelo { transition: bottom var(--transition); }
body:has(.sacola-barra:not([hidden])):not(.no-pedido) #selo-modelo { bottom: calc(var(--space-6) + 56px + var(--space-3)); }
@media (max-width: 640px) { body:has(.sacola-barra:not([hidden])):not(.no-pedido) #selo-modelo { bottom: calc(var(--space-4) + 56px + var(--space-3)); } }
