:root {
  --carvao: #141210;
  --superficie: #1e1b18;
  --superficie-alta: #2a2622;
  --linha: #3a342e;
  --terracota: #c8553d;
  --terracota-forte: #b04630;
  --dourado: #c9a45c;
  --texto: #f2ece4;
  --texto-suave: #b5aba0;
  --verde: #6fbf73;
  --raio: 14px;
  --espaco: 20px;
  --largura: 1180px;
  --serifa: "Fraunces", Georgia, serif;
  --sans: "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; background: var(--carvao); color: var(--texto); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serifa); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 12px; }
h2 { font-size: clamp(1.7rem, 4.5vw, 2.6rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 12px; }
[hidden] { display: none !important; }
button { font: inherit; cursor: pointer; }

.sobretitulo { color: var(--dourado); text-transform: uppercase; letter-spacing: .16em; font-size: .75rem; font-weight: 600; margin-bottom: 8px; }
.aviso-exemplo { color: var(--dourado); font-size: .85rem; opacity: .8; }
.vazio { color: var(--texto-suave); text-align: center; padding: 24px 0; }

/* Botões */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; border-radius: 999px; border: 1px solid transparent; font-weight: 600; text-decoration: none; transition: background .2s, transform .2s; }
.botao:active { transform: scale(.97); }
.botao-primario { background: var(--terracota); color: #fff; }
.botao-primario:hover { background: var(--terracota-forte); }
.botao-primario:disabled { opacity: .6; cursor: wait; }
.botao-contorno { border-color: var(--dourado); color: var(--dourado); background: transparent; }
.botao-contorno:hover { background: rgba(201, 164, 92, .12); }
.botao-pequeno { padding: 8px 16px; font-size: .88rem; }
.botao-largo { width: 100%; }

/* Topo */
.topo { position: sticky; top: 0; z-index: 30; background: rgba(20, 18, 16, .88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--linha); }
.topo-conteudo { max-width: var(--largura); margin: 0 auto; padding: 12px var(--espaco); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.marca { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--dourado); font-family: var(--serifa); font-weight: 700; font-size: 1.2rem; }
.marca span { color: var(--texto); }
.topo-acoes { display: flex; align-items: center; gap: 10px; }
.selo-status { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: var(--superficie-alta); white-space: nowrap; }
.selo-status .ponto { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.selo-aberto { color: var(--verde); }
.selo-aberto .ponto { box-shadow: 0 0 0 3px rgba(111, 191, 115, .25); }
.selo-fechado { color: var(--terracota); }
.topo-acoes .botao-pequeno { padding: 6px 12px; font-size: .8rem; white-space: nowrap; }

/* Hero */
.hero { min-height: 88vh; display: flex; align-items: flex-end; padding: 0 var(--espaco) 56px;
  background: linear-gradient(180deg, rgba(20,18,16,.35) 0%, rgba(20,18,16,.7) 55%, var(--carvao) 100%), url("/static/img/hero_pizza.jpg") 70% center / cover no-repeat; }
.hero-conteudo { max-width: var(--largura); margin: 0 auto; width: 100%; }
.hero h1 { font-size: clamp(2.1rem, 7vw, 4.4rem); max-width: 14ch; }
.hero-texto { color: var(--texto-suave); max-width: 46ch; font-size: 1.05rem; }
.hero-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 24px; }
.hero-horario { display: inline-flex; align-items: center; gap: 6px; color: var(--texto-suave); font-size: .9rem; }

/* Seções */
.secao { max-width: var(--largura); margin: 0 auto; padding: 64px var(--espaco); }
.secao-escura { max-width: none; background: var(--superficie); }
.secao-escura > * { max-width: var(--largura); margin-left: auto; margin-right: auto; }
.secao-cabecalho { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.secao-texto { color: var(--texto-suave); max-width: 60ch; }
.etiqueta { display: inline-block; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--dourado); margin-bottom: 6px; }
.preco { color: var(--dourado); font-weight: 700; }
.preco small { display: block; color: var(--texto-suave); font-weight: 500; font-size: .72rem; }

/* Carrossel */
.carrossel { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; }
.carrossel::-webkit-scrollbar { display: none; }
.destaque { scroll-snap-align: start; background: var(--superficie); border-radius: var(--raio); overflow: hidden; border: 1px solid var(--linha); display: flex; flex-direction: column; }
.destaque img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; height: auto; }
.destaque-info { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.destaque-info p { color: var(--texto-suave); font-size: .92rem; flex: 1; }
.destaque-rodape, .produto-rodape { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.carrossel-setas { display: none; gap: 8px; }
.seta { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--linha); background: var(--superficie); color: var(--texto); display: grid; place-items: center; }
.seta:hover { border-color: var(--dourado); color: var(--dourado); }

/* Cardápio */
.busca { display: flex; align-items: center; gap: 10px; background: var(--superficie); border: 1px solid var(--linha); border-radius: 999px; padding: 0 18px; color: var(--texto-suave); margin-bottom: 16px; }
.busca input { flex: 1; background: none; border: 0; color: var(--texto); padding: 14px 0; font: inherit; outline: none; }
.busca:focus-within { border-color: var(--dourado); }
.abas { display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(var(--espaco) * -1) 20px; padding: 0 var(--espaco); scrollbar-width: none; position: sticky; top: 58px; z-index: 5; background: var(--carvao); padding-block: 8px; }
.abas::-webkit-scrollbar { display: none; }
.aba { flex: none; border: 1px solid var(--linha); background: transparent; color: var(--texto-suave); padding: 8px 18px; border-radius: 999px; font-weight: 500; }
.aba.ativa { background: var(--texto); color: var(--carvao); border-color: var(--texto); }
.grade-cardapio { display: grid; gap: 14px; }
.produto { display: grid; grid-template-columns: 104px 1fr; gap: 14px; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px; }
.produto img { width: 104px; height: 104px; object-fit: cover; border-radius: 10px; }
.produto-info { display: flex; flex-direction: column; min-width: 0; }
.produto-info h3 { font-size: 1.05rem; margin-bottom: 4px; }
.produto-info p { color: var(--texto-suave); font-size: .86rem; line-height: 1.45; flex: 1; margin-bottom: 8px; }
.produto .preco { font-size: .92rem; }
.botao-mais { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--terracota); color: #fff; display: grid; place-items: center; }
.botao-mais:hover { background: var(--terracota-forte); }

/* Diferenciais */
.grade-diferenciais { display: grid; gap: 16px; margin-top: 24px; }
.diferencial { border: 1px solid var(--linha); border-radius: var(--raio); padding: 24px; }
.diferencial svg { color: var(--terracota); margin-bottom: 14px; }
.diferencial p { color: var(--texto-suave); margin: 0; }

/* Depoimentos */
.grade-depoimentos { display: grid; gap: 16px; margin: 20px auto 28px; }
.depoimento { margin: 0; background: var(--carvao); border-radius: var(--raio); padding: 22px; border: 1px solid var(--linha); }
.estrelas { color: var(--dourado); margin-bottom: 10px; }
.depoimento blockquote { margin: 0 0 12px; font-family: var(--serifa); font-size: 1.08rem; }
.depoimento figcaption { color: var(--texto-suave); font-size: .88rem; }
#avaliacoes .botao { display: flex; width: fit-content; }

/* Bairros */
.lista-bairros { list-style: none; padding: 0; margin: 20px 0 8px; display: grid; gap: 8px; }
.lista-bairros li { display: flex; justify-content: space-between; padding: 12px 16px; background: var(--superficie); border-radius: 10px; }
.lista-bairros strong { color: var(--dourado); white-space: nowrap; }

/* Rodapé */
.rodape { border-top: 1px solid var(--linha); background: #0f0d0c; padding: 48px var(--espaco) 110px; }
.rodape-grade { max-width: var(--largura); margin: 0 auto; display: grid; gap: 28px; }
.marca-rodape { font-family: var(--serifa); font-size: 1.5rem; color: var(--dourado); }
.rodape address { font-style: normal; color: var(--texto-suave); margin-bottom: 8px; }
.rodape p { color: var(--texto-suave); }
.redes { display: flex; align-items: center; gap: 10px; margin: 16px 0; }
.redes a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linha); display: grid; place-items: center; color: var(--dourado); }
.instagram-texto { color: var(--texto-suave); font-size: .88rem; }
.link-equipe { color: var(--texto-suave); font-size: .82rem; }
.mapa { width: 100%; height: 260px; border: 0; border-radius: var(--raio); filter: grayscale(.6) invert(.9) hue-rotate(180deg); }
.legal { max-width: var(--largura); margin: 32px auto 0; font-size: .78rem; color: #7d746b !important; }

/* Carrinho flutuante */
.carrinho-flutuante { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 40; display: flex; align-items: center; gap: 10px; padding: 14px 20px; border: 0; border-radius: 999px; background: var(--terracota); color: #fff; font-weight: 600; box-shadow: 0 12px 32px rgba(0,0,0,.5); }
.carrinho-flutuante strong { margin-left: auto; }
.carrinho-contador { background: #fff; color: var(--terracota); border-radius: 999px; min-width: 24px; height: 24px; display: grid; place-items: center; font-size: .8rem; font-weight: 700; padding: 0 6px; }

/* Gaveta e modal */
.gaveta, .modal { position: fixed; inset: 0; z-index: 50; }
.gaveta-fundo { position: absolute; inset: 0; background: rgba(0,0,0,.65); }
.gaveta-painel { position: absolute; inset: 0; background: var(--superficie); overflow-y: auto; padding: 20px; display: flex; flex-direction: column; animation: subir .25s ease-out; }
.gaveta-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.gaveta-topo h2 { font-size: 1.6rem; margin: 0; }
.botao-fechar { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linha); background: var(--superficie-alta); color: var(--texto); display: grid; place-items: center; }
@keyframes subir { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

.lista-carrinho { list-style: none; padding: 0; margin: 0 0 12px; }
.linha-carrinho { display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "texto texto remover" "qtd preco preco"; gap: 8px 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--linha); }
.linha-texto { grid-area: texto; display: flex; flex-direction: column; }
.linha-texto small { color: var(--texto-suave); }
.linha-carrinho .quantidade { grid-area: qtd; justify-self: start; }
.linha-preco { grid-area: preco; justify-self: end; color: var(--dourado); font-weight: 600; }
.linha-remover { grid-area: remover; border: 0; background: none; color: var(--texto-suave); padding: 4px; }
.linha-remover:hover { color: var(--terracota); }
.quantidade { display: inline-flex; align-items: center; border: 1px solid var(--linha); border-radius: 999px; }
.quantidade button { width: 36px; height: 36px; border: 0; background: none; color: var(--texto); font-size: 1.1rem; }
.quantidade span { min-width: 22px; text-align: center; font-weight: 600; }

.checkout h3 { margin-top: 8px; }
.checkout label, .opcoes { display: flex; flex-direction: column; gap: 6px; font-size: .88rem; color: var(--texto-suave); margin: 0 0 14px; }
.opcoes { border: 0; padding: 0; }
.opcoes legend { margin-bottom: 8px; color: var(--texto); font-weight: 600; font-size: .95rem; }
.opcoes legend small { color: var(--texto-suave); font-weight: 400; }
.checkout input:not([type=radio]), .checkout select, .checkout textarea, .modal select {
  background: var(--carvao); border: 1px solid var(--linha); border-radius: 10px; color: var(--texto); padding: 12px 14px; font: inherit; width: 100%; }
.checkout input:focus, .checkout select:focus, .checkout textarea:focus { outline: none; border-color: var(--dourado); }
.checkout .opcao { flex-direction: row; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--linha); border-radius: 10px; color: var(--texto); margin: 0 0 8px; }
.checkout .opcao:has(input:checked) { border-color: var(--terracota); background: rgba(200, 85, 61, .1); }
.opcao input { accent-color: var(--terracota); }
.resumo { margin: 8px 0 16px; padding: 14px 0 0; border-top: 1px solid var(--linha); }
.resumo div { display: flex; justify-content: space-between; margin-bottom: 6px; color: var(--texto-suave); }
.resumo dd { margin: 0; }
.resumo-total { color: var(--texto) !important; font-size: 1.2rem; font-weight: 700; }
.resumo-total dd { color: var(--dourado); }
.mensagem-erro { background: rgba(200, 85, 61, .15); border: 1px solid var(--terracota); color: #f3c2b6; padding: 10px 14px; border-radius: 10px; }

.modal-painel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 92vh; overflow-y: auto; background: var(--superficie); border-radius: 20px 20px 0 0; animation: subir .25s ease-out; }
.modal-painel > img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.modal-fechar { position: absolute; top: 12px; right: 12px; }
.modal-corpo { padding: 20px; }
.modal-corpo > p { color: var(--texto-suave); }
.opcoes-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid var(--linha); background: var(--carvao); color: var(--texto); padding: 10px 14px; border-radius: 10px; font-size: .88rem; }
.chip.ativo { border-color: var(--terracota); background: rgba(200, 85, 61, .15); }
.modal-rodape { position: sticky; bottom: 0; background: var(--superficie); display: flex; gap: 12px; padding: 14px 0 4px; }
.modal-rodape .botao { flex: 1; }

/* Telas internas (confirmação, login, painéis) */
.pagina { max-width: 760px; margin: 0 auto; padding: 48px var(--espaco); }
.pagina-larga { max-width: var(--largura); }
.cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 22px; margin-bottom: 16px; }
.cabecalho-painel { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 24px; }
.link-discreto { color: var(--texto-suave); }
.grade-pedidos { display: grid; gap: 16px; }
.cartao-pedido-cabecalho { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.cartao-pedido-cabecalho h3 { margin: 0; }
.etiqueta-status { font-size: .75rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.etiqueta-status-recebido { background: rgba(201,164,92,.18); color: var(--dourado); }
.etiqueta-status-em_preparo { background: rgba(200,85,61,.18); color: #f0a08c; }
.etiqueta-status-pronto { background: rgba(111,191,115,.18); color: var(--verde); }
.dados-pedido { color: var(--texto-suave); font-size: .9rem; margin: 10px 0; }
.dados-pedido strong { color: var(--texto); }
.lista-itens-pedido { list-style: none; padding: 0; margin: 12px 0; }
.lista-itens-pedido li { padding: 8px 0; border-bottom: 1px solid var(--linha); display: flex; justify-content: space-between; gap: 12px; }
.lista-itens-pedido small { display: block; color: var(--texto-suave); }
.lista-itens-pedido li > :last-child { white-space: nowrap; }
.observacao-pedido { color: var(--dourado); font-size: .9rem; }
.numero-destaque { font-family: var(--serifa); font-size: 2rem; color: var(--dourado); }
.linha-do-tempo { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); margin: 28px 0 20px; padding: 0; }
.etapa { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; font-size: .85rem; color: var(--texto-suave); }
.etapa:not(:first-child)::before { content: ""; position: absolute; top: 13px; right: 50%; width: 100%; height: 2px; background: var(--linha); z-index: 0; }
.etapa-feita:not(:first-child)::before { background: var(--verde); }
.etapa-marcador { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--superficie-alta); border: 2px solid var(--linha); color: var(--carvao); }
.etapa-feita .etapa-marcador { background: var(--verde); border-color: var(--verde); }
.etapa-atual .etapa-rotulo { color: var(--texto); font-weight: 600; }
.etapa-atual:not(:last-child) .etapa-marcador { box-shadow: 0 0 0 6px rgba(111,191,115,.18); animation: pulso-etapa 1.8s ease-in-out infinite; }
@keyframes pulso-etapa { 50% { box-shadow: 0 0 0 10px rgba(111,191,115,.05); } }
@media (prefers-reduced-motion: reduce) { .etapa-atual .etapa-marcador { animation: none; } }
.secao-login { max-width: 400px; margin: 0 auto; padding: 64px var(--espaco); text-align: center; }
.icone-login { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--superficie-alta); color: var(--dourado); margin-bottom: 16px; }
.secao-login > p { color: var(--texto-suave); }
.formulario-login { text-align: left; margin-top: 24px; }
.formulario-login label { display: flex; flex-direction: column; gap: 6px; color: var(--texto-suave); font-size: .88rem; margin-bottom: 14px; }
.formulario-login input, .formulario-login select { background: var(--superficie); border: 1px solid var(--linha); border-radius: 10px; color: var(--texto); padding: 12px 14px; font: inherit; }
.titulo-categoria-painel { font-size: 1.1rem; color: var(--dourado); margin: 28px 0 10px; }
.lista-produtos-painel { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.produto-painel { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: center; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px; }
.produto-painel img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; }
.produto-painel-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.produto-painel-info .etiqueta-status { display: inline-block; margin-right: 6px; }
.produto-painel-acoes { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.produto-painel-acoes form { margin: 0; }
.produto-oculto img { opacity: .4; }
.grupo-precos { border: 0; padding: 0; margin: 0 0 4px; }
.grupo-precos legend { color: var(--texto-suave); font-size: .88rem; margin-bottom: 6px; }
.precos-tamanhos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.precos-tamanhos input { min-width: 0; }
.campo-foto { display: flex; gap: 14px; align-items: flex-start; }
.campo-foto img { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; }
.campo-foto label { flex: 1; }
.campo-foto small { color: var(--texto-suave); }
.formulario-login .campo-marcar { flex-direction: row; align-items: center; gap: 10px; color: var(--texto); }
.campo-marcar input { width: 18px; height: 18px; accent-color: var(--terracota); }
.area-entrega { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px 14px; }
.area-entrega form { margin: 0; }
.area-entrega .formulario-login label, .area-entrega.formulario-login label { margin-bottom: 0; }
.area-entrega-bairro { flex: 1 1 100%; align-self: center; }
.area-entrega-taxa { display: flex; align-items: flex-end; gap: 10px; }
.area-entrega-taxa input, .area-entrega-nova input[name="taxa"] { width: 110px; }
.area-entrega-nova { margin: 0 0 20px; border-style: dashed; }

/* Telas maiores */
@media (min-width: 720px) {
  :root { --espaco: 32px; }
  .carrossel { grid-auto-columns: calc((100% - 32px) / 3); }
  .carrossel-setas { display: flex; }
  .grade-cardapio { grid-template-columns: repeat(2, 1fr); }
  .grade-diferenciais, .grade-depoimentos { grid-template-columns: repeat(3, 1fr); }
  .lista-bairros { grid-template-columns: repeat(3, 1fr); }
  .rodape-grade { grid-template-columns: 1fr 1.4fr; }
  .rodape { padding-bottom: 48px; }
  .carrinho-flutuante { left: auto; right: 28px; bottom: 28px; }
  .gaveta-painel { left: auto; width: 440px; border-left: 1px solid var(--linha); }
  .modal-painel { left: 50%; top: 50%; bottom: auto; width: 520px; transform: translate(-50%, -50%); border-radius: 20px; animation: none; }
  .grade-pedidos { grid-template-columns: repeat(2, 1fr); }
  .produto-painel { grid-template-columns: 72px 1fr auto; }
  .produto-painel-acoes { grid-column: auto; }
  .area-entrega-bairro { flex-basis: 0; }
  .abas { top: 66px; }
}
@media (min-width: 1100px) {
  .carrossel { grid-auto-columns: calc((100% - 48px) / 4); }
  .grade-cardapio { grid-template-columns: repeat(3, 1fr); }
  .grade-pedidos { grid-template-columns: repeat(3, 1fr); }
}