/* Visual no estilo da loja do Hubt (pedido do Raphael): fundo cinza-claro, cartões brancos arredondados,
   logo redondo no centro, produtos em 2 colunas com a foto em cima, preço em azul-turquesa, fonte Figtree. */
:root {
  --verde: #00b3c9;        /* botões (turquesa do Hubt) */
  --verde-escuro: #00838f;
  --verde-claro: #e0f7fa;
  --preco: #00bcd4;
  --link: #0084d6;
  --aberto: #39b963;
  --novidade: #603fff;
  --massa: #b5651d;
  --massa-claro: #ead9bf;
  --fundo: #eceef2;
  --painel: #e3e6eb;
  --cartao: #ffffff;
  --tinta: #3c3c3c;
  --suave: #6f7378;
  --linha: #e4e6ea;
  --erro: #c62828;
  --raio: 22px;
  --sombra: 0 2px 6px rgba(0, 0, 0, .12);
  --titulo: "Figtree", system-ui, sans-serif;
  --texto: "Figtree", system-ui, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: 120px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--tinta); font: 16px/1.45 var(--texto); padding-bottom: 96px; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
img { max-width: 100%; display: block; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { font-family: var(--titulo); line-height: 1.15; margin: 0; font-weight: 600; }
svg { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.faixa-teste { background: var(--massa); color: #fff; text-align: center; font-size: 13px; font-weight: 600; padding: 5px; }

/* Topo */
.topo { max-width: 760px; margin: 0 auto; padding: 0 16px; }
.banner { height: 24px; margin: 0 -16px; background: var(--fundo) center / cover no-repeat; }
.banner.com-foto { height: 190px; }
@media (min-width: 760px) { .banner.com-foto { height: 260px; margin: 0; border-radius: 0 0 var(--raio) var(--raio); } }
.logo { display: flex; justify-content: center; margin: 0 0 20px; }
.logo img { width: 150px; height: 150px; border-radius: 50%; background: #fff; object-fit: cover; box-shadow: var(--sombra); }
.banner.com-foto + .logo { margin-top: -75px; }
.banner.com-foto + .logo img { border: 4px solid #fff; }
.infos { display: grid; gap: 10px; }
.info { display: block; background: var(--cartao); border-radius: 14px; box-shadow: var(--sombra); padding: 14px 16px; color: var(--tinta); text-decoration: none; }
.info-linha { display: flex; align-items: center; gap: 14px; }
.info-linha > div { flex: 1; min-width: 0; }
.info strong { display: block; font-weight: 500; font-size: 17px; }
.info small { display: block; color: var(--suave); font-size: 15px; }
.info .link, .info a { color: var(--link); text-decoration: none; text-transform: uppercase; font-weight: 500; font-size: 15px; white-space: nowrap; }
.status { color: var(--aberto); }
.status.fechada { color: var(--erro); }
.info-tempos { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px !important; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linha); color: var(--suave); font-size: 15px; }
.info-tempos span { display: inline-flex; align-items: center; gap: 6px; }
.info-tempos b { font-weight: 400; }
.info-tempos svg { width: 20px; height: 20px; }
.horarios { list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--linha); color: var(--suave); font-size: 15px; display: grid; gap: 2px; }
.horarios li { display: flex; justify-content: space-between; }
.horarios li.hoje { color: var(--tinta); font-weight: 600; }

.ofertas { margin: 24px 0 0; background: var(--painel); border-radius: 28px; padding: 18px 16px 16px; }
.ofertas h2 { font-size: 24px; margin: 0 0 14px 2px; }
.oferta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px; border-radius: 16px; color: #fff;
  background: linear-gradient(135deg, #00574f, #008b7d); }
.oferta + .oferta { margin-top: 10px; }
.oferta b { display: inline-block; white-space: nowrap; background: #fff; color: #00574f; font-size: clamp(22px, 7vw, 30px); font-weight: 500; padding: 2px 14px; border-radius: 10px; }
.oferta p { margin: 8px 0 0; font-size: 16px; }
.oferta svg { width: 64px; height: 64px; stroke-width: 1.8; }

/* Abas das seções (fixas no topo) */
.abas { position: sticky; top: 0; z-index: 5; background: rgba(245, 245, 245, .96); backdrop-filter: blur(8px); box-shadow: 0 2px 4px rgba(0,0,0,.08);
  display: flex; overflow-x: auto; scrollbar-width: none; margin-top: 24px; }
.abas::-webkit-scrollbar { display: none; }
.abas a { flex: none; text-decoration: none; color: var(--tinta); font-size: 16px; padding: 14px 16px 12px; white-space: nowrap;
  border-bottom: 3px solid transparent; text-transform: uppercase; }
.abas a.ativa { border-bottom-color: var(--tinta); }
@media (min-width: 760px) { .abas { justify-content: center; } }

/* Cardápio: seções em painéis cinza, produtos em 2 colunas */
.cardapio { max-width: 760px; margin: 0 auto; padding: 8px 12px 24px; }
.secao { background: var(--painel); border-radius: 28px; padding: 22px 8px 12px; margin-top: 16px; }
.secao h2 { font-size: 22px; text-align: center; text-transform: uppercase; margin-bottom: 16px; }
.produtos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 640px) { .produtos { grid-template-columns: repeat(3, 1fr); } }
.produto { position: relative; display: flex; flex-direction: column; text-align: left; width: 100%; padding: 0; border: 0;
  background: var(--cartao); border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden; }
.produto .foto { position: relative; aspect-ratio: 612 / 420; background: var(--linha); }
.produto .foto img { width: 100%; height: 100%; object-fit: cover; }
.produto .foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.45)); }
.produto h3 { position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 10px; color: #fff; font-size: 19px; line-height: 1.12;
  text-shadow: 0 1px 4px rgba(0,0,0,.6); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.produto.sem-foto h3 { position: static; color: var(--tinta); text-shadow: none; padding: 14px 12px 0; }
.produto .txt { flex: 1; display: flex; flex-direction: column; padding: 12px; gap: 10px; }
.produto p { margin: 0; color: var(--tinta); font-size: 15px; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.produto .preco { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 8px; color: var(--preco); font-size: 22px; font-weight: 500; }
.produto .preco small { color: var(--suave); font-size: 14px; margin-right: auto; white-space: nowrap; }
.produto.indisponivel { opacity: .55; }
.selo { position: absolute; z-index: 2; top: 10px; left: -4px; background: var(--novidade); color: #fff; font-size: 16px; font-weight: 500;
  padding: 3px 12px; border-radius: 6px; }

/* Barra de baixo: "Faça seu pedido" (como no Hubt) */
.barra-sacola { position: fixed; z-index: 6; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 14px; border: 0;
  border-radius: 22px 22px 0 0; background: #fff; color: var(--link); padding: 18px 24px max(18px, env(safe-area-inset-bottom));
  font-size: 19px; font-weight: 500; box-shadow: 0 -2px 10px rgba(0,0,0,.12); }
.barra-sacola svg { width: 30px; height: 30px; }
.barra-sacola strong { margin-left: auto; font-weight: 600; }
.barra-qtd { background: var(--link); color: #fff; border-radius: 999px; min-width: 26px; padding: 1px 8px; text-align: center; font-size: 14px; }

/* Folhas (diálogos) */
.folha { border: 0; padding: 0; width: 100%; max-width: 560px; max-height: 92dvh; margin: auto auto 0; border-radius: 20px 20px 0 0;
  background: var(--fundo); color: var(--tinta); display: none; flex-direction: column; overflow: hidden; }
.folha[open] { display: flex; animation: sobe .22s ease-out; }
@media (min-width: 760px) { .folha { margin: auto; border-radius: 20px; } }
.folha::backdrop { background: rgba(20, 28, 27, .5); }
@keyframes sobe { from { transform: translateY(40px); opacity: 0; } }
.folha-corpo { overflow-y: auto; padding: 0 0 16px; position: relative; flex: 1; }
.fechar { position: absolute; z-index: 2; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.92); font-size: 22px; line-height: 1; box-shadow: var(--sombra); }
#fp-foto { width: 100%; height: 240px; object-fit: cover; background: var(--massa-claro); }
.fp-texto { padding: 16px 16px 4px; }
.fp-texto h2 { font-size: 22px; }
.fp-texto p { color: var(--suave); margin: 6px 0 0; }
.grupo { margin: 12px 16px 0; background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.grupo:empty { display: none; }
.grupo-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 14px; background: var(--verde-claro); }
.grupo-cab h3 { font: 700 14px var(--texto); }
.grupo-cab small { color: var(--suave); font-size: 12px; }
.regra { flex: none; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--tinta); color: #fff; }
.regra.ok { background: #2e9d5b; }
.caixa { display: grid; grid-template-columns: repeat(var(--colunas), 1fr); gap: 6px; margin: 0; padding: 14px;
  background: var(--massa-claro); border-bottom: 1px solid var(--linha); }
.caixa i { aspect-ratio: 2 / 1; border-radius: 999px 999px 4px 4px; border: 1.5px dashed rgba(181, 101, 29, .45); }
.caixa i.cheio { border: 0; background: radial-gradient(circle at 30% 40%, #d89a55, var(--massa) 70%);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12); animation: cai .18s ease-out; }
@keyframes cai { from { transform: translateY(-6px) scale(.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .caixa i.cheio { animation: none; } }
.opcao { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--linha); }
.opcao .nome { flex: 1; }
.opcao .nome small { display: block; color: var(--suave); font-size: 12px; }
.opcao .mais-preco { color: var(--verde-escuro); font-size: 13px; font-weight: 600; }
.opcao input[type=radio], .opcao input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--verde); }
.passo { display: inline-flex; align-items: center; border: 1px solid var(--linha); border-radius: 999px; background: var(--cartao); }
.passo button { width: 34px; height: 34px; border: 0; background: none; font-size: 18px; color: var(--verde); font-weight: 700; }
.passo button:disabled { color: var(--linha); cursor: default; }
.passo span { min-width: 22px; text-align: center; font-weight: 700; }
.obs { display: block; margin: 12px 16px 0; font-weight: 600; font-size: 14px; }
.obs textarea { display: block; width: 100%; margin-top: 6px; resize: vertical; }
.folha-rodape { display: flex; gap: 12px; align-items: center; padding: 12px 16px max(12px, env(safe-area-inset-bottom));
  background: var(--cartao); border-top: 1px solid var(--linha); }
.botao { flex: 1; border: 0; border-radius: 12px; background: var(--verde); color: #fff; font-weight: 700; padding: 14px 16px;
  display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.botao:disabled { background: #9db8b7; cursor: not-allowed; }
.botao.secundario { flex: none; background: var(--verde-claro); color: var(--verde-escuro); justify-content: center; }

/* Formulários */
section[data-tela] { padding: 56px 16px 0; }
section[data-tela] h2 { font-size: 22px; margin-bottom: 14px; }
label { display: block; font-size: 13px; font-weight: 600; color: var(--suave); margin-bottom: 12px; }
input, textarea { width: 100%; margin-top: 4px; padding: 12px; border-radius: 10px; border: 1px solid var(--linha); background: var(--cartao); color: var(--tinta); font-size: 16px; }
input:focus, textarea:focus { outline: 2px solid var(--verde); outline-offset: 0; border-color: transparent; }
.invalido { border-color: var(--erro); }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.aviso { font-size: 13px; color: var(--suave); margin: 4px 0 12px; }
.aviso.erro { color: var(--erro); }
.aviso.bom { color: #2e7d4f; font-weight: 600; }
.alternar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.alternar label, .pag { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px; background: var(--cartao);
  border: 1.5px solid var(--linha); border-radius: 12px; color: var(--tinta); font-size: 15px; cursor: pointer; }
.alternar label:has(input:checked), .pag:has(input:checked) { border-color: var(--verde); background: var(--verde-claro); }
.alternar input, .pag input { width: auto; margin: 0; accent-color: var(--verde); }
.pagamentos { display: grid; gap: 10px; margin-bottom: 8px; }
.pag small { display: block; color: var(--suave); font-weight: 500; font-size: 12px; }
.cupom span { display: flex; gap: 8px; }
.cupom button { flex: none; margin-top: 4px; border: 0; border-radius: 10px; padding: 0 16px; background: var(--tinta); color: #fff; font-weight: 600; }

/* Etapas */
.etapas { position: absolute; top: 14px; left: 16px; right: 60px; display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; counter-reset: e; }
.etapas li { flex: 1; font-size: 11px; font-weight: 600; color: var(--suave); padding-top: 8px; border-top: 3px solid var(--linha); }
.etapas li.feita, .etapas li.atual { color: var(--verde-escuro); border-color: var(--verde); }

/* Itens da sacola */
.itens { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.item { display: flex; gap: 12px; background: var(--cartao); border: 1px solid var(--linha); border-radius: 14px; padding: 12px; }
.item .txt { flex: 1; min-width: 0; }
.item strong { display: block; }
.item small { color: var(--suave); display: block; font-size: 12px; }
.item .lado { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 8px; }
.vazio { text-align: center; color: var(--suave); padding: 24px 0; }

.resumo { flex-direction: column; align-items: stretch; }
.resumo dl { margin: 0; display: grid; gap: 2px; font-size: 14px; }
.resumo dl div { display: flex; justify-content: space-between; }
.resumo dt { color: var(--suave); }
.resumo dd { margin: 0; }
.resumo .total { font-size: 17px; font-weight: 800; margin-top: 4px; }
.resumo .total dt { color: var(--tinta); }
.acoes { display: flex; gap: 10px; }
.acoes .botao { justify-content: center; }

.pix { text-align: center; }
.pix img { margin: 8px auto 16px; border-radius: 12px; border: 1px solid var(--linha); background: #fff; padding: 8px; }
.pix label { text-align: left; }
.copiar { display: flex; gap: 8px; }
.copiar input { font-size: 13px; }
.copiar button { flex: none; margin-top: 4px; border: 0; border-radius: 10px; padding: 0 16px; background: var(--verde); color: #fff; font-weight: 600; }
.esperando { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--verde-escuro); }
.esperando::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--verde); border-right-color: transparent; animation: gira 1s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.pronto { text-align: center; padding-bottom: 8px; }
.pronto .ok { width: 72px; height: 72px; margin: 8px auto 16px; border-radius: 50%; background: #2e9d5b; color: #fff; font-size: 38px; display: grid; place-items: center; }
.pronto .botao { margin: 16px auto 0; }

@media (prefers-reduced-motion: reduce) { .folha[open] { animation: none; } }

/* Rodapé (como no Hubt): horário, endereço completo, contatos, redes sociais */
.rodape { max-width: 760px; margin: 8px auto 0; padding: 16px 24px 24px; color: var(--tinta); }
.rodape-item { display: flex; gap: 16px; align-items: flex-start; margin: 0 0 22px; color: var(--tinta); text-decoration: none; }
.rodape-item span { display: block; font-size: 17px; }
.rodape-item small { display: block; color: var(--suave); font-size: 16px; }
.rodape h2 { font-size: 18px; margin: 8px 0 8px; }
.rodape-contatos { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 6px; }
.rodape-contatos a { display: inline-flex; align-items: center; gap: 8px; color: var(--tinta); text-decoration: none; font-size: 18px; }
.rodape-contatos small { color: var(--suave); font-size: 15px; }
.rodape-insta { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #6b6b6b; color: #fff; }
.rodape-insta svg { width: 30px; height: 30px; }
.rodape-fim { margin: 28px 0 0; padding-top: 22px; border-top: 1px solid #c9cdd3; text-align: center; color: var(--tinta); font-size: 15px; }

/* Indisponível (bloqueado no painel) */
.produto.indisponivel { background: #f5f6f8; cursor: default; }
.produto.indisponivel .foto, .produto.indisponivel p { opacity: .55; }
.produto .preco.indisp { color: #a6a9ae; font-size: 18px; align-items: center; gap: 6px; }
.produto .preco.indisp svg { width: 22px; height: 22px; }
.opcao.indisponivel { color: #a6a9ae; }
.opcao.indisponivel .mais-preco { color: #a6a9ae; font-weight: 500; }
.selo.promo { background: #e53935; }
.alternar label:has(input:disabled) { opacity: .45; cursor: not-allowed; }