/* ==========================================================
   Ligeiro - estilo "totem de autoatendimento"
   Regras que guiam tudo aqui:
     - botao grande: dedo grosso acerta de primeira (min 60px)
     - texto grande (17px+), palavra do dia a dia, nada de jargao
     - uma decisao por tela; passo numerado; senha grande no fim
     - limpo como o totem do McDonald's: fundo claro, cartao branco,
       UMA cor forte guardada para o que precisa de toque
   ========================================================== */

/* Letra do PC (Bahnschrift, so existe no Windows) com a medida acertada: as maiusculas ficam no meio da linha,
   entao o texto fica no meio de qualquer botao, selo ou etiqueta. A altura total da linha nao muda (1.2).
   Celular nao tem essa letra e segue para Roboto / a do sistema, que ja sao centradas. */
@font-face { font-family: "Ligeiro Display"; src: local("Bahnschrift"); font-weight: 300 700; ascent-override: 95.5%; descent-override: 24.5%; line-gap-override: 0%; }
:root {
  --bg: #FAFDF6;
  --card: #FFFFFF;
  --ink: #0E1F14;
  --body: #3B4A3F;
  --muted: #6F7D72;
  --line: #DCE7D3;
  --line-forte: #B9CBAB;
  --lime: #84CC16;
  --lime-escuro: #5E9A0C;
  --lime-suave: #EEF9DC;
  --deep: #0F3D2E;
  --deep2: #1B6B4A;
  --orange: #FF8A3D;
  --orange-suave: #FFF1E7;
  --lemon: #FDE047;
  --lime2: #A3E635; /* verde-limao claro, para texto e ponto em cima do verde escuro (topo das cidades) */
  --erro: #C0392B;
  --erro-suave: #FDECEA;
  --whats: #25D366;
  --texto-no-destaque: #0E1F14; /* texto em cima da cor forte; vira branco em cor escura */

  --display: "Ligeiro Display", Bahnschrift, "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
  --corpo: "Segoe UI", Roboto, system-ui, -apple-system, Arial, sans-serif;

  --raio: 18px;
  --raio-p: 12px;
  --sombra: 0 6px 20px rgba(14, 31, 20, 0.07);
  --margem: 16px;
  --altura-barra: 0px;
  --altura-topo: 64px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; min-height: 100%; }
/* janela ou video aberto: a pagina para de rolar e o lugar da barra de rolagem vira espaco (nada anda para o lado) */
html.rolagem-travada { overflow: hidden; padding-right: var(--trava, 0px); }
body {
  font-family: var(--corpo);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, .display { font-family: var(--display); font-weight: 700; line-height: 1.15; margin: 0; letter-spacing: -0.2px; }
h1 { font-size: 28px; }
h2 { font-size: 22px; }
h3 { font-size: 19px; }
p { margin: 0; }
button { font-family: inherit; font-size: inherit; color: inherit; cursor: pointer; } /* color: no iPhone botao sem cor fica azul */
a { color: var(--deep2); }
input, select, textarea { font-family: inherit; font-size: 18px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 4px solid var(--lemon); outline-offset: 2px;
}
.oculto-visual { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; pointer-events: none; }

/* ---------- Estrutura ---------- */

.app { max-width: 720px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.app.larga { max-width: 1180px; }
.tela { display: none; flex: 1; flex-direction: column; animation: entrar 0.22s ease-out; padding-bottom: calc(var(--altura-barra) + 24px); }
.tela.ativa { display: flex; }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.conteudo { padding: 16px var(--margem) 30px; display: flex; flex-direction: column; gap: 16px; }
.centro { text-align: center; }
.muted { color: var(--muted); }
.pequeno { font-size: 15px; }
.forte { font-weight: 700; }

/* ---------- Cabecalho de tela ---------- */

.topo {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  padding: 10px var(--margem);
  background: var(--card);
  border-bottom: 1px solid var(--line);
  min-height: var(--altura-topo);
}
.topo .voltar {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex: none;
  border: 1.5px solid var(--line-forte); border-radius: 14px;
  background: var(--card); color: var(--ink);
  font-size: 22px; font-weight: 700; line-height: 1;
}
.topo .voltar:active { transform: translateY(1px); }
.topo-texto { flex: 1; min-width: 0; }
.topo-titulo { font-family: var(--display); font-size: 21px; font-weight: 700; line-height: 1.15; }
.topo-passo { font-size: 12.5px; font-weight: 700; color: var(--deep2); letter-spacing: 0.08em; text-transform: uppercase; }
.topo .acao { flex: none; }

/* ---------- Botoes ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 60px; padding: 12px 22px;
  border: 0; border-radius: var(--raio);
  font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: 0.1px;
  line-height: 1.2; /* link e botao iguais (o link herdava 1.5 da pagina); fixo, para o emoji nao empurrar o texto */
  color: var(--ink); background: var(--lime);
  text-decoration: none; position: relative; overflow: hidden; cursor: pointer;
  transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.16s, filter 0.16s;
}
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(14, 31, 20, 0.14); filter: brightness(1.03); }
}
.btn:active { transform: translateY(2px) scale(0.985); box-shadow: none; transition-duration: 0.05s; }
.btn:focus-visible { outline: 3px solid var(--deep); outline-offset: 2px; }
/* brilho que atravessa o botao principal: chama o olho sem gritar */
/* anda com transform (a placa de video faz sozinha): com "left" o celular recalculava a pagina a cada quadro, sem parar.
   -150% e 325% da largura do brilho = -60% e 130% do botao, o mesmo caminho de antes */
