/* João do Açaí — delivery.
   Pensado primeiro para o celular, que é onde o cliente pede.

   Três ideias guiam o visual:
   1. O valor que a pessoa digita é o herói da tela — tudo cede espaço para ele.
   2. Nada aparece do nada: o que entra, entra com movimento curto e previsível.
   3. Roxo é ação. Fundo é calma. Amarelo é só para o que merece ser notado. */

:root {
  /* Cores tiradas da logo oficial */
  --roxo: #4e0057;
  --roxo-claro: #6b1276;
  --roxo-vivo: #8d1d9c;
  --roxo-fraco: #f6eef8;
  --amarelo: #ffcc02;
  --verde: #05a63a;
  --vermelho: #d64545;

  --fundo: #faf7fb;
  --branco: #fff;
  --texto: #25092c;
  --suave: #7d6a86;
  --borda: #efe6f2;

  --gradiente-marca: linear-gradient(135deg, #4e0057 0%, #7a1189 55%, #4e0057 100%);
  --gradiente-acao: linear-gradient(135deg, #5c0567 0%, #8d1d9c 100%);

  --raio: 22px;
  --raio-pequeno: 15px;
  --sombra: 0 1px 2px rgba(60, 10, 70, .04), 0 10px 28px -14px rgba(60, 10, 70, .2);
  --sombra-media: 0 2px 6px rgba(60, 10, 70, .06), 0 18px 40px -20px rgba(60, 10, 70, .3);
  --sombra-alta: 0 -10px 34px -16px rgba(60, 10, 70, .28);

  --titulo: "Outfit", -apple-system, BlinkMacSystemFont, sans-serif;
  --corpo: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Curva com um empurrãozinho no fim: dá sensação de coisa física. */
  --mola: cubic-bezier(.34, 1.56, .64, 1);
  --suavizar: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

/* Elemento com "hidden" continua escondido, mesmo que a classe dele diga
   display: flex ou grid. Sem isso, a regra do navegador perde para a classe. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  /* pan-x pan-y = rolar pode, dar zoom não. Tira a pinça e o duplo-toque de uma
     vez, sem os efeitos colaterais de cancelar toque no JavaScript. */
  touch-action: pan-x pan-y;
}

body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font-family: var(--corpo); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* o dedo arrasta a tela, não seleciona texto sem querer */
  -webkit-tap-highlight-color: transparent;
}
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
a { color: var(--roxo); }
h1, h2, h3 { font-family: var(--titulo); letter-spacing: -.02em; }

.faixa { max-width: 900px; margin: 0 auto; padding: 0 18px; }

/* Quem prefere menos animação no celular recebe a tela parada. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- entrada dos blocos ---------- */
@keyframes surgir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes surgirCurto { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pulsar { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes brilhar { to { background-position: 200% 0; } }

.entra { animation: surgir .42s var(--suavizar) both; }

/* ---------- topo ---------- */
.topo {
  position: relative;
  background: var(--gradiente-marca);
  color: var(--branco);
  padding: 24px 0 34px;
  border-radius: 0 0 30px 30px;
  overflow: hidden;
}
/* A foto do produto fica atrás da marca. O véu por cima é o que mantém a logo
   e o endereço legíveis — sem ele, texto branco sobre foto some. */
.fundo-foto { position: absolute; inset: 0; }
.fundo-foto .foto {
  position: absolute; inset: 0; opacity: 0;
  background-size: cover; background-position: center 36%;
}
/* Cada foto tem o seu enquadramento: na terceira, o copo traz a logo impressa,
   que caía bem atrás da logo do site e ficava a marca duplicada. Subindo o corte,
   aparecem as bolas de açaí, que é o que interessa. */
.fundo-foto .foto-1 { background-image: url("/img/fotos/onca.jpg"); opacity: 1; }
.fundo-foto .foto-3 { background-position: center 14%; }

/* A troca só começa quando o JS confirma que as outras duas já baixaram. */
.fundo-foto.girando .foto { animation: trocarFoto 21s infinite; }
.fundo-foto.girando .foto-2 { animation-delay: 7s; }
.fundo-foto.girando .foto-3 { animation-delay: 14s; }
@keyframes trocarFoto {
  0%, 34%  { opacity: 1; }
  40%, 94% { opacity: 0; }
  100%     { opacity: 1; }
}

.veu {
  position: absolute; inset: 0; pointer-events: none;
  /* Dois véus somados: um escurece de cima para baixo (o endereço fica no pé),
     o outro protege o canto esquerdo, onde mora a logo. Fora dessas duas zonas
     a foto aparece — é ela que dá vontade. */
  background:
    linear-gradient(180deg, rgba(30, 0, 38, .30) 0%, rgba(50, 0, 58, .26) 38%, rgba(78, 0, 87, .90) 100%),
    linear-gradient(100deg, rgba(78, 0, 87, .70) 0%, rgba(78, 0, 87, .12) 58%, rgba(78, 0, 87, 0) 100%);
}
.topo .faixa { position: relative; z-index: 1; }
.logo { width: 150px; height: auto; display: block; }
.logo-topo { display: flex; align-items: center; gap: 12px; justify-content: space-between; }

.selo {
  font-size: 12px; font-weight: 700; padding: 6px 13px; border-radius: 999px;
  background: rgba(255, 255, 255, .18); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid rgba(255, 255, 255, .16);
}
/* Bolinha que respira: a pessoa entende em meio segundo que a loja está viva. */
.selo::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; opacity: .9;
}
.selo.aberto { background: var(--verde); border-color: transparent; }
.selo.aberto::before { animation: pulsar 2s ease-in-out infinite; }
.selo.fechado { background: var(--vermelho); border-color: transparent; }

.info-loja {
  font-size: 13.5px; margin-top: 12px; display: flex; flex-wrap: wrap;
  gap: 4px 18px; color: rgba(255, 255, 255, .84);
}

/* Barra fina que aparece quando a pessoa rola: a marca e o estado da loja
   continuam à mão sem ocupar um terço da tela o tempo todo. */
.topo-fixo {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  background: rgba(78, 0, 87, .93);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  color: var(--branco); padding: 10px 0;
  transform: translateY(-100%); transition: transform .28s var(--suavizar);
  box-shadow: 0 6px 22px -14px rgba(0, 0, 0, .6);
}
.topo-fixo.aparece { transform: none; }
.topo-fixo .faixa { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.topo-fixo .logo { width: 78px; }

/* ---------- avisos ---------- */
.aviso-barra {
  background: var(--amarelo); color: #4a3800; text-align: center;
  padding: 11px 18px; font-size: 13.5px; font-weight: 600;
  animation: surgirCurto .3s var(--suavizar) both;
}
.aviso-barra.ruim { background: #ffe9e9; color: #8a1f1f; }

/* ---------- abas ---------- */
.abas {
  position: sticky; top: 0; z-index: 20;
  background: rgba(250, 247, 251, .88);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch;
}
.abas::-webkit-scrollbar { display: none; }
.abas .faixa { display: flex; gap: 8px; padding-top: 14px; padding-bottom: 12px; }
.abas button {
  border: 0; background: var(--branco); color: var(--suave);
  padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 600;
  cursor: pointer; box-shadow: var(--sombra); flex: 0 0 auto;
  transition: transform .16s var(--mola), background .18s, color .18s;
}
.abas button:active { transform: scale(.94); }
.abas button.on { background: var(--gradiente-acao); color: var(--branco); box-shadow: var(--sombra-media); }

/* Quando a barra fina do topo aparece, as abas descem para não ficar por baixo.
   A altura vem medida do próprio elemento (o JS escreve --altura-topo): chutar
   um número aqui dá errado assim que a logo ou a fonte mudam de tamanho. */
body.rolou .abas { top: var(--altura-topo, 60px); }

/* ---------- cartões ---------- */
.card {
  background: var(--branco); border: 0; border-radius: var(--raio);
  padding: 24px 20px; box-shadow: var(--sombra); margin-top: 16px;
}
.titulo-montar { margin: 0 0 4px; font-size: 23px; font-weight: 700; }
.sub-montar { margin: 0 0 20px; color: var(--suave); font-size: 14px; }
h2.secao { font-size: 18px; margin: 24px 0 12px; }

/* ---------- o valor do açaí: o herói da tela ---------- */
.valor-bloco {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #f9f0fb, #f3e6f7);
  border-radius: 18px; padding: 20px 18px; margin-bottom: 24px;
  transition: box-shadow .25s var(--suavizar);
}
.valor-bloco.valendo { box-shadow: 0 0 0 2px var(--roxo-vivo), 0 14px 30px -18px rgba(120, 20, 140, .6); }
.valor-bloco label { font-size: 13.5px; font-weight: 700; color: var(--roxo); }

.valor-linha {
  display: flex; align-items: center; gap: 10px; margin-top: 12px;
  background: var(--branco); border: 2px solid transparent; border-radius: var(--raio-pequeno);
  padding: 10px 16px; box-shadow: var(--sombra);
  transition: border-color .18s, box-shadow .18s, transform .18s var(--mola);
}
.valor-linha:focus-within { border-color: var(--roxo-vivo); transform: translateY(-1px); }
.valor-linha .cifrao {
  font-family: var(--titulo); font-size: 21px; font-weight: 700; color: var(--suave);
  transition: color .2s;
}
.valor-bloco.valendo .cifrao { color: var(--roxo); }
.valor-linha input {
  flex: 1; border: 0; padding: 6px 0; font-family: var(--titulo);
  font-size: 40px; font-weight: 800; letter-spacing: -.035em; background: none; min-width: 0;
  transition: color .2s;
}
.valor-linha input:focus { outline: none; }
.valor-linha input::placeholder { color: #cbb9d2; }

.dica-minimo { margin: 14px 0 0; font-size: 12.5px; color: var(--suave); }
.dica-minimo.erro { color: var(--vermelho); font-weight: 600; }
.dica-minimo.boa { color: var(--verde); font-weight: 600; }

/* ---------- acompanhamentos ---------- */
.grupo { margin-bottom: 24px; }
.grupo-topo {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.grupo-topo b { font-family: var(--titulo); font-size: 17px; }
.grupo-topo span { font-size: 12.5px; color: var(--suave); text-align: right; flex: 0 0 auto; }
.grupo-topo .marcados {
  color: var(--roxo); font-weight: 700; background: var(--roxo-fraco);
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
  animation: surgirCurto .25s var(--suavizar) both;
}

/* Grade de duas colunas: o dedo acerta, o olho varre. Melhor que pastilhas soltas.
   Duas colunas fixas no celular — com minmax em pixels, um aparelho estreito cai
   para uma coluna só e vira uma lista de 14 itens que não acaba mais. */
.opcoes-grade {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px;
}
@media (min-width: 560px) {
  .opcoes-grade { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
}
.opcao {
  position: relative; display: flex; align-items: center; gap: 10px; cursor: pointer;
  background: var(--fundo); border: 1.5px solid var(--borda); border-radius: var(--raio-pequeno);
  padding: 13px 14px; font-size: 14px; font-weight: 600; color: var(--texto);
  transition: transform .14s var(--mola), background .18s, border-color .18s, box-shadow .18s;
  user-select: none; min-height: 52px;
}
.opcao:active { transform: scale(.96); }
.opcao input { position: absolute; opacity: 0; pointer-events: none; }
/* A bolinha de marcar, desenhada no CSS — sem imagem, sem biblioteca. */
.opcao::before {
  content: ""; flex: 0 0 auto; width: 21px; height: 21px; border-radius: 50%;
  border: 2px solid #d9c9df; background: var(--branco);
  transition: background .18s, border-color .18s, transform .18s var(--mola);
}
.opcao::after {
  content: ""; position: absolute; left: 19px; top: 50%;
  width: 5px; height: 10px; border: solid var(--roxo); border-width: 0 2.5px 2.5px 0;
  transform: translateY(-65%) rotate(45deg) scale(0); transform-origin: center;
  transition: transform .2s var(--mola);
}
.opcao .nome { flex: 1; min-width: 0; line-height: 1.25; }
.opcao.on {
  background: var(--roxo-fraco); border-color: var(--roxo-vivo); color: var(--roxo);
  box-shadow: 0 6px 18px -12px rgba(120, 20, 140, .7);
}
.opcao.on::before { background: var(--amarelo); border-color: var(--amarelo); transform: scale(1.04); }
.opcao.on::after { transform: translateY(-65%) rotate(45deg) scale(1); }
.opcao .valor { font-size: 12.5px; font-weight: 700; color: var(--verde); }
.opcao.bloqueada { opacity: .38; pointer-events: none; }

/* Passou do limite: o contador fica vermelho em vez de roxo. */
.grupo-topo .marcados.demais { background: #ffe9e9; color: #8a1f1f; }

/* Quantos acompanhamentos já foram marcados, no alto da lista. */
.contador-acomp {
  display: inline-block; margin-bottom: 10px; padding: 7px 14px; border-radius: 999px;
  background: var(--roxo-fraco); color: var(--roxo); font-size: 13px; font-weight: 700;
  transition: background .2s, color .2s;
}
.contador-acomp.cheio { background: var(--amarelo); color: #4a3800; }
.contador-acomp.demais { background: #ffe9e9; color: #8a1f1f; }


/* ---------- itens de preço fixo ---------- */
.sub-categoria {
  font-family: var(--titulo); font-size: 13px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--suave); margin: 22px 0 10px; font-weight: 600;
}
.sub-categoria:first-child { margin-top: 4px; }
.produtos, .lista-extras { display: grid; gap: 12px; }
.produto {
  display: flex; gap: 14px; align-items: center; width: 100%; text-align: left;
  background: var(--branco); border: 1.5px solid transparent; border-radius: var(--raio-pequeno);
  padding: 16px; box-shadow: var(--sombra);
  transition: transform .14s var(--mola), border-color .2s, box-shadow .2s;
}
.produto:active { transform: scale(.99); }
.produto.no-carrinho { border-color: var(--roxo-vivo); box-shadow: var(--sombra-media); }
.produto .txt { flex: 1; min-width: 0; }
.produto b { display: block; font-family: var(--titulo); font-size: 16px; font-weight: 600; }
.produto p { margin: 3px 0 0; font-size: 13.5px; color: var(--suave); }
.produto .preco, .preco-linha {
  font-family: var(--titulo); font-weight: 700; color: var(--roxo); white-space: nowrap;
}
.preco-linha { display: block; margin-top: 6px; font-size: 17px; }
.etiqueta {
  display: inline-block; background: var(--amarelo); color: #4a3800; font-size: 10px;
  font-weight: 800; padding: 3px 9px; border-radius: 999px; margin-bottom: 5px;
  text-transform: uppercase; letter-spacing: .05em;
}

/* ---------- botões ---------- */
.botao {
  position: relative; overflow: hidden;
  background: var(--gradiente-acao); color: var(--branco); border: 0;
  border-radius: var(--raio-pequeno); padding: 16px 20px;
  font-family: var(--titulo); font-size: 16.5px; font-weight: 600;
  cursor: pointer; width: 100%;
  box-shadow: 0 10px 26px -14px rgba(120, 20, 140, .9);
  transition: transform .14s var(--mola), opacity .15s, box-shadow .2s, background .2s;
}
.botao:active { transform: scale(.98); }
.botao:disabled {
  background: #ece3ef; color: #a595ac; cursor: not-allowed; box-shadow: none;
}
.botao.claro {
  background: var(--branco); color: var(--roxo); box-shadow: var(--sombra);
  border: 1.5px solid var(--borda);
}
.botao.zap { background: linear-gradient(135deg, #05a63a, #17c052); box-shadow: 0 10px 26px -14px rgba(5, 166, 58, .9); }
.botao.pequeno { width: auto; padding: 11px 16px; font-size: 14px; border-radius: 12px; }
/* O botão principal, quando fica pronto para usar, pisca uma vez só. */
.botao.pronto { animation: pulsar .5s var(--mola) 1; }

.qtd {
  display: flex; align-items: center; gap: 2px; background: var(--fundo);
  border-radius: 999px; padding: 4px;
}
.qtd button {
  width: 36px; height: 36px; border: 0; background: var(--branco); color: var(--roxo);
  border-radius: 50%; font-size: 18px; font-weight: 700; cursor: pointer;
  box-shadow: var(--sombra); transition: transform .14s var(--mola);
}
.qtd button:active { transform: scale(.88); }
.qtd b { min-width: 26px; text-align: center; font-family: var(--titulo); }

/* ---------- barra do pedido ---------- */
.barra-carrinho {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: var(--sombra-alta);
  border-radius: 24px 24px 0 0;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, .7);
}
.barra-carrinho .faixa { display: flex; align-items: center; gap: 12px; padding: 0; }
.linha-carrinho {
  display: flex; align-items: center; gap: 10px; width: 100%; background: var(--roxo-fraco);
  border: 0; border-radius: var(--raio-pequeno); padding: 13px 16px; font-size: 14px;
  cursor: pointer; color: var(--texto); text-align: left; font-weight: 600;
  animation: surgirCurto .3s var(--suavizar) both;
  transition: transform .14s var(--mola), background .18s;
}
.linha-carrinho:active { transform: scale(.985); }
.linha-carrinho b { margin-left: auto; font-family: var(--titulo); color: var(--roxo); font-size: 16px; }
.linha-carrinho .ver { color: var(--roxo); font-weight: 700; font-size: 13px; }
/* O total salta de leve toda vez que muda — confirma que o toque funcionou. */
.linha-carrinho b.mudou { animation: pulsar .34s var(--mola) 1; }

/* ---------- folhas (modais) ---------- */
dialog.folha {
  border: 0; padding: 0; width: 100%; max-width: 520px;
  border-radius: 28px 28px 0 0; margin: auto auto 0; background: var(--branco);
  color: var(--texto); overflow: hidden;
  /* dvh conta a barra do navegador do celular; vh fica de reserva para o antigo */
  max-height: 92vh;
  max-height: 92dvh;
}
/* Só a janela aberta vira flex — senão ela apareceria fechada. O miolo estica e
   rola sozinho, e o rodapé com o botão nunca é cortado, por maior que fique o pedido. */
dialog.folha[open] { display: flex; flex-direction: column; animation: subirFolha .34s var(--suavizar) both; }
@keyframes subirFolha { from { transform: translateY(100%); } to { transform: none; } }
dialog.folha::backdrop { background: rgba(30, 10, 45, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.folha-corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 16px 16px; -webkit-overflow-scrolling: touch; }
.folha-topo {
  flex: 0 0 auto; position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 22px 18px 14px; background: var(--branco); z-index: 2;
}
/* Puxador, como nas folhas dos aplicativos — diz "isto sobe e desce". */
.folha-topo::before {
  content: ""; position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 38px; height: 4px; border-radius: 999px; background: #e6dbea;
}
.folha-topo h3 { margin: 0; font-size: 20px; font-weight: 700; }
.fechar {
  border: 0; background: var(--roxo-fraco); color: var(--roxo); width: 36px; height: 36px;
  border-radius: 50%; font-size: 17px; cursor: pointer; line-height: 1;
  transition: transform .14s var(--mola), background .18s;
}
.fechar:active { transform: scale(.9); }
.folha-pe {
  flex: 0 0 auto;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
  background: var(--branco); box-shadow: 0 -8px 20px -14px rgba(60, 10, 70, .3);
  display: flex; gap: 10px; align-items: center;
}
.folha-pe .botao { white-space: nowrap; }
.folha-pe .botao.claro { flex: 0 0 auto; }

/* ---------- formulário ---------- */
label.campo { display: block; margin-bottom: 14px; font-size: 13px; font-weight: 600; color: var(--suave); }
label.campo input, label.campo select, label.campo textarea {
  /* 16px não é capricho: com menos que isso o iPhone dá zoom sozinho assim que
     o cliente toca no campo — e não desfaz depois. Era este o zoom que mais
     atrapalhava, e ele acontecia sem ninguém pedir. */
  font-size: 16px;
  width: 100%; margin-top: 6px; padding: 14px; border: 1.5px solid var(--borda);
  border-radius: 13px; background: var(--fundo); font-weight: 500; color: var(--texto);
  transition: border-color .16s, background .16s, box-shadow .16s;
}
label.campo input:focus, label.campo select:focus {
  outline: none; border-color: var(--roxo-vivo); background: var(--branco);
  box-shadow: 0 0 0 3px rgba(141, 29, 156, .1);
}
label.campo input.faltando { border-color: var(--vermelho); background: #fff6f6; }
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dupla > * { min-width: 0; }
.escolha-linha { display: flex; gap: 8px; margin-bottom: 14px; }
.escolha-linha button {
  flex: 1; padding: 14px 10px; border: 1.5px solid var(--borda); background: var(--fundo);
  border-radius: 13px; font-weight: 600; cursor: pointer; font-size: 14px;
  transition: transform .14s var(--mola), background .18s, color .18s, border-color .18s;
}
.escolha-linha button:active { transform: scale(.96); }
.escolha-linha button.on {
  background: var(--gradiente-acao); color: var(--branco); border-color: transparent;
  box-shadow: 0 8px 20px -14px rgba(120, 20, 140, .9);
}

/* ---------- itens do carrinho ---------- */
.item-carrinho {
  display: flex; gap: 10px; padding: 14px; margin-bottom: 8px;
  background: var(--fundo); border-radius: var(--raio-pequeno);
  animation: surgirCurto .26s var(--suavizar) both;
}
.item-carrinho .txt { flex: 1; min-width: 0; }
.item-carrinho b { font-family: var(--titulo); font-size: 15px; font-weight: 600; }
.item-carrinho small { color: var(--suave); font-size: 12px; display: block; margin-top: 2px; }
.item-carrinho .direita { text-align: right; }
.item-carrinho .direita b { display: block; color: var(--roxo); font-size: 16px; }
.remover { border: 0; background: none; color: var(--vermelho); font-size: 12px; cursor: pointer; padding: 4px 0; }

.contas { margin-top: 14px; font-size: 14px; }
.contas div { display: flex; justify-content: space-between; padding: 4px 0; color: var(--suave); }
.contas div.total {
  font-family: var(--titulo); font-size: 22px; font-weight: 700; color: var(--texto);
  padding-top: 12px; border-top: 1.5px dashed var(--borda); margin-top: 8px;
}

.vazio { text-align: center; color: var(--suave); padding: 30px 10px; font-size: 14px; }
.erro-caixa {
  background: #ffe9e9; color: #8a1f1f; padding: 13px 15px; border-radius: 13px;
  font-size: 13.5px; margin-bottom: 14px; font-weight: 500;
  animation: surgirCurto .26s var(--suavizar) both;
}
.rodape { text-align: center; color: var(--suave); font-size: 12px; padding: 28px 16px 20px; }

/* ---------- abas do cliente (açaí / doces / bebidas) ---------- */
.abas-cliente { position: sticky; top: 0; z-index: 20; }
.secao-cliente { display: none; }
.secao-cliente.ativa { display: block; animation: surgir .34s var(--suavizar) both; }
.lista-extras { display: grid; gap: 10px; }
.lista-extras .produto { cursor: default; }

/* ---------- esqueleto: o que ocupa o lugar enquanto o cardápio não chega ----------
   Sem isto a tela fica branca por um segundo e o site parece quebrado no 4G. */
.osso {
  background: linear-gradient(90deg, #f0e9f2 25%, #f8f3fa 50%, #f0e9f2 75%);
  background-size: 200% 100%;
  animation: brilhar 1.3s linear infinite;
  border-radius: 12px;
}
.osso-linha { height: 14px; margin-bottom: 10px; }
.osso-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
@media (min-width: 560px) {
  .osso-grade { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
}
.osso-grade .osso { height: 52px; border-radius: var(--raio-pequeno); }

/* ---------- pedido enviado: o momento que merece uma comemoração ---------- */
.festa { text-align: center; padding: 8px 0 18px; }
.festa .marca-certo {
  width: 74px; height: 74px; margin: 0 auto 16px; border-radius: 50%;
  background: linear-gradient(135deg, #05a63a, #17c052); position: relative;
  box-shadow: 0 14px 34px -16px rgba(5, 166, 58, .9);
  animation: surgir .4s var(--mola) both;
}
.festa .marca-certo::after {
  content: ""; position: absolute; left: 27px; top: 18px;
  width: 16px; height: 30px; border: solid #fff; border-width: 0 5px 5px 0;
  transform: rotate(45deg) scale(0); transform-origin: center;
  animation: certo .35s var(--mola) .22s forwards;
}
@keyframes certo { to { transform: rotate(45deg) scale(1); } }
.festa .rotulo { font-size: 13px; color: var(--suave); }
.festa .codigo {
  font-family: var(--titulo); font-size: 38px; font-weight: 800;
  color: var(--roxo); letter-spacing: .08em; line-height: 1.1;
}

/* ---------- acompanhar pedido ---------- */
.trilha { list-style: none; margin: 18px 0 0; padding: 0; }
.trilha li {
  position: relative; padding: 0 0 22px 32px; color: var(--suave); font-size: 14px;
}
.trilha li::before {
  content: ""; position: absolute; left: 4px; top: 4px; width: 13px; height: 13px;
  border-radius: 50%; background: var(--branco); border: 2.5px solid var(--borda);
}
/* Fio que liga um passo ao outro. O último não precisa. */
.trilha li::after {
  content: ""; position: absolute; left: 10px; top: 19px; bottom: 0; width: 2px;
  background: var(--borda);
}
.trilha li:last-child { padding-bottom: 0; }
.trilha li:last-child::after { display: none; }
.trilha li.feito { color: var(--texto); font-weight: 600; }
.trilha li.feito::before { background: var(--verde); border-color: var(--verde); }
.trilha li.feito::after { background: var(--verde); }
.trilha li.agora::before {
  background: var(--roxo-vivo); border-color: var(--roxo-vivo);
  box-shadow: 0 0 0 5px rgba(141, 29, 156, .16);
  animation: pulsar 1.8s ease-in-out infinite;
}
.trilha li.agora { color: var(--roxo); font-weight: 700; }

/* ---------- localização do cliente ----------
   É etapa obrigatória da entrega, então tem peso de etapa: cor de aviso e
   texto explicando o porquê antes de o navegador perguntar. */
.bloco-local {
  background: #fff8e8; border: 1.5px solid var(--amarelo);
  border-radius: var(--raio-pequeno); padding: 16px; margin-bottom: 14px;
}
.bloco-local.pronto { background: #eefaf1; border-color: var(--verde); }
.titulo-local { margin: 0 0 6px; font-family: var(--titulo); font-size: 15px; font-weight: 700; }
.como-liberar { margin-top: 10px; font-size: 12.5px; color: var(--suave); }
.como-liberar summary { cursor: pointer; font-weight: 700; color: var(--roxo); }
.como-liberar p { margin: 8px 0 0; line-height: 1.5; }
.bloco-local .botao { width: 100%; }
.recado-local { margin: 10px 0 0; font-size: 12.5px; color: var(--suave); line-height: 1.45; }
.recado-local.boa { color: var(--verde); font-weight: 600; }
.recado-local.ruim { color: var(--vermelho); font-weight: 600; }
.bloco-local.sem-local { background: var(--fundo); border-color: var(--borda); border-style: dashed; }
#seguirSemLocal { width: 100%; margin-top: 10px; }
.dica-acompanhar { font-size: 12.5px; color: var(--suave); line-height: 1.45; margin: 2px 2px 0; }
/* A hora de cada passo, à direita: é o que transforma "saiu para entrega" em
   informação — saber que saiu às 20:31 e não em algum momento do passado. */
.trilha .hora-passo { float: right; font-size: 12.5px; color: var(--suave); font-weight: 600; }

/* ---------- "seu pedido está a caminho" ----------
   Fica acima do cardápio, não no rodapé: quem volta ao site com um pedido
   andando quer isso primeiro, e ninguém rola a lista inteira para encontrar. */
.faixa-meu-pedido {
  display: flex; align-items: center; gap: 12px; width: calc(100% - 32px);
  margin: 16px auto 0; padding: 14px 16px; border: 0; cursor: pointer;
  max-width: 560px; text-align: left; font-family: inherit;
  background: var(--gradiente-marca); color: var(--branco);
  border-radius: var(--raio); box-shadow: var(--sombra-media);
}
.faixa-meu-pedido:active { transform: scale(.99); }
.faixa-meu-pedido .dizeres { flex: 1; min-width: 0; }
.faixa-meu-pedido b { display: block; font-family: var(--titulo); font-size: 15.5px; }
.faixa-meu-pedido small { font-size: 12.5px; opacity: .85; }
.faixa-meu-pedido .seta { font-size: 24px; opacity: .8; line-height: 1; }

/* O ponto pulsando diz "isto está acontecendo agora", sem precisar escrever. */
.faixa-meu-pedido .ponto {
  flex: 0 0 auto; width: 11px; height: 11px; border-radius: 50%;
  background: var(--amarelo); animation: pulso-pedido 1.6s ease-in-out infinite;
}
@keyframes pulso-pedido {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 204, 2, .7); }
  70%      { box-shadow: 0 0 0 9px rgba(255, 204, 2, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .faixa-meu-pedido .ponto { animation: none; }
}

/* ---------- "Rastrear" ao lado das categorias ----------
   Amarelo da marca de propósito: as categorias são pílulas brancas e a
   escolhida é roxa, então qualquer outra cor aqui seria lida como "mais uma
   categoria". Amarelo não é nenhuma das duas coisas — o olho separa antes de
   ler a palavra.

   Ele fica parado à direita e as categorias PASSAM POR BAIXO dele. A rolagem
   ocupa a largura toda: encurtá-la para caber o botão ao lado fazia a última
   categoria desaparecer da barra. O que reserva o lugar é um espaço no fim da
   rolagem, do tamanho exato do botão — medido pelo JS, porque chutar aqui é
   como a última categoria acaba sempre meio escondida. */
.abas-cliente { overflow: visible; }
.trilho-abas { position: relative; }
.rolagem-abas {
  display: flex; gap: 8px;
  overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch;
  padding-right: var(--espaco-rastrear, 132px);
}
.rolagem-abas::-webkit-scrollbar { display: none; }

/* As cortinas das pontas.
   
   Não são enfeite: são o único aviso de que a fila anda. Sem elas a categoria
   somia embaixo do botão num corte seco, e o cliente lia aquilo como defeito
   de tela, não como "tem mais coisa para o lado". Cada uma só aparece quando
   existe conteúdo escondido daquele lado — cortina acesa com a fila no fim
   prometeria uma categoria que não existe. */
.trilho-abas::before,
.trilho-abas::after {
  content: ''; position: absolute; top: 0; bottom: 0; pointer-events: none;
  opacity: 0; transition: opacity .25s; z-index: 1;
}
.trilho-abas::before {
  left: 0; width: 42px;
  background: linear-gradient(to left, rgba(250, 247, 251, 0) 0%, rgba(250, 247, 251, .95) 70%);
}
.trilho-abas::after {
  right: 0; width: calc(var(--espaco-rastrear, 132px) + 24px);
  background: linear-gradient(to right, rgba(250, 247, 251, 0) 0%, rgba(250, 247, 251, .92) 42%);
}
.trilho-abas.tem-antes::before { opacity: 1; }
.trilho-abas.tem-depois::after { opacity: 1; }

.abas button.aba-rastrear {
  /* 18px é a margem lateral da página (.faixa). Posição absoluta conta a
     partir da borda do elemento, não de dentro do padding, então sem isto o
     botão encostava na lateral da tela enquanto todo o resto respeitava a
     margem. */
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%); z-index: 2;
  background: var(--amarelo); color: #4a3800; font-weight: 800;
  box-shadow: 0 6px 18px -8px rgba(120, 20, 140, .45);
}
.abas button.aba-rastrear:hover { background: #ffd733; }
.abas button.aba-rastrear:active { transform: translateY(-50%) scale(.94); }

/* Pedir o código na loja, dentro da folha de acompanhar. */
.botao.pedir-codigo {
  display: block; margin-top: 12px; text-align: center; text-decoration: none;
  font-size: 14.5px; padding: 13px 16px;
}

/* O código na tela de pedido enviado: tocável, porque copiar é mais confiável
   do que decorar — e é o que o cliente vai colar no WhatsApp. */
.codigo-copiar { border: 0; cursor: pointer; background: none; font: inherit; color: inherit; padding: 0; }
.codigo-copiar:active { transform: scale(.97); }
.guarde-o-codigo {
  background: #fff6e5; border: 1.5px solid var(--amarelo); border-radius: var(--raio-pequeno);
  padding: 12px 14px; margin: 14px 0 0; font-size: 13px; line-height: 1.5;
  color: #6b5100; text-align: left;
}

/* ---------- o pontinho do entregador ---------- */
#caixaMapa { margin: 0 0 16px; }
#mapaEntrega {
  height: 210px; border-radius: var(--raio-pequeno); overflow: hidden;
  background: #ece6ef; box-shadow: var(--sombra);
}
.recado-mapa { font-size: 13px; margin: 9px 2px 0; line-height: 1.45; color: var(--texto); }
.recado-mapa b { color: var(--roxo); }
/* Sinal velho: o recado fica âmbar e diz o que está acontecendo, em vez de
   deixar um ponto parado passando por ao vivo. */
.recado-mapa.frio { color: #8a6100; }

/* O ponto do entregador, desenhado sem imagem para não pesar no 4G. */
.pino-entregador {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--roxo-vivo); border: 3px solid #fff;
  box-shadow: 0 0 0 2px rgba(141, 29, 156, .35), 0 3px 8px rgba(0, 0, 0, .35);
}
.pino-entregador.frio { background: var(--suave); }

/* ---------- "oi, fulano" no cabeçalho ----------
   É aqui que o cliente descobre que existe um cadastro dele — sem nunca ter
   preenchido um. Por isso não diz "conta" nem "cadastro": diz o nome dele e
   oferece o que aquilo serve para fazer. */
.chapeu-cliente {
  display: flex; align-items: center; gap: 10px; margin-top: 12px;
  border: 0; cursor: pointer; font-family: inherit; text-align: left;
  background: rgba(255, 255, 255, .16); color: var(--branco);
  padding: 8px 14px 8px 8px; border-radius: 999px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.chapeu-cliente:active { transform: scale(.97); }
.chapeu-cliente .inicial {
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
  background: rgba(255, 255, 255, .22);
  display: grid; place-items: center; font-size: 16px;
  font-family: var(--titulo); font-weight: 800;
}
/* Quem o site conhece ganha a inicial em amarelo — some no meio da foto do
   cabeçalho se ficar branca, e é a marca de que ele foi reconhecido. */
.chapeu-cliente .inicial.tem-nome { background: var(--amarelo); color: #4a3800; }
.chapeu-cliente .seta { font-size: 20px; opacity: .7; line-height: 1; margin-left: 2px; }
.chapeu-cliente .oi { font-size: 13.5px; line-height: 1.2; }
.chapeu-cliente .oi b { font-family: var(--titulo); font-size: 15px; }
.chapeu-cliente .oi small { display: block; font-size: 11.5px; opacity: .85; }

/* ---------- minha conta ---------- */
.meu-endereco {
  background: var(--roxo-fraco); border-radius: var(--raio-pequeno);
  padding: 14px 16px; margin-bottom: 4px;
}
.meu-endereco span { font-size: 12px; color: var(--suave); font-weight: 600; }
.meu-endereco b { display: block; font-family: var(--titulo); font-size: 16px; margin: 2px 0; }
.meu-endereco small { display: block; font-size: 12.5px; color: var(--suave); }
.meu-endereco .fraco { margin-top: 6px; font-size: 11.5px; }

.meus-pedidos { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.meus-pedidos li {
  background: var(--branco); border: 1.5px solid var(--borda);
  border-radius: var(--raio-pequeno); padding: 13px 15px;
}
.meu-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.meu-topo b { font-family: var(--titulo); font-size: 16px; color: var(--roxo); }
.meu-topo span { font-size: 12.5px; color: var(--suave); }
.meus-itens { font-size: 13.5px; margin: 5px 0 10px; line-height: 1.4; }
.botao.repetir { width: 100%; }
.fraco { color: var(--suave); }

/* Quando o cliente bloqueou os avisos: o caminho de volta, escrito curto. */
.avisos-bloqueados {
  background: var(--fundo); border: 1.5px dashed var(--borda);
  border-radius: var(--raio-pequeno); padding: 13px 15px; margin: 4px 0 6px;
}
.avisos-bloqueados b { font-family: var(--titulo); font-size: 14.5px; }
.avisos-bloqueados ol {
  margin: 8px 0 0; padding-left: 20px; font-size: 13px; line-height: 1.6; color: var(--suave);
}

/* ---------- avisos no celular ---------- */
.botao.avisar {
  width: 100%; margin: 4px 0 6px; line-height: 1.25;
  background: var(--gradiente-acao);
}
.botao.avisar small { display: block; font-size: 11.5px; font-weight: 500; opacity: .9; }
.avisos-ligados {
  background: rgba(5, 166, 58, .1); border: 1.5px solid rgba(5, 166, 58, .35);
  border-radius: var(--raio-pequeno); padding: 12px 14px; margin: 4px 0 6px;
  font-size: 13px; color: #0a7a30; font-weight: 600; line-height: 1.45;
}
.link-fraco {
  border: 0; background: none; cursor: pointer; font: inherit;
  color: var(--suave); text-decoration: underline; padding: 0 0 0 4px;
}