.btn-principal::after, .btn-whats::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent); transform: translateX(-150%) skewX(-20deg); animation: brilho 5s ease-in-out infinite; pointer-events: none; }
@keyframes brilho { 0%, 70% { transform: translateX(-150%) skewX(-20deg); } 90%, 100% { transform: translateX(325%) skewX(-20deg); } }
.btn-gigante { animation: pulsar 2.6s ease-in-out infinite; }
@keyframes pulsar { 0%, 100% { box-shadow: 0 0 0 0 rgba(132, 204, 22, 0.45); } 60% { box-shadow: 0 0 0 12px rgba(132, 204, 22, 0); } }
@media (hover: hover) { .btn-gigante:hover { animation: none; } }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn-principal { background: var(--lime); color: var(--texto-no-destaque); }
.btn-escuro { background: var(--deep); color: #fff; }
.btn-fantasma { background: var(--card); color: var(--ink); border: 1.5px solid var(--line-forte); }
.btn-whats { background: var(--whats); color: #fff; }
.btn-erro { background: var(--erro-suave); color: var(--erro); border: 1.5px solid #F3C4BE; }
.btn-largo { width: 100%; }
.btn-pequeno { min-height: 44px; padding: 8px 16px; font-size: 16px; border-radius: var(--raio-btn-p, 12px); }
.btn-gigante { min-height: 76px; font-size: 22px; border-radius: var(--raio-btn-g, 22px); }
@media (max-width: 360px) { .btn-gigante { font-size: 18px; padding-left: 14px; padding-right: 14px; } } /* celular pequeno: o botao grande nao quebra linha */
.btn .sub { display: block; font-family: var(--corpo); font-weight: 600; font-size: 14px; opacity: 0.8; }
.pilha { display: flex; flex-direction: column; gap: 12px; }
.pilha > .linha-produto.opcao { margin-top: 0; } /* adicional no painel: o vao e so o da lista (12), sem os 8 da opcao do cliente */
.linha-botoes { display: flex; gap: 12px; flex-wrap: wrap; }
.linha-botoes .btn { flex: 1; }

/* ---------- Cartoes ---------- */

.cartao { background: var(--card); border: 1px solid var(--line); border-radius: var(--raio); padding: 18px; }
.cartao.destaque { border-color: var(--lime); background: var(--lime-suave); }
.cartao h3 { margin-bottom: 6px; }
/* botoes dentro de um cartao: respiro fixo depois do texto */
.cartao > .linha-botoes { margin-top: 12px; }
.cartao > .aviso-no-cartao { margin-top: 12px; }
/* assinatura no painel: botao do tamanho do texto, alinhado com ele (nao estica) */
.acoes-assinatura { align-items: center; }
.acoes-assinatura .btn { flex: 0 1 auto; min-width: 200px; }
@media (max-width: 600px) { .acoes-assinatura .btn { flex: 1 1 100%; } }
.selo { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 14px; font-weight: 700; background: var(--lime-suave); color: var(--deep2); }
.selo.fechado { background: var(--erro-suave); color: var(--erro); }
.selos { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.selo.laranja { background: var(--orange-suave); color: #B4501A; }
.selo.cinza { background: #EEF1EC; color: var(--muted); }
.selo.selo-oficial { background: #FDE68A; color: #3F2A00; }

.selo .bolinha { width: 9px; height: 9px; border-radius: 50%; background: var(--lime-escuro); }
.selo.fechado .bolinha { background: var(--erro); }
/* avaliacoes no Google: e um link, entao fundo branco com contorno (sombra por dentro, nao borda: a borda somaria 2px e o selo
   ficaria mais alto que o "Aberto agora" do lado) e estrela dourada */
a.selo-google { background: var(--card); color: var(--deep2); box-shadow: inset 0 0 0 1px var(--line-forte); text-decoration: none; }
a.selo-google:hover { background: var(--lime-suave); }
.selo-google-estrela { flex: none; color: #E8A317; }
/* selos da abertura: bolinha e estrela no meio das MAIUSCULAS do texto, nao no meio da caixa (cada fonte deixa a letra
   um pouco acima ou abaixo do meio: Nunito 0,8 px acima, Segoe 0,5 px abaixo). O icone senta na linha de base do texto,
   desce metade da propria altura e sobe metade da altura das maiusculas (cap; sem suporte, 0,35em da quase o mesmo).
   A margem negativa tira o icone da conta da altura: o selo continua do tamanho do texto. */
#tela-inicio .selos .selo { align-items: baseline; }
#tela-inicio .selos .selo > .bolinha, #tela-inicio .selos .selo > .selo-google-estrela {
  --icone: 9px;
  margin-top: calc(-1 * var(--icone));
  position: relative;
  top: calc(var(--icone) / 2 - 0.35em);
  top: calc(var(--icone) / 2 - 0.5cap);
}
#tela-inicio .selos .selo > .selo-google-estrela { --icone: 15px; }

/* ---------- Escolhas grandes (uma decisao por tela) ---------- */

.escolhas { display: flex; flex-direction: column; gap: 12px; padding: 16px var(--margem); }
.escolha-grande {
  display: flex; align-items: center; gap: 16px; width: 100%; text-align: left;
  min-height: 92px; padding: 18px 20px;
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.escolha-grande { cursor: pointer; transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.16s, border-color 0.16s; }
@media (hover: hover) { .escolha-grande:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(14, 31, 20, 0.12); border-color: var(--lime); } }
.escolha-grande:active { transform: translateY(2px) scale(0.99); }
.escolha-grande:disabled { opacity: 0.45; }
.escolha-grande .icone { font-size: 34px; flex: none; width: 52px; text-align: center; }
.escolha-grande .rotulo { display: block; font-family: var(--display); font-size: 21px; font-weight: 700; }
.escolha-grande .detalhe { display: block; font-size: 15px; color: var(--muted); margin-top: 2px; }
.escolha-grande .seta { margin-left: auto; font-size: 24px; color: var(--muted); }
/* Meus pedidos: o status numa linha dele, na cor do que aconteceu */
.escolha-grande .meu-status { display: block; margin-top: 2px; font-size: 14px; font-weight: 700; color: var(--muted); }
.escolha-grande .meu-status.andando { color: var(--deep2); }
.escolha-grande .meu-status.cancelado { color: var(--erro); }

/* ---------- Hub ---------- */

.hub-capa { padding: 34px var(--margem) 10px; text-align: center; }
.marca { font-family: var(--display); font-size: 44px; font-weight: 700; letter-spacing: -1.5px; color: var(--deep); line-height: 1; }
.marca { display: inline-flex; align-items: center; gap: 10px; }
.marca.centro { justify-content: center; }
.marca span span { color: var(--lime-escuro); }
.marca .mascote { width: 1.35em; height: 1.35em; object-fit: contain; flex: none; }
.slogan { color: var(--muted); font-size: 16px; margin-top: 6px; }
.fundo-hub { background: linear-gradient(180deg, #EEF6E3 0%, var(--bg) 360px); }
.hub-cidade { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px var(--margem) 60px; color: #fff; text-align: center;
  background: radial-gradient(700px 360px at 88% -10%, rgba(132, 204, 22, 0.35) 0%, rgba(132, 204, 22, 0) 60%), radial-gradient(520px 320px at 0% 110%, rgba(255, 138, 61, 0.28) 0%, rgba(255, 138, 61, 0) 60%), linear-gradient(160deg, #0F3D2E 0%, #155E45 60%, #1B6B4A 100%); }
.hub-cidade::before { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; right: -160px; top: -220px; background: rgba(255, 255, 255, 0.05); }
.hub-cidade::after { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; left: -120px; bottom: -150px; background: rgba(255, 255, 255, 0.05); }
.hub-mascote-fundo { position: absolute; right: -30px; bottom: -40px; width: 230px; height: 230px; object-fit: contain; opacity: 0.16; transform: rotate(-8deg); pointer-events: none; }
.hub-cidade > * { position: relative; z-index: 1; }
.hub-cidade > .hub-mascote-fundo { position: absolute; z-index: 0; }
@media (min-width: 900px) { .hub-cidade { padding: 44px var(--margem) 64px; } .hub-mascote-fundo { width: 300px; height: 300px; right: 6%; bottom: -60px; opacity: 0.22; } .hub-titulo { font-size: 38px; } }
.hub-cidade .marca { font-size: 28px; text-decoration: none; color: #fff; }
.hub-cidade .marca span span { color: var(--lime2); }
.hub-titulo { font-family: var(--display); font-size: 30px; line-height: 1.1; margin: 8px 0 2px; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; white-space: pre-wrap; }
.hub-titulo.so-texto { display: block; text-align: center; text-wrap: balance; } /* so texto: quebra em duas linhas iguais, dentro da caixa */
.hub-cidade .slogan { max-width: 520px; color: #DCEFE3; font-size: 15.5px; }
.hub-selos { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-size: 13px; font-weight: 700; color: var(--lime2); margin-top: 4px; }

.hub-conteudo { gap: 16px; padding-top: 14px; position: relative; z-index: 2; }
.hub-conteudo > .busca { margin-top: -43px; }
.hub-conteudo .busca { min-height: 58px; font-size: 17px; border-color: transparent; box-shadow: 0 14px 34px rgba(14, 31, 20, 0.18); background-color: #fff; }
.hub-conteudo .busca:focus { outline: 3px solid var(--lime); }
.hub-secao { display: flex; align-items: center; gap: 10px; font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--deep2); margin-top: 6px; }
.hub-lista { gap: 12px; }
.hub-secao::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }

/* seletor estilo PlayStation: o quadrado em foco cresce com anel verde e os vizinhos apagam de leve */

/* linhas de cidade (pagina inicial): logos das lojas + nome + abertas agora */
.cidade-linha { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 14px 16px; background: var(--card); border: 0; border-radius: var(--raio); box-shadow: 0 10px 26px rgba(14, 31, 20, 0.1); font: inherit; color: inherit; cursor: pointer; transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.18s; }
.cidade-linha.minha { box-shadow: 0 10px 26px rgba(14, 31, 20, 0.1), 0 0 0 3px var(--lime); }
@media (hover: hover) { .cidade-linha:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(14, 31, 20, 0.16), 0 0 0 3px var(--lime); } }
.cidade-linha:active { transform: translateY(1px); }
.cidade-logos { display: flex; flex: none; }
.cidade-logo { width: 44px; height: 44px; border-radius: 12px; background: var(--lime-suave); border: 2px solid #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; overflow: hidden; margin-left: -12px; box-shadow: 0 4px 10px rgba(14, 31, 20, 0.12); }
.cidade-logo:first-child { margin-left: 0; }
.cidade-logo img { width: 100%; height: 100%; object-fit: cover; }
.cidade-logo.mais { font-size: 13px; font-weight: 700; color: var(--deep2); }
.cidade-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cidade-linha .cidade-nome { font-family: var(--display); font-size: 19px; font-weight: 700; line-height: 1.15; color: var(--ink); }
.cidade-linha .cidade-nome small { font-size: 13px; color: var(--muted); font-weight: 700; letter-spacing: 0.06em; }
.cidade-detalhe { font-size: 14px; color: var(--deep2); font-weight: 600; }
.cidade-acao { flex: none; font-size: 14px; font-weight: 700; color: var(--deep2); background: var(--lime-suave); padding: 8px 12px; border-radius: 999px; }
.cidade-linha.minha .cidade-acao { background: var(--lime); color: var(--ink); }
@media (max-width: 400px) { .cidade-acao { display: none; } }
/* quadrados de cidade (pagina inicial) */

.cidade-nome { font-family: var(--display); font-size: 18px; font-weight: 700; line-height: 1.15; color: var(--ink); }

.hub-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hub-chips .aba-painel { min-height: 40px; font-size: 14.5px; padding: 0 14px; gap: 8px; line-height: 1; }
.chip-ponto { width: 8px; height: 8px; border-radius: 50%; background: #22A35A; flex: none; box-shadow: 0 0 0 3px rgba(34, 163, 90, 0.18); }
.aba-painel.ativa .chip-ponto { background: var(--lime2); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18); }
.chip-qtd { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--lime-suave); color: var(--deep2); font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.aba-painel.ativa .chip-qtd { background: var(--lime); color: var(--ink); }
.hub-lista { display: flex; flex-direction: column; gap: 12px; }
.hub-lista > .hub-secao:first-child { margin-top: 8px; } /* 16 do vao + 8 = 24 antes da secao */
.hub-secao { font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--deep2); margin-top: 6px; }

  
  

.hub-vazio { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px 10px; text-align: center; }
.hub-vazio .mascote-vazio { margin-bottom: 8px; }
.hub-vazio > .btn, .hub-vazio > .pilha { margin-top: 12px; }
/* dentro de uma grade (lista de lojas da conta) o vazio ocupa a linha inteira, centrado */
.conta-lojas .hub-vazio { grid-column: 1 / -1; width: 100%; }
.hub-vazio .mascote-vazio { width: 140px; height: 140px; object-fit: contain; opacity: 0.9; }
.hub-conteudo { width: 100%; max-width: 960px; margin: 0 auto; }
@media (min-width: 760px) { .hub-titulo { font-size: 36px; } .hub-cidade { padding-top: 40px; } }

/* ---------- Abertura da loja ---------- */

.abertura { padding: 24px var(--margem) 12px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
/* ritmo da primeira tela: 16 entre blocos, 24 antes de uma secao, 12 entre cartoes */
#destaques > div:first-child { margin: 8px 0 12px !important; }
#descLoja { margin-top: -8px !important; }
.capa-loja { align-self: stretch; margin: -26px calc(-1 * var(--margem)) -58px; height: var(--altura-capa, 200px); background: var(--lime-suave); overflow: hidden; }
.capa-loja img { width: 100%; height: 100%; object-fit: cover; display: block; }
.abertura.com-capa .logo-grande { position: relative; border: 4px solid var(--card); }
.logo-grande { width: 120px; height: 120px; border-radius: var(--raio-logo, 34px); background: var(--card); border: 1.5px solid var(--line); box-shadow: var(--sombra); display: flex; align-items: center; justify-content: center; font-size: 62px; overflow: hidden; }
.logo-grande img { width: 100%; height: 100%; object-fit: cover; }
.promessa { font-size: 30px; line-height: 1.12; }
.promessa span { display: block; font-family: var(--corpo); font-weight: 400; font-size: 17px; color: var(--muted); margin-top: 8px; }
.como-funciona { display: flex; gap: 8px; width: 100%; max-width: 440px; }
.como-passo { flex: 1; background: var(--card); border: 1px solid var(--line); border-radius: var(--raio-p); padding: 12px 8px; font-size: 13.5px; line-height: 1.3; color: var(--body); }
.como-passo .n { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: 0 auto 8px; border-radius: 50%; background: var(--lime-suave); font-family: var(--display); font-size: 16px; font-weight: 700; color: var(--deep2); } /* numero na bolinha, como no tema da Dom Conizza */
/* recado da loja no topo ("Hoje: feijoada"): icone e texto como os outros avisos, no amarelo de novidade (o laranja e o
   dos problemas). Entra deslizando e o sino balanca uma vez: chama o olho sem ficar mexendo. Uma linha fica no centro;
   texto longo quebra alinhado a esquerda, ao lado do sino */
.aviso-topo { display: flex; justify-content: center; align-items: flex-start; gap: 10px; text-align: left; background: #FFF8DB; border: 1px solid #F5DE8A; color: #5B4300; border-radius: var(--raio-p); padding: 12px 14px; font-weight: 600; font-size: 15px; line-height: 1.4; animation: entrar 0.35s ease-out both; }
.aviso-topo .ico-traco { width: 28px; height: 28px; margin: -3.5px 0; border-radius: 50%; background: #FDE68A; color: #8A5A00; align-items: center; justify-content: center; }
.aviso-topo .ico-traco svg { width: 16px; height: 16px; stroke-width: 2.2; transform-origin: 50% 12%; animation: sino-balanca 0.9s ease-in-out 0.45s 1 both; }
@keyframes sino-balanca { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(16deg); } 40% { transform: rotate(-13deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } }
.faixa-acompanhar {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 14px var(--margem); background: var(--deep); color: #fff; border: 0;
  font-weight: 700; font-size: 16px;
}
.faixa-acompanhar .seta { margin-left: auto; display: inline-flex; flex: none; }
.faixa-acompanhar .faixa-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.faixa-acompanhar .faixa-qtd { flex: none; padding: 3px 9px; border-radius: 999px; background: var(--lime); color: var(--ink); font-size: 13.5px; font-weight: 800; line-height: 1.2; white-space: nowrap; }
.faixa-teste { background: repeating-linear-gradient(135deg, var(--lemon) 0 14px, #FCE36B 14px 28px); color: #4A3A00; font-size: 13px; font-weight: 700; text-align: center; padding: 6px 10px; letter-spacing: 0.04em; }
.rodape { margin-top: auto; padding: 16px var(--margem) 30px; text-align: center; color: var(--muted); font-size: 14.5px; display: flex; flex-direction: column; gap: 16px; }
/* as linhas de informacao (Pix seguro, endereco, verificada/CNPJ) andam juntas, 8 entre elas; dali 16 ate o WhatsApp e 16 ate o fim.
   So encosta quando o fim da pagina termina numa linha dessas: depois de um cartao (o da loja oficial) fica o 16 de sempre */
.fim-inicio:has(> .confianca:last-child) + .rodape > #enderecoLoja:not(:empty),
.fim-inicio:has(> .confianca:last-child) + .rodape > #enderecoLoja:empty + #legalLoja:not(:empty),
#enderecoLoja:not(:empty) + #legalLoja:not(:empty) { margin-top: -8px; }
.rodape .contatos { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.rodape a.btn { min-height: 46px; font-size: 15px; border-radius: 12px; }
.rodape .ligeiro { font-size: 12.5px; color: #97A399; }
.rodape-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 16px; font-size: 13px; font-weight: 600; color: var(--muted); }
.rodape-legal span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.rodape-legal .selo-mini { margin: 0; vertical-align: 0; }
.rodape-verificada { color: var(--deep2); }
/* convite pro lojista no fim da pagina das lojas */
.chamada-lojista { width: 100%; max-width: 928px; margin: -22px auto 8px; /* 24 do quadro das lojas ate aqui e 24 daqui ate a linha do rodape */ display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; padding: 20px 24px; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--sombra); }
.chamada-texto { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.chamada-texto b { font-family: var(--display); font-size: 20px; line-height: 1.2; color: var(--ink); text-wrap: balance; }
.chamada-texto span { text-wrap: balance; }
.chamada-texto span { font-size: 15px; color: var(--body); }
.chamada-acoes { flex: none; display: flex; align-items: center; gap: 16px; }
.chamada-acoes .btn { min-height: 52px; padding: 0 24px; font-size: 16px; border-radius: 14px; white-space: nowrap; }
.chamada-whats { font-size: 14.5px; font-weight: 600; color: var(--deep2); white-space: nowrap; }
@media (max-width: 600px) { .chamada-lojista { padding: 16px; text-align: center; } .chamada-acoes { flex: 1 1 100%; flex-direction: column; gap: 12px; } .chamada-acoes .btn { width: 100%; } }

/* ---------- Cardapio ---------- */

.abas { position: sticky; top: var(--altura-topo); z-index: 30; display: flex; gap: 8px; padding: 12px var(--margem); background: var(--bg); overflow-x: auto; scrollbar-width: none; }
.abas::-webkit-scrollbar { display: none; }
.aba { flex: none; min-height: 46px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--line-forte); background: var(--card); color: var(--ink); font-weight: 700; font-size: 16px; white-space: nowrap; }
.aba.ativa { background: var(--deep); color: #fff; border-color: var(--deep); }
.grade { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 4px var(--margem) 24px; } /* 12 da barra de categorias + 4 = 16 ate o primeiro cartao */
/* duas colunas so quando os dois cartoes cabem inteiros (o da loja oficial pede 303 px): antes, de 560 a 650 px, a
   pagina rolava de lado e o PEDIR saia da tela */
@media (min-width: 560px) { .grade { grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr)); } }
.card-produto {
  display: flex; gap: 14px; align-items: stretch; text-align: left; width: 100%;
  padding: 12px; background: var(--card); border: 1.5px solid var(--line); border-radius: var(--raio);
}
.card-produto:active { transform: translateY(2px); }
/* foto do item: quadrado perfeito, sempre (108 x 108: e a altura do texto do cartao, entao a margem fica igual nos quatro lados), centrado na altura do cartao. A imagem fica "solta" la dentro
   (position absolute + cover), entao foto em pe ou deitada nunca muda o tamanho da caixa: so recorta pelo centro. */
.card-produto .foto { position: relative; flex: none; align-self: center; width: 108px; height: 108px; aspect-ratio: 1 / 1; border-radius: 14px; background: var(--lime-suave); display: flex; align-items: center; justify-content: center; font-size: 44px; line-height: 1; overflow: hidden; }
.card-produto .foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.card-produto .info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.card-produto .nome { font-family: var(--display); font-size: 18.5px; font-weight: 700; line-height: 1.25; } /* nome em duas linhas sem vao de paragrafo entre elas */
.card-produto .desc { font-size: 14.5px; color: var(--muted); line-height: 1.35; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* 2 linhas: a altura do cartao (e da foto) fica sob controle */
.card-produto .nome { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-produto .rodape-card { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; } /* preco nunca encosta no PEDIR */
.card-produto .rodape-card .preco { white-space: nowrap; }
.card-produto .preco { font-family: var(--display); font-size: 19px; font-weight: 700; color: var(--deep); white-space: nowrap; }
.card-produto .mais { white-space: nowrap; }
.card-produto .mais { font-size: 14px; font-weight: 700; color: var(--texto-no-destaque); background: var(--lime); padding: 8px 14px; border-radius: 10px; }
@media (max-width: 360px) { .card-produto .foto { width: 96px; height: 96px; } .card-produto .preco { font-size: 17px; } .card-produto .mais { padding: 8px 10px; } } /* preco e PEDIR na mesma linha, inteiros */

/* ---------- Barra do carrinho ---------- */

.barra-carrinho {
  position: fixed; left: 0; right: var(--trava, 0px); bottom: 0; z-index: 50;
  transform: translateY(110%); transition: transform 0.2s ease-out;
  background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(14, 31, 20, 0.08);
  padding: 12px var(--margem) calc(12px + env(safe-area-inset-bottom));
}
.barra-carrinho.visivel { transform: none; }
.barra-carrinho .linha-barra { display: flex; align-items: center; gap: 12px; max-width: 720px; margin: 0 auto; }
.barra-carrinho .resumo { flex: 1; min-width: 0; }
.barra-carrinho .qtd { font-size: 14px; color: var(--muted); }
.barra-carrinho .valor { font-family: var(--display); font-size: clamp(19px, 6vw, 24px); font-weight: 700; color: var(--deep); white-space: nowrap; } /* o total nunca quebra no meio */
.barra-carrinho .btn { min-height: 56px; white-space: nowrap; }
@media (max-width: 360px) { .barra-carrinho .btn { font-size: 17px; padding-left: 16px; padding-right: 16px; } }
.progresso-entrega { max-width: 720px; margin: 0 auto 10px; font-size: 14px; font-weight: 600; color: var(--deep2); }
.progresso-trilho { height: 8px; background: var(--lime-suave); border-radius: 4px; margin-top: 6px; overflow: hidden; }
.progresso-trilho span { display: block; height: 100%; background: var(--lime); border-radius: 4px; transition: width 0.3s; }

/* ---------- Modal do produto ---------- */

.modal { position: fixed; inset: 0; z-index: 80; background: rgba(14, 31, 20, 0.55); display: none; align-items: flex-end; justify-content: center; }
.modal.aberto { display: flex; }
.modal-caixa { width: 100%; max-width: 720px; max-height: 92vh; background: var(--card); border-radius: 26px 26px 0 0; display: flex; flex-direction: column; animation: subir 0.22s ease-out; }
@keyframes subir { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-topo { display: flex; align-items: flex-start; gap: 12px; padding: 20px var(--margem) 12px; }
.modal-topo .titulo { font-family: var(--display); font-size: 24px; font-weight: 700; line-height: 1.25; padding-top: calc((44px - 1.25em) / 2); }
.modal-topo .sub { color: var(--muted); font-size: 15px; margin-top: 2px; }
.modal-topo .fechar { width: 44px; height: 44px; border-radius: 12px; border: 1.5px solid var(--line-forte); background: var(--card); font-size: 18px; flex: none; }
.modal-corpo { overflow-y: auto; padding: 0 var(--margem) 16px; }
/* barra de rolagem fina, com lugar reservado; o padding da direita desconta a largura dela (--barra, medida no abrirModal)
   pra sobrar a mesma margem dos dois lados */
.modal-corpo { scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--line-forte) transparent; padding-right: max(0px, calc(var(--margem) - var(--barra, 0px))); }
.modal-rodape { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 12px var(--margem) calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.modal-rodape .btn { min-width: 0; }
.modal-rodape .contador { flex: none; }
.contador { display: flex; align-items: center; gap: 4px; border: 1.5px solid var(--line-forte); border-radius: 14px; padding: 4px; }
.contador button { width: 46px; height: 46px; border: 0; background: var(--lime-suave); border-radius: 10px; font-size: 24px; font-weight: 700; color: var(--ink); }
.contador button:disabled { opacity: 0.35; }
.contador .numero { min-width: 36px; text-align: center; font-family: var(--display); font-size: 22px; font-weight: 700; }
/* foto grande do item: quadrado exato (igual a lista), a imagem preenche tudo recortando pelo centro, nunca estica */
.foto-modal { position: relative; width: 100%; margin: 4px 0 10px; border-radius: 16px; overflow: hidden; background: var(--lime-suave); aspect-ratio: 1 / 1; }
.foto-modal img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
/* item aberto em tela larga: a gaveta fica da largura de um celular grande e a foto quadrada ocupa a largura toda,
   alinhada com o titulo e as opcoes (igual no celular). A largura acompanha a altura da tela pra sobrar lugar pras opcoes. */
@media (min-width: 480px) {
  .modal-caixa.modal-item { max-width: clamp(380px, 46vh, 520px); } /* foto em ~42% da altura, como no celular */
  .modal-caixa.modal-item:not(.com-lado) { max-width: 560px; } /* sem foto nao tem altura a poupar: a largura do PC, sem espremer as opcoes */
}
/* PC (900px ou mais): janela larga e baixa no meio da tela. Foto quadrada na esquerda (ate 480), nome, escolhas e
   Adicionar na direita. Altura = foto + 24 em cima e embaixo; a base do Adicionar alinha com a base da foto. */
.modal-lado { display: none; }
@media (min-width: 900px) and (min-height: 480px) {
  .modal.modal-centro { align-items: center; padding: 24px; }
  .modal-caixa.modal-item.com-lado { --margem: 24px; --foto-lado: min(480px, calc(100vh - 96px), 48vw); max-width: calc(var(--foto-lado) + 480px); height: calc(var(--foto-lado) + 48px); max-height: none; border-radius: 26px; overflow: hidden; box-shadow: 0 24px 64px rgba(14, 31, 20, 0.35); display: grid; grid-template-columns: calc(var(--foto-lado) + 24px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
  .com-lado .modal-lado { display: block; grid-column: 1; grid-row: 1 / -1; align-self: start; padding: 24px 0 24px 24px; }
  .com-lado .modal-lado .foto-modal { width: var(--foto-lado); margin: 0; }
  .com-lado .modal-topo { grid-column: 2; grid-row: 1; padding-top: 24px; }
  .com-lado .modal-corpo { grid-column: 2; grid-row: 2; }
  .com-lado .modal-rodape { grid-column: 2; grid-row: 3; padding-top: 16px; padding-bottom: 24px; }
  .com-lado .modal-corpo .foto-modal { display: none; }
  /* item sem foto: janela no meio, 560 de largura, a mesma moldura de 24 */
  .modal-caixa.modal-item:not(.com-lado) { --margem: 24px; max-width: 560px; max-height: calc(100vh - 48px); border-radius: 26px; overflow: hidden; box-shadow: 0 24px 64px rgba(14, 31, 20, 0.35); }
  .modal-item:not(.com-lado) .modal-topo { padding-top: 24px; }
  .modal-item:not(.com-lado) .modal-rodape { padding-top: 16px; padding-bottom: 24px; }
}
.btn-adicionar { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 8px; padding-left: 12px; padding-right: 12px; line-height: 1.15; }
.btn-adicionar .add-rotulo, .btn-adicionar .add-valor { white-space: nowrap; }
.btn-adicionar .add-valor { font-family: var(--display); }
.grupo { margin-top: 16px; }
.grupo-titulo { font-family: var(--display); font-size: 18px; font-weight: 700; }
.grupo-dica { font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.opcao { position: relative; display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 10px 12px; margin-top: 8px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); cursor: pointer; }
.opcao.marcada { border-color: var(--lime-escuro); background: var(--lime-suave); }
.opcao-campo { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcao .marcador { width: 28px; height: 28px; flex: none; border: 2px solid var(--line-forte); background: var(--card); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: transparent; }
.opcao .marcador.redondo { border-radius: 50%; }
.opcao .marcador.quadrado { border-radius: 8px; }
.opcao.marcada .marcador { background: var(--lime); border-color: var(--lime-escuro); color: var(--texto-no-destaque); }
.opcao.remover.marcada .marcador { background: var(--orange); border-color: #D96E2B; color: #fff; }
.opcao .rotulo { flex: 1; font-weight: 600; font-size: 17px; }
.opcao .rotulo small { display: block; font-weight: 400; font-size: 13.5px; color: var(--muted); }
.opcao .valor { font-weight: 700; color: var(--deep); font-size: 15px; }
.opcao .valor.gratis { color: var(--lime-escuro); }
.recheio { margin: 8px 0 0; padding-left: 20px; color: var(--body); }

/* ---------- Carrinho ---------- */

.item-carrinho { display: flex; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--raio-p); padding: 12px; }
.item-carrinho .miniatura { width: 56px; height: 56px; flex: none; border-radius: 12px; background: var(--lime-suave); display: flex; align-items: center; justify-content: center; font-size: 28px; overflow: hidden; }
.item-carrinho .miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.item-carrinho .corpo { flex: 1; min-width: 0; }
.item-carrinho .nome { font-weight: 700; }
.item-carrinho .detalhes { font-size: 14px; color: var(--muted); }
.item-carrinho .detalhes .sem { color: #B4501A; font-weight: 600; }
.item-carrinho .linha-preco { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.item-carrinho .preco { font-family: var(--display); font-weight: 700; color: var(--deep); font-size: 18px; }
.item-carrinho .remover-item { border: 0; background: none; color: var(--erro); font-weight: 700; font-size: 15px; padding: 8px 0; }
.totais { background: var(--card); border: 1px solid var(--line); border-radius: var(--raio-p); padding: 12px 14px; }
.totais .linha { display: flex; justify-content: space-between; padding: 6px 0; color: var(--body); }
.totais .linha.total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 12px; font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--ink); }
.totais .gratis { color: var(--lime-escuro); font-weight: 700; }
.totais .desconto { color: var(--deep2); }
.vazio { text-align: center; padding: 40px 10px; color: var(--muted); grid-column: 1 / -1; }
.vazio .icone { font-size: 46px; margin-bottom: 8px; }
.cupom-abrir { border: 0; background: none; color: var(--deep2); font-weight: 700; font-size: 15px; padding: 6px 0; text-align: left; }
.cupom-linha { display: flex; gap: 8px; }
.cupom-linha input { flex: 1; min-width: 0; text-transform: uppercase; }
.cupom-linha .btn { min-height: 56px; }
.cupom-recado { font-size: 14.5px; color: var(--erro); font-weight: 600; }
.cupom-valendo { display: flex; align-items: center; justify-content: space-between; background: var(--lime-suave); border-radius: var(--raio-p); padding: 10px 14px; font-weight: 600; }
.cupom-valendo button { border: 0; background: none; color: var(--erro); font-weight: 700; }

/* ---------- Formularios ---------- */

.bloco-form { background: var(--card); border: 1px solid var(--line); border-radius: var(--raio); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.bloco-form > .pilha:empty { display: none; } /* lista vazia (ex.: sem cupons) nao cria vao duplo */
/* formulario do pedido: blocos com o mesmo respiro entre si que os cartoes da pagina */
#formDados { display: flex; flex-direction: column; gap: 12px; }
#formDados .msg-erro[hidden], #formDados .nota[hidden] { display: none; }
.bloco-titulo { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 19px; font-weight: 700; }
.bloco-numero { width: 30px; height: 30px; border-radius: 50%; background: var(--lime); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }
.bloco-opcional { font-family: var(--corpo); font-size: 13px; color: var(--muted); font-weight: 600; margin-left: auto; }
.campo label { display: block; font-weight: 700; margin-bottom: 6px; }
.campo .ajuda { font-size: 14px; line-height: 1.35; color: var(--muted); margin: -2px 0 8px; }
.campo .opcional { font-size: 13px; font-weight: 600; color: var(--muted); margin-left: 6px; }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 56px; padding: 12px 14px;
  border: 1.5px solid var(--line-forte); border-radius: 14px; background: var(--card); color: var(--ink);
}
.campo textarea { min-height: 90px; resize: vertical; }
.campo input.erro, .campo select.erro { border-color: var(--erro); background: var(--erro-suave); }
.linha-campos { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
.linha-campos > * { min-width: 0; }
.msg-erro { background: var(--erro-suave); border: 1px solid #F3C4BE; color: var(--erro); padding: 12px 14px; border-radius: var(--raio-p); font-weight: 600; }
.aviso { background: var(--lime-suave); border: 1px solid #C9E7A1; border-radius: var(--raio-p); padding: 12px 14px; display: flex; gap: 10px; align-items: center; font-weight: 600; }
.forma-pgto { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; }
.forma-pgto.marcada { border-color: var(--lime-escuro); background: var(--lime-suave); }
.forma-pgto input { position: absolute; opacity: 0; }
.forma-icone { font-size: 26px; width: 36px; text-align: center; }
.forma-texto { flex: 1; }
.forma-nome { display: block; font-weight: 700; }
.forma-detalhe { display: block; font-size: 14px; color: var(--muted); }
.forma-marca { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line-forte); display: flex; align-items: center; justify-content: center; color: transparent; font-weight: 700; }
.forma-pgto.marcada .forma-marca { background: var(--lime); border-color: var(--lime-escuro); color: var(--texto-no-destaque); }
.troco-calculado { margin-top: 8px; font-weight: 700; color: var(--deep2); }
.troco-calculado.erro { color: var(--erro); }
.nota { font-size: 13.5px; color: var(--muted); }

/* ---------- Pix ---------- */

.pix { padding: 24px var(--margem) 30px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.valor-grande { font-family: var(--display); font-size: 46px; font-weight: 700; color: var(--deep); line-height: 1; }
.qr-caixa { width: min(280px, 80vw); aspect-ratio: 1; background: #fff; border: 1.5px solid var(--line); border-radius: 22px; padding: 12px; display: flex; align-items: center; justify-content: center; }
.qr-caixa svg { width: 100%; height: 100%; }
.passos-pix { width: 100%; max-width: 440px; text-align: left; display: flex; flex-direction: column; gap: 12px; }
.passo-pix { display: flex; gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--raio-p); padding: 12px 14px; }
.passo-pix .numero { width: 32px; height: 32px; border-radius: 50%; background: var(--lime); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.codigo-pix { display: block; width: 100%; max-width: 440px; font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--muted); word-break: break-all; background: var(--card); border: 1px dashed var(--line-forte); border-radius: var(--raio-p); padding: 10px; text-align: left; }
.esperando { display: flex; align-items: center; gap: 10px; color: var(--muted); font-weight: 600; }
.girando { width: 18px; height: 18px; border: 3px solid var(--line-forte); border-top-color: var(--lime-escuro); border-radius: 50%; animation: girar 0.9s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Senha ---------- */

.sucesso { padding: 24px var(--margem) 30px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.confirmado { font-weight: 700; color: var(--lime-escuro); font-size: 18px; }
.painel-senha { width: 100%; max-width: 420px; background: var(--deep); color: #fff; border-radius: 26px; padding: 22px 20px 24px; }
.painel-senha .rotulo { font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); font-weight: 700; }
.senha-gigante { font-family: var(--display); font-size: 104px; line-height: 1; font-weight: 700; color: var(--senha, var(--lime)); margin: 6px 0; }
.painel-senha .instrucao { font-size: 16.5px; color: rgba(255, 255, 255, 0.9); }
.a-cobrar { width: 100%; max-width: 420px; background: var(--orange-suave); border: 1px solid #F7D2B8; color: #7A3B10; border-radius: var(--raio-p); padding: 12px 14px; font-weight: 600; }
/* linha do tempo do pedido num cartao, como os outros da tela: um traco liga as bolinhas (na cor da loja ate onde o
   pedido ja chegou) e a etapa de agora ganha o fundo de destaque. Cada etapa com 56 de altura e a bolinha de 40 */
.linha-do-tempo { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 0; padding: 8px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; text-align: left; }
.linha-do-tempo:empty { display: none; }
.etapa { position: relative; display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 8px; border-radius: 12px; color: var(--muted); }
.etapa + .etapa::before { content: ""; position: absolute; left: 27px; top: -8px; width: 2px; height: 16px; border-radius: 2px; background: var(--line-forte); }
.etapa.feita + .etapa::before { background: var(--lime-escuro); }
.etapa .bolha { position: relative; width: 40px; height: 40px; border-radius: 50%; background: var(--card); border: 2px solid var(--line-forte); display: flex; align-items: center; justify-content: center; font-size: 18px; flex: none; }
.etapa.feita .bolha { background: var(--lime); border-color: var(--lime-escuro); color: var(--ink); }
.etapa.atual { background: var(--lime-suave); color: var(--ink); font-weight: 700; }
.etapa.atual .bolha { border-color: var(--lime-escuro); box-shadow: 0 0 0 4px var(--card); }

/* ---------- Painel do dono ---------- */

.painel-topo { position: sticky; top: 0; z-index: 40; background: var(--deep); color: #fff; padding: 10px var(--margem); display: flex; align-items: center; gap: 12px; }
.painel-topo .nome { font-family: var(--display); font-size: 19px; font-weight: 700; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.painel-topo-acoes { display: flex; align-items: center; gap: 12px; flex: none; }
.painel-topo .rot-curto { display: none; }
/* celular, tablet e notebook pequeno: nome numa linha, botoes iguais embaixo (numa linha so, ate uns 1200px, eles passavam da tela ou cortavam o nome) */
@media (max-width: 1199px) {
  .painel-topo { flex-wrap: wrap; row-gap: 8px; }
  .painel-topo .nome { flex: 1 1 0; white-space: normal; text-wrap: balance; } /* no celular o nome tem a linha inteira: quebra, nao corta */
  .painel-topo-acoes { flex: 1 1 100%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
  .painel-topo .btn-pequeno { width: 100%; min-width: 0; min-height: 40px; font-size: 13.5px; line-height: 1; padding: 0 4px; white-space: nowrap; }
}
/* quadrinhos (celular e tablet): nome curto em todos, iguais; no PC, o nome completo */
@media (max-width: 1199px) {
  .painel-topo .rot-longo { display: none; }
  .painel-topo .rot-curto { display: inline; }
}
.painel-topo .btn-pequeno { background: rgba(255,255,255,0.12); color: #fff; }
.painel-topo .btn-pequeno.on { background: var(--lime); color: var(--ink); }
/* topo do painel com cara de app: icone e nome; no celular, icone grande em cima e o nome embaixo (Ligeiro e temas) */
.topo-app .btn-pequeno { min-height: 42px; padding: 0 16px; gap: 8px; border-radius: 12px; font-size: 15px; }
.topo-app .topo-ico { display: inline-flex; line-height: 1; }
.topo-app .topo-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1199px) {
  .topo-app .btn-pequeno { flex-direction: column; gap: 6px; min-height: 60px; padding: 9.65px 4px 6.35px; border-radius: 14px; font-size: 13px; line-height: 1.1; } /* 2px a mais em cima: centro pela linha do texto, nao pela perna do p */
  .topo-app .topo-ico svg { width: 24px; height: 24px; }
}
@media (max-width: 360px) { .topo-app .btn-pequeno { font-size: 12.5px; } }
/* cores do Ligeiro (loja sem tema oficial): vidro claro sobre o verde; aceso = limao */
.topo-ligeiro .btn-pequeno { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); color: #fff; }
@media (hover: hover) { .topo-ligeiro .btn-pequeno:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.34); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18); } }
.topo-ligeiro .btn-pequeno.on { background: var(--lime); border-color: var(--lime); color: var(--ink); box-shadow: 0 4px 14px rgba(132, 204, 22, 0.35); }
.abas-painel { position: sticky; top: var(--altura-painel-topo, 60px); z-index: 30; display: flex; gap: 6px; padding: 10px var(--margem); background: var(--bg); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.abas-painel::-webkit-scrollbar { display: none; }
.aba-painel { flex: none; min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line-forte); background: var(--card); font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: transform 0.14s, background 0.14s, border-color 0.14s, color 0.14s; }
@media (hover: hover) { .aba-painel:hover { transform: translateY(-1px); border-color: var(--deep); } }
.aba-painel:active { transform: scale(0.96); }
.aba-painel.ativa { background: var(--deep); color: #fff; border-color: var(--deep); }
.aba-painel.apagada { opacity: 0.55; }
.busca { width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--line-forte); border-radius: var(--raio-p, 14px); font-size: 16px; font-family: inherit; background: var(--card); color: var(--ink); }
.busca:focus { outline: 2px solid var(--lime); outline-offset: 1px; }
.sugestoes { position: fixed; z-index: 200; background: var(--card); border: 1.5px solid var(--line-forte); border-radius: var(--raio-p, 14px); box-shadow: 0 12px 28px rgba(14, 31, 20, 0.16); overflow: hidden; display: flex; flex-direction: column; }
.sugestoes[hidden] { display: none; }
.sugestoes.acima { box-shadow: 0 -12px 28px rgba(14, 31, 20, 0.16); }
.sugestao { text-align: left; padding: 11px 14px; min-height: 44px; border: 0; background: transparent; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; border-bottom: 1px solid var(--line); }
.sugestao:last-child { border-bottom: 0; }
.sugestao:hover, .sugestao:focus { background: var(--lime-suave); outline: none; }
.aba-painel .badge { background: var(--orange); color: #fff; font-size: 12px; min-width: 22px; height: 22px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }
.aba-painel.ativa .badge { background: var(--lime); color: var(--ink); }
.secao { padding: 16px var(--margem) 30px; display: flex; flex-direction: column; gap: 12px; }
.secao h2 { font-size: 20px; }
.fila-titulo { display: flex; align-items: center; justify-content: space-between; font-family: var(--display); font-size: 17px; font-weight: 700; color: var(--muted); margin-top: 6px; }
.pedido-card { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--raio); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; container-type: inline-size; }
.pedido-card.novo { border-color: var(--lime); box-shadow: 0 0 0 4px var(--lime-suave); animation: piscar 1s ease-in-out 3; }
.pedido-card.atencao { border-color: var(--orange); }
@keyframes piscar { 50% { box-shadow: 0 0 0 8px #D9F3B3; } }
.pedido-card .cabeca { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 8px 12px; } /* a ficha tem a largura dela; o selo de horario fica no que sobra, colado a direita */ /* linha 1: senha e "ha X"; linha 2: os selos */
.pedido-card .cabeca-selos { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.pedido-card .cabeca-selos:empty { display: none; }
.pedido-card .cabeca-selos .selo { white-space: nowrap; } /* selo inteiro: quebra entre selos, nunca dentro */
@media (max-width: 360px) { .pedido-card .cabeca-selos { gap: 6px; } .pedido-card .cabeca-selos .selo { font-size: 13px; padding: 5px 10px; } } /* tela ampliada: pagamento e entrega na mesma linha */
/* senha como ficha de totem: rotulo pequeno + numero grande num bloco escuro */
.pedido-card .senha { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px 8px 14px; border-radius: 14px; background: var(--deep); color: #fff; font-family: var(--display); font-weight: 700; line-height: 1; box-shadow: 0 3px 0 rgba(14, 31, 20, 0.18); }
.pedido-card .senha small { font-size: 12px; letter-spacing: 0.1em; margin-right: -0.1em; text-transform: uppercase; color: var(--lime); } /* tira o espaco que sobra depois da ultima letra; a direita do numero e 13 porque o 2 ja tem 1px de folga propria: tinta 14 dos dois lados */
.pedido-card .senha b { font-size: 28px; } /* numero com a largura dele: folga igual dos dois lados em qualquer senha */
/* horario do pedido: selo com relogio, hora e ha quanto tempo */
.pedido-card .quando { justify-self: end; gap: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pedido-card .quando-ico { display: inline-flex; width: 14px; height: 14px; flex: none; }
.pedido-card .quando-ico svg { width: 100%; height: 100%; }
.pedido-card .quando-hora { display: none; }
@container (min-width: 420px) { .pedido-card .quando-hora { display: inline; } } /* hora do pedido so com folga de sobra; mesma decisao em todos os cartoes da lista */
.pedido-card .cliente { font-weight: 700; }
.pedido-card .endereco { font-size: 15px; color: var(--body); }
.pedido-card .endereco b { color: #B4501A; }
.pedido-card .itens { border-top: 1px dashed var(--line); padding-top: 8px; font-size: 15.5px; display: flex; flex-direction: column; gap: 4px; }
.pedido-card .itens .sem { color: #B4501A; font-weight: 600; }
.pedido-card .obs { background: var(--lemon); color: #4A3A00; padding: 8px 10px; border-radius: 10px; font-weight: 600; font-size: 15px; }
.pedido-card .total { display: flex; justify-content: space-between; align-items: center; font-family: var(--display); font-size: 20px; font-weight: 700; }
.pedido-card .total .forma { font-family: var(--corpo); font-size: 14px; font-weight: 600; color: var(--muted); }
.pedido-card .acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.pedido-card .acoes .btn { flex: 1; min-height: 54px; font-size: 17px; }
.pedido-card .acoes .btn-pequeno { flex: none; min-height: 54px; }
/* entregador: colunas exatamente iguais (em flex a borda do "Mapa" deixava ele 2px mais largo) */
.pedido-card .acoes-entrega { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.pedido-card .acoes-entrega .btn { min-width: 0; }
/* celular: o proximo passo ("Comecar a fazer") ganha a linha inteira; embaixo 💬 e 🖨️ em quadrados iguais e Cancelar no resto */
@media (max-width: 640px) {
  .pedido-card .acoes-pedido .btn-principal { flex: 1 1 100%; }
  .pedido-card .acoes-pedido .btn-pequeno { width: 54px; height: 54px; padding: 0; }
  .pedido-card .acoes-pedido .btn-erro { flex: 1 1 0; width: auto; min-width: 0; padding: 0 12px; }
  /* entregador: Mapa e Cliente lado a lado; "Entregue" (o passo principal) com a linha inteira embaixo */
  .pedido-card .acoes-entrega { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pedido-card .acoes-entrega .btn-principal, .pedido-card .acoes-entrega > .btn:only-child, .pedido-card .acoes-entrega > .btn-fantasma:has(+ .btn-principal) { grid-column: 1 / -1; }
}
@media (max-width: 360px) { .pedido-card .acoes .btn { padding-left: 8px; padding-right: 8px; font-size: 16px; } }
.divergente { background: var(--erro-suave); color: var(--erro); border-radius: 10px; padding: 8px 10px; font-weight: 700; font-size: 14.5px; }

.interruptor { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 10px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--raio-p); }
/* previa do site no painel: um celular de verdade em volta */
.previa-bloco { align-items: center; }
/* celular da previa: borda fina quase preta, brilho de metal em volta, botoes na lateral e a ilha no alto da tela */
.previa-aparelho { position: relative; width: 100%; max-width: 292px; margin: 6px auto 0; }
.previa-aparelho::before, .previa-aparelho::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #2A332E; }
.previa-aparelho::before { right: -3px; top: 118px; height: 64px; } /* liga */
.previa-aparelho::after { left: -3px; top: 96px; height: 44px; box-shadow: 0 58px 0 #2A332E; } /* volume: dois botoes */
.previa-site { position: relative; width: 100%; border: 7px solid #111614; border-radius: 44px; overflow: hidden; background: var(--bg); box-shadow: 0 0 0 1.5px #4A5650, 0 22px 44px -10px rgba(14, 31, 20, 0.35); }
.previa-status { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; height: 36px; padding: 0 22px 0 26px; font-size: 12px; font-weight: 700; color: var(--ink); letter-spacing: 0.02em; pointer-events: none; }
.previa-icones { display: inline-flex; }
.previa-icones svg { fill: currentColor; }
.previa-site.com-capa .previa-status { color: #fff; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55)); }
.previa-ilha { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 78px; height: 22px; background: #0B0F0D; border-radius: 12px; z-index: 3; }
.previa-capa { position: relative; height: 150px; background: linear-gradient(180deg, var(--lime-suave), var(--bg)); }
.previa-site.capa-alta .previa-capa { height: 190px; }
.previa-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.previa-capa.sem-capa::before { content: "Sua capa aqui"; position: absolute; inset: 36px 0 0; display: flex; align-items: center; justify-content: center; color: var(--deep2); font-weight: 700; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; }
.previa-corpo { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 16px 10px; margin-top: -40px; gap: 8px; }
.previa-logo { position: relative; width: 80px; height: 80px; border-radius: var(--raio-logo, 22px); background: var(--card); border: 4px solid var(--card); box-shadow: 0 6px 16px rgba(14, 31, 20, 0.14); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.previa-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.previa-logo .emoji { font-size: 40px; line-height: 1; }
.previa-nome { font-family: var(--display); font-size: 20px; font-weight: 700; color: var(--ink); line-height: 1.15; }
.previa-tipo { font-size: 13px; color: var(--muted); line-height: 1.35; max-width: 24ch; }
.previa-selo { font-size: 12px; padding: 4px 10px; gap: 6px; }
.previa-selo .bolinha { width: 7px; height: 7px; }
.previa-botao { pointer-events: none; width: 100%; min-height: 58px; font-size: 18px; margin-top: 2px; animation: none; }
.previa-botao .sub { font-size: 12px; }
.previa-home { width: 104px; height: 5px; border-radius: 3px; background: #111614; opacity: 0.35; margin: 6px auto 9px; }
.previa-acoes { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.previa-tirar-linha { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.previa-tirar-linha .btn { align-self: auto; color: var(--muted); }
.previa-tirar-linha .ico-traco svg { width: 14px; height: 14px; }
/* cor e estilo no mesmo eixo da previa: tudo centralizado */
.campo-cor, .campo-estilo { align-items: center; text-align: center; }
.campo-cor > label, .campo-estilo > label, .campo-cor > .ajuda, .campo-estilo > .ajuda { text-align: center; width: 100%; }
.campo-cor .paleta { justify-content: center; }
.campo-estilo .estilos { align-items: stretch; width: 100%; max-width: 420px; margin: 0 auto; }
.campo-estilo .estilo-linha { justify-content: flex-start; }
.campo-estilo .estilo-linha .rotulo { width: 130px; text-align: right; }
/* categorias do cardapio no painel */
.abas-categorias { position: static; z-index: auto; padding: 0; border: 0; background: transparent; flex-wrap: wrap; overflow: visible; gap: 8px; }
.aba-categoria { gap: 6px; padding-right: 9.5px; } /* 1,5 de borda + 9,5 = 11: o numero fica a mesma distancia da ponta e de cima/baixo (concentrico com a curva) */
.aba-categoria .cat-emoji { font-size: 18px; line-height: 1; }
.aba-categoria .cat-qtd { background: var(--lime-suave); color: var(--deep2); }
.aba-categoria.ativa .cat-qtd { background: var(--lime); color: var(--ink); }
.aba-categoria.apagada { opacity: 0.6; }
.aba-categoria.apagada .cat-nome { text-decoration: line-through; }
.aba-nova { border-style: dashed; color: var(--deep2); background: transparent; }
/* seletor de emoji */
.campo-emoji .emoji-atual { font-size: 22px; vertical-align: middle; margin-left: 4px; }
.grade-emoji { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
.emoji-opcao { min-height: 44px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); font-size: 22px; line-height: 1; cursor: pointer; transition: transform 0.12s, border-color 0.12s, background 0.12s; }
.emoji-opcao:hover { transform: translateY(-1px); border-color: var(--deep); }
.emoji-opcao.marcado { border-color: var(--deep); background: var(--lime-suave); box-shadow: 0 0 0 2px var(--lime-suave); }
/* Aparencia: celular + controles */
.aparencia { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
.aparencia-controles { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.aparencia-controles > .campo > label { font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--deep2); margin-bottom: 8px; text-align: left; }
.aparencia-controles > .campo > .ajuda { display: none; }
.aparencia-controles .campo-cor, .aparencia-controles .campo-estilo { align-items: stretch; text-align: left; }
.aparencia-controles .campo-cor > label { text-align: center; }
.aparencia-controles .campo-cor .paleta { justify-content: center; gap: 8px; }
.aparencia-controles .paleta .cor { width: 34px; height: 34px; }
.aparencia-controles .campo-estilo .estilos { max-width: none; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.aparencia-controles .estilo-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 0; }
.aparencia-controles .estilo-linha .rotulo { grid-column: 1 / -1; width: auto; text-align: left; font-size: 13px; color: var(--muted); font-weight: 600; }
.aparencia-controles .estilo-linha .aba-painel { width: 100%; justify-content: center; min-height: 40px; padding: 6px 8px; font-size: 14px; border-radius: 0; }
.aparencia-controles .estilo-linha .aba-painel:nth-of-type(1) { border-radius: 12px 0 0 12px; }
.aparencia-controles .estilo-linha .aba-painel:nth-of-type(2) { border-radius: 0 12px 12px 0; margin-left: -1.5px; }
.aparencia-controles .avancado { padding: 0 12px; }
.aparencia-controles .avancado summary { min-height: 46px; font-size: 14.5px; }
.aparencia-controles .campo-emoji > label { text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--ink); }
.aparencia .previa-bloco { align-items: center; }
.aparencia .previa-bloco > label, .aparencia .previa-bloco > .ajuda { text-align: center; }
.aparencia-controles .estilo-linha { min-width: 0; }
.aparencia-controles .estilo-linha .aba-painel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.previa-acoes { width: 100%; }
@media (max-width: 480px), (min-width: 760px) and (max-width: 1099px) { .aparencia-controles .campo-estilo .estilos { grid-template-columns: 1fr; } } /* coluna estreita (celular ou tablet com a previa do lado): um estilo por linha, nada cortado */
@media (min-width: 760px) {
  .aparencia { grid-template-columns: 340px minmax(0, 1fr); gap: 28px; }
  .aparencia .previa-bloco { align-self: start; } /* parada no lugar: acompanhar a rolagem fazia ela entrar embaixo das abas */
}
/* barra fixa de salvar (aba Ajustes) */
.salvar-fixo { position: fixed; left: 0; right: var(--trava, 0px); bottom: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--margem); padding-bottom: calc(10px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(14, 31, 20, 0.1); }
.salvar-fixo .salvar-estado { font-size: 14.5px; font-weight: 600; color: var(--muted); min-width: 0; }
.salvar-fixo .btn { flex: none; white-space: nowrap; }
@media (max-width: 480px) { .salvar-fixo .salvar-estado { font-size: 13px; line-height: 1.25; } .salvar-fixo .btn { padding-left: 16px; padding-right: 16px; } }
.salvar-fixo .salvar-estado.pendente { color: #B4501A; }
#secaoPainel.com-salvar { padding-bottom: 84px; }
@media print { .salvar-fixo { display: none; } }

.passos-mp { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; color: var(--body); font-size: 15px; line-height: 1.45; }

.aviso-falta { background: var(--orange-suave); color: #7A3B10; border-color: #F7D2B8; }
.avancado { border: 1px dashed var(--line-forte); border-radius: var(--raio-p); padding: 0 14px; }
.avancado summary { cursor: pointer; list-style: none; padding: 14px 0; display: flex; align-items: baseline; gap: 10px; font-weight: 700; line-height: 1.35; color: var(--body); } /* 14 em cima e embaixo do titulo, seta na altura da 1a linha */
.avancado summary::-webkit-details-marker { display: none; }
.avancado summary::before { content: ""; flex: none; align-self: flex-start; margin-top: 3px; width: 16px; height: 16px; background: var(--muted); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform 0.15s; }
.avancado[open] summary::before { transform: rotate(90deg); }
.avancado > * { margin-bottom: 14px; } /* aberto: 14 entre os itens e ate a borda, o ritmo dos blocos */
.avancado > summary { margin-bottom: 0; }
/* horarios por dia */
.horarios { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--raio-p); background: var(--card); overflow: hidden; }
.dia-linha { display: grid; grid-template-columns: 210px minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; min-height: 64px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.dia-linha:last-of-type { border-bottom: 0; }
.dia-cabeca { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dia-nome { width: 88px; font-weight: 700; white-space: nowrap; }
.dia-estado { font-size: 13.5px; font-weight: 600; color: var(--lime-escuro); }
.dia-linha.fechado .dia-estado { color: var(--muted); }
.dia-linha.fechado .dia-nome { color: var(--muted); }
.turnos { display: flex; flex-wrap: wrap; gap: 8px 20px; min-width: 0; }
.turno { display: flex; align-items: center; gap: 8px; }
.turno input[type="time"] { width: 118px; min-height: 44px; padding: 6px 8px; border: 1.5px solid var(--line-forte); border-radius: 12px; font: inherit; font-size: 16px; background: var(--card); color: var(--ink); }
.turno .muted { font-size: 14px; min-width: 26px; }
.turno .btn-mini { min-width: 40px; padding: 0; }
.dia-mais { justify-self: end; white-space: nowrap; }
.dia-acao { display: none; }
/* celular: cabecalho = dia, [+ 2o turno] e liga/desliga na ponta; embaixo so as linhas de hora, todas iguais:
   [hora] ate [hora], ocupando a largura inteira, uma embaixo da outra. */
@media (max-width: 640px) {
  .dia-linha { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 12px; min-height: 0; }
  .dia-cabeca { justify-content: flex-start; min-height: 36px; gap: 10px; }
  .dia-cabeca .dia-nome { width: auto; flex: 1 1 auto; min-width: 0; }
  .dia-linha.fechado .dia-nome { flex: 0 0 88px; }
  .dia-linha:not(.fechado) .dia-estado { display: none; } /* a chave verde ja diz que esta aberto */
  .dia-cabeca .chave { order: 4; margin-left: auto; }
  .dia-linha:not(.fechado) .dia-cabeca .chave { margin-left: 0; }
  .dia-acao { order: 3; display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--line-forte); background: var(--card); color: var(--deep2); font: inherit; font-size: 13.5px; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; }
  .dia-acao.tirar { color: #A3341F; border-color: #F3C9C2; background: #FFF6F4; }
  .dia-linha .dia-mais, .dia-linha .turnos .turno .btn-mini { display: none; } /* o X do 2o turno mora no cabecalho; ganha do ".btn-mini:has(icone)" la de baixo, que mostrava um X a mais */
  .turnos { flex-direction: column; gap: 8px; }
  .turno { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); gap: 8px; align-items: center; }
  .turno .muted { min-width: 0; text-align: center; white-space: nowrap; font-size: 13px; }
  .turno .muted:first-child { display: none; } /* "das" some: o "ate" no meio ja explica */
  /* appearance none: no iPhone o campo de hora tem largura minima propria e passava da coluna.
     flex + align-items: e o que o proprio iPhone usa pra centrar a hora na altura (com display block ela subia) */
  .turno input[type="time"] { -webkit-appearance: none; appearance: none; display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; max-width: 100%; min-height: 48px; text-align: center; padding: 0 4px; }
  .turno input[type="time"]::-webkit-date-and-time-value { text-align: center; margin: 0; }
  /* no celular o toque no campo ja abre o relogio: o icone so roubava espaco e cortava a hora */
  .turno input[type="time"]::-webkit-calendar-picker-indicator { display: none; }
}
.btn-mini { min-height: 40px; padding: 6px 12px; font-size: 14px; border-radius: 10px; align-self: flex-start; }
.interruptor .texto { flex: 1; font-weight: 600; }
.interruptor .texto small { display: block; font-weight: 400; font-size: 13.5px; color: var(--muted); }
.chave { position: relative; width: 58px; height: 34px; border-radius: 17px; background: #D3DCCB; border: 0; flex: none; transition: background 0.15s; }
.chave { cursor: pointer; transition: background 0.2s; }
.chave::after { content: ""; position: absolute; top: 3px; left: 3px; width: 28px; height: 28px; border-radius: 50%; background: #fff; transition: left 0.22s cubic-bezier(0.3, 1.4, 0.5, 1); box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.chave:active::after { width: 32px; }
.chave.on { background: var(--lime); }
.chave.on::after { left: 27px; }

/* ---------- Situacao da loja no painel: aberta (verde, ao vivo), fechada na chave (cinza), fechada pelo horario (ambar) ----------
   Bolinha na linha do titulo, frase embaixo alinhada com o titulo, chave no meio da altura. Um pulso so, lento;
   com "reduzir movimento" ligado vira um halo parado. */
.status-loja { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; align-items: center; padding: 14px 16px; transition: background-color 0.25s, border-color 0.25s; }
.status-loja .status-ponto { grid-row: 1; grid-column: 1; position: relative; width: 12px; height: 12px; border-radius: 50%; background: var(--ponto); }
.status-loja .status-titulo { grid-row: 1; grid-column: 2; font-size: 16px; line-height: 1.3; }
.status-loja .status-sub { grid-row: 2; grid-column: 2; font-size: 13.5px; line-height: 1.35; color: var(--muted); }
.status-loja .chave { grid-row: 1 / 3; grid-column: 3; }
.status-loja.aberta { --ponto: var(--lime-escuro); background: var(--lime-suave); border-color: var(--lime); }
.status-loja.aberta .status-titulo { color: var(--deep); }
.status-loja.aberta .status-sub { color: var(--deep2); }
.status-loja.aberta .status-ponto::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--ponto); animation: status-ao-vivo 2s cubic-bezier(0, 0, 0.2, 1) infinite; }
@keyframes status-ao-vivo { 0% { transform: scale(1); opacity: 0.55; } 75%, 100% { transform: scale(2.6); opacity: 0; } }
.status-loja.fechada { --ponto: #A3ACA1; background: #F2F4F0; }
.status-loja.horario { --ponto: #D98A0B; background: var(--orange-suave); border-color: #F3C98B; }
.status-loja.horario .status-sub { color: #9A5A06; }
@media (prefers-reduced-motion: reduce) { .status-loja.aberta .status-ponto::after { animation: none; transform: scale(2); opacity: 0.22; } }
.linha-produto { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--raio-p); padding: 10px 12px; }
.linha-produto .emoji { font-size: 26px; width: 36px; text-align: center; flex: none; }
.linha-produto .nome { flex: 1; min-width: 0; font-weight: 600; }
.linha-produto .nome small { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linha-produto input.preco { width: 110px; min-height: 48px; padding: 8px 10px; border: 1.5px solid var(--line-forte); border-radius: 10px; text-align: right; font-weight: 700; }
.linha-produto .editar { border: 1.5px solid var(--line-forte); background: var(--card); border-radius: 10px; min-height: 44px; padding: 0 12px; font-weight: 700; }
.linha-produto .nome > :first-child { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 380px) { .linha-produto { gap: 8px; padding: 10px; } .linha-produto input.preco { width: 92px; padding: 8px 6px; font-size: 15px; } .linha-produto .editar { padding: 0 8px; } .linha-produto .emoji { width: 28px; font-size: 22px; } }
.linha-produto.desligado { opacity: 0.55; }
.linha-produto .editar { min-width: 44px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.linha-produto .editar.apagar { border-color: #F3C9C2; background: #FFF6F4; }
/* celular: item e opcao em duas linhas, em grade (nada quebra pra terceira linha, por mais estreita que a tela seja).
   Em cima a foto e o nome inteiro; embaixo preco, botao e liga/desliga sempre nas mesmas colunas. */
@media (max-width: 480px) {
  .linha-produto.item, .linha-produto.opcao { display: grid; gap: 8px 10px; padding: 12px; align-items: center; }
  .linha-produto.item { grid-template-columns: 44px minmax(0, 1fr) 48px 48px auto; }
  .linha-produto.opcao { grid-template-columns: minmax(0, 1fr) 48px auto; }
  .linha-produto.item > :first-child { grid-column: 1; grid-row: 1; width: 44px; height: 44px; line-height: 44px; font-size: 26px; }
  .linha-produto.item .nome { grid-column: 2 / -1; grid-row: 1; line-height: 1.25; }
  .linha-produto.opcao .nome { grid-column: 1 / -1; grid-row: 1; line-height: 1.25; }
  .linha-produto.item input.preco, .linha-produto.opcao input.preco { grid-row: 2; width: 100%; max-width: 140px; justify-self: start; margin: 0; font-size: 16px; padding: 8px 10px; text-align: center; }
  .linha-produto.item input.preco { grid-column: 1 / 3; max-width: none; } /* comeca embaixo da foto: cabe "R$ 118,00" mesmo com lixeira, lapis e chave do lado */
  .linha-produto.opcao input.preco { grid-column: 1; max-width: none; } /* o preco ocupa ate encostar no x: sem vao no meio da linha */
  .linha-produto.item .editar, .linha-produto.opcao .editar { grid-row: 2; width: 48px; min-height: 48px; padding: 0; }
  .linha-produto.item .editar { grid-column: 4; }
  .linha-produto.item .editar.apagar { grid-column: 3; }
  .linha-produto.opcao .editar { grid-column: 2; }
  .linha-produto.item .chave, .linha-produto.opcao .chave { grid-row: 2; grid-column: -2 / -1; }
}

.metricas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.metrica { background: var(--card); border: 1px solid var(--line); border-radius: var(--raio-p); padding: 12px; }
.metrica .v { font-family: var(--display); font-size: 24px; font-weight: 700; color: var(--deep); }
.metrica .l { font-size: 13px; color: var(--muted); }
.seletor-periodo { display: flex; flex-wrap: wrap; gap: 8px; }
.seletor-periodo .aba-painel { min-height: 44px; min-width: 88px; justify-content: center; }
.barras { display: flex; align-items: stretch; gap: 4px; height: 190px; background: var(--card); border: 1px solid var(--line); border-radius: var(--raio-p); padding: 16px 12px 10px; }
.barras.poucos { gap: 10px; }
.barras .b { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.barras .b .area { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; border-bottom: 1.5px solid var(--line); }
.barras .b .col { width: 100%; max-width: 44px; background: var(--lime-suave); border: 1.5px solid var(--lime); border-bottom: 0; border-radius: 8px 8px 0 0; min-height: 2px; }
.barras .b.zero .col { border-color: var(--line); background: var(--line); }
.barras .b.hoje .col { background: var(--lime); }
.barras .b .val { font-size: 12px; font-weight: 700; color: var(--deep2); line-height: 1; white-space: nowrap; }
.barras .b .lab { height: 14px; font-size: 12px; line-height: 14px; color: var(--muted); white-space: nowrap; }
.barras .b.hoje .lab { color: var(--deep2); font-weight: 700; }
.grafico-vazio { background: var(--card); border: 1px dashed var(--line-forte); border-radius: var(--raio-p); padding: 28px 16px; text-align: center; color: var(--muted); }
.grafico-vazio .icone { font-size: 34px; line-height: 1; margin-bottom: 8px; }
.grafico-vazio p { margin: 0; text-wrap: balance; }
@media (max-width: 480px) { .metricas { grid-template-columns: 1fr 1fr; } .metricas .metrica:first-child { grid-column: 1 / -1; } .metrica .v { font-size: 22px; } }
.lista-simples { display: flex; flex-direction: column; gap: 6px; }
.lista-simples .linha { display: flex; justify-content: space-between; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.passo-config { width: 100%; text-align: left; min-height: 48px; align-items: center; gap: 10px; font-size: 15.5px; color: var(--ink); }
.passo-config b { color: var(--deep2); white-space: nowrap; }
.passo-config.feito { opacity: 0.7; }
.tabela { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: var(--raio-p); overflow: hidden; font-size: 15px; }
.tabela th, .tabela td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.tabela th { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.tabela tr:last-child td { border-bottom: 0; }
.sem-quebra, .tabela .sem-quebra { white-space: nowrap; } /* valor (R$ 70,00) ou telefone nunca parte no meio */
.tabela .tab-sub { display: none; }
@media (max-width: 560px) {
  .tabela-clientes th:nth-child(2), .tabela-clientes td:nth-child(2), .tabela-clientes th:nth-child(3), .tabela-clientes td:nth-child(3) { display: none; }
  .tabela-clientes .tab-sub { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); white-space: nowrap; }
  .tabela-clientes th:last-child, .tabela-clientes td:last-child { text-align: right; }
}
/* aba "Minha loja" do painel: telas em cartoes iguais + bloco de divulgar */
.telas-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0 12px; }
@media (max-width: 760px) { .telas-grade { grid-template-columns: 1fr; } }
.tela-card { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--raio); }
.tela-card .icone { font-size: 28px; line-height: 1; margin-bottom: 4px; }
.tela-card b { font-size: 16px; }
.tela-card p { margin: 0; font-size: 14px; color: var(--muted); flex: 1; }
.tela-card .linha-botoes { margin-top: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tela-card .linha-botoes .btn { width: 100%; min-width: 0; min-height: 48px; padding: 0 6px; white-space: nowrap; font-size: 15px; }
@media (max-width: 360px) {
  .tela-card .linha-botoes { grid-template-columns: minmax(0, 1fr); } /* um botao por linha: "Copiar link" inteiro */
  .divulgar-acoes .btn, .linha-painel-link .btn { font-size: 14.5px; padding-left: 12px; padding-right: 12px; }
  .aparencia-controles .estilo-linha .aba-painel { font-size: 13px; }
  .mp-conexao .btn { font-size: 15px; }
}
.linha-painel-link { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.linha-painel-link .btn { flex: none; }
.divulgar { display: flex; gap: 16px; align-items: flex-start; margin-top: 12px; }
.divulgar-acoes { flex: 1; min-width: 0; }
.divulgar-acoes .caixa-link { margin: 0; }
@media (max-width: 600px) { .divulgar { flex-direction: column; align-items: center; } .divulgar-acoes { width: 100%; } }
/* ---------- hub da cidade estilo console: trilho de lojas + palco que muda com a escolhida ---------- */
.ps-palco { position: relative; isolation: isolate; overflow: hidden; overflow: clip; min-width: 0; border-radius: 24px; background: var(--deep); color: #fff; box-shadow: 0 18px 40px rgba(14, 31, 20, 0.18); }
.ps-fundo { position: absolute; inset: -30px; z-index: -2; background-size: cover; background-position: center; filter: blur(26px) saturate(1.15); transform: scale(1.1); opacity: 0.55; transition: background-image 0.35s ease, background-color 0.35s ease, opacity 0.35s ease; }
.ps-palco::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 22, 16, 0.35), rgba(8, 22, 16, 0.78)); }
.ps-trilho { position: relative; min-width: 0; max-width: 100%; display: flex; gap: 24px; overflow-x: auto; overscroll-behavior-x: contain; padding: 28px 28px 24px; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ps-trilho::-webkit-scrollbar { display: none; }
.ps-tile { position: relative; flex: none; width: 116px; height: 116px; padding: 0; border: 0; border-radius: 22px; overflow: hidden; background: #fff; cursor: pointer; scroll-snap-align: center; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28); transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.22s, opacity 0.22s; display: flex; align-items: center; justify-content: center; font-size: 52px; }
.ps-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-tile.fechada { opacity: 0.55; filter: grayscale(0.5); }
.ps-tile.escolhida { transform: scale(1.06); opacity: 1; filter: none; box-shadow: 0 14px 26px rgba(0, 0, 0, 0.42); z-index: 2; }
.ps-tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 0 transparent; transition: box-shadow 0.2s; }
.ps-tile.escolhida::after { box-shadow: inset 0 0 0 4px var(--lime), inset 0 0 0 6px #fff; }
.ps-tile:focus-visible { outline: none; }

.ps-detalhe { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 0 28px 28px; min-height: 118px; }
.ps-texto { min-width: 0; flex: 1 1 260px; display: flex; flex-direction: column; gap: 6px; }
.ps-nome { font-family: var(--display); font-size: 28px; font-weight: 700; line-height: 1.1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.selo-mini { width: 18px; height: 18px; flex: none; margin-right: 2px; vertical-align: -4px; }
.selo-verificada { width: 22px; height: 22px; flex: none; display: inline-block; vertical-align: -4px; margin-left: 6px; }
.ps-nome .selo-verificada { width: 24px; height: 24px; margin-left: -5px; vertical-align: middle; } /* o vao do .ps-nome e 10 (pensado pra etiqueta dourada); o selo fica colado no nome: 5 px */
.selo-verificada.no-nome { width: 0.86em; height: 0.86em; vertical-align: middle; position: relative; top: -0.095em; margin-left: 0.2em; } /* centro do selo no centro das letras maiusculas do nome */
.ps-tile .selo-verificada.no-tile { position: absolute; z-index: 3; top: 8px; right: 8px; width: 26px; height: 26px; margin: 0; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); }

.estrela { display: inline-flex; flex: none; line-height: 1; color: #8A5A00; }
.ps-meta { font-size: 14.5px; color: rgba(255, 255, 255, 0.82); }
.ps-status { display: flex; flex-wrap: wrap; gap: 8px; }
.ps-status span { font-size: 13px; font-weight: 700; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); }
.ps-status .aberta { background: rgba(132, 204, 22, 0.28); color: #E6FFB8; }
.ps-status .fechada { background: rgba(255, 138, 61, 0.26); color: #FFE1CC; }
.ps-abrir { flex: none; min-height: 56px; padding: 12px 26px; font-size: 18px; }
@media (max-width: 600px) { .ps-trilho { padding: 20px 20px 20px; gap: 16px; } .ps-tile { width: 96px; height: 96px; border-radius: 18px; font-size: 42px; } .ps-detalhe { padding: 0 20px 20px; } .ps-nome { font-size: 23px; } .ps-abrir { width: 100%; } }
/* celular: tres lojas cabem inteiras, com a mesma margem de 16 dos dois lados */
@media (max-width: 420px) { .ps-trilho { padding: 16px; gap: 12px; } .ps-tile { width: 88px; height: 88px; border-radius: 16px; font-size: 38px; } .ps-detalhe { padding: 0 16px 16px; } }
.ps-trilho.rola { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
@media (hover: hover) { .ps-tile:hover { transform: scale(1.03); opacity: 1; } .ps-tile.escolhida:hover { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .ps-tile, .ps-fundo { transition: none; } }
/* preco de fundador: primeira linha da grade de planos, da largura exata dos cartoes */
.fundador { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: center; padding: 16px 18px; text-align: left; background: #FFFBEB; border: 1.5px solid #FCD34D; border-radius: 20px; }
.fundador-lado { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fundador-selo { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-size: 18px; font-weight: 700; line-height: 1.2; color: #3F2A00; }
.fundador-selo .estrela { color: #D97706; }
.fundador-texto { margin: 0; font-size: 14.5px; line-height: 1.4; color: #5B3A00; }
.fundador-conta { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fundador-vagas { font-size: 14px; line-height: 1; color: #6B4A00; white-space: nowrap; }
.fundador-vagas b { font-family: var(--display); font-size: 18px; color: #3F2A00; }
.fundador-barra { height: 8px; border-radius: 999px; background: #FDE68A; overflow: hidden; }
.fundador-barra i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #F59E0B, #FBBF24); position: relative; overflow: hidden; }
/* vagas acabando: ampulheta que vira e um brilho correndo na barra (parado com "reduzir movimento") */
.fundador-relogio { display: inline-block; margin-right: 6px; font-size: 15px; line-height: 1; vertical-align: -1px; }
.fundador-barra i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent); transform: translateX(-100%); }
@media (prefers-reduced-motion: no-preference) {
  .fundador-relogio { animation: fundador-virar 3s ease-in-out infinite; }
  .fundador-barra i::after { animation: fundador-brilho 2.4s ease-in-out infinite; }
}
@keyframes fundador-virar { 0%, 40% { transform: rotate(0deg); } 50%, 90% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } }
@keyframes fundador-brilho { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
@media (min-width: 560px) { .fundador { grid-template-columns: minmax(0, 1fr) 200px; gap: 24px; } .fundador-vagas { text-align: right; } }
.fundador.espera { background: #FFF4E5; border-color: #F7D2B8; }
.fundador.espera .fundador-texto { color: #7A3B10; }
.fundador.espera .fundador-conta .btn { width: 100%; white-space: nowrap; }
@media (min-width: 560px) { .fundador.espera { grid-template-columns: minmax(0, 1fr) auto; } }
.plano-fundador { font-size: 13px; line-height: 1.35; color: #5B3A00; background: #FEF3C7; border-radius: 10px; padding: 6px 10px; margin: -2px -10px 0; } /* fundo sai 10px para fora: o texto fica na mesma linha do titulo e do preco */
.plano-fundador s { color: #7A5A12; }
.plano-economia { font-size: 13px; line-height: 1.35; color: #14532D; background: #DCFCE7; border-radius: 10px; padding: 6px 10px; margin: -2px -10px 0; } /* anual: o desconto em reais, colado no preco */
.plano-economia + .plano-fundador { margin-top: 0; }
.tipo-selo { font-size: 12px; font-weight: 700; line-height: 1; padding: 5px 8px; border-radius: 999px; background: #DCFCE7; color: #14532D; white-space: nowrap; }
.aba-painel.ativa .tipo-selo { background: var(--lime); color: var(--ink); }
@media (max-width: 360px) { .estilo-linha.seletor-tipo { gap: 8px; } .seletor-tipo .aba-painel { padding: 8px 12px; gap: 6px; } .seletor-tipo .tipo-selo { padding: 5px 6px; } } /* tela ampliada do iPhone: Mensal e Anual na mesma linha */
.selo.selo-fundador { background: #FDE68A; color: #3F2A00; }
/* avisos do plano (Minha conta): cartao com icone, titulo e uma linha */
.aviso-plano { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid; text-align: left; }
.aviso-plano-ico { flex: none; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; }
.aviso-plano-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aviso-plano-texto b { font-family: var(--display); font-size: 16px; line-height: 1.25; }
.aviso-plano-texto span { font-size: 14px; line-height: 1.4; }
.aviso-plano-texto span b { font-family: inherit; font-size: inherit; white-space: nowrap; } /* "17 vagas" nunca separa */

/* aviso-fundador vem montado ('aviso-' + tipo em conta.js): nao e CSS morto */
.aviso-fundador { background: #FFFBEB; border-color: #FCD34D; color: #5B3A00; }
.aviso-fundador .aviso-plano-ico { background: #FDE68A; color: #B45309; }
.aviso-fundador .aviso-plano-texto > b { color: #3F2A00; }
.aviso-espera { background: var(--orange-suave); border-color: #F7D2B8; color: #7A3B10; }
.aviso-espera .aviso-plano-ico { background: #FDE0CC; }
.aviso-espera .aviso-plano-texto > b { color: #5C2A08; }
.conta-ola { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.conta-ola .selo { font-family: var(--corpo, inherit); line-height: 1; }
.conta-ola .selo[hidden] { display: none; }
/* seletor de cidade no titulo do hub */
.hub-cidade-seletor { font: inherit; color: inherit; background: rgba(255, 255, 255, 0.14); border: 1.5px solid rgba(255, 255, 255, 0.4); border-radius: 14px; padding: 5px 14px 7px; line-height: 1.1; cursor: pointer; display: inline-flex; align-items: baseline; gap: 8px; text-shadow: inherit; }
.hub-cidade-seletor .seta { display: inline-flex; }
.hub-cidade-seletor:hover { background: rgba(255, 255, 255, 0.22); }
/* servico extra: loja com design exclusivo (pagina de vendas). Vitrine escura: e um produto, tem que chamar. */
.exclusiva { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; padding: 28px 20px; border-radius: 28px; color: #fff;
  background: radial-gradient(circle at 12% 0%, rgba(253, 230, 138, 0.22), transparent 46%), radial-gradient(circle at 100% 100%, rgba(132, 204, 22, 0.22), transparent 50%), linear-gradient(160deg, #0F3D2E, #0A241B);
  box-shadow: 0 24px 50px rgba(14, 31, 20, 0.24); }
.ex-vitrine { display: flex; align-items: flex-end; justify-content: center; gap: 14px; }
.ex-seta { align-self: center; font-size: 26px; color: #FDE68A; font-weight: 700; }
.ex-cel { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ex-tela { width: 132px; height: 236px; border: 6px solid #0B1510; border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 10px 10px; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.4); }
.ex-cel-exclusivo .ex-tela { width: 150px; height: 268px; border-color: #0B1510; transform: rotate(2deg); box-shadow: 0 18px 36px rgba(0, 0, 0, 0.5), 0 0 0 3px rgba(253, 230, 138, 0.55); }
.ex-cel-padrao .ex-tela { background: #FAFDF6; transform: rotate(-2deg); opacity: 0.92; }
.ex-cel-exclusivo .ex-tela { background: radial-gradient(circle at 50% 12%, rgba(239, 169, 44, 0.35), transparent 60%), #f6e6c4; }
.ex-logo { width: 58px; height: 58px; object-fit: contain; flex: none; }
.ex-cel-exclusivo .ex-logo { width: 84px; height: 84px; }
.ex-logo-emoji { display: flex; align-items: center; justify-content: center; font-size: 28px; background: #EEF9DC; border-radius: 16px; }
.ex-nome { font-family: var(--display); font-weight: 700; font-size: 13px; color: #0E1F14; line-height: 1; }
.ex-cel-exclusivo .ex-nome { color: #241708; font-size: 14px; }
.ex-botao { width: 100%; text-align: center; font-family: var(--display); font-weight: 700; font-size: 10px; letter-spacing: 0.04em; padding: 8px 0; border-radius: 10px; background: #84CC16; color: #0E1F14; }
.ex-cel-exclusivo .ex-botao { background: linear-gradient(180deg, #e05543, #c0392b); color: #fbf0d9; border: 2px solid #241708; box-shadow: 0 3px 0 #8e2318, 0 5px 0 #241708; margin-bottom: 4px; }
.ex-item { width: 100%; display: flex; align-items: center; gap: 7px; padding: 6px; border-radius: 9px; background: #fff; border: 1px solid #DCE7D3; }
.ex-cel-exclusivo .ex-item { background: #fffdf7; border: 2px solid #241708; box-shadow: 0 2px 0 #241708; }
.ex-foto { width: 22px; height: 22px; border-radius: 6px; background: #EEF9DC; flex: none; }
.ex-cel-exclusivo .ex-foto { background: linear-gradient(160deg, #f7c948, #efa92c); border: 1.5px solid #241708; }
.ex-linhas { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.ex-linhas i { display: block; height: 4px; border-radius: 2px; background: #DCE7D3; }
.ex-linhas i:last-child { width: 60%; }
.ex-cel-exclusivo .ex-linhas i { background: #e8d3a6; }
.ex-cel-exclusivo .ex-linhas i:last-child { background: #c0392b; }
.ex-rotulo { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.ex-cel-exclusivo .ex-rotulo { color: #FDE68A; }
.ex-texto { display: flex; flex-direction: column; gap: 16px; min-width: 0; container-type: inline-size; }
.ex-kicker { font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #FDE68A; }
.exclusiva h2 { color: #fff; font-size: 28px; line-height: 1.12; margin: -8px 0 0; }
.ex-sub { margin: 0; color: rgba(255, 255, 255, 0.86); font-size: 16px; line-height: 1.5; }
.ex-recursos { display: grid; grid-template-columns: 1fr; gap: 12px 20px; margin: 0; padding: 0; list-style: none; } /* lista leve, sem cartao: a vitrine ja chama bastante */
.ex-recurso { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ex-icone { width: 38px; height: 38px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.1); font-size: 19px; line-height: 1; } /* bolinha fixa: o texto comeca no mesmo x em todas as linhas */
.ex-selo { width: 21px; height: 21px; display: block; } /* o selo verde de verdade, do tamanho visual dos emojis ao lado */
.ex-recurso > b { font-size: 15px; line-height: 1.3; color: #fff; }
.ex-preco { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.ex-apartir { font-size: 14px; color: rgba(255, 255, 255, 0.78); }
.ex-preco b { font-family: var(--display); font-size: 38px; line-height: 1; color: #FDE68A; }
.ex-obs { font-size: 14px; color: rgba(255, 255, 255, 0.86); flex-basis: 100%; }
.ex-botoes { display: flex; gap: 12px; flex-wrap: wrap; }
.ex-botoes .btn { flex: 1 1 260px; min-width: max-content; min-height: 58px; white-space: nowrap; } /* base maior que o texto mais largo: lado a lado so com os dois do mesmo tamanho; senao desce */
.ex-botoes .ex-ver { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.5); }
@container (min-width: 500px) {
  .ex-recursos { grid-template-columns: 1fr 1fr; } /* duas colunas so quando cada linha cabe inteira */
}
@media (max-width: 420px) {
  .exclusiva { padding: 24px 16px; gap: 20px; border-radius: 24px; }
  .ex-vitrine { gap: 8px; }
  .ex-tela { width: 108px; height: 196px; border-width: 5px; border-radius: 20px; padding: 10px 8px 8px; gap: 6px; }
  .ex-cel-exclusivo .ex-tela { width: 124px; height: 224px; }
  .ex-logo { width: 44px; height: 44px; } .ex-cel-exclusivo .ex-logo { width: 66px; height: 66px; }
  .ex-seta { font-size: 20px; }
  .exclusiva h2 { font-size: 24px; }
  .ex-preco b { font-size: 32px; }
  .ex-botoes .btn { flex: 1 1 100%; }
}
@media (min-width: 900px) { .exclusiva { grid-template-columns: 360px minmax(0, 1fr); gap: 36px; padding: 40px 44px; } .ex-tela { width: 148px; height: 264px; } .ex-cel-exclusivo .ex-tela { width: 168px; height: 300px; } .exclusiva h2 { font-size: 34px; } }
@media (prefers-reduced-motion: no-preference) { .ex-cel-exclusivo .ex-tela { animation: ex-flutuar 5s ease-in-out infinite; } }
@keyframes ex-flutuar { 0%, 100% { transform: rotate(2deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-8px); } }
.exclusivo-convite { margin: 0; }
/* tela de carregamento da loja oficial */
.splash-oficial { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; transition: opacity 0.3s ease; }
.splash-oficial.saindo { opacity: 0; pointer-events: none; }
.splash-oficial img { width: min(220px, 56vw); height: auto; animation: splash-pulsar 1.1s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes splash-pulsar { 0%, 100% { transform: translateY(0) scale(1) rotate(-1.5deg); } 50% { transform: translateY(-12px) scale(1.04) rotate(1.5deg); } }
.splash-pontos { display: flex; gap: 8px; }
.splash-pontos span { width: 12px; height: 12px; border-radius: 50%; background: #c0392b; animation: splash-ponto 0.9s ease-in-out infinite; }
.splash-pontos span:nth-child(2) { animation-delay: 0.15s; background: #efa92c; }
.splash-pontos span:nth-child(3) { animation-delay: 0.3s; background: #2e7d32; }
@keyframes splash-ponto { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(-8px); opacity: 1; } }
/* paineis (lojista, cozinha, entregador, Central): a tela do Ligeiro. O fundo branco cobre tudo na hora; mascote, nome
   e bolinhas surgem depois de um instante. Cores fixas da marca (nao mudam com a cor de cada loja). */
@keyframes splash-surgir { to { opacity: 1; } }
@keyframes splash-entrar { from { opacity: 0; } to { opacity: 1; } }
.splash-ligeiro img { width: min(150px, 40vw); animation: splash-entrar 0.25s ease 0.18s both, splash-pulsar 1.1s ease-in-out infinite; }
.splash-ligeiro .splash-marca, .splash-ligeiro .splash-pontos { animation: splash-entrar 0.25s ease 0.18s both; }
.splash-marca { margin-top: -6px; font-family: var(--display); font-size: 40px; font-weight: 700; letter-spacing: -1.5px; line-height: 1; color: #0F3D2E; }
.splash-marca span { color: #5E9A0C; }
.splash-ligeiro .splash-pontos span { background: #84CC16; }
.splash-ligeiro .splash-pontos span:nth-child(2) { background: #1B6B4A; }
.splash-ligeiro .splash-pontos span:nth-child(3) { background: #0F3D2E; }
/* tela de carregamento das lojas comuns: fundo da pagina e tres bolinhas iguais na cor da loja.
   As bolinhas so aparecem depois de 0,25 s: loja que abre rapido nem mostra. */
.splash-loja { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: var(--bg); transition: opacity 0.25s ease; }
.splash-loja.saindo { opacity: 0; pointer-events: none; }
.carregando-pontos { display: flex; gap: 10px; opacity: 0; animation: splash-surgir 0.2s ease 0.25s forwards; }
.carregando-pontos span { width: 14px; height: 14px; border-radius: 50%; background: var(--cor-bolinha, #B4BCB6); animation: splash-ponto 0.9s ease-in-out infinite; }
.carregando-pontos span:nth-child(2) { animation-delay: 0.15s; }
.carregando-pontos span:nth-child(3) { animation-delay: 0.3s; }
/* fim da primeira tela da loja: confianca e bloco da loja oficial */
.fim-inicio { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 0 var(--margem); }
.fim-inicio:empty { display: none; }
.confianca { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin: 0; max-width: 440px; font-size: 13px; font-weight: 600; color: var(--muted); line-height: 1.4; }
.confianca span { white-space: nowrap; }
.fim-inicio > :first-child { margin-top: 4px; } /* loja sem o cartao da casa: 12 + 4 = 16 dos cartoes ate os selos, igual a oficial */
/* pedaco vazio do rodape nao conta como vao */
.rodape > :empty { display: none; }
.oficial-extra { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 440px; padding: 12px; background: var(--card); border: 1.5px solid var(--line); border-radius: var(--raio); text-align: left; }
.oficial-extra img { width: 108px; height: 108px; object-fit: contain; flex: none; } /* mesma medida e recuo da foto dos cartoes de cima: desenho e texto alinhados com eles */
.oficial-extra b { display: block; font-family: var(--display); font-size: 17px; line-height: 1.2; }
.oficial-extra span { display: block; font-size: 13.5px; color: var(--muted); margin-top: 4px; }
.painel-topo .logo-mini { height: 40px; width: 40px; object-fit: contain; flex: none; }
/* conexao com o Mercado Pago (painel) */
.mp-conexao { display: flex; flex-direction: column; gap: 14px; margin: 0; }
/* Pagamento: a linha do Pix leva a conexao dentro dela, com a mesma borda e o mesmo recuo das outras linhas */
.forma-pix { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--raio-p); }
.forma-pix > .interruptor { border: 0; background: transparent; }
.forma-pix > .mp-conexao, .forma-pix > .avancado { margin: 0 14px 14px; }
.forma-situacao { flex: none; padding: 6px 12px; border-radius: 999px; background: var(--orange-suave); color: #7A3B10; font-size: 13.5px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.forma-situacao.lendo { background: var(--lime-suave); color: var(--muted); font-weight: 600; } /* 14 em cima, 14 ate o texto, 14 embaixo: o ritmo do bloco */
.btn-mp { background: #009EE3; color: #fff; }
.btn-mp:hover { background: #0089c5; }
/* selo na linha de cima inteira; embaixo a data (nunca quebra) e o Desconectar a direita. No celular o botao desce
   e ocupa a linha toda, igual aos botoes dos blocos Senha da equipe e Avisos */
.mp-conectado { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; align-items: center; padding: 12px 14px; background: var(--lime-suave); border: 1px solid #CFE3B4; border-radius: var(--raio-p); }
.mp-selo { font-weight: 700; color: var(--deep2); }
.mp-conectado > .mp-selo { flex: 1 1 100%; }
.mp-conectado > .muted { white-space: nowrap; }
.mp-conectado .btn { margin-left: auto; }
@media (max-width: 600px) { .mp-conectado .btn { flex: 1 1 100%; margin-left: 0; } }
/* tela do Pix do cliente: gerando / falhou */
.pix-gerando { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 24px 12px; font-weight: 700; color: var(--deep2); }
.pix-gerando .girando { width: 22px; height: 22px; border: 3px solid var(--line-forte); border-top-color: var(--deep2); border-radius: 50%; animation: girar 0.9s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.pix-falhou { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px; background: var(--erro-suave); border: 1px solid var(--erro); border-radius: var(--raio-p); text-align: center; }
.pix-falhou p { margin: 0; font-size: 14.5px; }
/* modal de pagar assinatura: cartao/boleto em cima, Pix embaixo */
.cobranca-opcoes { display: flex; flex-direction: column; gap: 10px; }
.cobranca-pix { padding-top: 6px; border-top: 1px solid var(--line); margin-top: 4px; }
/* comparativo com concorrentes (pagina de vendas) */
.comparativo { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.comparativo .rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--raio-p); }
.tabela-concorrentes { min-width: 480px; }
.tabela-concorrentes td:nth-child(2), .tabela-concorrentes th:nth-child(2) { white-space: nowrap; }
.tabela-concorrentes td:first-child b { white-space: nowrap; } /* nome do concorrente inteiro ("Delivery Direto") */
.tabela-concorrentes tr.destaque td { background: var(--lime-suave); }
.tabela-concorrentes tr.destaque td:first-child { box-shadow: inset 4px 0 0 var(--lime); }
@media (max-width: 520px) {
  /* no celular a tabela vira lista: nome em cima, preco e comissao embaixo, sem rolagem lateral */
  .comparativo .rolagem { overflow: visible; background: var(--card); border: 1px solid var(--line); }
  .tabela-concorrentes { min-width: 0; border: 0; }
  .tabela-concorrentes thead { display: none; }
  .tabela-concorrentes tbody, .tabela-concorrentes tr, .tabela-concorrentes td { display: block; }
  .tabela-concorrentes tr { padding: 10px 14px; border-bottom: 1px solid var(--line); }
  .tabela-concorrentes tr:last-child { border-bottom: 0; }
  .tabela-concorrentes td { padding: 0; border: 0; white-space: normal; font-size: 14px; }
  .tabela-concorrentes td:first-child { font-size: 15px; margin-bottom: 2px; }
  .tabela-concorrentes td:nth-child(2)::before { content: 'Por mês: '; color: var(--muted); }
  .tabela-concorrentes td:nth-child(3)::before { content: 'Comissão: '; color: var(--muted); }
  .tabela-concorrentes tr.destaque { background: var(--lime-suave); box-shadow: inset 4px 0 0 var(--lime); }
  /* td:first-child junto: a barra do computador (td:first-child) tem mais forca que so "td" e voltava no nome */
  .tabela-concorrentes tr.destaque td, .tabela-concorrentes tr.destaque td:first-child { background: transparent; box-shadow: none; }
}
.caixa-link { background: var(--card); border: 1px dashed var(--line-forte); border-radius: var(--raio-p); padding: 12px 14px; font-family: ui-monospace, Consolas, monospace; font-size: 14px; word-break: break-all; }
.grade-form { display: grid; grid-template-columns: 1fr; gap: 12px; }

/* ---------- Campo de foto (painel) ---------- */

/* miniatura a esquerda; a direita os dois botoes lado a lado e a ajuda embaixo, alinhados pelo topo */
.foto-linha { display: flex; gap: 14px; align-items: flex-start; }
.foto-botoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; flex: 1; }
.foto-botoes .btn { flex: none; }
.foto-botoes .ajuda { flex-basis: 100%; margin: 4px 0 0; }
.foto-previa { width: 96px; height: 96px; flex: none; border-radius: 16px; background: var(--lime-suave); border: 1.5px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 34px; }
.foto-previa.redonda { border-radius: 28px; }
.foto-previa.larga { width: 190px; height: 96px; }
.foto-previa img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* foto do item em destaque: quadrada como no cardapio do cliente, grande e clicavel; sem foto, quadro tracejado que chama */
.foto-previa.destaque { width: 160px; height: 160px; border-radius: 20px; cursor: pointer; }
.foto-previa.destaque.vazia { border: 2px dashed var(--line-forte); }
@media (hover: hover) { .foto-previa.destaque:hover { border-color: var(--lime-escuro); } }
.foto-previa.destaque:focus-visible { outline: 3px solid var(--deep); outline-offset: 2px; }
.foto-previa.destaque .sem-foto { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.foto-previa.destaque .sem-foto .ico-traco { color: var(--deep2); }
.foto-previa.destaque .sem-foto .ico-traco svg { width: 44px; height: 44px; }
.campo-foto.destaque .foto-linha { align-items: center; gap: 16px; }
.campo-foto.destaque .foto-botoes { flex: 1; align-items: stretch; max-width: 220px; }
.campo-foto.destaque .foto-botoes .btn { width: 100%; padding-left: 8px; padding-right: 8px; gap: 8px; }
.campo-foto.destaque > .ajuda { margin: 8px 0 0; }
/* tela ampliada do iPhone (320): os botoes descem para baixo da foto, na largura toda (ao lado, "Adicionar foto" nao cabia) */
@media (max-width: 360px) { .foto-previa.destaque { width: 128px; height: 128px; } .campo-foto.destaque .foto-linha { flex-direction: column; align-items: stretch; gap: 12px; } .campo-foto.destaque .foto-botoes { max-width: none; } }
.foto-botoes { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-width: 0; }
.foto-botoes .ajuda { margin: 0; }
.linha-produto .miniatura-produto { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex: none; display: block; }
.paleta { display: flex; flex-wrap: wrap; gap: 10px; }
.paleta .cor { position: relative; width: 46px; height: 46px; border-radius: 50%; border: 0; padding: 0; box-shadow: 0 0 0 1.5px var(--line-forte); }
.paleta .cor.marcada { box-shadow: 0 0 0 2px #fff, 0 0 0 4.5px var(--ink); }
.paleta .cor.marcada::after { content: ""; position: absolute; inset: 0; margin: auto; width: 24px; height: 24px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E") center / contain no-repeat; }
.paleta .outra { display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; background: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); color: #fff; font-weight: 700; font-size: 22px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.paleta .outra input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.paleta .outra.marcada > span { display: none; } /* escolhida: fica so o check, sem o + por baixo */
.previa-cor { align-self: flex-start; margin-top: 10px; pointer-events: none; }
.estilos { display: flex; flex-direction: column; gap: 10px; }
.estilo-linha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.estilo-linha .rotulo { width: 120px; font-weight: 600; color: var(--body); font-size: 15px; }
.estilo-linha .aba-painel { min-height: 40px; }
.medidas { font-size: 13.5px; color: var(--muted); margin: -2px 0 6px; line-height: 1.4; }
.medidas b { color: var(--deep2); }
@media (min-width: 640px) { .grade-form { grid-template-columns: 1fr 1fr; } .grade-form .largo { grid-column: 1 / -1; } }
/* modo TOC: na grade, rotulo no alto e caixa na base da linha, assim caixas vizinhas ficam na mesma altura mesmo quando so uma tem texto de ajuda */
.grade-form > .campo { display: flex; flex-direction: column; }
.grade-form > .campo > input, .grade-form > .campo > select, .grade-form > .campo > textarea, .grade-form > .campo > .paleta, .grade-form > .campo > .estilos, .grade-form > .campo > .foto-linha { margin-top: auto; }
.grade-form > .campo > label { margin-bottom: 6px; }
/* campo sozinho no fim da grade nao fica pela metade */
.grade-form > .campo:last-child:nth-child(odd) { grid-column: 1 / -1; }
.grade-form > .campo > .ajuda { margin: -2px 0 8px; }

/* ---------- Pagina de vendas (#/lojas) ---------- */

.vender-capa { padding: 34px var(--margem) 22px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; background: linear-gradient(180deg, var(--lime-suave), var(--bg)); }
/* no computador a faixa do topo vai de ponta a ponta; o conteudo continua centrado na largura da pagina */
@media (min-width: 1181px) { .vender-capa { width: var(--vw, 100vw); margin-left: calc(50% - var(--vw, 100vw) / 2); padding-left: calc(var(--vw, 100vw) / 2 - 590px + var(--margem)); padding-right: calc(var(--vw, 100vw) / 2 - 590px + var(--margem)); } } /* --vw: largura sem a barra de rolagem */
.vender-titulo { font-size: 30px; line-height: 1.12; max-width: 560px; }
.vender-sub { font-size: 17px; color: var(--body); max-width: 520px; }
/* heroi: a dor (comissao) em vermelho no titulo; a oferta numa linha propria, logo embaixo */
.dor-destaque { color: var(--erro); white-space: nowrap; }
.vender-oferta { font-family: var(--display); font-size: 21px; font-weight: 700; line-height: 1.25; color: var(--ink); max-width: 560px; text-wrap: balance; }
.vender-capa .kicker, .vender-titulo, .vender-sub { text-wrap: balance; } /* linhas do mesmo tamanho: nada de palavra sozinha embaixo */
/* vagas de fundador: mesmo amarelo do selo de fundador dos planos; leva ate os planos */
.selo-fundador { background: #FFFBEB; color: #3F2A00; box-shadow: inset 0 0 0 1.5px #FCD34D; text-decoration: none; gap: 6px; }
.selo-fundador .estrela { color: #D97706; }
@media (hover: hover) { .selo-fundador:hover { background: #FEF3C7; } }
.vender-selos { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.vender { gap: 24px; }
.vender-bloco { display: flex; flex-direction: column; gap: 12px; }
.vender-bloco > * { margin: 0; }
.vender-bloco .kicker { font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--deep2); font-weight: 700; margin-bottom: -6px; }
.vender-bloco h2 { font-size: 24px; line-height: 1.15; }
.vender-bloco > .cartao { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.vender-bloco > .cartao > * { margin: 0; }
.vender-bloco > .cartao b { display: block; font-family: var(--display); font-size: 18px; }
.calc-linhas { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.calc-linha { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--raio-p); padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; }
.calc-linha.ligeiro { border-color: var(--lime); background: var(--lime-suave); }
.calc-cabeca { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.calc-valor { font-family: var(--display); font-size: 20px; font-weight: 700; color: var(--deep); white-space: nowrap; }
.calc-linha.ligeiro .calc-valor { color: var(--lime-escuro); }
.calc-trilho { height: 10px; background: #E6EFDD; border-radius: 5px; overflow: hidden; }
.calc-trilho span { display: block; height: 100%; background: var(--orange); border-radius: 5px; transition: width 0.25s; }
.calc-linha.ligeiro .calc-trilho span { background: var(--lime); }
.calc-linha small { font-size: 13px; color: var(--muted); }
.calc-frase { font-weight: 700; color: var(--deep); font-size: 17px; background: var(--card); border: 1.5px solid var(--line); border-radius: var(--raio-p); padding: 12px 14px; }
.passos-venda { display: flex; flex-direction: column; gap: 12px; }
.passo-venda { display: flex; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--raio); padding: 14px 16px; }
.passo-venda .n { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--deep); color: var(--lime); font-family: var(--display); font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.passo-venda b { display: block; font-family: var(--display); font-size: 18px; margin-bottom: 4px; }
.passo-venda p { color: var(--body); font-size: 15px; }
.vender-grade { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) { .vender-grade { grid-template-columns: 1fr 1fr; } }
.item-venda { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.item-venda .icone { font-size: 26px; }
.item-venda b { font-family: var(--display); font-size: 17px; }
.item-venda p { font-size: 14.5px; color: var(--body); }

.faq { display: flex; flex-direction: column; gap: 8px; }
.duvida { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--raio-p); padding: 0 16px; }
.duvida summary { cursor: pointer; list-style: none; min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 700; font-size: 16.5px; }
.duvida summary::-webkit-details-marker { display: none; }
.duvida summary::after { content: "+"; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--lime-suave); color: var(--deep); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; }
.duvida[open] summary::after { content: "−"; }
.duvida p { padding: 0 0 14px; color: var(--body); font-size: 15.5px; line-height: 1.45; }
.vender-final { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 0 6px; }
.rodape .ligeiro a { color: inherit; text-decoration: none; font-weight: 600; }
.chamada { width: 100%; max-width: 440px; }
.barra-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px var(--margem); background: var(--bg); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; }
.barra-topo .marca { font-size: 30px; text-decoration: none; }
.barra-acoes { display: flex; gap: 8px; }
/* conta logada: bolinha com a inicial + "Minha conta", discreto como nos apps (o verde forte fica para Assinar) */
.btn-conta { min-height: 44px; padding: 4px 16px 4px 4px; gap: 10px; border-radius: 999px; background: var(--card); color: var(--ink); border: 1.5px solid var(--line-forte); font-size: 16px; text-decoration: none; }
.conta-bolinha { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--deep); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: 17px; line-height: 1; padding-top: 1px; }
.conta-bolinha.sem-letra { background: var(--deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Ccircle cx='12' cy='8.5' r='4.2'/%3E%3Cpath d='M4 20.5c0-4.1 3.6-6.7 8-6.7s8 2.6 8 6.7z'/%3E%3C/svg%3E") center / 20px no-repeat; }
@media (hover: hover) { .btn-conta:hover { border-color: var(--lime); background: var(--lime-suave); } }
/* deslogado: a bolinha e verde-clara com o bonequinho escuro; "Assinar agora" na mesma pilula e altura */
.btn-entrar .conta-bolinha.sem-letra { background: var(--lime-suave) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230F3D2E'%3E%3Ccircle cx='12' cy='8.5' r='4.2'/%3E%3Cpath d='M4 20.5c0-4.1 3.6-6.7 8-6.7s8 2.6 8 6.7z'/%3E%3C/svg%3E") center / 20px no-repeat; }
@media (hover: hover) { .btn-entrar:hover .conta-bolinha.sem-letra { background-color: #fff; } }
.barra-topo .btn-assinar { min-height: 44px; padding: 8px 20px; border-radius: 999px; }
/* os botoes ficam compactos ate 480: entre 421 e ~460 (iPhone Pro Max, PC com barra de rolagem) "Começar grátis" quebrava em duas linhas */
.barra-topo .btn-conta, .barra-topo .btn-assinar { white-space: nowrap; }
@media (max-width: 480px) { .barra-topo .btn-conta { min-height: 40px; padding: 3px 12px 3px 3px; gap: 8px; font-size: 14px; } .barra-topo .conta-bolinha { width: 32px; height: 32px; font-size: 16px; } .barra-topo .btn-assinar { min-height: 40px; padding: 6px 14px; } }
@media (max-width: 360px) { .barra-topo .btn-entrar .conta-bolinha { display: none; } .barra-topo .btn-entrar { padding: 6px 14px; } } /* 320: "Entrar" e "Assinar" cabem do lado da marca */
.preco-destaque { color: var(--lime-escuro); white-space: nowrap; }
.heroi-mascote { position: relative; z-index: 1; width: 150px; height: 150px; object-fit: contain; animation: flutuar 4s ease-in-out infinite; transform-origin: 50% 90%; }
/* sombra de chao em elipse (o filter:drop-shadow numa imagem animada as vezes aparecia como um quadrado) */
.heroi-mascote-caixa { position: relative; flex: none; display: flex; }
.heroi-mascote-caixa::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: 3%; height: 8%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(15, 61, 46, 0.24), rgba(15, 61, 46, 0) 70%); z-index: 0; }
@keyframes flutuar { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-8px) rotate(1.5deg); } }
.vender-grade .cartao, .passo-venda, .plano-card, .raio { animation: entrar 0.4s ease-out both; }
.vender-grade .cartao:nth-child(2), .passo-venda:nth-child(2), .plano-card:nth-child(2), .raio:nth-child(2) { animation-delay: 0.07s; }
.vender-grade .cartao:nth-child(3), .passo-venda:nth-child(3), .raio:nth-child(3) { animation-delay: 0.14s; }
.vender-grade .cartao:nth-child(n+4), .raio:nth-child(n+4) { animation-delay: 0.2s; }
@media (hover: hover) { .vender-grade .cartao:hover, .raio:hover, .plano-card:hover, .passo-venda:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(14, 31, 20, 0.1); } }
.vender-grade .cartao, .raio, .plano-card, .passo-venda { transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.18s; }
.heroi-texto { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.final-mascote { width: 96px; height: 96px; object-fit: contain; }
@media (max-width: 480px) { .barra-topo .btn-pequeno { min-height: 40px; padding: 6px 10px; font-size: 14px; } }
@media (max-width: 420px) { .barra-topo .marca { font-size: 24px; } .barra-topo .mascote { display: none; } }
/* botao do comercial (segundo botao do heroi) e o player por cima da pagina */
/* play: triangulo de cantos redondos com 40% da bolinha, no centro que o olho ve: a caixa dele fica 0,7 a direita do
   centro da grade de 24 (o peso do triangulo mora na esquerda; na regua exata ele parecia puxado para a esquerda, e
   com 1,75 a direita, torto para o outro lado). Comparado lado a lado ampliado */
.btn-video .video-play { flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.35 7.4v9.2c0 .9 1 1.4 1.7.9l6.6-4.6c.6-.4.6-1.4 0-1.8l-6.6-4.6c-.7-.5-1.7 0-1.7.9z' fill='%230E1F14'/%3E%3C/svg%3E") center / 100% no-repeat; }
.btn-video > span:nth-child(2) { position: relative; top: 1px; } /* maiusculas no meio, na linha da bolinha e do selo */
.btn-video .video-tempo { flex: none; padding: 4px 9px; border-radius: 999px; background: var(--lime-suave); color: var(--deep2); font-size: 13px; font-weight: 700; line-height: 1; }
.video-fundo { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(8, 22, 16, 0.88); }
.video-caixa { position: relative; width: min(100%, calc((100vh - 32px) * 9 / 16)); max-width: 480px; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; background: #0F3D2E; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
.video-comercial { display: block; width: 100%; height: 100%; object-fit: contain; background: #0F3D2E; }
.video-fechar { position: absolute; top: 10px; right: 10px; z-index: 2; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 18px; line-height: 1; }
.video-fim { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; background: rgba(15, 61, 46, 0.92); }
.video-fim[hidden] { display: none; }
.video-fim .btn { width: 100%; max-width: 300px; }
.video-denovo { margin-top: 4px; padding: 10px 14px; border: 0; background: none; color: rgba(255, 255, 255, 0.86); font-size: 15px; font-weight: 600; }
/* teste gratis: faixa escura da marca (celular empilhado e centrado; PC em duas colunas) */
.teste-banner { position: relative; overflow: hidden; border-radius: 28px; padding: 28px 20px 24px; color: #fff; display: grid; gap: 24px; text-align: center;
  background: radial-gradient(circle at 12% 0%, rgba(27, 107, 74, 0.95) 0%, rgba(27, 107, 74, 0) 58%), linear-gradient(135deg, #0F3D2E 0%, #12462F 55%, #0B3024 100%); box-shadow: 0 18px 40px rgba(15, 61, 46, 0.22); }
.teste-banner::after { content: ""; position: absolute; top: 14px; right: 14px; width: 62px; height: 62px; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.2) 2px, transparent 2.6px); background-size: 16px 16px; }
.teste-texto { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.teste-selo { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13.8px 8px 15px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); color: var(--lime-suave); font-family: var(--display); font-weight: 700; font-size: 14px; line-height: 1; letter-spacing: 1.2px; text-transform: uppercase; }
.teste-selo .estrela { color: var(--lemon); letter-spacing: 0; }
.teste-banner h2 { margin-top: 16px; color: #fff; font-size: 28px; line-height: 1.15; }
.teste-banner h2 .destaque { color: var(--lime); }
.teste-checks { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px; }
.teste-checks li { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; line-height: 1.2; color: rgba(255, 255, 255, 0.92); }
.teste-checks li::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; position: relative; top: 0.5px;
  background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.3 4.9 8.7 9.6 3.6' fill='none' stroke='%230E1F14' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.teste-botoes { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 440px; justify-self: center; }
.teste-botoes .btn { width: 100%; }
.btn-contorno { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.42); }
@media (hover: hover) { .btn-contorno:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.7); } }
@media (max-width: 420px) { .teste-banner { padding-left: 16px; padding-right: 16px; } .teste-banner h2 { font-size: 25px; } .teste-botoes .btn { padding-left: 14px; padding-right: 14px; } } /* "Criar minha loja grátis" numa linha so */
.planos { display: grid; grid-template-columns: 1fr; gap: 12px; }
.plano-card { position: relative; background: var(--card); border: 1.5px solid var(--line); border-radius: 20px; padding: 20px 18px; display: flex; flex-direction: column; gap: 8px; text-align: left; font: inherit; color: inherit; cursor: default; }
button.plano-card { cursor: pointer; }
.plano-card > .btn { margin-top: auto; } /* botao sempre no pe do cartao: os da mesma fileira ficam na mesma altura */
.plano-card.com-destaque { border-color: var(--lime); }
/* plano escolhido: anel verde-limao com brilho que respira, fundo levemente verde; selo cheio no pe do cartao */
.plano-card.escolhido { border-color: var(--lime-escuro); background: linear-gradient(180deg, #F7FEE7 0%, var(--card) 60%); box-shadow: 0 0 0 2px var(--lime), 0 10px 28px rgba(101, 163, 13, 0.24); animation: entrar 0.4s ease-out both, plano-brilho 2.6s ease-in-out 0.4s infinite; }
@keyframes plano-brilho { 0%, 100% { box-shadow: 0 0 0 2px var(--lime), 0 10px 28px rgba(101, 163, 13, 0.22); } 50% { box-shadow: 0 0 0 2px var(--lime), 0 10px 36px rgba(132, 204, 22, 0.5); } }
@media (prefers-reduced-motion: reduce) { .plano-card.escolhido { animation: none; } }
.plano-etiqueta { position: absolute; top: -11px; right: 16px; z-index: 1; line-height: 1; background: var(--lime); color: var(--ink); font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; } /* em cima da borda: nunca encosta no titulo, em nenhuma largura */
.plano-titulo { font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--deep2); }
.plano-preco-caixa { container-type: inline-size; min-width: 0; } /* a medida do preco mora aqui (no cartao, travaria o alinhamento entre cartoes) */
.plano-preco { font-family: var(--display); font-size: 40px; font-size: clamp(24px, 12cqi, 40px); font-weight: 700; line-height: 1; color: var(--ink); white-space: nowrap; } /* preco e /mes sempre numa linha: a letra acompanha a largura do cartao */
.plano-preco small { font-size: 16px; font-weight: 400; color: var(--muted); }
.plano-sub { color: var(--body); font-weight: 600; }
.plano-linhas { list-style: none; padding: 0; margin: 4px 0; display: flex; flex-direction: column; gap: 4px; font-size: 15px; color: var(--body); }
.plano-linhas li { display: flex; align-items: flex-start; gap: 6px; } /* linha que quebra continua alinhada com o texto, nao embaixo do check */
.plano-check { flex: none; }
.plano-marca { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line-forte); background: var(--card); font-weight: 700; color: var(--deep); white-space: nowrap; } /* sempre no pe do cartao, mesma altura nos dois */
/* lado a lado: cada parte do cartao na mesma altura dos vizinhos (a frase maior manda na fileira) */
@supports (grid-template-rows: subgrid) {
  .planos > .plano-card { display: grid; grid-template-rows: subgrid; grid-row: span var(--partes); row-gap: 8px; align-content: start; }
  .planos > .plano-card > .plano-marca { justify-self: start; align-self: end; }
  .planos > .plano-card > .btn { align-self: end; } /* botao da pagina de vendas continua da largura do cartao */
  .planos > .plano-card > .plano-linhas { align-self: start; }
}
.plano-card.escolhido .plano-marca { background: var(--lime); border-color: var(--lime); color: var(--texto-no-destaque, var(--ink)); }

.antes-depois { display: grid; grid-template-columns: 1fr; gap: 10px; }
.antes-depois .lado p { margin: 6px 0 0; font-size: 15.5px; }
.antes-depois .sem { background: #FBF4F2; border-color: #F0D5CF; color: #7A3B2E; }
.antes-depois .com { background: var(--lime-suave); border-color: #CFE3B4; color: var(--deep); }

.raio { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; }
.raio .icone { font-size: 26px; }
.raio b { font-family: var(--display); font-size: 17px; }
.raio p { font-size: 14.5px; color: var(--body); }
.raio .tag { align-self: flex-start; margin-top: 4px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; padding: 3px 8px; border-radius: 999px; background: var(--lime-suave); color: var(--deep2); }
.prova { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 480px) { .prova .metrica { padding: 12px 8px; } .prova .metrica .v { font-size: clamp(16px, 5.3vw, 22px); white-space: nowrap; } } /* "1 preço" e "3 min" numa linha ate em 320 */
.vender-grade, .planos, .antes-depois, .faq, .passos-venda, .calc-linhas { gap: 12px; }
.calc-entrada, .calc-resultado { gap: 12px; }
.assinar { max-width: 640px; margin: 0 auto; width: 100%; }
.resumo-assinatura .linha { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid #CFE3B4; }
.resumo-assinatura .linha:last-of-type { border-bottom: 0; }
.rodape-vendas .contatos a { color: var(--body); font-weight: 600; text-decoration: none; padding: 6px 4px; }
.texto-legal { max-width: 720px; margin: 0 auto; width: 100%; gap: 8px; }
/* login e conta do dono */
.btn-google { background: #fff; color: var(--ink); border: 1.5px solid var(--line-forte); }
.barra-topo .rot-curto { display: none; }
@media (max-width: 360px) {
  .barra-topo .rot-longo { display: none; }
  .barra-topo .rot-curto { display: inline; }
  .btn-google { font-size: 16px; padding-left: 14px; padding-right: 14px; } /* "Entrar com o Google" numa linha so, com o G do lado */
}
.btn-google::before { content: ""; width: 20px; height: 20px; border-radius: 50%; background: conic-gradient(#EA4335 0 25%, #FBBC05 0 50%, #34A853 0 75%, #4285F4 0); mask: radial-gradient(circle, transparent 42%, #000 44%); -webkit-mask: radial-gradient(circle, transparent 42%, #000 44%); }
.login-caixa { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
@media (max-width: 360px) { .login-caixa { padding: 16px; } } /* sobra espaco pro "Entrar com o Google" */
.login-caixa .ou, .contato-ou { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.login-caixa .ou::before, .login-caixa .ou::after, .contato-ou::before, .contato-ou::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.login-caixa .linha-botoes { justify-content: space-between; }
.login-caixa .linha-botoes .btn { flex: none; }
.conta { max-width: 900px; margin: 0 auto; width: 100%; gap: 16px; }
.conta-carregando { display: flex; justify-content: center; padding: 48px 0; }
/* site em pausa (banco no limite de hoje) e loja parada: o desenho da faixa do teste gratis. Fundo escuro com brilhos,
   cartao de vidro transparente (desfoca o que esta atras), selo em pilula, titulo branco com destaque e botao de contorno */
.pausa-fundo { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; padding: 24px 16px; overflow-y: auto;
  background: radial-gradient(circle at 14% 8%, rgba(132, 204, 22, 0.28), transparent 42%), radial-gradient(circle at 92% 96%, rgba(27, 107, 74, 0.55), transparent 50%), linear-gradient(160deg, rgba(10, 36, 27, 0.82), rgba(15, 61, 46, 0.74));
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); animation: splash-surgir 0.25s ease-out; }
.pausa-fundo.vermelho { background: radial-gradient(circle at 14% 8%, rgba(255, 255, 255, 0.14), transparent 40%), radial-gradient(circle at 90% 96%, rgba(249, 115, 22, 0.5), transparent 50%), linear-gradient(165deg, #3B0A0A, #7F1D1D 50%, #B91C1C); }
.pausa-pagina { z-index: 60; }
.pausa-caixa { width: 100%; max-width: 400px; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 28px 24px 24px; text-align: center; color: #fff;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 28px;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.pausa-mascote { width: 128px; height: 128px; object-fit: contain; animation: flutuar 4s ease-in-out infinite; transform-origin: 50% 90%; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.3)); }
.pausa-mascote.logo-loja { width: 104px; height: 104px; border-radius: 24px; object-fit: cover; animation: none; filter: none; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3); }
.pausa-selo { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); font-family: var(--display); font-weight: 700; font-size: 12.5px; line-height: 1; letter-spacing: 1.1px; text-transform: uppercase; color: rgba(255, 255, 255, 0.92); }
.pausa-selo i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #F87171; box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.25); }
.pausa-selo.laranja i { background: #FB923C; box-shadow: 0 0 0 4px rgba(251, 146, 60, 0.25); }
.pausa-caixa h1, .pausa-caixa h2 { margin: 0; font-size: 27px; line-height: 1.15; color: #fff; text-wrap: balance; }
.pausa-destaque { color: #4ADE80; }
.pausa-caixa p { margin: 0; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, 0.82); text-wrap: pretty; }
.pausa-botoes { width: 100%; display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.pausa-botoes .btn { width: 100%; white-space: nowrap; }
.pausa-dono-btn { margin-top: 6px; }

/* painel, cozinha e entregas: o banco chegou no limite do dia */
.faixa-limite { margin: 12px var(--margem, 16px) 0; padding: 12px 16px; border-radius: var(--raio-p, 14px); background: var(--orange-suave); border: 1px solid #F7D2B8; color: #7C2D12; font-size: 15px; line-height: 1.45; }
/* espera com o mascote (cadastro, Central): pula de leve com a sombra encolhendo no chao */
.espera-mascote { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 64px 16px; opacity: 0; animation: splash-surgir 0.25s ease 0.15s forwards; }
.espera-mascote-palco { position: relative; width: 112px; height: 124px; }
.espera-mascote-img { position: absolute; left: 0; top: 0; width: 112px; height: 112px; object-fit: contain; animation: espera-pular 1.1s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
.espera-mascote-sombra { position: absolute; left: 50%; bottom: 0; width: 64px; height: 10px; margin-left: -32px; border-radius: 50%; background: rgba(14, 31, 20, 0.14); animation: espera-sombra 1.1s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
.espera-mascote .carregando-pontos span { background: #84CC16; }
.espera-mascote .carregando-pontos span:nth-child(2) { background: #1B6B4A; }
.espera-mascote .carregando-pontos span:nth-child(3) { background: #0F3D2E; }
.espera-mascote-texto { margin: 0; font-size: 16px; color: var(--muted); }
@keyframes espera-pular { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-14px) rotate(3deg); } }
@keyframes espera-sombra { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.72); opacity: 0.6; } }
.conta-carregando .carregando-pontos span { background: #84CC16; }
.conta-carregando .carregando-pontos span:nth-child(2) { background: #1B6B4A; }
.conta-carregando .carregando-pontos span:nth-child(3) { background: #0F3D2E; }
.conta .hub-secao { margin-top: 8px; }
/* plano cheio: lugar tracejado pra proxima loja, com o caminho pro plano maior */
.conta-cheio { flex: 1 1 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px; text-align: center; background: var(--card); border: 2px dashed var(--line-forte); border-radius: var(--raio); }
.conta-cheio-ico { width: 56px; height: 56px; border-radius: 50%; background: var(--lime-suave); display: flex; align-items: center; justify-content: center; font-size: 28px; line-height: 1; }
.conta-cheio-texto { display: flex; flex-direction: column; gap: 4px; }
.conta-cheio-texto b { font-family: var(--display); font-size: 19px; line-height: 1.2; }
.conta-cheio-texto span { font-size: 15px; color: var(--muted); text-wrap: balance; }
.conta-cheio .btn { width: 100%; font-size: 17px; }
@media (min-width: 640px) {
  .conta-cheio { flex-direction: row; padding: 16px; text-align: left; }
  .conta-cheio-texto { flex: 1; min-width: 0; }
  .conta-cheio .btn { width: auto; flex: none; }
} /* 16 do vao + 8 = 24 antes de secao */
.conta .conta-lojas { margin-top: -4px; } /* titulo da secao a 12 dos cartoes */
.conta-cabeca { display: flex; align-items: center; gap: 12px; padding: 6px 0 4px; }
.conta-foto { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; background: var(--lime-suave); }
.conta-inicial { display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 28px; font-weight: 700; color: var(--deep); }
.conta-texto { flex: 1; min-width: 0; }
.conta-texto p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conta-cabeca > .btn { flex: none; }
@media (max-width: 420px) { .conta-foto { width: 52px; height: 52px; } .conta-texto h1 { font-size: 22px; } }
.conta-texto h1 { font-size: 26px; line-height: 1.1; margin: 2px 0; }
.conta-lojas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } /* minmax: texto comprido nunca alarga o cartao alem da tela */
.conta-loja { background: var(--card); border: 1px solid var(--line); border-radius: var(--raio); padding: 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--sombra); }
.conta-loja-topo { display: flex; align-items: flex-start; gap: 14px; } /* logo no alto, igual em todo cartao (centrada, descia quando o nome quebrava em mais linhas) */
.conta-logo { width: 64px; height: 64px; border-radius: var(--raio-logo-p, 16px); background: var(--lime-suave); display: flex; align-items: center; justify-content: center; font-size: 30px; flex: none; overflow: hidden; }
.conta-logo img { width: 100%; height: 100%; object-fit: cover; }
.conta-loja-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; margin-top: -4px; } /* topo das letras do nome na altura do topo da logo (a linha tem 4px de folga em cima das maiusculas) */
.conta-loja-nome { font-family: var(--display); font-size: 20px; font-weight: 700; line-height: 1.15; text-wrap: balance; }
.conta-loja-info .muted { text-wrap: balance; } /* quebra em linhas iguais: nada de "Ze" sozinho embaixo */
.conta-selos { display: flex; flex-wrap: wrap; gap: 6px; }
.conta-selos .selo { font-size: 12.5px; padding: 4px 10px; white-space: nowrap; } /* selo e pilula de uma linha so */
.conta-selos .rot-curto { display: none; }
@media (max-width: 360px) { .conta-selos .rot-longo { display: none; } .conta-selos .rot-curto { display: inline; } } /* 320: "Aberta" + o outro selo cabem lado a lado */
.conta-acoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.conta-acoes .btn { width: 100%; min-width: 0; padding-left: 6px; padding-right: 6px; white-space: nowrap; font-size: 15px; }
.conta .linha-botoes > .btn { width: 100%; text-align: center; justify-content: center; }
.conta-acoes .btn-principal { grid-column: 1 / -1; }
/* equipe: tres botoes iguais com o icone em cima do nome, como os do topo do painel (antes a senha sobrava sozinha numa linha) */
.conta-equipe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.conta-ladrilho { width: 100%; min-width: 0; flex-direction: column; gap: 6px; min-height: 72px; padding: 10.75px 4px 7.25px; font-size: 15px; line-height: 1.1; white-space: nowrap; }
.conta-ladrilho-icone { font-size: 22px; line-height: 1; }
@media (max-width: 360px) { .conta-acoes .btn, .conta-ladrilho { font-size: 13px; } } /* celular pequeno: "Copiar link" e "Entregador" cabem com folga */
.conta-painel { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 64px; padding: 10px 18px; text-align: left; border-radius: 16px; }
.conta-painel-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.conta-painel-texto b { font-family: var(--display); font-size: 19px; line-height: 1.15; }
.conta-painel-texto small { font-size: 13.5px; font-weight: 600; line-height: 1.5; opacity: 0.8; text-wrap: balance; } /* nao corta: na fonte larga do iPhone quebra em duas linhas iguais */
.conta-painel-seta { flex: none; width: 36px; height: 36px; border-radius: 50%; background: rgba(14, 31, 20, 0.14); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; line-height: 1; }
.conta-central .conta-painel-seta { background: rgba(255, 255, 255, 0.16); } /* seta clara no botao escuro */
/* criar loja: frete em dois botoes iguais que ocupam a linha toda */

.conta-grupo { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.conta-plano { display: flex; flex-direction: column; gap: 12px; }
.conta-plano > .selo { align-self: flex-start; }
.plano-dados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.plano-dado { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); min-width: 0; }
.plano-dado.largo { grid-column: 1 / -1; }
.plano-dado-rotulo { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.plano-dado-valor { font-family: var(--display); font-size: clamp(18px, 5vw, 22px); line-height: 1.15; color: var(--ink); white-space: nowrap; }
@media (max-width: 360px) { .plano-dados { grid-template-columns: minmax(0, 1fr); } } /* tela ampliada do iPhone: cada quadro com a linha inteira */
.plano-dado-sub { font-size: 13px; color: var(--muted); }
.plano-barra { display: block; height: 8px; border-radius: 999px; background: var(--lime-suave); overflow: hidden; margin-top: 6px; }
.plano-barra i { display: block; height: 100%; border-radius: 999px; background: var(--lime); }
.plano-recado { margin: 0; }
.plano-acoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.plano-acoes .btn { width: 100%; min-width: 0; min-height: 48px; padding: 0 8px; white-space: nowrap; }
.plano-acoes .plano-pagar { grid-column: 1 / -1; min-height: 52px; font-size: 17px; }
@media (max-width: 360px) { .plano-acoes .btn:not(.plano-pagar) { font-size: 14px; } }
@media (min-width: 760px) { .plano-dados { grid-template-columns: repeat(3, minmax(0, 1fr)); } .plano-dado.largo { grid-column: auto; } }
.conta-plano-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.conta-plano-nome { font-family: var(--display); font-size: 20px; }
.seletor-tipo { justify-content: center; }
.planos-3, .planos-4 { grid-template-columns: 1fr; }
/* tres planos (Assinar): tres colunas iguais a partir de 760, sem o terceiro sozinho embaixo */
@media (min-width: 760px) { .planos.planos-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1000px; margin: 0 auto; width: 100%; } }
/* um plano so (pagina de vendas): um cartao no meio, da largura de um celular grande */
@media (min-width: 560px) { .planos.planos-1 { grid-template-columns: minmax(0, 440px); justify-content: center; } }
.plano-extra { margin: 4px auto 0; max-width: 440px; text-align: center; font-size: 15px; line-height: 1.5; color: var(--muted); }
.plano-extra b { color: var(--ink); }
@media (min-width: 560px) { .planos-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 760px) { .conta-lojas { grid-template-columns: 1fr 1fr; } .planos-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1000px; } }
@media (min-width: 1000px) { .planos-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1100px; } }
/* botao flutuante de WhatsApp (paginas de venda) */
.zap-flutuante { position: fixed; right: calc(16px + var(--trava, 0px)); bottom: 16px; z-index: 80; display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 10px 18px 10px 12px; border: 0; border-radius: 999px; background: var(--whats); color: #fff; font: inherit; font-weight: 700; font-size: 15.5px; box-shadow: 0 10px 24px rgba(37, 211, 102, 0.35); cursor: pointer; transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.16s; animation: entrar 0.4s ease-out 0.6s both; }
.zap-flutuante .zap-icone { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); font-size: 18px; }
.zap-flutuante .zap-ponto { position: absolute; top: 4px; right: 6px; width: 12px; height: 12px; border-radius: 50%; background: #E53935; border: 2px solid #fff; animation: pulsarPonto 1.8s ease-in-out infinite; }
@keyframes pulsarPonto { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
@media (hover: hover) { .zap-flutuante:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 14px 30px rgba(37, 211, 102, 0.42); } }
.zap-flutuante:active { transform: scale(0.97); }
/* barra fixa de chamada no celular */
.cta-fixa { position: fixed; left: 0; right: var(--trava, 0px); bottom: 0; z-index: 70; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--margem); padding-bottom: calc(10px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(14, 31, 20, 0.1); font-size: 14.5px; color: var(--body); animation: subir 0.25s ease-out; }
.cta-fixa b { color: var(--deep); }
.cta-fixa > span { min-width: 0; } /* a frase quebra se precisar; o botao fica inteiro */
.cta-fixa .btn { flex: none; }
.cta-fixa[hidden] { display: none; }
@media (max-width: 759px) { .zap-flutuante { bottom: 84px; width: 58px; height: 58px; min-height: 0; padding: 0; justify-content: center; } .zap-flutuante .zap-texto { display: none; } .zap-flutuante .zap-icone { width: 100%; height: 100%; background: transparent; font-size: 26px; } }
@media (min-width: 760px) { .cta-fixa { display: none; } }
.texto-legal h1 { font-size: 30px; margin-bottom: 4px; }
.texto-legal h2 { font-size: 19px; margin-top: 14px; }
.texto-legal p { color: var(--body); line-height: 1.5; }
@media (min-width: 560px) { .planos { grid-template-columns: 1fr 1fr; }  .antes-depois { grid-template-columns: 1fr 1fr; }  }
@media (min-width: 900px) {   .teste-banner { grid-template-columns: minmax(0, 1fr) 340px; align-items: center; gap: 40px; padding: 40px 44px; text-align: left; } .teste-banner .teste-texto { align-items: flex-start; } .teste-banner .teste-checks { justify-content: flex-start; } .teste-banner h2 { font-size: 32px; } .teste-banner::after { display: none; } .planos { max-width: 760px; margin: 0 auto; width: 100%; } }
.calc-entrada, .calc-resultado { display: flex; flex-direction: column; gap: 12px; }

/* Computador: a pagina de vendas ganha colunas em vez de esticar a coluna do celular */

@media (min-width: 900px) {
  .vender-capa { padding: 56px var(--margem) 40px; flex-direction: row-reverse; justify-content: center; align-items: center; gap: 48px; text-align: left; }
  .heroi-mascote { width: 340px; height: 340px; flex: none; }
  .heroi-texto { align-items: flex-start; text-align: left; max-width: 640px; gap: 18px; }
  .heroi-texto .chamada { max-width: 420px; }
  .heroi-texto .vender-selos { justify-content: flex-start; }
  .vender-titulo { font-size: 44px; max-width: 640px; }
  .vender-sub { font-size: 19px; max-width: 560px; } .vender-oferta { font-size: 26px; max-width: 640px; }
  .vender { width: 100%; max-width: 1060px; margin: 0 auto; gap: 48px; } /* PC: o dobro do ritmo de 24 */
  .vender-calc { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; align-items: start; }
  .passos-venda { flex-direction: row; align-items: stretch; }
  .passo-venda { flex: 1; flex-direction: column; gap: 10px; }
  .vender-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* 6 cartoes: 3 x 2 no computador, 2 x 3 no celular */
  .faq { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .duvida { align-self: start; }
  .vender-final { padding: 16px 0 10px; }
}

/* ---------- Tela da cozinha ---------- */

.cozinha { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 14px var(--margem) 30px; }
@media (min-width: 760px) { .cozinha { grid-template-columns: 1fr 1fr; } }
.cozinha .coluna { display: flex; flex-direction: column; gap: 12px; }
.ficha-cozinha { background: var(--card); border: 2px solid var(--line); border-radius: var(--raio); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.ficha-cozinha.atrasado { border-color: var(--orange); background: var(--orange-suave); }
.ficha-cozinha .cabeca { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 8px 12px; }
.ficha-cozinha .cabeca .selo-tipo { grid-column: 1 / -1; justify-self: start; }
/* a mesma ficha escura da senha do painel, com o numero maior (a cozinha le de longe) */
.ficha-cozinha .senha { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 14px; background: var(--deep); color: #fff; font-family: var(--display); font-weight: 700; line-height: 1; box-shadow: 0 3px 0 rgba(14, 31, 20, 0.18); }
.ficha-cozinha .senha small { font-size: 12px; letter-spacing: 0.1em; margin-right: -0.1em; text-transform: uppercase; color: var(--lime); }
.ficha-cozinha .senha b { font-size: 34px; }
.ficha-cozinha .tempo { justify-self: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ficha-cozinha .itens { display: flex; flex-direction: column; gap: 8px; font-size: 19px; line-height: 1.3; }
.ficha-cozinha .itens b { font-size: 21px; }
.ficha-cozinha .com { color: var(--deep2); font-weight: 600; }
.ficha-cozinha .sem { color: #B4501A; font-weight: 700; }
.ficha-cozinha .obs-item { color: var(--body); }
.ficha-cozinha .obs { background: var(--lemon); color: #4A3A00; padding: 8px 10px; border-radius: 10px; font-weight: 600; }
.ficha-cozinha .btn { min-height: 64px; font-size: 20px; }
.pedido-card.cinza { opacity: 0.75; }
.pedido-card .endereco.grande { font-size: 18px; font-weight: 600; color: var(--ink); }

/* ---------- Login ---------- */

.login { max-width: 420px; margin: 60px auto; padding: 0 var(--margem); display: flex; flex-direction: column; gap: 16px; }
.login .marca { font-size: 36px; }
.login input { text-align: center; font-size: 26px; letter-spacing: 0.3em; }

/* ---------- Toast ---------- */

.torrada { position: fixed; left: calc(50% - var(--trava, 0px) / 2); bottom: calc(var(--altura-barra) + 90px); transform: translate(-50%, 20px); opacity: 0; z-index: 90; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 14px; font-weight: 600; font-size: 15.5px; max-width: 92vw; text-align: center; transition: 0.2s; pointer-events: none; }
.torrada.visivel { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Modo balcao (tablet) ---------- */

.balcao .topo .voltar { width: 56px; height: 56px; }
.balcao .btn { min-height: 68px; font-size: 21px; }
.balcao .card-produto .foto { width: 116px; height: 116px; font-size: 50px; }
.balcao .senha-gigante { font-size: 140px; }

/* ---------- Impressao do pedido ---------- */

.ficha-impressao { display: none; }
@media print {
  /* display:none, e nao visibility: senao a lista de pedidos continua ocupando paginas em branco atras da ficha */
  .app, .modal, .torrada, .faixa-teste { display: none !important; }
  .ficha-impressao { display: block; position: absolute; left: 0; top: 0; width: 72mm; padding: 4mm; font-family: ui-monospace, Consolas, monospace; font-size: 12px; white-space: pre-wrap; color: #000; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  /* a flutuacao lenta dos mascotes e pequena (8 px) e fica: e a cara da marca, nao um efeito que enjoa */
  .heroi-mascote { animation: flutuar 4s ease-in-out infinite !important; }
  .pausa-mascote { animation: flutuar 4s ease-in-out infinite !important; }
  .pausa-mascote.logo-loja { animation: none !important; }
  .tema-conizza .logo-grande { animation: cz-flutuar 4.5s ease-in-out infinite !important; }
  /* a tela de carregamento da loja oficial tambem fica igual ao PC (iPhone com "Reduzir movimento" via ela parada) */
  .splash-oficial { transition: opacity 0.3s ease !important; }
  .splash-oficial img { animation: splash-pulsar 1.1s ease-in-out infinite !important; }
  .splash-pontos span { animation: splash-ponto 0.9s ease-in-out infinite !important; }
  .splash-pontos span:nth-child(2) { animation-delay: 0.15s !important; }
  .splash-pontos span:nth-child(3) { animation-delay: 0.3s !important; }
  .splash-loja { transition: opacity 0.25s ease !important; }
  .carregando-pontos { animation: splash-surgir 0.2s ease 0.25s forwards !important; }
  .espera-mascote { animation: splash-surgir 0.25s ease 0.15s forwards !important; }
  .espera-mascote-img { animation: espera-pular 1.1s cubic-bezier(0.45, 0, 0.55, 1) infinite !important; }
  .espera-mascote-sombra { animation: espera-sombra 1.1s cubic-bezier(0.45, 0, 0.55, 1) infinite !important; }
  .carregando-pontos span { animation: splash-ponto 0.9s ease-in-out infinite !important; }
  .carregando-pontos span:nth-child(2) { animation-delay: 0.15s !important; }
  .carregando-pontos span:nth-child(3) { animation-delay: 0.3s !important; }
}
.senha-equipe { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.senha-equipe-texto { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.senha-equipe-texto .bloco-titulo, .senha-equipe-texto p { margin: 0; }
.senha-equipe .btn { flex: none; min-height: 48px; padding: 0 20px; white-space: nowrap; }
@media (max-width: 600px) { .senha-equipe .btn { flex: 1 1 100%; } }
.sons-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.som-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 60px; padding: 10px 12px; text-align: left; font: inherit; color: inherit; background: var(--card); border: 1.5px solid var(--line-forte); border-radius: 14px; cursor: pointer; }
.som-linha:active { transform: scale(0.98); }
.som-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.som-texto b { font-size: 15px; line-height: 1.2; }
.som-texto small { font-size: 12.5px; line-height: 1.25; color: var(--muted); }
.som-tocar { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--lime-suave); color: var(--deep2); display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 560px) { .sons-lista { grid-template-columns: minmax(0, 1fr); } }
/* par de botoes lado a lado: metades iguais, texto numa linha so */
.linha-botoes.dupla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.linha-botoes.dupla .btn { width: 100%; min-width: 0; min-height: 48px; padding: 0 8px; white-space: nowrap; font-size: 15px; }
/* celular: botao que precisar de duas linhas divide o texto por igual (nunca uma palavra sozinha embaixo) */
@media (max-width: 480px) { .btn { text-wrap: balance; } }
/* tela bem estreita (ou letra grande no aparelho): o preco desce pra baixo da foto e ganha largura */
@media (max-width: 360px) {
  .linha-botoes.dupla .btn { font-size: 14px; padding: 0 4px; }
}
@media (max-width: 480px) { .btn-mp { font-size: 16px; white-space: nowrap; padding-left: 8px; padding-right: 8px; } }

/* ==========================================================
   Central do Ligeiro (#/admin). Tudo aqui tem o prefixo adm-.
   Ritmo: 16 entre blocos, 12 entre itens, 24 antes de titulo.
   ========================================================== */

/* topo e abas (mesma moldura do painel do dono) */
/* topo da Central: o desenho do topo do painel (topo-app topo-ligeiro); aqui so o mascote, que no celular fica ao lado do nome */
.adm-topo .logo-mini { border-radius: 12px; background: rgba(255, 255, 255, 0.08); padding: 3px; }
.adm-aba-extra { display: inline-flex; align-items: center; gap: 6px; }
.adm-aba-extra:empty { display: none; }
.adm-ponto { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--orange); }

/* secao: 16 entre blocos; titulo ganha mais 8 (24 antes dele) */
.adm-secao { gap: 16px; padding-top: 24px; padding-bottom: 48px; }
.adm-titulo { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.adm-carregando { padding: 48px 16px; text-align: center; color: var(--muted); }
.adm-cabeca { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; }
.adm-cabeca-texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.adm-cabeca-texto h2 { font-size: 22px; }
.adm-cabeca-texto p { font-size: 15px; line-height: 1.4; color: var(--muted); }
.adm-cabeca > .btn { flex: none; min-height: 48px; padding: 0 20px; font-size: 16px; white-space: nowrap; }
@media (max-width: 640px) { .adm-cabeca > .btn { flex: 1 1 100%; } }
@media (max-width: 360px) { .adm-cabeca > .btn { padding: 0 12px; } } /* "+ Cadastrar estabelecimento" inteiro */

/* indicadores: 4 colunas iguais no PC, 2 no celular; numero alinhado pela mesma linha */
.adm-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 899px) { .adm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.adm-kpi { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--raio-p); }
.adm-kpi-rotulo { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-kpi-valor { font-family: var(--display); font-size: 30px; font-weight: 700; line-height: 1.15; color: var(--deep); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-kpi-valor small { font-size: 0.55em; font-weight: 700; color: var(--deep2); }
.adm-kpi-valor .adm-pre { margin-right: 4px; }
.adm-kpi-valor .adm-pos { margin-left: 6px; }
.adm-kpi-apoio { padding-top: 4px; font-size: 13.5px; line-height: 1.35; color: var(--body); } /* colado no numero: se quebrar em 2 linhas, a primeira continua alinhada com a do vizinho */
@media (max-width: 400px) { .adm-kpi { padding: 12px; } .adm-kpi-rotulo { font-size: 13px; } .adm-kpi-valor { font-size: 24px; } .adm-kpi-apoio { font-size: 13px; } }
@media (max-width: 360px) { .adm-kpi { padding: 12px 10px; } .adm-kpi-rotulo { font-size: 12.5px; } } /* "Receita por mes" inteiro */

/* faixa das vagas de fundador (mesmo dourado do cartao de fundador da pagina de vendas) */
.adm-fundadores { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "texto barra livres"; align-items: center; gap: 12px 24px; padding: 16px; background: #FFFBEB; border: 1px solid #FCD34D; border-radius: var(--raio-p); }
.adm-fundadores-texto { grid-area: texto; font-size: 15px; line-height: 1.35; color: #3F2A00; white-space: nowrap; }
.adm-fundadores-texto b { font-family: var(--display); font-size: 17px; font-variant-numeric: tabular-nums; }
.adm-estrela { color: #D97706; margin-right: 6px; }
.adm-fundadores-barra { grid-area: barra; height: 10px; border-radius: 999px; background: #FDE68A; overflow: hidden; }
.adm-fundadores-barra i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #F59E0B, #FBBF24); }
/* vagas de loja (limite do sistema): verde; perto do limite, laranja; cheio, vermelho */
.adm-capacidade { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "texto barra situacao" "nota nota nota" "acoes acoes acoes"; align-items: center; gap: 12px 24px; padding: 16px; background: var(--lime-suave); border: 1px solid #C9E7A1; border-radius: var(--raio-p); } /* mesmo vao e mesmos cantos da faixa de fundadores */
.adm-capacidade-texto { grid-area: texto; font-size: 15px; line-height: 1.35; color: var(--deep2); white-space: nowrap; }
.adm-capacidade-texto b { font-family: var(--display); font-size: 17px; font-variant-numeric: tabular-nums; }
.adm-capacidade-barra { grid-area: barra; height: 10px; border-radius: 999px; background: #DDEFC4; overflow: hidden; }
.adm-capacidade-barra i { display: block; height: 100%; border-radius: 999px; background: var(--lime-escuro); }
.adm-capacidade-situacao { grid-area: situacao; font-size: 14px; color: var(--deep2); white-space: nowrap; }
.adm-capacidade-nota { grid-area: nota; font-size: 13px; line-height: 1.4; color: var(--muted); margin-top: -4px; }
.adm-capacidade-acoes { grid-area: acoes; display: flex; gap: 12px; flex-wrap: wrap; }
.adm-capacidade.perto { background: #FFF4E5; border-color: #F7D2B8; }
.adm-capacidade.perto .adm-capacidade-barra i { background: var(--orange); }
.adm-capacidade.cheio { background: var(--erro-suave); border-color: #F3B8B0; }
.adm-capacidade.cheio .adm-capacidade-barra i { background: var(--erro); }
/* saude do sistema: logo abaixo das vagas, o mesmo quadro (o vao de 16 vem da pilha, igual aos outros) */
.adm-luz { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.4; color: var(--deep2); }
.adm-luz i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #B4BCB6; }
.adm-luz.ok i { background: var(--lime-escuro); box-shadow: 0 0 0 3px rgba(132, 204, 22, 0.25); }
.adm-luz.fora i { background: var(--erro); box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.2); }
@media (max-width: 900px) { .adm-capacidade { grid-template-columns: minmax(0, 1fr); grid-template-areas: "texto" "barra" "situacao" "nota" "acoes"; } .adm-capacidade-texto, .adm-capacidade-situacao { white-space: normal; } }
@media (max-width: 480px) { .adm-capacidade-acoes .btn { flex: 1 1 0; min-width: 0; white-space: nowrap; } }
@media (max-width: 400px) { .adm-capacidade-acoes .btn { flex-basis: 100%; } } /* tela pequena: um botao por linha, texto inteiro */
.adm-fundadores-livres { grid-area: livres; font-size: 14px; color: #6B4A00; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .adm-fundadores { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "texto livres" "barra barra"; }
  .adm-fundadores-texto { white-space: normal; }
}
@media (max-width: 480px) {
  .adm-fundadores { grid-template-columns: minmax(0, 1fr); grid-template-areas: "texto" "barra"; }
  .adm-fundadores-livres { display: none; }
}

/* listas: cartao unico com divisorias finas; linha inteira clicavel */
.adm-lista { background: var(--card); border: 1px solid var(--line); border-radius: var(--raio-p); overflow: hidden; }
.adm-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto 12px; align-items: center; gap: 12px; width: 100%; min-height: 64px; margin: 0; padding: 12px 16px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background 0.14s; }
.adm-lista > .adm-linha:first-child, .adm-lista > .adm-cab + .adm-linha { border-top: 0; }
@media (hover: hover) { .adm-linha:hover { background: var(--bg); } }
.adm-linha:active { background: var(--lime-suave); }
.adm-linha:focus-visible { outline: 3px solid var(--lemon); outline-offset: -3px; }
.adm-linha.desligada .adm-c-principal, .adm-linha.desligada .adm-c { opacity: 0.55; }
.adm-c-principal { display: flex; align-items: center; gap: 12px; min-width: 0; }
.adm-logo { flex: none; width: 40px; height: 40px; border-radius: 10px; overflow: hidden; background: var(--lime-suave); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; }
.adm-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adm-textos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adm-nome { font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.adm-nome .selo-verificada { width: 18px; height: 18px; margin-left: 6px; vertical-align: -3px; }
.adm-fund { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 6px; vertical-align: 0; border-radius: 50%; background: #FDE68A; color: #B45309; font-size: 11px; line-height: 1; padding-bottom: 1px; } /* fundador: mesma medida do selo de verificada, no meio das letras do e-mail (e a estrela no meio do circulo) */
.adm-sub { font-size: 14px; line-height: 1.35; color: var(--muted); overflow-wrap: anywhere; }
.adm-sub.adm-aviso-txt { color: #B4501A; font-weight: 600; }
.adm-sub.adm-ok-txt { color: var(--deep2); font-weight: 600; }
.adm-c { min-width: 0; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.adm-c-status { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 0; }
.adm-selos-linha { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.adm-seta { font-size: 22px; line-height: 1; color: var(--muted); text-align: right; }
.selo.adm-selo { padding: 4px 10px; font-size: 13px; line-height: 1.3; white-space: nowrap; }
.adm-data { font-size: 13px; line-height: 1.3; color: var(--muted); white-space: nowrap; }
.adm-lista-vazia { padding: 24px 16px; text-align: center; color: var(--muted); }
.adm-so-pc, .adm-cab { display: none; }
/* celular: o selo desce pra baixo do nome (alinhado com o texto) e o nome (e-mail) ganha a largura toda */
@media (max-width: 480px) {
  .adm-linha { grid-template-columns: minmax(0, 1fr) 12px; row-gap: 8px; }
  .adm-linha > .adm-c-status { grid-column: 1; grid-row: 2; align-items: flex-start; }
  .adm-linha.adm-com-logo > .adm-c-status { padding-left: 52px; }
  .adm-linha > .adm-seta { grid-column: 2; grid-row: 1 / span 2; }
  .adm-linha .adm-selos-linha { flex-direction: row; align-items: center; gap: 6px; }
}
/* PC: a lista vira tabela, colunas alinhadas pela mesma borda do cabecalho */
@media (min-width: 900px) {
  .adm-tabela .adm-so-pc { display: block; }
  .adm-tabela .adm-so-cel { display: none; }
  .adm-tabela .adm-cab { display: grid; align-items: center; min-height: 44px; padding: 12px 16px; background: var(--bg); border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--muted); }
  .adm-tabela .adm-linha, .adm-tabela .adm-cab { grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr) minmax(0, 2.2fr) minmax(0, 1.4fr) 12px; gap: 16px; }
  .adm-tabela-contas .adm-linha, .adm-tabela-contas .adm-cab { grid-template-columns: minmax(0, 2.6fr) minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.4fr) 12px; }
  .adm-tabela .adm-c-status { align-items: flex-start; }
  .adm-tabela .adm-selos-linha { flex-direction: row; align-items: center; gap: 6px; }
}

/* busca e filtros: chips numa linha so; no celular a linha rola de lado, de borda a borda */
.adm-barra { display: flex; flex-direction: column; gap: 12px; }
.adm-chips { display: flex; gap: 8px; margin: -4px 0; padding: 4px 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.adm-chips::-webkit-scrollbar { display: none; }
/* o filtro que passa da tela some num degrade na borda (fica claro que a fileira rola, em vez de parecer cortada) */
@media (max-width: 640px) { .adm-chips { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 16px), transparent); } }
.adm-chips .aba-painel { flex: none; min-height: 40px; padding: 0 14px; font-size: 14.5px; line-height: 1; white-space: nowrap; }
@media (max-width: 640px) { .adm-chips { margin: -4px calc(-1 * var(--margem)); padding: 4px var(--margem); scroll-padding: 0 var(--margem); } }

/* precisa de atencao: icone, texto e o botao na mesma altura, botoes da mesma largura */
.adm-atencao-linha { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; border-top: 1px solid var(--line); }
.adm-atencao > :first-child, .adm-lista > .adm-atencao-linha:first-child, .adm-lista > .adm-tudo-ok:first-child { border-top: 0; } /* sem linha dupla em cima (a lista ja tem borda) */
.adm-ico { flex: none; width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; background: var(--lime-suave); color: var(--deep2); }
.adm-ico.laranja { background: var(--orange-suave); color: #C2410C; }
.adm-ico.erro { background: var(--erro-suave); color: var(--erro); }
/* icones de traco da lista de atencao (o mesmo desenho do topo), na cor do alerta */
.adm-ico .topo-ico { display: inline-flex; line-height: 1; }
.adm-ico .topo-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.adm-tudo-ok .adm-ico .topo-ico svg { stroke-width: 2.4; }
.adm-atencao-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.adm-atencao-texto b { font-size: 15.5px; line-height: 1.3; overflow-wrap: anywhere; }
.adm-atencao-texto span { font-size: 14px; line-height: 1.35; color: var(--muted); overflow-wrap: anywhere; }
.adm-atencao-linha .btn { flex: none; width: 112px; min-width: 0; min-height: 44px; padding: 0 8px; font-size: 15px; white-space: nowrap; }
.adm-tudo-ok { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; font-weight: 700; color: var(--deep2); }
.adm-tudo-ok .adm-ico { background: var(--lime); color: var(--ink); font-weight: 700; }
.adm-mais { display: block; width: 100%; min-height: 48px; margin: 0; padding: 12px 16px; border: 0; border-top: 1px solid var(--line); background: var(--card); color: var(--deep2); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
@media (hover: hover) { .adm-mais:hover { background: var(--bg); } }
@media (max-width: 480px) { .adm-atencao-linha .btn { width: 104px; gap: 8px; } } /* "Chamar" com o icone do WhatsApp: 92 espremia o icone e o texto nas bordas */
@media (max-width: 400px) { .adm-atencao-linha .adm-ico { display: none; } }

/* contatos: acoes a direita no PC (duas colunas iguais); no celular embaixo, metades iguais */
.adm-contato { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-height: 64px; padding: 12px 16px; border-top: 1px solid var(--line); }
.adm-lista > .adm-contato:first-child { border-top: 0; }
.adm-contato-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.adm-contato-topo .adm-data { flex: none; }
.adm-contato.feito .adm-nome { color: var(--body); }
.adm-contato-acoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.adm-contato-acoes .btn { width: 100%; min-width: 0; min-height: 44px; padding: 0 8px; font-size: 15px; white-space: nowrap; }
@media (max-width: 360px) { .adm-contato-acoes .btn { font-size: 14px; } } /* "Ja chamei" com folga */
@media (min-width: 760px) { .adm-contato { grid-template-columns: minmax(0, 1fr) 280px; align-items: center; gap: 16px; } }

/* ferramentas: cartoes iguais, botao sempre no pe */
.adm-ferramentas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1000px) { .adm-ferramentas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .adm-ferramentas { grid-template-columns: minmax(0, 1fr); } }
.adm-ferramenta { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--raio-p); }
.adm-ferramenta-topo { display: flex; align-items: center; gap: 12px; }
.adm-ferramenta-topo b { font-family: var(--display); font-size: 17px; line-height: 1.25; }
.adm-ferramenta > p { font-size: 14.5px; line-height: 1.45; color: var(--body); overflow-wrap: anywhere; }
.adm-ferramenta-pe { margin-top: auto; }
.adm-ferramenta-pe .btn { width: 100%; min-width: 0; min-height: 48px; padding: 0 12px; font-size: 15px; white-space: nowrap; }
.adm-precos-caixa { display: flex; flex-direction: column; gap: 12px; }
.adm-precos { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; font-size: 14.5px; line-height: 1.35; }
.adm-precos > span { padding: 8px 0; border-top: 1px solid var(--line); }
.adm-precos > .adm-pc-num { padding-left: 12px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.adm-precos > .adm-pc-cab { padding-top: 0; border-top: 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.adm-precos > .adm-pc-nome { font-weight: 600; }
@media (max-width: 360px) { .adm-precos { font-size: 13.5px; } .adm-precos > .adm-pc-num { padding-left: 8px; } } /* "Uma loja" numa linha */
.adm-precos > .adm-pc-fund { grid-column: 1 / -1; padding-top: 0; border-top: 0; font-size: 13px; color: #6B4A00; }
.adm-precos-nota { font-size: 13.5px; line-height: 1.4; color: var(--muted); }

/* fichas (modal) de loja e de conta; e-mail comprido no titulo quebra em vez de empurrar a tela */
.adm-modal .modal-topo > div:first-child { min-width: 0; }
.adm-modal .modal-topo .titulo { overflow-wrap: anywhere; font-size: clamp(18px, 5.6vw, 22px); } /* e-mail no titulo cabe inteiro no celular */
.adm-ficha { display: flex; flex-direction: column; gap: 16px; padding: 4px 0 8px; }
.adm-ficha h3 { font-size: 17px; margin-top: 8px; }
.adm-selos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.adm-link { display: flex; align-items: stretch; gap: 12px; }
.adm-link .caixa-link { flex: 1; min-width: 0; display: flex; align-items: center; }
.adm-link .btn { flex: none; min-height: 48px; white-space: nowrap; }
.adm-alerta { padding: 12px 16px; background: var(--orange-suave); border: 1px solid #F7D2B8; border-radius: var(--raio-p); color: #7A3B10; font-size: 15px; font-weight: 600; line-height: 1.4; }
.adm-dados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin: 0; padding: 16px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--raio-p); }
.adm-par { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adm-par dt { font-size: 13.5px; line-height: 1.3; color: var(--muted); }
.adm-par dd { margin: 0; font-size: 15.5px; font-weight: 600; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
/* celular: uma linha por dado, rotulo na esquerda e valor na direita, com divisoria fina */
@media (max-width: 560px) {
  .adm-dados { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 4px 16px; }
  .adm-par { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
  .adm-par:first-child { border-top: 0; }
  .adm-par dt { flex: none; }
  .adm-par dd { min-width: 0; text-align: right; }
}
/* celular pequeno: rotulo em cima e valor embaixo ("Ultimo pagamento" + "Nenhum ainda" nao cabiam lado a lado) */
@media (max-width: 360px) {
  .adm-par { flex-direction: column; align-items: stretch; gap: 2px; }
  .adm-par dd { text-align: left; }
}
.adm-numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.adm-numeros > p { grid-column: 1 / -1; }
.adm-numeros .adm-kpi-valor { font-size: 26px; }
.adm-acoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.adm-acoes-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.adm-acoes-1 { grid-template-columns: minmax(0, 1fr); }
.adm-acoes .btn, .adm-acoes-linha .btn { width: 100%; min-width: 0; min-height: 48px; padding: 0 8px; font-size: 15px; white-space: nowrap; }
.adm-acoes-linha { display: flex; flex-direction: column; gap: 12px; }
.adm-acoes-linha .btn { min-height: 52px; font-size: 16px; }
@media (max-width: 640px) {
  .adm-acoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-acoes-1 { grid-template-columns: minmax(0, 1fr); }
  .adm-acoes > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 360px) { .adm-acoes .btn { font-size: 13.5px; padding: 0 6px; } .adm-acoes-linha .btn { font-size: 14.5px; padding: 0 8px; } } /* "Pagou R$ 89,00 (+30 dias)" e "Ja chamei" inteiros */
.adm-caixa { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--raio-p); }
.adm-plano { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
.adm-plano .btn { width: 100%; min-width: 0; min-height: 56px; padding: 0 12px; font-size: 16px; white-space: nowrap; }
@media (max-width: 360px) { .adm-plano .btn { font-size: 14.5px; padding: 0 8px; } } /* "Pagou R$ 89,00 (+30 dias)" inteiro */
@media (max-width: 680px) { .adm-plano { grid-template-columns: minmax(0, 1fr); } } /* ficha estreita: "Pagou R$ 89,00 (+30 dias)" com a linha inteira */
.adm-conta-linha { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.adm-conta-linha .adm-textos { flex: 1 1 220px; }
.adm-conta-linha .btn { flex: none; min-height: 44px; white-space: nowrap; }
@media (max-width: 480px) { .adm-conta-linha .btn { flex: 1 1 100%; } }

/* logo do WhatsApp (branca) para os botoes verdes de WhatsApp e o botao flutuante */
/* logos do WhatsApp e do Instagram: mascara pintada com a cor do texto (branca no botao verde, escura no botao claro) */
.icone-zap, .icone-insta { flex: none; display: inline-block; width: 22px; height: 22px; background-color: currentColor; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.icone-zap { --logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3E%3C/svg%3E"); }
.icone-insta { --logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Crect x='2.6' y='2.6' width='18.8' height='18.8' rx='5.4'/%3E%3Ccircle cx='12' cy='12' r='4.3'/%3E%3Ccircle cx='17.4' cy='6.6' r='1.35' fill='%23000' stroke='none'/%3E%3C/svg%3E"); }
.btn-pequeno .icone-zap, .btn-pequeno .icone-insta { width: 19px; height: 19px; }
.btn-so-icone { padding-left: 12px; padding-right: 12px; } /* botao so com a logo (avisar o cliente no painel) */
.zap-flutuante .zap-icone .icone-zap { width: 22px; height: 22px; }
@media (max-width: 759px) { .zap-flutuante .zap-icone .icone-zap { width: 32px; height: 32px; } } /* celular: logo grande no circulo verde, como os botoes de WhatsApp que todo mundo conhece */

/* ---------- cadastro da loja em passos (uma pergunta por tela) ---------- */
.cadastro-progresso { height: 6px; margin: 0 var(--margem); border-radius: 3px; background: var(--line); overflow: hidden; }
.cadastro-progresso i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--lime); transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.cadastro { max-width: 520px; margin: 0 auto; width: 100%; }
.cadastro-caixa { display: flex; flex-direction: column; gap: 16px; padding-top: 8px; }
.cadastro-caixa.centro { align-items: center; text-align: center; }
.cadastro-pergunta { font-size: 26px; line-height: 1.15; text-wrap: balance; }
.cadastro-ajuda { margin-top: -8px; font-size: 16px; text-wrap: balance; }
.cadastro-entrada { width: 100%; min-height: 60px; padding: 12px 16px; font-size: 20px; border: 1.5px solid var(--line-forte); border-radius: 14px; background: var(--card); color: var(--ink); }
.cadastro-entrada:focus { outline: none; border-color: var(--lime); box-shadow: 0 0 0 4px rgba(132, 204, 22, 0.22); }
.cadastro-rotulo { font-weight: 700; font-size: 15px; color: var(--ink); margin-bottom: -8px; }
.cadastro-cidade input { min-height: 60px; font-size: 20px; border-radius: 14px; }
.escolhas-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.escolhas-lista { display: flex; flex-direction: column; gap: 10px; }
.escolha-tile { flex-direction: column; justify-content: center; text-align: center; gap: 6px; min-height: 104px; padding: 14px 8px; }
.escolha-tile .icone { width: auto; font-size: 34px; line-height: 1; }
.escolha-tile .rotulo { font-size: 18px; }
.escolha-grande.marcada { border-color: var(--lime); background: var(--lime-suave); box-shadow: 0 0 0 3px rgba(132, 204, 22, 0.25); }
.cadastro-taxa { display: flex; flex-direction: column; gap: 16px; }
.cadastro-taxa[hidden] { display: none; }
.cadastro-legal { margin-top: 4px; }
.cadastro-mascote { width: 150px; height: 150px; object-fit: contain; }
.montando-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.montando-linha { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 600; color: var(--muted); transition: color 0.2s; }
.montando-marca { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line-forte); transition: background-color 0.2s, border-color 0.2s; }
.montando-linha.feita { color: var(--ink); }
.montando-linha.feita .montando-marca { border-color: var(--lime); background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.3 4.9 8.7 9.6 3.6' fill='none' stroke='%230E1F14' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
@media (min-width: 560px) { .escolhas-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cadastro-pergunta { font-size: 30px; } }
/* primeiros passos: o bloco de Ajustes para onde o dono foi levado acende por um instante */
.bloco-form.realce { animation: realce-bloco 2.4s ease-out; }
@keyframes realce-bloco { 0%, 30% { box-shadow: 0 0 0 4px var(--lime), var(--sombra); } 100% { box-shadow: 0 0 0 0 rgba(132, 204, 22, 0), var(--sombra); } }
@media (prefers-reduced-motion: reduce) { .bloco-form.realce { animation: none; box-shadow: 0 0 0 4px var(--lime); } }
/* Ajustes: ID da loja (codigo unico, com botao de copiar) */
.id-loja { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.id-loja-texto { display: flex; flex-direction: column; gap: 4px; }
.id-loja-linha { display: flex; align-items: stretch; gap: 10px; } /* codigo com a altura do botao ao lado */
/* o endereco inteiro, sempre (e para copiar): endereco comprido quebra linha em vez de sumir com reticencias */
.id-loja-valor { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.3; display: flex; align-items: center; padding: 8px 12px; border-radius: 10px; background: var(--lime-suave); color: var(--deep); font-family: Consolas, "SF Mono", Menlo, monospace; font-size: 15px; font-weight: 700; }

/* icone de traco dentro de botao e de selo (Entrega, Retirada, Mapa, Entregue, relogio) */
.ico-traco { display: inline-flex; flex: none; line-height: 1; }
.ico-traco svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.selo .ico-traco svg { width: 16px; height: 16px; stroke-width: 2.1; }
.selo-tipo { gap: 6px; }
.selo.tempo { gap: 6px; }

/* topo da cozinha e do entregador sem nenhum botao visivel (navegador sem aviso): a fileira some, sem sobrar vao */
.topo-equipe .painel-topo-acoes:not(:has(> :not([hidden]))) { display: none; }
/* um botao so (entregador): deitado, com o nome inteiro, em vez de um quadrado grande com texto pequeno */
@media (max-width: 1199px) {
  .topo-equipe .painel-topo-acoes > .btn-pequeno:only-child { flex-direction: row; gap: 8px; min-height: 48px; padding: 0 16px; font-size: 15px; }
  .topo-equipe .painel-topo-acoes > .btn-pequeno:only-child .rot-longo { display: inline; }
  .topo-equipe .painel-topo-acoes > .btn-pequeno:only-child .rot-curto { display: none; }
}

/* abas do painel: no PC o nome inteiro; no celular as cinco numa linha, icone em cima e nome curto embaixo.
   As cinco do mesmo tamanho; a aba nunca fica menor que o proprio nome (sem o "min-width: 0"): se a letra do celular for
   mais larga e "Cardapio" nao couber, so ela cresce os pixels que faltam, em vez de virar "Carda..." (era o iPhone) */
.abas-principais .aba-painel .rot-curto { display: none; }
@media (max-width: 640px) {
  .abas-principais { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; overflow: visible; }
  .abas-principais .aba-painel { position: relative; flex-direction: column; gap: 4px; min-height: 58px; padding: 9px 2px 7px; border-radius: 14px; font-size: 12.5px; line-height: 1.1; white-space: nowrap; }
  .abas-principais .aba-painel .rot-longo { display: none; }
  .abas-principais .aba-painel .rot-curto { display: inline; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .abas-principais .aba-painel .ico-traco svg { width: 20px; height: 20px; }
  .abas-principais .aba-painel .badge { position: absolute; top: 3px; right: 3px; min-width: 18px; height: 18px; font-size: 11px; padding: 0 5px; }
}
/* Central no celular: as cinco abas iguais as do painel; a contagem sai e fica so o aviso (contato para chamar,
   pagamento avisado) como bolinha no canto da aba */
@media (max-width: 640px) {
  .adm-abas .adm-aba-extra { position: absolute; top: 4px; right: 4px; gap: 4px; }
  .adm-abas .adm-aba-extra .chip-qtd { display: none; }
  .adm-abas .adm-aba-extra .badge { min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; }
}
/* iPhone com "Tela ampliada" (320 px): margem e vao um pouco menores e letra 11,5 para "Cardapio" caber inteiro */
@media (max-width: 360px) {
  .abas-principais { gap: 4px; padding-left: 12px; padding-right: 12px; }
  .abas-principais .aba-painel { padding-left: 1px; padding-right: 1px; font-size: 11.5px; }
}

/* ---------- icones de traco no lugar dos emojis de interface (a comida escolhida pela loja continua emoji) ---------- */
.btn-pequeno .ico-traco svg, .aba-painel .ico-traco svg { width: 18px; height: 18px; }
.vazio .icone, .grafico-vazio .icone { display: flex; justify-content: center; color: var(--line-forte); }
.vazio .icone .ico-traco svg { width: 48px; height: 48px; stroke-width: 1.5; }
.grafico-vazio .icone .ico-traco svg { width: 36px; height: 36px; stroke-width: 1.6; }
.aviso > .ico-traco { align-self: flex-start; margin-top: 1px; }
.aviso-falta > .ico-traco { color: #B4501A; }
.cartao h3.titulo-alerta { display: flex; align-items: center; gap: 8px; }
.cartao h3.titulo-alerta .ico-traco { color: var(--erro); }
.aviso-plano-ico .ico-traco svg { width: 20px; height: 20px; }
.passo-texto { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.passo-config .passo-texto .ico-traco { color: var(--line-forte); }
.passo-config.feito .passo-texto .ico-traco { color: var(--lime-escuro); }
.pedido-card .obs, .ficha-cozinha .obs { display: flex; align-items: flex-start; gap: 8px; }
.pedido-card .obs .ico-traco svg, .ficha-cozinha .obs .ico-traco svg { width: 18px; height: 18px; margin-top: 2px; }
.linha-produto .editar .ico-traco svg { width: 18px; height: 18px; }
.sem-foto .ico-traco { color: var(--muted); }
.sem-foto .ico-traco svg { width: 32px; height: 32px; stroke-width: 1.6; }
.mp-selo { display: inline-flex; align-items: center; gap: 8px; }
.som-texto b { display: inline-flex; align-items: center; gap: 8px; }
.som-texto b .ico-traco svg { width: 18px; height: 18px; }
.bloco-titulo .ico-traco { color: var(--deep2); }
.bloco-titulo .ico-traco svg { width: 22px; height: 22px; }
.tela-card .icone { display: inline-flex; color: var(--deep2); }
.tela-card .icone .ico-traco svg { width: 28px; height: 28px; }
.conta-painel-texto b { display: inline-flex; align-items: center; gap: 8px; }
.plano-recado.com-alerta { display: flex; align-items: flex-start; gap: 8px; }
.plano-recado.com-alerta .ico-traco { color: var(--erro); margin-top: 1px; }
.conta-cheio-ico { color: var(--deep2); }
.conta-cheio-ico .ico-traco svg { width: 28px; height: 28px; }
.conta-ladrilho-icone { display: inline-flex; }
.conta-ladrilho-icone .ico-traco svg { width: 22px; height: 22px; }
.escolha-grande .icone { display: flex; align-items: center; justify-content: center; color: var(--deep2); }
.escolha-grande .icone .ico-traco svg { width: 30px; height: 30px; }
/* ---------- loja pronta: a comemoracao ---------- */
.pronto-card { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 16px 16px; text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--raio); box-shadow: 0 1px 2px rgba(14, 31, 20, 0.05); }
.pronto-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 132px; background: radial-gradient(120% 100% at 50% 0%, var(--lime-suave) 0%, rgba(238, 249, 220, 0) 100%); pointer-events: none; }
.pronto-card > * { position: relative; margin: 0; }
/* o palco: o mascote dancando no circulo, com a coroa de confetes em volta (cada peca no seu angulo, a partir do centro
   do circulo). Com menos movimento pedido no celular, tudo fica parado, e a coroa ja faz a festa */
.pronto-palco { position: relative; width: 200px; height: 152px; }
.pronto-palco::before { content: ""; position: absolute; left: 50%; top: 80px; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; background: var(--lime-suave); border: 2px solid #C9E7A1; }
.pronto-dancando { position: absolute; left: 50%; top: 30px; width: 96px; height: 96px; margin-left: -48px; transform-origin: 50% 100%; }
.pronto-sombra { position: absolute; left: 50%; top: 122px; width: 56px; height: 8px; margin-left: -28px; border-radius: 50%; background: rgba(14, 31, 20, 0.12); }
.pronto-confete { position: absolute; left: 50%; top: 80px; display: block; transform: rotate(var(--a)) translateX(var(--d)) rotate(var(--g)); }
.pronto-confete.bola { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; }
.pronto-confete.fita { width: 13px; height: 6px; margin: -3px 0 0 -6.5px; border-radius: 2px; }
.pronto-confete.tri { width: 11px; height: 10px; margin: -5px 0 0 -5.5px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.pronto-confete.lime { background: var(--lime); }
.pronto-confete.deep2 { background: var(--deep2); }
.pronto-confete.lemon { background: var(--lemon); }
.pronto-confete.orange { background: var(--orange); }
.pronto-confete.c1 { --a: -168deg; --d: 78px; --g: 20deg; --atraso: 40ms; }
.pronto-confete.c2 { --a: -146deg; --d: 86px; --g: 35deg; --atraso: 80ms; }
.pronto-confete.c3 { --a: -124deg; --d: 78px; --g: -15deg; --atraso: 120ms; }
.pronto-confete.c4 { --a: -104deg; --d: 88px; --g: 60deg; --atraso: 160ms; }
.pronto-confete.c5 { --a: -86deg; --d: 80px; --g: 0deg; --atraso: 200ms; }
.pronto-confete.c6 { --a: -66deg; --d: 88px; --g: -40deg; --atraso: 240ms; }
.pronto-confete.c7 { --a: -46deg; --d: 78px; --g: 25deg; --atraso: 280ms; }
.pronto-confete.c8 { --a: -26deg; --d: 86px; --g: 70deg; --atraso: 320ms; }
.pronto-confete.c9 { --a: -6deg; --d: 78px; --g: 0deg; --atraso: 360ms; }
.pronto-confete.c10 { --a: 16deg; --d: 84px; --g: -30deg; --atraso: 400ms; }
.pronto-confete.c11 { --a: 38deg; --d: 76px; --g: 15deg; --atraso: 440ms; }
.pronto-confete.c12 { --a: 142deg; --d: 76px; --g: -20deg; --atraso: 480ms; }
.pronto-confete.c13 { --a: 164deg; --d: 84px; --g: 40deg; --atraso: 520ms; }
.pronto-confete.c14 { --a: 186deg; --d: 78px; --g: 10deg; --atraso: 560ms; }
@media (prefers-reduced-motion: no-preference) {
  /* a coroa estoura do centro, peca por peca; o mascote danca: passinho para cada lado, com pulinho e a sombra junto */
  .pronto-confete { animation: pronto-estouro 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) var(--atraso) both; }
  .pronto-dancando { animation: pronto-danca 1.6s ease-in-out infinite; }
  .pronto-sombra { animation: pronto-sombra 1.6s ease-in-out infinite; }
}
@keyframes pronto-estouro { from { transform: rotate(var(--a)) translateX(0) rotate(var(--g)) scale(0); opacity: 0; } to { transform: rotate(var(--a)) translateX(var(--d)) rotate(var(--g)) scale(1); opacity: 1; } }
@keyframes pronto-danca {
  0%, 100% { transform: translateY(0) rotate(0) scale(1, 1); }
  12% { transform: translateY(0) rotate(-9deg) scale(1.06, 0.94); }
  25% { transform: translateY(-12px) rotate(-5deg) scale(0.97, 1.04); }
  37% { transform: translateY(0) rotate(0) scale(1.05, 0.95); }
  50% { transform: translateY(0) rotate(9deg) scale(1.06, 0.94); }
  62% { transform: translateY(-12px) rotate(5deg) scale(0.97, 1.04); }
  75% { transform: translateY(0) rotate(0) scale(1.05, 0.95); }
  87% { transform: translateY(-5px) rotate(0) scale(1, 1); }
}
@keyframes pronto-sombra {
  0%, 12%, 37%, 50%, 75%, 100% { transform: scaleX(1); opacity: 1; }
  25%, 62% { transform: scaleX(0.7); opacity: 0.6; }
  87% { transform: scaleX(0.88); opacity: 0.85; }
}
.pronto-festa { position: fixed; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }
/* menos movimento pedido no celular: como a flutuacao dos outros mascotes (a cara da marca), ele continua, so que num
   balancinho curto, sem pulo; o estouro de confete nao aparece */
@keyframes pronto-balanco { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .pronto-dancando { animation: pronto-balanco 1.6s ease-in-out infinite !important; } }
.pronto-selo { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 4px 12px; border-radius: 999px; background: var(--deep); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.pronto-ponto { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--lime2); }
.pronto-ponto::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--lime2); animation: pronto-sinal 1.8s ease-out infinite; }
@keyframes pronto-sinal { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(2.6); opacity: 0; } }
.pronto-titulo { font-family: var(--display); font-size: 26px; line-height: 1.15; color: var(--ink); overflow-wrap: anywhere; text-wrap: balance; }
.pronto-sub { max-width: 360px; font-size: 16px; line-height: 1.45; color: var(--body); text-wrap: balance; }
.pronto-link { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 8px 8px 16px; background: var(--bg); border: 1.5px dashed var(--line-forte); border-radius: var(--raio-p); color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.pronto-link:focus-visible { outline: 3px solid var(--deep); outline-offset: 2px; }
@media (hover: hover) { .pronto-link:hover { border-color: var(--lime-escuro); } }
.pronto-link:active { transform: scale(0.99); }
.pronto-link-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
/* o endereco do Ligeiro numa linha, pequeno; o da loja embaixo, grande, sem quebrar no meio do nome se couber */
.pronto-link-base { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.pronto-link-texto b { font-size: 17px; color: var(--ink); font-weight: 800; overflow-wrap: anywhere; }
.pronto-link-copiar { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--lime); color: var(--texto-no-destaque); display: inline-flex; align-items: center; justify-content: center; }
.pronto-link-copiar .ico-traco svg { width: 20px; height: 20px; }
.pronto-gratis { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; line-height: 1.4; color: var(--muted); text-wrap: balance; }
.pronto-gratis b { color: var(--ink); }
.pronto-gratis .ico-traco { flex: none; color: var(--deep2); }
.pronto-gratis .ico-traco svg { width: 18px; height: 18px; }
.pronto-qr { display: flex; align-items: center; gap: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.pronto-qr-caixa { flex: none; width: 112px; height: 112px; padding: 8px; background: #fff; border: 1.5px solid var(--line); border-radius: 14px; }
.pronto-qr-caixa svg { display: block; width: 100%; height: 100%; }
.pronto-qr-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 14px; line-height: 1.4; color: var(--muted); text-align: left; }
.pronto-qr-texto b { font-family: var(--display); font-size: 16px; color: var(--ink); }
.pronto-qr-texto .btn { margin-top: 8px; }
@media (max-width: 359px) { .pronto-qr { flex-direction: column; text-align: center; } .pronto-qr-texto { align-items: center; text-align: center; } }
@media (prefers-reduced-motion: reduce) { .pronto-ponto::after { animation: none; opacity: 0; } }
/* busca: a lupa desenhada no campo (no lugar do emoji no texto de exemplo) */
.busca { padding-left: 42px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236F7D72' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.3-4.3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 14px center; background-size: 18px 18px; }
.hub-conteudo .busca { padding-left: 50px; background-position: 18px center; background-size: 20px 20px; }

/* ---------- avisos com a tela apagada (Web Push) ---------- */
/* o sino de traco do topo do painel, em todo lugar que fala de aviso */
.avisos-ico, .aviso-cel-ico, .cliente-avisado-ico, .passo-iphone-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; line-height: 1; }
.avisos-ico svg, .aviso-cel-ico svg, .cliente-avisado-ico svg, .passo-iphone-ico svg { width: 100%; height: 100%; }
/* aba Pedidos: cartao ate ligar */
.cartao-avisos { display: flex; flex-direction: column; gap: 16px; }
.avisos-linha { display: flex; align-items: center; gap: 16px; }
.avisos-ico { width: 48px; height: 48px; padding: 12px; border-radius: 50%; background: var(--lime-suave); color: var(--deep2); }
.avisos-texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.avisos-texto b { font-family: var(--display); font-size: 17px; line-height: 1.25; color: var(--ink); text-wrap: balance; }
.avisos-texto span { font-size: 14.5px; line-height: 1.45; color: var(--body); text-wrap: pretty; }
.avisos-botoes .btn { min-height: 48px; flex: 1 1 auto; white-space: nowrap; } /* texto numa linha; se os dois nao cabem lado a lado, um embaixo do outro */
@media (min-width: 641px) { .avisos-botoes .btn { flex: 0 0 auto; min-width: 168px; } }
/* Minha loja: ligar, testar e desligar (mesmo desenho da senha da equipe) */
.bloco-avisos-botoes { display: flex; gap: 12px; flex: none; }
.bloco-avisos-botoes .btn { min-height: 48px; padding: 0 20px; white-space: nowrap; }
@media (max-width: 600px) { .bloco-avisos-botoes { flex: 1 1 100%; } .bloco-avisos-botoes .btn { flex: 1 1 0; } }
/* cartao do pedido: o cliente recebe sozinho */
.cliente-avisado { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--lime-suave); color: var(--deep2); font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.cliente-avisado-ico { width: 18px; height: 18px; }
/* cartao do pedido: o WhatsApp certo do status (um toque abre a conversa com a mensagem pronta) */
.zap-status { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 14px; border-radius: 12px; background: #EAF9F0; border: 1.5px solid #BDE9CE; color: #0B5E34; font-size: 15px; font-weight: 600; line-height: 1.3; text-decoration: none; transition: background 0.15s, border-color 0.15s; }
.zap-status .icone-zap { width: 22px; height: 22px; color: #1FAF55; }
.zap-status-texto { flex: 1; min-width: 0; }
.zap-status-texto b { font-weight: 800; }
.zap-status-fim { flex: none; display: inline-flex; line-height: 1; }
.zap-status:hover { background: #DDF5E7; }
.zap-status.feito { background: transparent; border-style: dashed; border-color: var(--line-forte); color: var(--muted); }
.zap-status.feito .icone-zap { color: var(--muted); }
.zap-status.feito .zap-status-texto b { font-weight: 700; }
/* cliente, no fechamento: "Me avise no celular" */
.aviso-cel { cursor: pointer; border-radius: var(--raio); padding: 12px 16px; } /* mesmos cantos e margem dos blocos do formulario */
.aviso-cel-ico { width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--lime-suave); color: var(--deep2); }
/* cliente, depois da entrega: convite para avaliar no Google */
.avaliar-google { width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 16px 16px; border-radius: var(--raio); background: var(--card); border: 1px solid var(--line); text-align: center; }
.avaliar-google[hidden] { display: none; }
.avaliar-estrelas { display: flex; gap: 4px; color: #F5B301; }
.avaliar-estrelas svg { width: 26px; height: 26px; fill: currentColor; }
.avaliar-titulo { font-family: var(--display); font-size: 20px; line-height: 1.2; color: var(--ink); }
.avaliar-texto { margin: 0 0 8px; font-size: 15px; line-height: 1.45; color: var(--body); text-wrap: pretty; }
.avaliar-depois { border: 0; background: none; padding: 8px 12px; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
/* cliente, na tela da senha */
.aviso-cel-pedido { width: 100%; max-width: 420px; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); text-align: left; }
.aviso-cel-pedido[hidden] { display: none; }
.aviso-cel-pedido .aviso-cel-ico { width: 40px; height: 40px; }
.aviso-cel-pedido-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14.5px; line-height: 1.35; color: var(--body); }
.aviso-cel-pedido-texto b { font-family: var(--display); font-size: 16px; color: var(--ink); }
.aviso-cel-pedido .btn { flex: none; min-height: 44px; min-width: 96px; padding: 0 18px; } /* Avisar e Jogar com a mesma largura: um cartao embaixo do outro, os botoes alinham */
.aviso-cel-pedido.ligado { background: var(--lime-suave); border-color: #C9E7A1; }
.aviso-cel-pedido.ligado .aviso-cel-ico { background: #fff; }
.aviso-cel-pedido.ligado .aviso-cel-pedido-texto { color: var(--deep); font-weight: 600; }
/* convite da Corrida do Ligeiro: o mesmo cartao do "Quer saber quando sair?", com o mascote no lugar do icone */
/* em destaque: o mesmo cartao, com o fundo verde-limao e a borda do botao principal */
.jogo-convite { background: linear-gradient(135deg, var(--lime-suave) 0%, #FFFFFF 85%); border-color: #C9E7A1; }
/* o icone da Corrida: uma arte de app (ceu, rua e a motinho), com o canto dos cartoes */
.jogo-convite-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px rgba(14, 31, 20, 0.12), 0 2px 6px rgba(14, 31, 20, 0.16); }
.jogo-convite-ico svg { display: block; width: 100%; height: 100%; }
.jogo-recorde-selo { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; padding: 2px 10px 2px 8px; border-radius: 999px; background: var(--deep); color: #FFFFFF; font-size: 13px; font-weight: 700; line-height: 1.4; font-variant-numeric: tabular-nums; }
.jogo-recorde-selo .ico-traco { color: var(--lime2); }
.jogo-recorde-selo .ico-traco svg { width: 14px; height: 14px; }
/* iPhone: os 3 passos */
.passos-iphone { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.passo-iphone { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); font-size: 15.5px; line-height: 1.4; }
.passo-iphone-n { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--deep); color: #fff; font-family: var(--display); font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.passo-iphone-ico { width: 24px; height: 24px; color: var(--deep2); }
.passo-iphone-texto { flex: 1; min-width: 0; }
/* tela de entrada do painel: "Minha senha tem letras" (dono de e-mail e senha) como link discreto */
.login-letras { border: 0; background: none; padding: 8px 12px; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* o que separar para pagar (tela da senha): icone de traco ao lado do texto */
.a-cobrar { display: flex; align-items: center; justify-content: center; gap: 10px; text-align: left; }
.a-cobrar[hidden] { display: none; }
.a-cobrar .ico-traco { color: #B4501A; }
/* ---------- cliente: icones de traco no lugar dos emojis de interface ---------- */
.hub-selos span, .ps-status span, .confianca span, .cupom-abrir, .cupom-valendo > span { display: inline-flex; align-items: center; gap: 6px; }
.confirmado { display: flex; align-items: center; justify-content: center; gap: 8px; }
.nota:has(> .ico-traco) { display: flex; justify-content: center; align-items: flex-start; gap: 6px; text-align: center; } /* nota com icone (cadeado) no centro, como as linhas de confianca */
/* endereco no centro e no mesmo desenho das linhas de confianca de cima (13 px, negrito leve, icone de 15) */
#enderecoLoja:not(:empty) { display: flex; justify-content: center; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
#enderecoLoja .ico-traco { flex: none; }
#enderecoLoja .ico-traco svg { width: 15px; height: 15px; }
.hub-selos .ico-traco svg { width: 15px; height: 15px; stroke-width: 2.6; }

.ps-status .ico-traco svg, .confianca .ico-traco svg { width: 15px; height: 15px; }
.cupom-abrir .ico-traco svg, .cupom-valendo .ico-traco svg { width: 18px; height: 18px; }
.forma-icone { display: flex; align-items: center; justify-content: center; color: var(--deep2); }
.forma-icone .ico-traco svg { width: 26px; height: 26px; }
.confirmado .ico-traco svg { width: 22px; height: 22px; }
.nota .ico-traco svg { width: 15px; height: 15px; }
.nota .ico-traco { margin-top: 2px; }
.etapa .bolha .ico-traco svg { width: 20px; height: 20px; }
.etapa.feita .bolha .ico-traco svg { stroke-width: 2.6; }
.faixa-acompanhar .ico-traco svg { width: 22px; height: 22px; }
#avisoVolta .ico-traco svg { width: 24px; height: 24px; }
.aviso > .ico-traco svg { width: 20px; height: 20px; }
.aviso:has(> .ico-traco) { text-align: left; }
.modal-caixa:focus { outline: none; } /* o foco entra na janela so para o leitor de tela; sem contorno em volta dela toda */
/* pagina de vendas e Central: icones de traco */
.item-venda .icone { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 50%; background: var(--lime-suave); color: var(--deep2); }
.item-venda .icone .ico-traco svg { width: 22px; height: 22px; }
.ex-icone .ico-traco svg { width: 20px; height: 20px; }
.fundador-relogio .ico-traco svg, .fundador-selo .estrela .ico-traco svg { width: 16px; height: 16px; }
.fundador-relogio { display: inline-flex; vertical-align: -2px; }
.fundador-selo .estrela { display: inline-flex; }
.adm-selo .ico-traco svg { width: 14px; height: 14px; stroke-width: 2.4; }
/* painel: o que era cor fixa no codigo (o tema da loja oficial nao pegava) */
.fila-mostrar { cursor: pointer; color: var(--muted); font-weight: 600; padding: 6px 0; }
.editar-grupo { border: 1.5px solid var(--line-forte); background: var(--card); border-radius: 10px; min-height: 40px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; }
.editar-grupo .ico-traco svg { width: 18px; height: 18px; }

/* simbolos que viraram icone de traco: o tamanho de cada um no lugar dele */
.bolinha { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.salvar-estado .bolinha { margin-right: 6px; vertical-align: 1px; }
.selo > .selo-google-estrela svg { width: 15px; height: 15px; stroke-width: 2.2; }
.estrela .ico-traco svg, .plano-fundador b .ico-traco svg { width: 16px; height: 16px; stroke-width: 2.2; }
.plano-fundador b { display: inline-flex; align-items: center; gap: 4px; }
.plano-fundador b .ico-traco, .selo-fundador .ico-traco, .adm-pc-fund .ico-traco { color: #D97706; }
.opcao .marcador .ico-traco svg, .forma-marca .ico-traco svg { width: 16px; height: 16px; stroke-width: 3; }
.hub-cidade-seletor .seta .ico-traco svg { width: 0.62em; height: 0.62em; stroke-width: 3; }
.som-tocar .ico-traco svg { width: 16px; height: 16px; }
.zap-status-fim .ico-traco svg { width: 18px; height: 18px; stroke-width: 2.4; }
.video-denovo { display: inline-flex; align-items: center; gap: 6px; }
.video-denovo .ico-traco svg { width: 18px; height: 18px; }
.antes-depois .lado p { display: flex; align-items: flex-start; gap: 8px; }
.antes-depois .lado p .ico-traco { margin-top: 3px; }
.antes-depois .lado p .ico-traco svg { width: 16px; height: 16px; stroke-width: 2.6; }
.plano-check .ico-traco { margin-top: 3px; }
.plano-check .ico-traco svg { width: 16px; height: 16px; stroke-width: 2.6; }
.plano-marca { gap: 6px; }
.plano-marca .ico-traco svg { width: 16px; height: 16px; stroke-width: 2.6; }
.adm-estrela { display: inline-flex; vertical-align: -2px; }
.adm-estrela .ico-traco svg { width: 16px; height: 16px; stroke-width: 2.2; }
.adm-fund .ico-traco svg { width: 11px; height: 11px; stroke-width: 2.6; }
.adm-pc-fund, .adm-ok-txt { display: inline-flex; align-items: center; gap: 4px; }
.adm-pc-fund .ico-traco svg, .adm-ok-txt .ico-traco svg { width: 14px; height: 14px; stroke-width: 2.4; }
.modal-topo .fechar { display: inline-flex; align-items: center; justify-content: center; }
.modal-topo .fechar .ico-traco svg { width: 20px; height: 20px; stroke-width: 2.2; }
.video-fechar { display: inline-flex; align-items: center; justify-content: center; }
.video-fechar .ico-traco svg { width: 20px; height: 20px; stroke-width: 2.4; }
.dia-acao { gap: 4px; }
.dia-acao .ico-traco svg, .btn-mini .ico-traco svg { width: 15px; height: 15px; stroke-width: 2.6; }
.btn-mini:has(> .ico-traco:only-child) { display: inline-flex; align-items: center; justify-content: center; }
/* aviso de abrir no navegador (dentro do Instagram): titulo, explicacao e o botao do Chrome embaixo */
.aviso-app { align-items: flex-start; font-weight: 400; }
.aviso-app-texto { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.aviso-app-texto b { font-weight: 700; }
.aviso-app-texto .btn { margin-top: 6px; }
.aviso-app-texto .botoes-empilhados { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.aviso-app-texto .botoes-empilhados .btn { width: 100%; margin: 0; }
.cadastro-aviso-app { padding-bottom: 0; }
/* botao Apito antes do primeiro toque: o navegador ainda nao liberou o som. Pontinho vermelho no canto, pulsando
   (parado com "Reduzir movimento"); some sozinho no primeiro toque em qualquer lugar da tela */
.btn-pequeno.pedindo { position: relative; }
.btn-pequeno.pedindo::before { content: ""; position: absolute; top: 6px; right: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--erro); box-shadow: 0 0 0 0 rgba(192, 57, 43, 0.55); animation: pulso-apito 1.4s ease-out infinite; }
@keyframes pulso-apito { 0% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0.55); } 70% { box-shadow: 0 0 0 8px rgba(192, 57, 43, 0); } 100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0); } }
@media (prefers-reduced-motion: reduce) { .btn-pequeno.pedindo::before { animation: none; } }
/* ---------- cartao de credito pelo site ---------- */
/* grupos do fechamento: "Pague agora pelo site" e "Pague na entrega" (so com as duas turmas na tela) */
.forma-grupo { margin: 4px 0 -4px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.forma-pgto + .forma-grupo { margin-top: 12px; }
/* tela do cartao: a mesma coluna da tela do Pix, com o formulario do Mercado Pago no meio */
.pix-cartao .cartao-form { width: 100%; max-width: 440px !important; text-align: left; } /* o Mercado Pago grava max-width: 100% na caixa; a coluna fica em 440, igual ao Copiar codigo Pix */
.pix-cartao .cartao-form:empty { display: none; }
.cartao-recusado { display: flex; align-items: flex-start; gap: 10px; width: 100%; max-width: 440px; padding: 12px 16px; border: 1px solid var(--erro); border-radius: var(--raio-p); background: var(--erro-suave); color: var(--ink); font-weight: 700; font-size: 14.5px; text-align: left; }
.cartao-recusado .ico-traco { color: var(--erro); margin-top: 1px; flex: none; }
.cartao-recusado .ico-traco svg { width: 20px; height: 20px; }
.cartao-recusado.cartao-esperando { border-color: #C9E7A1; background: var(--lime-suave); }
.cartao-recusado.cartao-esperando .ico-traco { color: var(--lime-escuro); }
/* demonstracao: cartao de mentira para mostrar o fluxo sem cobrar nada */
.cartao-teste { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; aspect-ratio: 1.586; max-width: 320px; margin: 0 auto 12px; padding: 16px; border-radius: 16px; background: linear-gradient(135deg, var(--deep), var(--deep2, #1c5a44)); color: #fff; box-shadow: var(--sombra); }
.cartao-teste-numero { font-family: var(--display); font-size: 20px; letter-spacing: 0.08em; }
.cartao-teste-linha { display: flex; justify-content: space-between; font-size: 13px; opacity: 0.85; }
.pix-cartao .cartao-form .nota { margin: 0 0 12px; text-align: center; }
/* garantias da tela do cartao: bloco centrado, itens alinhados pela esquerda (os icones numa coluna so) */
.garantias { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: fit-content; max-width: 440px; margin: 4px 0 0; padding: 0; list-style: none; }
.garantias li { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--muted); text-align: left; }
.garantias .ico-traco { flex: none; color: var(--lime-escuro); }
.garantias .ico-traco svg { width: 18px; height: 18px; }
.linha-produto .nome-cupom small { white-space: normal; overflow: visible; text-overflow: clip; } /* "a partir de R$ 30,00 · 0 de 100 usos" inteiro */
/* ---------- bloco Pagamento dos Ajustes: turma do site (caixa do Mercado Pago) e turma da entrega ---------- */
.forma-grupo.mais-longe { margin-top: 12px; } /* 12 do bloco + 12 = 24 entre as turmas */
.mp-caixa { display: flex; flex-direction: column; gap: 12px; padding: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--raio-p); }
.mp-caixa .mp-formas { display: flex; flex-direction: column; gap: 12px; }
.mp-caixa .mp-formas[hidden] { display: none; }
.mp-caixa .interruptor { padding: 10px 0 0; min-height: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
.mp-caixa .mp-liberar { display: flex; flex-direction: column; gap: 8px; }
.mp-caixa .mp-liberar[hidden] { display: none; }
.mp-convite { display: flex; flex-direction: column; gap: 4px; }
.mp-convite b { font-size: 16px; }
.passos-conectar { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.passos-conectar li { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 1.35; }
.passos-conectar .numero { width: 28px; height: 28px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--lime); color: var(--texto-no-destaque); font-weight: 700; font-size: 14px; }
.mp-lendo { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--muted); font-weight: 600; font-size: 14.5px; }
.mp-lendo .girando { width: 18px; height: 18px; border: 3px solid var(--line-forte); border-top-color: var(--deep2); border-radius: 50%; animation: girar 0.9s linear infinite; flex: none; }
/* Primeiros passos: a barra mostra quanto falta */
.progresso-passos { height: 8px; margin: 2px 0 4px; border-radius: 999px; background: var(--lime-suave); overflow: hidden; }
.progresso-passos span { display: block; height: 100%; border-radius: 999px; background: var(--lime); }
/* pergunta com botoes que nao cabem lado a lado: um embaixo do outro, a acao em cima e o "voltar" embaixo */
.modal-rodape.empilhado { flex-direction: column-reverse; align-items: stretch; }
.modal-rodape.empilhado > .btn { flex: none !important; width: 100%; }
/* taxa do cartao nos Ajustes: repassar ou nao, com o exemplo em reais */
.mp-taxa { display: flex; flex-direction: column; gap: 12px; }
.mp-taxa[hidden] { display: none; }
.mp-taxa > .campo { margin: 0; }
.taxa-exemplo { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: var(--raio-p); background: var(--lime-suave); color: var(--body); font-size: 14px; line-height: 1.4; }
.taxa-exemplo .ico-traco { flex: none; color: var(--deep2); margin-top: 1px; }
.taxa-exemplo .ico-traco svg { width: 18px; height: 18px; }
.pix-cartao .cartao-taxa { margin-top: -8px; } /* junto do nome da loja: 4 px entre as duas linhas */
/* ---------- tutorial com o mascote: balao de fala de personagem, o lugar certo aceso e o resto escurecido ---------- */
.tour-escuro { position: fixed; inset: 0; z-index: 74; background: rgba(14, 31, 20, 0.5); pointer-events: none; }
.tour-foco { position: fixed; z-index: 75; border-radius: 16px; box-shadow: 0 0 0 3px var(--lime), 0 0 24px 4px rgba(132, 204, 22, 0.45); pointer-events: none; }
.tour { position: fixed; z-index: 76; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; gap: 2px; max-width: 600px; margin: 0 auto; padding: 0 12px calc(12px + env(safe-area-inset-bottom)); pointer-events: none; }
.tour > * { pointer-events: auto; }
.tour:focus { outline: none; }
.tour-mascote-caixa { flex: none; display: block; margin-bottom: 4px; }
.tour-mascote { display: block; width: 88px; height: 88px; object-fit: contain; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.25)); }
.tour-balao { position: relative; flex: 1; min-width: 0; padding: 24px 16px 16px; background: var(--card); color: var(--ink); border: 2px solid var(--deep); border-radius: 20px; box-shadow: 0 14px 36px rgba(14, 31, 20, 0.28); }
/* o rabinho do balao aponta para o mascote */
.tour-balao::before { content: ""; position: absolute; left: -9px; bottom: 30px; width: 16px; height: 16px; background: var(--card); border-left: 2px solid var(--deep); border-bottom: 2px solid var(--deep); transform: rotate(45deg); }
/* o nome do personagem em cima do balao, como nos jogos */
.tour-nome { position: absolute; top: -13px; left: 16px; padding: 3px 12px; border-radius: 999px; background: var(--deep); color: #fff; font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.3; }
.tour-titulo { margin: 0 0 8px; font-family: var(--display); font-size: 21px; font-weight: 700; line-height: 1.2; color: var(--deep); text-wrap: balance; }
.tour-titulo[hidden] { display: none; }
.tour-texto { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.45; text-wrap: pretty; }
.tour-rodape { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.tour-conta { position: absolute; top: -13px; right: 16px; padding: 3px 10px; border-radius: 999px; background: var(--card); border: 2px solid var(--deep); color: var(--deep); font-size: 12.5px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.tour-conta[hidden] { display: none; }
.tour-rodape .btn { white-space: nowrap; }
.tour-rodape .btn { min-height: 44px; }
/* a abertura: mascote maior, no meio da tela, com o titulo de boas-vindas */
.tour.tour-abertura { top: 0; align-items: center; flex-direction: column; justify-content: center; gap: 0; background: rgba(14, 31, 20, 0.55); max-width: none; padding: 16px; pointer-events: auto; }
.tour.tour-abertura .tour-mascote-caixa { margin: 0 0 12px; } /* 12 ate o balao: o rabinho aponta para ele e a etiqueta do nome fica livre, na esquerda */
.tour.tour-abertura .tour-mascote { width: 150px; height: 150px; }
.tour.tour-abertura .tour-balao { flex: none; width: 100%; max-width: 440px; text-align: center; }
.tour.tour-abertura .tour-balao::before { left: 50%; top: -9px; bottom: auto; margin-left: -8px; border: 0; border-left: 2px solid var(--deep); border-top: 2px solid var(--deep); }
.tour.tour-abertura .tour-titulo { font-size: 24px; }
.tour.tour-abertura .tour-rodape { justify-content: center; }
.tour.tour-abertura .tour-rodape .btn { flex: 1 1 0; } /* na abertura os dois botoes do mesmo tamanho */
/* animacoes do tutorial: rodam sempre, tambem com "Reduzir movimento" (o !important passa por cima da regra geral
   do site). So transform e opacity: o celular faz na placa de video, sem pesar */
.tour-balao.entrando { animation: tour-pop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both !important; transform-origin: 30% 100%; }
.tour.tour-abertura .tour-balao.entrando { animation: tour-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.12s both !important; transform-origin: 50% 0; }
.tour-mascote.pulando { animation: tour-pulo 0.55s ease-out both !important; }
.tour.tour-abertura .tour-mascote.pulando { animation: tour-mascote-entra 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both !important; }
.tour-mascote-caixa { animation: tour-flutua 2.6s ease-in-out 0.6s infinite !important; }
.tour.tour-abertura { animation: tour-aparece 0.25s ease-out both !important; }
.tour-escuro { animation: tour-aparece 0.25s ease-out both !important; transition: clip-path 0.3s ease !important; }
.tour-foco { transition: top 0.3s ease, left 0.3s ease, width 0.3s ease, height 0.3s ease !important; }
.tour-foco::after { content: ""; position: absolute; inset: -3px; border: 3px solid var(--lime); border-radius: inherit; animation: tour-pulso 1.5s ease-out infinite !important; }
@keyframes tour-pop { 0% { opacity: 0; transform: translateY(14px) scale(0.88); } 60% { opacity: 1; transform: translateY(-3px) scale(1.02); } 100% { opacity: 1; transform: none; } }
@keyframes tour-mascote-entra { 0% { opacity: 0; transform: translateY(28px) scale(0.55) rotate(-10deg); } 55% { opacity: 1; transform: translateY(-8px) scale(1.07) rotate(4deg); } 100% { opacity: 1; transform: none; } }
@keyframes tour-pulo { 0%, 100% { transform: none; } 35% { transform: translateY(-12px) rotate(-5deg); } 65% { transform: translateY(0) rotate(3deg); } 82% { transform: translateY(-3px); } }
@keyframes tour-flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes tour-pulso { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.07); } }
@keyframes tour-aparece { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 360px) { .tour-mascote { width: 68px; height: 68px; } .tour-texto { font-size: 15px; } }
.passos-botoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 4px 0 0; } /* 12 do card + 4 = 16 da lista */
.passos-botoes .btn { min-width: 0; white-space: nowrap; }
.passos-botoes .btn-principal { grid-column: 1 / -1; }
.passo-ir { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.passo-ir .ico-traco svg { width: 16px; height: 16px; }
/* ---------- Primeiros passos: mascote no topo, um cartao por passo que falta, os prontos recolhidos ---------- */
.passos-card { display: flex; flex-direction: column; gap: 12px; }
.passos-card > * { margin: 0; }
.passos-topo { display: flex; align-items: center; gap: 12px; }
.passos-mascote { width: 52px; height: 52px; flex: none; object-fit: contain; margin: -4px 0; }
.passos-titulos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.passos-titulos h3 { margin: 0; font-size: 19px; line-height: 1.2; }
.passos-titulos span { font-size: 14px; color: var(--body); line-height: 1.35; }
.passos-conta { flex: none; align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--deep); color: #fff; font-size: 13px; font-weight: 700; line-height: 1.2; }
.passos-card .progresso-passos { background: rgba(14, 31, 20, 0.12); }
.passos-lista { display: flex; flex-direction: column; gap: 8px; }
.passo-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; text-align: left; color: var(--ink); cursor: pointer; box-shadow: 0 1px 2px rgba(14, 31, 20, 0.05); }
@media (hover: hover) { .passo-item:hover { border-color: var(--lime-escuro); } }
.passo-item:active { transform: scale(0.99); }
.passo-ico { flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--lime-suave); color: var(--deep2); }
.passo-ico .ico-traco svg { width: 22px; height: 22px; }
.passo-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.passo-textos b { font-size: 15.5px; line-height: 1.3; }
.passo-textos small { font-size: 13.5px; color: var(--muted); line-height: 1.3; }
.passo-seta { flex: none; color: var(--muted); display: inline-flex; }
.passo-seta .ico-traco svg { width: 18px; height: 18px; }
/* "N ja prontos": uma listinha num cartao do mesmo desenho dos passos de cima (fundo, borda, canto e sombra), com uma
   linha fina entre os itens. Tudo na grade dos cartoes: 12 de respiro, o check na coluna de 40 (a do icone), o texto
   onde comecam os titulos e a setinha na coluna das setas. Cada linha com 48 de altura (toque confortavel) */
.passos-feitos { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(14, 31, 20, 0.05); }
.passos-feitos summary { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 4px 12px; list-style: none; cursor: pointer; font-size: 15px; font-weight: 700; color: var(--deep2); }
.passos-feitos summary::-webkit-details-marker { display: none; }
.passos-feitos summary > .ico-traco, .passo-feito > .ico-traco { width: 40px; flex: none; display: inline-flex; justify-content: center; color: var(--lime-escuro); }
.passos-feitos .passos-abre { margin-left: auto; display: inline-flex; color: var(--muted); transform: rotate(90deg); transition: transform 0.2s; }
.passos-feitos .passos-abre .ico-traco svg { width: 18px; height: 18px; }
.passos-feitos[open] .passos-abre { transform: rotate(-90deg); }
.passos-feitos-lista { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.passo-feito { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 4px 12px; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; text-align: left; font-size: 14.5px; line-height: 1.3; color: var(--body); cursor: pointer; }
.passo-feito:first-child { border-top: 0; }
.passo-feito .passo-feito-texto { flex: 1; min-width: 0; }
@media (hover: hover) { .passo-feito:hover { background: var(--lime-suave); } }
.passos-card.completo .passos-titulos h3 { color: var(--deep2); }
.passos-card > .passos-botoes { margin-top: 4px; } /* 12 do card + 4 = 16 da lista (a regra geral dos cards somava mais 12) */
/* as duas etiquetas do balao (nome e "3 de 7") com a mesma medida: mesma letra, borda e espaco, mesma altura */
.tour-nome, .tour-conta { padding: 3px 12px; border: 2px solid var(--deep); font-size: 13px; line-height: 1.3; }
/* ---------- termos: aceite no cadastro, resumo no painel, linha no pedido ---------- */
.cadastro-legal { display: flex; flex-direction: column; gap: 8px; }
.aceite-termos { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--line-forte); border-radius: var(--raio-p); background: var(--card); cursor: pointer; text-align: left; font-size: 15px; line-height: 1.4; color: var(--ink); }
.aceite-campo { position: absolute; opacity: 0; width: 1px; height: 1px; }
.aceite-caixa { flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--line-forte); border-radius: 7px; background: var(--card); color: transparent; }
.aceite-caixa .ico-traco svg { width: 16px; height: 16px; stroke-width: 3; }
.aceite-campo:checked + .aceite-caixa { background: var(--lime); border-color: var(--lime-escuro); color: var(--texto-no-destaque); }
.aceite-campo:focus-visible + .aceite-caixa { outline: 3px solid var(--lime); outline-offset: 2px; }
.aceite-texto a { color: var(--deep2); font-weight: 700; }
.aceite-termos.falta { border-color: var(--erro); background: var(--erro-suave); animation: aceite-balanca 0.4s ease !important; }
@keyframes aceite-balanca { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.termos-resumo { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; text-align: left; }
.termos-resumo li { position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.4; color: var(--body); }
.termos-resumo li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--lime-escuro); }
.termos-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin: 12px 0 0; font-size: 14px; }
.termos-links a { color: var(--deep2); font-weight: 700; }
.nota-termos { text-align: center; }
.nota-termos a { color: inherit; text-decoration: underline; }
/* LGPD: o cliente apaga o que ficou no proprio celular (Meus pedidos), discreto como o "entrar com e-mail" */
.apagar-aparelho { display: block; margin: 0 auto; min-height: 44px; border: 0; background: none; padding: 8px 12px; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- design exclusivo: a aparencia travada (so a logo troca) ---------- */
.design-exclusivo { display: flex; flex-direction: column; gap: 12px; padding: 12px; border: 1px solid #C9E7A1; border-radius: var(--raio-p); background: var(--lime-suave); }
.design-exclusivo-topo { display: flex; align-items: flex-start; gap: 12px; }
.design-exclusivo-ico { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--deep); color: var(--lime2); display: inline-flex; align-items: center; justify-content: center; }
.design-exclusivo-ico .ico-traco svg { width: 20px; height: 20px; }
.design-exclusivo-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.4; color: var(--body); }
.design-exclusivo-texto b { font-family: var(--display); font-size: 16px; color: var(--ink); }

/* ---------- fale com a gente ---------- */
.contato-topo { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--lime-suave); border: 1px solid #C9E7A1; border-radius: var(--raio-p); text-align: left; }
.contato-avatar { position: relative; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--card); border: 2px solid #C9E7A1; display: inline-flex; align-items: center; justify-content: center; }
.contato-avatar img { width: 44px; height: 44px; object-fit: contain; }
.contato-online { position: absolute; right: 0; bottom: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--whats); border: 2px solid var(--card); }
.contato-topo-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.4; color: var(--body); }
.contato-topo-texto b { font-family: var(--display); font-size: 16px; color: var(--ink); }
.campo label .opcional { margin-left: 8px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: lowercase; }
.contato-seguro { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; font-size: 13px; color: var(--muted); text-align: center; }
.contato-seguro .ico-traco { flex: none; color: var(--deep2); }
.contato-seguro .ico-traco svg { width: 16px; height: 16px; }
.contato-ok { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 0 8px; text-align: center; font-size: 15px; line-height: 1.45; color: var(--body); text-wrap: balance; }
.contato-ok b { font-family: var(--display); font-size: 22px; color: var(--ink); }
.contato-ok-marca { width: 64px; height: 64px; margin-bottom: 8px; border-radius: 50%; background: var(--lime); color: var(--texto-no-destaque); display: inline-flex; align-items: center; justify-content: center; }
.contato-ok-marca .ico-traco svg { width: 32px; height: 32px; }

/* Central: ver e apagar os dados de uma pessoa (LGPD), com as pecas da Central (adm-ico, adm-kpi, adm-lista).
   Ritmo: 16 entre os blocos, 8 entre rotulo e campo; campo e botao com 48, como os botoes da Central */
.titular { display: flex; flex-direction: column; gap: 16px; }
.titular-aviso { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--lime-suave); border: 1px solid #D5ECB0; border-radius: var(--raio-p); }
.titular-aviso .adm-ico { background: var(--card); }
.titular-rotulo { display: block; margin: 0 0 -8px; font-size: 15px; font-weight: 700; }
.titular-busca { display: flex; gap: 8px; align-items: stretch; }
.titular-busca input { flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; border: 1.5px solid var(--line-forte); border-radius: 12px; background: var(--card); color: var(--ink); font-size: 17px; }
.titular-busca .btn { flex: none; min-height: 48px; padding: 0 18px; font-size: 15px; }
.titular-situacao { margin: -8px 0 0; font-size: 14px; line-height: 1.35; color: var(--muted); }
.titular-situacao:empty { display: none; }
.titular-resultado { display: flex; flex-direction: column; gap: 12px; }
.titular-resultado:empty { display: none; }
.titular-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.titular-kpis .adm-kpi { padding: 12px; }
.titular-kpis .adm-kpi-valor { font-size: 26px; }
.titular-nota { margin: -4px 0 0; font-size: 13px; line-height: 1.35; color: var(--muted); }
.titular-acoes .btn { min-height: 48px; }