/* Fontes servidas daqui, e não por @import do Google Fonts. O @import
   punha três idas e voltas em fila antes do primeiro desenho da página
   (este CSS, depois o CSS do Google, depois o arquivo da fonte, cada um em
   outro servidor) e, no 4G, era a maior parte dos ~2,5 s até a landing
   aparecer. Só o recorte latino (cobre o português inteiro); as três são
   variáveis, um arquivo por família. Licença em static/fonts/LICENCAS.md. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
  src: url('/static/fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('/static/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/static/fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Nenhuma superfície grande usa branco puro: o fundo alterna entre creme
     (--bg) e bege (--surface-alt), e os cards ficam num off-white que
     destaca por ser mais claro que os dois, não por ser #fff. */
  /* O creme era claro demais pro próprio card: fundo, card e faixa cabiam
     dentro de seis pontos de luminosidade, então nada se separava de nada e
     a tela inteira lia como uma lavagem só — a queixa de "meio morto" era
     falta de contraste de valor, não de saturação. O fundo desceu, o card
     ficou onde estava: agora o card flutua porque é mais claro, não porque
     tem sombra. */
  /* curvas de movimento: ease-out forte pra entradas e respostas, as
     embutidas do CSS são fracas demais e parecem arrastadas */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);

  --bg: #ece0ca;           /* creme — fundo base */
  --surface-alt: #e7dbc4;  /* bege quente — faixas alternadas e hero */
  --card: #fffdf8;         /* off-white — cards por cima do fundo */
  --ink: #1e1b1d;
  /* Escureceu junto com o fundo. No creme anterior o #6b5f63 passava com
     folga; sobre o --surface-alt novo ele caía pra 4,45 — abaixo do mínimo
     de 4,5 pra texto normal. Agora fica em 5,2 na pior superfície. */
  --muted: #5f545c;
  --border: #cdbc9e;       /* desceu junto com o fundo: a borda anterior
                              (#d9ccb6) encostava demais no creme novo */

  --primary: #3b1f3b;       /* Deep Aubergine — nav, botões primários */
  --primary-hover: #4f2e4f; /* tint mais claro no hover, não mais escuro */
  --secondary: #f4a340;     /* Saffron Gold — destaques, estado ativo */
  --secondary-dark: #6d4100;
  --secondary-light: #fdecd1;
  --conversion: #d85c41;    /* Terracotta — reservado pra Publicar/Upgrade */
  --conversion-hover: #c14a30;
  --conversion-dark: #8a3420;
  --conversion-light: #fbe3dc;

  /* A única nota fria da paleta, e a razão de ela existir: ameixa, saffron e
     terracota são todos quentes: sem nenhum ponto frio, o conjunto lê como
     monocromático por mais tokens que tenha. O verde entra onde o produto já
     improvisava um (#1f5d3a solto no .success e no chip de alta) e assume o
     estado de "está no ar / deu certo", que é o oposto do que a terracota diz.
     Não é uma cor de marca nova: é reservada a estado, como o saffron é a
     "ativo" e a terracota a "cobra ação". */
  --fresh: #2f6b4f;
  --fresh-dark: #1f5d3a;
  --fresh-light: #dfeee4;

  /* Campo de formulário. Antes ele usava o --bg direto, o que fazia sentido
     quando o creme era quase branco: o campo lia como um vão sobre o card.
     Com o fundo escurecido pra dar contraste às superfícies, esse mesmo
     valor virou um bloco pesado — um formulário de dez campos passou a ser
     dez tijolos marrons. O campo agora tem valor próprio: um sussurro mais
     quente que o card, o suficiente pra se distinguir sem ganhar peso. */
  --field: #faf4e9;

  --gray-light: #e5dbc8;

  /* Alinhados com a landing pra o produto inteiro parecer a mesma coisa:
     card em 20px e botão em pílula, como no redesign. Quem precisa de raio
     próprio (obturador da câmera, chips, botões redondos) declara depois e
     continua vencendo. */
  --radius-card: 20px;
  --radius-input: 12px;
  --radius-btn: 999px;
  --shadow-sm: 0 1px 2px rgba(59,31,59,.05), 0 1px 1px rgba(59,31,59,.04);
  --shadow-md: 0 4px 20px rgba(59,31,59,.08);
  --shadow-lg: 0 20px 48px rgba(59,31,59,.16);
  /* Archivo é a display do redesign. Vale no produto todo; o cardápio
     público opta por sair (ver .gallery-page abaixo), porque aquela tela é
     a vitrine do restaurante, não uma página da Table360. */
  --font-display: "Archivo", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Serifada do painel. A Archivo dá o peso certo pra landing, mas dentro do
     aplicativo ela produzia a tela de SaaS que se vê em qualquer lugar: tudo
     grotesca, tudo 800. A Fraunces é uma serifada de contraste moderado
     desenhada pra comida e varejo — ela é o que diferencia o painel de um
     template. Fica só em título; número e texto corrido seguem em sans, que
     é onde a serifada atrapalharia a leitura rápida. */
  --font-serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.015em; text-wrap: balance; }
/* sem palavra sozinha na última linha de um parágrafo */
p, li, dd { text-wrap: pretty; }

/* O cardápio saía da display da Table360 por uma razão que se mostrou fraca na
   tela: a ideia era não parecer material nosso, mas quem escaneia o QR já
   está sentado no restaurante e não confunde uma coisa com a outra. O que a
   troca de fonte realmente produzia era um cardápio com tipografia de lugar
   nenhum, diferente do painel que o dono usa todo dia. Agora ele segue a
   mesma regra do resto: título na display. O peso é menor que os 800 do
   produto — nome de prato não é manchete. */
.gallery-page :where(h1, h2, h3),
.public-page :where(h1, h2, h3) {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}

input, textarea, select {
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  font-size: 15px;
  width: 100%;
  font-family: inherit;
  background: var(--field);
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* Rádio e checkbox ficam de fora do estilo de campo de texto. O halo de foco
   global é um box-shadow, desenhado sobre a caixa do controle — que é
   retangular —, então num rádio redondo ele aparece como um quadrado amarelo
   em volta da bolinha. Vale pros checkboxes do painel também. */
input[type="radio"], input[type="checkbox"] {
  width: auto;
  padding: 0;
  border: none;
  background: none;
  border-radius: 0;
}
input[type="radio"]:focus, input[type="checkbox"]:focus {
  box-shadow: none;
  background: none;
}
/* o indicador de teclado vira outline, que acompanha a forma do controle */
input[type="radio"]:focus-visible, input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--secondary);
  box-shadow: 0 0 0 3px var(--secondary-light);
  background: var(--card);
}

/* sem isso o select cai no visual "vidro"/gradiente nativo do sistema
   (mais visível no Safari/Chrome do macOS), em vez de seguir o mesmo
   visual chapado dos outros campos */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b5f63' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 12px;
  cursor: pointer;
}

button {
  background: var(--primary);
  color: white;
  border: none;
  padding: 13px 22px;
  border-radius: var(--radius-btn);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background .18s ease, transform .16s var(--ease-out), box-shadow .18s ease;
  box-shadow: var(--shadow-sm);
}
button:hover { background: var(--primary-hover); box-shadow: 0 4px 20px rgba(59,31,59,.18); }
button:active { transform: scale(.97); }

/* link estilizado como botão, pra CTAs de navegação (evita <button> dentro de <a>) */
a.button-link {
  display: inline-block;
  background: var(--primary);
  color: white;
  border: none;
  padding: 13px 22px;
  border-radius: var(--radius-btn);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, box-shadow .18s ease, transform .16s var(--ease-out);
  box-shadow: var(--shadow-sm);
}
a.button-link:active { transform: scale(.97); }
a.button-link:hover { background: var(--primary-hover); box-shadow: 0 4px 20px rgba(59,31,59,.18); }
a.button-link.secondary { background: transparent; color: var(--primary); border: 1px solid var(--primary); box-shadow: none; }
a.button-link.secondary:hover { background: var(--secondary-light); }
a.button-link.btn-conversion { background: var(--conversion); }
a.button-link.btn-conversion:hover { background: var(--conversion-hover); }

/* botão de conversão (publicar/confirmar) — usar com class="btn-conversion" quando fizer sentido */
button.btn-conversion, .btn-conversion {
  background: var(--conversion);
}
button.btn-conversion:hover, a.button-link.btn-conversion:hover { background: var(--conversion-hover); }
button.btn-conversion:hover, .btn-conversion:hover {
  background: var(--conversion-hover);
}

.category {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--secondary-dark);
  background: var(--secondary-light);
  letter-spacing: 0.06em;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  margin-bottom: 6px;
}
.desc { color: var(--muted); font-size: 14px; }
.price { color: var(--primary); font-weight: 700; font-size: 15px; margin: 2px 0 6px; }
.price-original { color: var(--muted); font-weight: 500; text-decoration: line-through; font-size: 13px; margin-right: 6px; }
.price-promo { color: var(--conversion-dark); font-weight: 700; }
.empty { color: var(--muted); }
.center { text-align: center; }
.optional { color: var(--muted); font-weight: normal; }

/* ---------- BADGES DE STATUS ---------- */
.status-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}
/* "Ativo" era saffron, a mesma cor que marca o item ativo da barra lateral —
   dois significados na mesma tinta. Passa pro verde, que aqui quer dizer
   "está no ar pro cliente"; o saffron fica só com o estado de interface. */
.status-ativo { background: var(--fresh-light); color: var(--fresh-dark); }
.status-rascunho, .status-inativo { background: var(--gray-light); color: var(--muted); }
.status-esgotado { background: var(--conversion-light); color: var(--conversion-dark); }

.context-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 999px;
  margin: 0 4px 4px 0;
}

/* ---------- LOGO ---------- */
.brand { display: inline-flex; align-items: center; gap: 10px; }
a.brand { text-decoration: none; color: inherit; cursor: pointer; }
a.brand:hover .logo-icon { opacity: 0.75; }
.logo-icon { color: var(--primary); flex-shrink: 0; }
/* A marca escrita é uma só em todo o produto: a do topo da página inicial,
   Manrope ExtraBold com as letras puxadas. Antes o login usava Archivo e o
   painel a serifada, e o mesmo nome parecia três logos diferentes. Quem
   escreve "Table360" como marca usa esta regra; o tamanho fica com cada
   lugar. */
.brand-name, .app-brand-name, .lp-brand span {
  font-family: var(--font-body);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ---------- LOGIN ---------- */
.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 20%, var(--secondary-light) 0%, transparent 45%),
    radial-gradient(circle at 85% 80%, var(--secondary-light) 0%, transparent 40%),
    var(--bg);
  padding: 20px;
}
.auth-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 44px 40px;
  width: 340px;
  max-width: 100%;
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.auth-card .brand { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 4px; }
.auth-card .logo-icon { width: 40px; height: 40px; }
.auth-card h1 { margin: 0; color: var(--ink); font-size: 26px; }
.subtitle { color: var(--muted); margin-top: 4px; margin-bottom: 28px; font-size: 14px; }
.auth-card form { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.auth-card label { font-size: 13px; color: var(--muted); margin-top: 10px; font-weight: 600; }
.auth-card button { margin-top: 20px; }

/* Rodapé do cartão de login. Vira classe própria porque essas linhas antes
   reusavam .subtitle, cujo margin-bottom de 28px serve pra separar o título
   do formulário — cada uso tinha que anular a margem num style= inline.
   A régua separa o que é sobre esta conta (recuperar senha) do que leva pra
   outro fluxo (criar conta). */
.auth-footer {
  color: var(--muted);
  font-size: 14px;
  margin: 14px 0 0;
}
.auth-footer-last {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.error {
  color: var(--conversion-dark);
  background: var(--conversion-light);
  font-size: 13px;
  padding: 8px 12px;
  border-radius: var(--radius-input);
  margin-bottom: 4px;
}

/* confirmação: mesma caixa da .error, em verde, pra "deu certo" não usar a
   cor que o resto do painel reserva pra problema */
.success {
  color: var(--fresh-dark);
  background: var(--fresh-light);
  font-size: 13px;
  padding: 8px 12px;
  border-radius: var(--radius-input);
  margin-bottom: 4px;
  line-height: 1.5;
}

/* Aviso de cota de vídeo. Não usa .error nem .success de propósito: não é
   problema nem confirmação, é uma cobrança que o cliente precisa ver antes
   de decidir subir o próximo vídeo. Neutro quando ainda dá pra evitar,
   destacado quando a cobrança já existe. */
.quota-alert {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  line-height: 1.5;
  padding: 12px 14px;
  border-radius: var(--radius-input);
  background: var(--secondary-light);
  border: 1px solid var(--border);
  color: var(--muted);
}
.quota-alert strong { color: var(--ink); font-size: 13.5px; }
.quota-alert .btn-link { align-self: flex-start; margin-top: 4px; font-size: 13px; }
.quota-alert-on { border-color: var(--primary); }

/* ---------- LOGIN EM DUAS COLUNAS ----------

   O .auth-card centralizado continua valendo pro /admin/login, que é tela
   interna e não tem por que vender nada. O login do restaurante ganhou
   coluna própria: é a porta de entrada do produto e a tela que o dono
   atravessa todo dia. A vitrine da direita não é enfeite — mostra o cardápio
   publicado, que é exatamente o que ele está entrando pra editar. */
.auth-split-page { background: var(--bg); }
.auth-split {
  display: grid;
  min-height: 100vh;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.auth-main {
  position: relative;
  display: flex;
  align-items: center;
  padding: 32px 48px;
  background:
    radial-gradient(circle at 12% 18%, var(--secondary-light) 0%, transparent 42%),
    var(--bg);
}
.auth-inner { width: 100%; max-width: 380px; margin: 0 auto; }
/* encostado na quina da coluna, não no topo do formulário centralizado */
.auth-back { position: absolute; top: 28px; left: 48px; margin: 0; }
.auth-brand { display: flex; margin-bottom: 22px; }
.auth-brand .brand-name { font-size: 21px; }
.auth-title { font-size: 30px; margin: 0 0 8px; color: var(--ink); }
.auth-lead { color: var(--muted); font-size: 15px; margin: 0 0 26px; }

.auth-form { display: flex; flex-direction: column; gap: 6px; }
.auth-form label { font-size: 13px; color: var(--muted); font-weight: 600; margin-top: 12px; }
/* rótulo e atalho na mesma linha: o "esqueci minha senha" fica onde a pessoa
   já está olhando no momento em que trava, em vez de no rodapé, depois do
   botão que ela não consegue usar */
.auth-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.auth-forgot { font-size: 13px; font-weight: 600; color: var(--primary); text-decoration: none; }
.auth-forgot:hover { text-decoration: underline; }
.auth-submit { margin-top: 22px; width: 100%; }

.auth-aside {
  display: flex;
  align-items: center;
  padding: 48px;
  background:
    radial-gradient(circle at 78% 12%, rgba(244,163,64,.22) 0%, transparent 52%),
    linear-gradient(158deg, #452544 0%, var(--primary) 45%, #2b1529 100%);
  color: #f3e7dc;
}
.auth-aside-inner { width: 100%; max-width: 400px; margin: 0 auto; }
.auth-aside-eyebrow {
  font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--secondary); margin: 0 0 10px;
}
.auth-aside-title {
  font-family: var(--font-display); font-weight: 800; font-size: 27px;
  line-height: 1.22; letter-spacing: -0.015em; color: #fdf6ee; margin: 0 0 28px;
}
.auth-aside-note { font-size: 13.5px; color: rgba(243,231,220,.72); margin: 22px 0 0; }

/* Mock do cardápio público. Usa as mesmas ilustrações de /static/demo/ que a
   landing serve, então não entra arquivo novo no repositório por causa dele. */
.auth-showcase {
  background: var(--card);
  border-radius: var(--radius-card);
  padding: 16px;
  box-shadow: 0 26px 60px rgba(20,8,20,.42);
}
.auth-showcase-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.auth-showcase-brand { font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--ink); }
.auth-showcase-chip {
  font-size: 11px; font-weight: 700; color: var(--secondary-dark);
  background: var(--secondary-light); padding: 4px 10px; border-radius: 999px;
}
.auth-dish-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.auth-dish { margin: 0; }
.auth-dish img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; border-radius: 14px; background: var(--surface-alt); }
.auth-dish figcaption { display: flex; flex-direction: column; padding: 8px 2px 0; }
.auth-dish-name { font-size: 12.5px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.auth-dish-price { font-size: 12.5px; font-weight: 700; color: var(--secondary-dark); }
/* leve defasagem entre as duas colunas: alinhadas na régua elas liam como
   tabela; deslocadas, leem como cardápio rolando. margin, não transform,
   pra o card continuar empurrando a altura da caixa em vez de vazar dela */
.auth-dish-raised { margin-top: 16px; }

@media (max-width: 860px) {
  .auth-split { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  /* quem abre o login pelo telefone quer entrar, não ser convencido — e a
     vitrine empurraria o formulário pra baixo da dobra */
  .auth-aside { display: none; }
  /* padding-top abre espaço pro link, que continua absoluto; alvo de toque
     maior porque no celular o dedo não tem a precisão do mouse */
  .auth-main { min-height: 100vh; padding: 88px 22px 32px; }
  .auth-back { top: 22px; left: 22px; padding: 8px 14px; font-size: 13px; }
  .auth-title { font-size: 26px; }
}

/* ---------- PAINEL ---------- */

/* Barra dos fluxos focados (onboarding, escolha de plano, admin). A
   navegação completa mora em .app-side; aqui é só marca e saída. */
.flowbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px max(24px, calc((100% - 1180px) / 2));
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.flowbar-sair {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  transition: background .15s ease, color .15s ease;
}
.flowbar-sair:hover { background: var(--surface-alt); color: var(--ink); }

.archived-video-note {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--secondary-light);
  border-radius: var(--radius-input);
  font-size: 13px;
}
.archived-video-note p { margin: 0 0 6px; color: var(--secondary-dark); }

/* mesma coluna do header, pra o conteúdo não sair desalinhado da barra */
.container { max-width: 1180px; margin: 0 auto; padding: 28px 28px 60px; }

/* QR principal em destaque */
.hero-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 28px;
  margin-bottom: 28px;
  display: flex;
  gap: 26px;
  align-items: flex-start;
  flex-wrap: wrap;
  box-shadow: var(--shadow-sm);
}
.hero-qr img {
  width: 156px;
  height: 156px;
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  padding: 10px;
  background: white;
  box-shadow: var(--shadow-sm);
}
.hero-info { flex: 1; min-width: 240px; }
.hero-info h2 { margin: 8px 0 8px; font-size: 24px; }
.hero-info p { color: var(--muted); font-size: 14px; margin: 0 0 14px; max-width: 46ch; }
.tag {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--secondary-dark);
  background: var(--secondary-light);
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}
.btn-link {
  color: var(--primary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  display: inline-block;
}
.btn-link:hover { text-decoration: underline; }
.inline-form { display: flex; gap: 8px; margin-top: 18px; }
.inline-form input { flex: 1; }
.btn-small { padding: 9px 16px; font-size: 14px; white-space: nowrap; }

.add-dish-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 28px;
  margin-bottom: 36px;
  box-shadow: var(--shadow-sm);
}
.add-dish-card h2 { margin: 0 0 4px; font-size: 19px; }
.dish-form { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
/* Diz uma vez o que seis "(opcional)" diziam seis vezes. */
.dish-form-lead { margin: 0 0 2px; font-size: 13.5px; color: var(--muted); }
.dish-form-lead strong { color: var(--ink); font-weight: 700; }
.form-row { display: flex; gap: 14px; flex-wrap: wrap; }
.form-row > div { flex: 1; min-width: 180px; }
.dish-form label { font-size: 13px; color: var(--muted); display: block; margin-bottom: 5px; font-weight: 600; }
.dish-form button { margin-top: 6px; align-self: flex-start; }
/* Botão e alternativa na mesma linha. O align-self:flex-start acima é pro
   botão não esticar na coluna do formulário; dentro desta linha ele já não
   manda, e a margem sobe pro contêiner. */
.dish-form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin-top: 6px; }
.dish-form-actions button { margin-top: 0; }
.checkbox-row { display: flex; gap: 18px; flex-wrap: wrap; }
.checkbox-row label { display: flex; align-items: center; gap: 6px; font-weight: 500; margin-bottom: 0; }
.checkbox-row input[type="checkbox"] { width: auto; }

section > h2 { font-size: 18px; margin: 0 0 4px; letter-spacing: -0.01em; }
.section-sub { color: var(--muted); font-size: 13.5px; margin: 0 0 18px; max-width: 78ch; }

/* Painel de controles do catálogo: título, subtítulo, faixa de saúde e
   barra de busca. Mesma caixa do cabeçalho da tela, pelo mesmo motivo —
   texto solto no creme, entre cartões, não assenta em nada. O último filho
   perde a margem de baixo pra o cartão fechar rente ao conteúdo,
   independentemente de qual bloco terminou a lista. */
.catalog-panel {
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  border-radius: 20px;
  padding: 20px 24px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(59,31,59,.04), 0 10px 28px -16px rgba(59,31,59,.14);
}
.catalog-panel-title { margin: 0 0 4px; }
.catalog-panel > :last-child { margin-bottom: 0; }

/* ---------- BUSCA E FILTROS DO CATÁLOGO ---------- */
.catalog-toolbar { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.catalog-search input {
  max-width: 360px;
}
.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-chip {
  display: inline-block;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.filter-chip:hover { border-color: var(--secondary); color: var(--ink); }
.filter-chip.active { background: var(--secondary-light); border-color: var(--secondary); color: var(--secondary-dark); }

/* ---------- GRÁFICO DE BARRAS (analytics) ---------- */
.no-results { display: none; color: var(--muted); padding: 40px 0; text-align: center; }
.no-results.visible { display: block; }

.dish-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
}
.dish-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .18s ease, border-color .18s ease;
}
.dish-card:hover { box-shadow: var(--shadow-md); border-color: var(--secondary); }
.dish-card.hidden-by-filter { display: none; }
.dish-card img:not(.qr) { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--secondary-light); }
.dish-video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: #000; }
.dish-video-wrap {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #000;
  box-shadow: none;
  cursor: pointer;
}
/* o encolhe-ao-apertar dos botões não serve aqui: é a foto do prato */
.dish-video-wrap:active { transform: none; }
.dish-video-wrap:focus-visible { outline: 2px solid var(--secondary); outline-offset: -2px; }
.dish-video-play {
  position: absolute;
  left: 50%; top: 50%;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(6px);
  transform: translate(-50%, -50%);
  transition: opacity .2s ease, transform .2s var(--ease-out);
}
.dish-video-play svg { width: 20px; height: 20px; margin-left: 3px; }
.dish-video-wrap.is-tocando .dish-video-play { opacity: 0; transform: translate(-50%, -50%) scale(.9); }
/* Na Mídia o celular cabe duas colunas: uma só fazia 22 pratos virarem
   uma rolagem de seis telas de foto. */
@media (max-width: 560px) {
  #dish-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  #dish-grid .dish-card-body { padding: 12px 12px 14px; }
  #dish-grid .dish-card-body h3 { font-size: 14px; }
}
.dish-card-body { padding: 16px 18px 18px; }
/* Cadastro recolhido: o catálogo é o que o dono usa todo dia, e 10 campos
   de formulário não podem ficar entre ele e a lista. */
.add-dish-summary {
  display: flex;
  align-items: center;
  gap: 13px;
  cursor: pointer;
  list-style: none;
  padding: 2px 0;
}
.add-dish-summary::-webkit-details-marker { display: none; }
.add-dish-summary-icon {
  flex: none;
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--secondary-light);
  color: var(--secondary-dark);
  font-size: 20px; font-weight: 600; line-height: 1;
  transition: transform .18s ease;
}
details[open] .add-dish-summary-icon { transform: rotate(45deg); }
.add-dish-summary strong {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--ink);
}
.add-dish-summary-sub { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.add-dish-summary:hover strong { color: var(--secondary-dark); }
details.add-dish-card[open] .add-dish-summary { margin-bottom: 20px; }

/* Cabeçalho do card do catálogo: a categoria à esquerda, o status à direita.
   Os dois vinham numa flex row sem flex-wrap, e item de flex não encolhe
   abaixo do próprio min-content — que numa pílula de caixa alta com
   letter-spacing é a palavra inteira. Numa coluna de 230px sobram ~194px de
   corpo: "ACOMPANHAMENTOS" come quase tudo, e o que passava era cortado pelo
   overflow: hidden que o card usa pro zoom da foto no hover. O status, que é
   o último da linha, desaparecia pela direita — o prato parecia não ter
   estado nenhum, justo o dado que diz se ele está no ar.

   flex-wrap deixa o status descer em vez de ser cortado, e margin-left: auto
   o mantém encostado à direita nas duas situações (com space-between, um
   item sozinho na linha vai pra esquerda). min-width: 0 na categoria é o que
   libera a quebra dentro da pílula quando nem ela sozinha cabe. */
.dish-card-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
}
.dish-card-top .category {
  min-width: 0;
  overflow-wrap: anywhere;
}
.dish-card-top .status-badge {
  flex: none;
  margin-left: auto;
}
.dish-card-body h3 { margin: 2px 0 6px; font-size: 17px; }
.qr-details { margin-top: 12px; font-size: 13px; border-top: 1px dashed var(--border); padding-top: 10px; }
.qr-details summary { color: var(--muted); cursor: pointer; font-weight: 600; }
.qr-details summary:hover { color: var(--primary); }
.qr { width: 100px; height: 100px; margin-top: 10px; border: 1px solid var(--border); border-radius: 8px; padding: 6px; background: white; }
.dish-link { display: block; font-size: 13px; margin-top: 6px; color: var(--primary); text-decoration: none; font-weight: 600; }
.dish-link:hover { text-decoration: underline; }
/* Ações do card do catálogo.
   Esta regra estava declarada DUAS vezes, com valores diferentes de gap e
   sem align-items em nenhuma das duas — o que sobrava era o padrão do
   flex, `stretch`.

   "Editar" é um <a> e "Remover" é um <button> (precisa de POST pra apagar).
   Dois elementos diferentes na mesma linha só alinham se a caixa de linha
   dos dois for igual, e um <button> não herda line-height do body: o texto
   dele descia alguns pixels em relação ao link. align-items resolve a
   altura da caixa, o line-height igual resolve a base do texto. */
.dish-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  /* encosta no pé do card (o corpo é flex coluna), pra que cards de
     descrição curta e longa terminem na mesma linha */
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--gray-light);
}
/* o <form> existe só pra poder mandar POST; sem isto ele entra no flex
   como uma caixa com altura própria e desalinha o botão de dentro */
.dish-card-actions form { display: flex; margin: 0; }

/* O reset do botão morava num style="" inline no template — seis
   propriedades que o stylesheet não conseguia alcançar, e por isso o
   desalinhamento não tinha como ser corrigido daqui. */
.edit, .delete {
  display: inline-block;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 400;
  color: var(--muted);
  text-decoration: none;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
/* o botão global sobe 1px ao ser pressionado; aqui isso faria "Remover"
   pular em relação a "Editar" */
.delete:active { transform: none; }
.edit:hover { color: var(--primary); }
.delete:hover { color: var(--conversion-dark); }

.current-photo { width: 140px; height: 105px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); display: block; margin-bottom: 8px; }
.current-video { width: 220px; max-height: 160px; border-radius: 8px; border: 1px solid var(--border); display: block; margin-bottom: 8px; background: #000; }
.form-actions { display: flex; align-items: center; gap: 18px; margin-top: 6px; }
.form-actions button { margin-top: 0; }

.empty-state {
  text-align: center;
  padding: 46px 24px;
  color: var(--muted);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  font-size: 14.5px;
}

/* ---------- ONBOARDING ---------- */
.onboarding-page { background: var(--bg); min-height: 100vh; }
.onboarding-main { max-width: 640px; margin: 0 auto; padding: 40px 20px 60px; }
.onboarding-main.wide { max-width: 880px; }
.step-indicator {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--secondary-dark);
  background: var(--secondary-light);
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.onboarding-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 32px;
  box-shadow: var(--shadow-sm);
}
.onboarding-card h1 { font-size: 26px; margin: 0 0 10px; }
.onboarding-card > p.lead { color: var(--muted); margin: 0 0 24px; max-width: 52ch; }
.onboarding-actions { display: flex; gap: 14px; align-items: center; margin-top: 24px; flex-wrap: wrap; }
.skip-link { color: var(--muted); text-decoration: none; font-size: 14px; }
.skip-link:hover { color: var(--primary); text-decoration: underline; }

.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.choice-card {
  display: block;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 22px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.choice-card:hover { border-color: var(--secondary); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.choice-card .choice-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--secondary-dark);
  background: var(--secondary-light);
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.choice-card h3 { margin: 0 0 6px; font-size: 17px; }
.choice-card p { margin: 0; color: var(--muted); font-size: 13px; }

.dropzone {
  border: 2px dashed var(--border);
  border-radius: var(--radius-card);
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  margin-bottom: 18px;
}
.dropzone input[type="file"] { width: auto; margin: 12px auto 0; }
.template-link { display: inline-block; margin-top: 6px; font-size: 13px; color: var(--primary); font-weight: 600; text-decoration: none; }
.template-link:hover { text-decoration: underline; }

.table-scroll { overflow-x: auto; margin: 20px 0; }
table.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  padding: 11px 12px;
  background: var(--surface-alt);
  border-bottom: none;
  white-space: nowrap;
}
table.data-table thead th:first-child { border-radius: 10px 0 0 10px; }
table.data-table thead th:last-child { border-radius: 0 10px 10px 0; }
/* a linha inteira responde ao ponteiro: numa tabela larga é o que evita
   ler o valor de uma linha achando que é de outra */
table.data-table tbody tr { transition: background .12s ease; }
table.data-table tbody tr:hover { background: var(--surface-alt); }
table.data-table td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.data-table tbody tr:last-child td { border-bottom: none; }
table.data-table select { padding: 7px 30px 7px 9px; font-size: 13px; background-position: right 9px center; }
table.data-table .sample-cell { color: var(--muted); font-style: italic; }
table.data-table tr.row-invalid { background: var(--conversion-light); }

/* Mesma anatomia dos números-título da visão geral: rótulo pequeno em
   cima, número grande embaixo, alinhados à esquerda. Centralizado e com
   o rótulo em caixa alta embaixo, como era antes, o olho tinha que voltar
   pra descobrir o que o número media. */
.summary-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 0 0 22px;
}
.summary-stat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 15px 18px 16px;
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
  min-width: 0;
}
.summary-stat strong {
  display: block;
  font-size: 30px;
  line-height: 1.1;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.summary-stat span { font-size: 12.5px; color: var(--muted); font-weight: 600; letter-spacing: 0.02em; text-transform: none; }

.badge-erro { background: var(--conversion); color: #fff; }
/* conta parada há muito tempo: sinalização pro Super Admin, não erro —
   por isso não usa a cor de alerta */
.badge-inativo {
  background: var(--secondary-light);
  color: var(--secondary-dark);
  margin-top: 4px;
  display: inline-block;
}

.checklist { list-style: none; padding: 0; margin: 0 0 24px; }
.checklist li { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 15px; }
.checklist li::before { content: "✓"; color: var(--secondary-dark); background: var(--secondary-light); width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }

/* ---------- GALERIA (o que o cliente vê) ---------- */
/* Variáveis de marca do cardápio público.
   Os valores aqui são exatamente a aparência que o cardápio sempre teve —
   o restaurante que não escolhe cor nenhuma não vê diferença. Quando ele
   escolhe, um <style> no <head> troca só estas quatro linhas.

   Os dois brilhos do topo viram variáveis pelo mesmo motivo: saffron e
   terracota ficam bem sobre o ameixa e podem ficar horríveis sobre um
   verde ou um vermelho. Com cor personalizada eles passam a ser branco e
   preto translúcidos, que funcionam sobre qualquer matiz. */
.gallery-page, .public-page {
  --brand: var(--primary);
  --brand-ink: #fff;
  --brand-soft: var(--secondary-light);
  --brand-dark: var(--primary);
  --brand-glow: rgba(244,163,64,.34);
  --brand-glow-2: rgba(216,92,65,.28);
}
/* ----- Tipografia do cardápio -----
   Era uma serifada editorial de sistema (Iowan, Palatino, Georgia), escolhida
   pra o cardápio não usar a fonte da Table360. Passou a ser a própria display
   do produto: mantido como variável própria, e não trocado por --font-display
   em cada regra, porque continua sendo uma decisão do cardápio — se ele
   voltar a querer tipografia própria, muda aqui e em nenhum outro lugar. */
.gallery-page {
  /* O fundo deixa de ser o creme do produto e passa a ser a marca do
     restaurante diluída: é o que faz o card branco flutuar em vez de se
     confundir com a página. Sem cor escolhida, --brand-soft é o saffron
     claro de sempre, então o cardápio padrão só fica um tom mais quente. */
  background: color-mix(in srgb, var(--brand-soft) 62%, var(--bg));
  --font-menu: var(--font-display);
}
/* a logo do restaurante substitui a marca do Table360 no topo */
.gallery-logo {
  display: block;
  max-height: 72px;
  max-width: min(240px, 70vw);
  width: auto;
  margin: 0 auto 14px;
  object-fit: contain;
}
/* A capa é a primeira impressão do restaurante, não da Table360: fundo
   ameixa cheio, nome grande e um brilho quente atrás. Antes era creme com
   texto de 32px, do mesmo tom do resto da página — não abria o cardápio,
   só começava a lista. */
.gallery-header {
  position: relative;
  overflow: hidden;
  text-align: center;
  /* Encolheu embaixo pra abrir espaço à busca, que passou a morar aqui: no
     modelo ela vem antes das categorias, ainda no bloco de identidade, e
     não solta no meio da lista. */
  padding: 52px 20px 26px;
  background:
    radial-gradient(ellipse 70% 90% at 50% 6%, var(--brand-glow) 0%, transparent 62%),
    radial-gradient(ellipse 90% 60% at 12% 100%, var(--brand-glow-2) 0%, transparent 60%),
    var(--brand);
  color: var(--brand-ink);
}
/* a borda vira uma linha de luz: sobre fundo escuro, 1px de --border sumiria */
.gallery-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, color-mix(in srgb, var(--brand-ink) 45%, transparent), transparent);
}
.gallery-header .logo-icon { width: 34px; height: 34px; margin-bottom: 12px; color: currentColor; opacity: .8; }
.gallery-header h1 {
  margin: 0 0 8px;
  /* acompanha a largura da tela: 28px no celular, 44px no desktop */
  font-size: clamp(28px, 7vw, 44px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.gallery-header p {
  margin: 0;
  color: color-mix(in srgb, var(--brand-ink) 72%, transparent);
  font-size: 14.5px;
  font-style: normal;
  letter-spacing: 0.01em;
}

/* Barra de categorias do cardápio público. Fica grudada no topo porque o
   cliente decide enquanto rola, não antes de começar. */
.gallery-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  /* contexto das setas de rolagem, que ficam por cima das pontas da barra */
  isolation: isolate;
  /* mesmo tom do fundo da página: a barra e a lista formam uma folha só,
     que sobe por cima do topo colorido. Opaco de propósito — translúcido
     deixaria os cards passarem por baixo enquanto rolam. */
  background: color-mix(in srgb, var(--brand-soft) 62%, var(--bg));
  /* A folha sobe por cima do topo colorido com o canto arredondado do
     modelo: é essa emenda que separa "identidade do restaurante" de
     "escolher o que comer", sem precisar de uma linha divisória. */
  border-radius: 22px 22px 0 0;
  margin-top: -18px;
  box-shadow: 0 -6px 20px -12px rgba(0,0,0,.30);
}
/* Grudada no topo ela não pode manter o arredondado, senão a lista aparece
   pelos cantos enquanto rola por baixo. */
.gallery-nav.is-stuck {
  border-radius: 0;
  margin-top: 0;
  border-bottom: 1px solid var(--border);
}
.gallery-nav-inner {
  /* Mesma caixa da lista de pratos (.gallery-main, 1040px). Estava em 960,
     e a diferença aparecia de duas formas: a primeira pílula ficava 40px
     mais pra dentro que o primeiro card, e a barra começava a cortar
     categoria com 80px de espaço livre sobrando dos lados. */
  max-width: 1040px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  /* a categoria para alinhada à esquerda em vez de meio cortada */
  scroll-snap-type: x proximity;
  /* o snap precisa respeitar o mesmo respiro do padding, senão a pílula
     encostada na borda esquerda parece colada nela */
  scroll-padding-inline: 16px;

  /* Véu nas pontas: sem ele, a última categoria cortada na borda lê como
     defeito de renderização, não como "tem mais, arraste". É o único aviso
     que sobra — a barra de rolagem está escondida (scrollbar-width: none),
     porque no celular ela não existe e no desktop apareceria como um traço
     cinza atravessando as pílulas.

     As duas larguras são 0 por padrão e o gallery-nav.js só acende o lado
     que de fato tem conteúdo escondido: véu nas duas pontas sempre ligado
     apagaria a primeira pílula de um cardápio de três categorias, que nem
     rola. Sem JS, as duas ficam em 0 e a máscara não pinta nada. */
  --fade-esq: 0px;
  --fade-dir: 0px;
  -webkit-mask-image: linear-gradient(to right,
    transparent 0, #000 var(--fade-esq),
    #000 calc(100% - var(--fade-dir)), transparent 100%);
  mask-image: linear-gradient(to right,
    transparent 0, #000 var(--fade-esq),
    #000 calc(100% - var(--fade-dir)), transparent 100%);
}
.gallery-nav-inner.tem-antes  { --fade-esq: 26px; }
.gallery-nav-inner.tem-depois { --fade-dir: 34px; }
/* Recompõe o respiro do fim da barra. Num container de flex com overflow, o
   padding-right é ignorado no fim da rolagem (Chrome e Safari; Firefox
   honra): rolando até o fim, a última pílula encostava na borda. Um item
   vazio no fim é o que o navegador não tem como descartar — 8px aqui mais
   os 8px do gap fecham os mesmos 16px do padding da esquerda. */
.gallery-nav-inner::after {
  content: "";
  flex: 0 0 8px;
}
.gallery-nav-inner::-webkit-scrollbar { display: none; }

/* ----- setas de rolagem da barra de categorias -----
   Escondidas por padrão, em toda tela. Só aparecem com ponteiro fino E
   quando aquele lado tem categoria escondida — as mesmas classes que
   acendem o véu, aplicadas pelo seletor de irmão, pra a seta e o véu nunca
   discordarem.

   No celular não existem: o dedo já arrasta a barra, e uma seta em cima
   das pílulas tiraria área de toque de quem não precisa dela. */
.gallery-nav-seta { display: none; }

@media (hover: hover) and (pointer: fine) {
  .gallery-nav-inner.tem-antes  ~ .gallery-nav-seta-antes,
  .gallery-nav-inner.tem-depois ~ .gallery-nav-seta-depois {
    display: grid;
    place-items: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    box-shadow: 0 2px 10px -3px rgba(0,0,0,.32);
    transition: background .15s ease, color .15s ease;
  }
  /* Grudadas na caixa de 1040px da lista, não na borda da janela: numa tela
     de 1600px a barra rola dentro da coluna central, e uma seta encostada
     no vidro apontaria pra um lugar onde não há categoria nenhuma. */
  .gallery-nav-inner.tem-antes ~ .gallery-nav-seta-antes { left: max(6px, calc(50% - 520px + 6px)); }
  .gallery-nav-inner.tem-depois ~ .gallery-nav-seta-depois { right: max(6px, calc(50% - 520px + 6px)); }

  .gallery-nav-seta svg { width: 15px; height: 15px; }
  .gallery-nav-seta:hover { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
}
.gallery-nav-link {
  flex: none;
  /* a pílula de uma categoria enorme não pode ocupar a faixa inteira */
  max-width: 72vw;
  overflow: hidden;
  text-overflow: ellipsis;
  scroll-snap-align: start;
  padding: 7px 14px;
  border-radius: 20px;
  /* pílula branca sobre a folha tingida: com o creme de antes ela sumia no
     fundo, agora que o fundo deixou de ser creme */
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  background: #fff;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.gallery-nav-link:hover { border-color: var(--secondary); color: var(--ink); }
/* o "Tudo" é criado pelo JS como <button>: sem isto ele herda a fonte e a
   caixa do agente, e fica visivelmente diferente das outras pílulas */
button.gallery-nav-link { font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.gallery-nav-link.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
}
/* display de autor vence o [hidden] do navegador */
.gallery-nav[hidden] { display: none; }

/* A busca desceu pra dentro do topo colorido, então deixa de ser um campo
   claro sobre fundo claro e vira pílula branca sobre a marca. */
.gallery-header .gallery-search {
  max-width: 460px;
  margin: 22px auto 0;
  background: var(--card);
  border-color: transparent;
  box-shadow: 0 2px 10px -4px rgba(0,0,0,.28);
}
.gallery-header .gallery-search:focus-within {
  border-color: transparent;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-ink) 34%, transparent);
}
.gallery-search {
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 420px;
  margin: 0 0 26px;
  padding: 9px 13px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--card);
}
.gallery-search[hidden] { display: none; }
.gallery-search svg { flex: none; color: var(--muted); }
.gallery-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 14.5px;
  color: var(--ink);
}
.gallery-search input:focus { outline: none; }
.gallery-search:focus-within { border-color: var(--secondary); box-shadow: 0 0 0 3px var(--secondary-light); }
.gallery-search input::-webkit-search-cancel-button { display: none; }
.gallery-search-clear {
  flex: none;
  width: 22px; height: 22px; padding: 0;
  display: grid; place-items: center;
  border: none; border-radius: 50%;
  background: var(--surface-alt); color: var(--muted);
  font-size: 15px; line-height: 1; cursor: pointer;
}
.gallery-search-clear:hover { background: var(--border); color: var(--ink); }
.gallery-search-clear[hidden] { display: none; }
.gallery-search-empty { color: var(--muted); font-size: 14px; margin: 0 0 26px; }
.gallery-search-empty[hidden] { display: none; }

/* .gallery-item e .gallery-section definem display, que vence o [hidden] do
   navegador: sem estas regras o filtro da busca não esconderia nada */
.gallery-item[hidden] { display: none; }
.gallery-section[hidden] { display: none; }

/* o creme chapado dava à página inteira a mesma profundidade de uma folha
   em branco; o brilho quente no alto do conteúdo emenda com a capa em vez
   de cortar seco nela */
.gallery-main {
  max-width: 1040px;
  margin: 0 auto;
  padding: 22px 16px 48px;
}
/* scroll-margin: a âncora não pode parar atrás da barra grudada */
.gallery-section { margin-bottom: 56px; scroll-margin-top: 64px; }
.gallery-section:last-of-type { margin-bottom: 8px; }

/* ----- Cabeçalho de seção -----
   Era um rótulo de 15px em caixa alta com um filete se apagando ao lado:
   separava as seções sem abrir nenhuma, e num cardápio de 60 pratos toda a
   página tinha o mesmo peso do começo ao fim. Agora é um cabeçalho de
   verdade, com a contagem ao lado e um traço curto e sólido embaixo. */
.gallery-section-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
/* O losango entre os filetes é o ornamento que uma seção de cardápio tem e
   um cabeçalho de app não. Vem de ::before/::after do próprio bloco, sem
   marcação a mais — é decoração pura e não deve chegar ao leitor de tela. */
.gallery-section-head::before,
.gallery-section-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right,
    transparent, color-mix(in srgb, var(--brand-dark) 28%, transparent));
}
.gallery-section-head::after { background: linear-gradient(to left,
    transparent, color-mix(in srgb, var(--brand-dark) 28%, transparent)); }
/* o primeiro filete é curto: o título fica à esquerda, como num cardápio
   impresso, e não centralizado no meio da coluna */
.gallery-section-head::before { flex: 0 0 18px; }

.gallery-category {
  /* encolhe e quebra: um nome de categoria longo empurrava a página pro
     lado no celular. O filete da direita cede espaço antes do título. */
  flex: 0 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  hyphens: auto;
  font-family: var(--font-menu);
  font-size: clamp(21px, 5vw, 30px);
  font-weight: 700;
  /* a serifada pedia tracking positivo pra abrir; a Archivo é estreita e
     densa, e no mesmo valor os títulos ficavam frouxos */
  letter-spacing: -0.018em;
  text-transform: none;
  color: var(--brand-dark);
  margin: 0;
  line-height: 1.1;
}
/* order põe a contagem depois do filete longo — na marcação ela vem logo
   após o título, porque é dele que fala, mas na tela pertence à ponta */
.gallery-section-head::after { order: 2; min-width: 12px; }
.gallery-category-count {
  order: 3;
  flex: none;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* Grade editorial: duas colunas no celular e o primeiro prato de cada seção
   ocupando a largura inteira. É o ritmo que faz o cardápio parecer uma
   vitrine e não uma planilha — e dá ao restaurante um lugar pro carro-chefe
   sem precisar de campo novo no painel. */
/* Duas colunas no celular, como no modelo: é a densidade em que dá pra
   comparar dois pratos sem rolar, e a foto ainda chega grande o bastante
   pra dar vontade. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  align-items: start;
}

@media (min-width: 721px) {
  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); gap: 20px; }
}

/* O card era um retângulo branco de borda fina e sombra quase invisível:
   correto e sem presença nenhuma. Agora ele flutua sobre o creme — sombra
   quente (ameixa, não cinza), borda só como contorno de apoio e o conteúdo
   empurrado pro rodapé, pra que cards de alturas diferentes na mesma linha
   terminem com o preço alinhado. */
.gallery-item {
  position: relative;
  /* branco puro, e não o off-white do produto: sobre o fundo tingido é o
     branco que faz o card "sair" da página, como no modelo */
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 5px rgba(31,26,29,.05), 0 12px 26px -18px rgba(31,26,29,.34);
  transition: transform .22s var(--ease-out), box-shadow .22s ease, border-color .22s ease;
}
.gallery-item:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--secondary) 55%, transparent);
  box-shadow: 0 2px 4px rgba(59,31,59,.05), 0 22px 44px -20px rgba(59,31,59,.45);
}
/* o card inteiro é um link: sem isto o foco de teclado marcaria só a área
   do texto, e quem navega por Tab não veria qual prato está selecionado */
.gallery-item:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 3px;
}

/* aspect-ratio no lugar de altura fixa: a moldura acompanha a coluna, então
   o mesmo card serve pro celular de 360px e pro desktop sem recortar mais
   ou menos comida em cada um */
.gallery-item-media {
  position: relative;
  /* flex: none porque o card virou coluna flex: sem isto, uma descrição
     longa espremeria a foto em vez de o card crescer */
  flex: none;
  aspect-ratio: 4 / 3;
  background: var(--secondary-light);
  overflow: hidden;
}
.gallery-item-media img,
.gallery-item-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-item-media img { transition: transform .3s var(--ease-out); }
.gallery-item:hover .gallery-item-media img { transform: scale(1.03); }

/* O vídeo nasce transparente por cima da foto e só aparece quando começa a
   tocar de fato. Assim o card nunca pisca preto: se a rede falhar ou o
   navegador recusar o autoplay, o que fica na tela é a foto. */
.gallery-item-video {
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
.gallery-item-media.is-playing .gallery-item-video { opacity: 1; }
/* com o vídeo rodando o selo vira redundante — ele está vendo o vídeo */
.gallery-item-media.is-playing .video-badge { opacity: 0; }

.gallery-item.esgotado .gallery-item-media img,
.gallery-item.esgotado .gallery-item-video { filter: grayscale(70%); opacity: .65; }
.gallery-item.esgotado .gallery-item-inicial { opacity: .22; }

/* ----- Prato sem foto -----
   Antes o card ficava só com o texto, mais baixo que os vizinhos, e a grade
   parecia inacabada. A moldura vazia que existia antes disso era pior: bege
   liso lê como imagem que não carregou.
   O painel resolve os dois — mesma altura dos outros, e desenhado o
   bastante pra ler como escolha. A inicial é grande e de baixo contraste:
   preenche a área sem competir com o nome do prato logo abaixo. */
.gallery-item-media.is-sem-foto {
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse 120% 100% at 50% 0%, color-mix(in srgb, var(--secondary-light) 85%, transparent) 0%, transparent 70%),
    repeating-linear-gradient(135deg,
      transparent 0 11px,
      color-mix(in srgb, var(--border) 26%, transparent) 11px 12px),
    var(--surface-alt);
}
.gallery-item-inicial {
  font-family: var(--font-display);
  font-size: clamp(44px, 12vw, 68px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--brand);
  opacity: .32;
  user-select: none;
}

.video-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  background: rgba(30, 27, 29, 0.62);
  backdrop-filter: blur(6px);
  /* o contorno claro separa o selo de foto clara: sobre um risoto amarelo
     o preto translúcido sozinho vira uma mancha sem borda */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: opacity .3s ease;
}
.esgotado-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
}
/* flex em coluna com o preço empurrado pro fim: numa linha de cards com
   descrições de tamanhos diferentes, os preços ficam na mesma altura em vez
   de flutuarem cada um no seu lugar */
.gallery-item-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 13px 14px 15px;
}
.gallery-item-body h3 {
  margin: 0 0 5px;
  font-family: var(--font-menu);
  /* meio ponto menor que na serifada: a Archivo tem altura-x maior e ocupa
     mais no mesmo corpo, e nome de prato longo passava a quebrar em três
     linhas dentro do card */
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.014em;
  color: var(--ink);
}
.gallery-item-body p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.public-body .price { color: var(--brand-dark); font-weight: 700; margin: 2px 0 5px; }

/* O preço no card fecha o bloco embaixo, como número solto e grande — é
   assim no modelo, e é mais legível que a etiqueta de antes: a pílula
   colorida competia com a foto por atenção e apertava o valor numa caixa
   pequena. A etiqueta (.price-tag) segue existindo pro resto do produto. */
.price-now {
  font-family: var(--font-menu);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  /* algarismos de mesma largura: sem isto, uma coluna de preços fica com as
     vírgulas dançando de linha em linha */
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
/* o promocional é o único que se pinta: sobre uma grade de preços pretos,
   a cor sozinha já diz "este está diferente" */
.price-now-promo { color: var(--conversion-dark); }

.price-tag {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--secondary-light);
  color: var(--secondary-dark);
  font-family: var(--font-menu);
  font-size: 14px;
  font-weight: 700;
  /* algarismos de mesma largura: sem isto, uma coluna de preços fica com as
     vírgulas dançando de linha em linha */
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  white-space: nowrap;
}
.price-tag-promo { background: var(--conversion-light); color: var(--conversion-dark); }
.gallery-item-body .price-original {
  margin-right: 7px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: line-through;
}

/* duas linhas de descrição: o suficiente pra dar vontade, sem deixar os
   cards da mesma linha com alturas diferentes. margin-top: auto no preço
   depende deste bloco não esticar, então o clamp continua valendo */
.gallery-item-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gallery-item-body .price { margin-top: auto; padding-top: 12px; }

/* As variantes de card (faixa horizontal e destaque de largura inteira)
   saíram junto com o ritmo editorial da grade: a grade agora é uniforme,
   e o template não emite mais essas classes. */

/* ----- Entrada dos cards -----
   A classe gv-anim é posta pelo gallery-video.js: sem JS nada nasce
   invisível. O atraso é escalonado pelo índice do prato dentro da seção
   (--i, vindo do template) e travado no sexto card, senão o fim de uma
   seção de 40 pratos esperaria dois segundos. */
.gv-anim .gallery-item {
  opacity: 0;
  transform: translateY(16px);
}
.gv-anim .gallery-item.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity .5s ease,
    transform .5s var(--ease-out);
  transition-delay: calc(min(var(--i, 0), 5) * 55ms);
}

/* O rodapé fechava a página com uma linha cinza solta no creme, sem nada
   que dissesse "acabou". A faixa bege dá um fim à rolagem, e o filete curto
   repete a marca do cabeçalho de seção — a página inteira termina com o
   mesmo gesto com que cada seção começa. */
.gallery-footer {
  text-align: center;
  padding: 32px 20px 40px;
  color: var(--muted);
  font-size: 12.5px;
  background: var(--surface-alt);
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.gallery-footer::before {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  border-radius: 3px;
  margin: 0 auto 16px;
  background: color-mix(in srgb, var(--secondary) 70%, transparent);
}
.gallery-footer p { margin: 0; }

/* ----- Aviso do cardápio de demonstração (galeria e página de prato) -----
   Estas regras viviam no bloco da landing e vieram pra cá no redesign: são
   usadas por gallery.html e dish.html, não pela landing. */
.demo-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  max-width: 760px;
  margin: 0 auto 26px;
  padding: 13px 20px;
  background: var(--secondary-light);
  border: 1px solid var(--secondary);
  border-radius: var(--radius-card);
}
.demo-notice p {
  margin: 0;
  color: var(--secondary-dark);
  font-size: 13.5px;
  font-weight: 600;
}
.demo-notice .button-link { padding: 8px 16px; font-size: 13px; }
.demo-notice-compact { margin: 20px auto; }
.footer-note { color: var(--muted); font-size: 12px; margin-top: 14px; text-align: center; }

/* ---------- PÁGINA DE UM PRATO ---------- */
.public-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 0;
  padding-bottom: 44px;
  min-height: 100vh;
  /* mesma folha tingida da grade: vindo de um toque no card, a página do
     prato não pode parecer outro site */
  background: color-mix(in srgb, var(--brand-soft) 62%, var(--bg));
}
/* No celular a foto sangra de ponta a ponta, como no modelo — o card com
   margem de cada lado desperdiçava a largura justamente onde a comida
   precisa aparecer. A partir do tablet ele volta a ser um cartão. */
@media (min-width: 600px) { .public-page { padding-top: 36px; } }
.public-card {
  background: var(--card);
  overflow: hidden;
  width: 100%;
  max-width: 480px;
  box-shadow: var(--shadow-lg);
}
@media (min-width: 600px) {
  .public-card { width: 92%; border-radius: var(--radius-card); }
}

/* ----- Mídia do prato -----
   A foto é o topo da página, e o voltar flutua sobre ela. */
.public-media { position: relative; }
.public-back {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: var(--brand);
  color: var(--brand-ink);
  text-decoration: none;
  /* a sombra é o que separa o botão de uma foto clara: sobre um prato
     branco num prato branco, o quadrado colorido sozinho encosta no fundo */
  box-shadow: 0 3px 12px -3px rgba(0,0,0,.45);
  transition: transform .15s ease;
}
.public-back:hover { transform: scale(1.06); }
.public-back:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 2px; }

/* nome à esquerda, preço à direita e alinhados pela base: é o cruzamento
   que o cliente faz, e empilhá-los fazia o olho descer e voltar */
.public-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.public-head h1 { flex: 1 1 auto; min-width: 0; }
.public-head .price { flex: none; }
.public-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 14px; }
.public-tags:empty { display: none; }
/* Entrada de uma vez só, na carga: o cliente chega aqui vindo de um toque
   na grade, e o card subindo dá a sensação de que a página respondeu. Não
   depende de scroll, então não precisa de JS. */
@media (prefers-reduced-motion: no-preference) {
  .public-card { animation: publicCardEntra .45s var(--ease-out) both; }
}
@keyframes publicCardEntra {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
/* ----- Botão de mostrar senha (password-toggle.js) ----- */
.password-field { position: relative; display: block; }
/* o wrapper passa a ser o filho direto do flex, então herda o flex: 1 que
   antes era do input (.inline-form input) — sem isso o campo encolhe */
.inline-form .password-field { flex: 1; }
.password-field input {
  /* display:block elimina o espaço de linha que sobra abaixo de um input
     inline: com ele, o wrapper fica exatamente da altura do campo e o
     height:100% do botão centraliza certo */
  display: block;
  /* espaço pro botão não cobrir o texto digitado */
  padding-right: 44px;
}

/* Escopo no wrapper (0,2,0) de propósito: as regras globais que atingem
   este <button> — `.auth-card button { margin-top: 20px }`,
   `.dish-form button { margin-top }` e `button:active { transform }` — são
   (0,1,1) e venceriam um `.password-toggle` sozinho, empurrando o ícone pra
   fora do campo. Por isso cada propriedade herdada do botão padrão é
   zerada aqui explicitamente. */
.password-field .password-toggle {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 42px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  box-shadow: none;
  transform: none;
  color: var(--muted);
  cursor: pointer;
  border-radius: 0 var(--radius-input) var(--radius-input) 0;
}
.password-field .password-toggle:hover {
  background: none;
  box-shadow: none;
  color: var(--primary);
}
.password-field .password-toggle:active { transform: none; }
.password-field .password-toggle:focus-visible { outline: 2px solid var(--secondary); outline-offset: -2px; }

/* ----- Consumo excedente (planos medidos, tela de assinatura) ----- */
.overage-box {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
}
.overage-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 14px;
  padding: 4px 0;
}
.overage-row-charge {
  border-top: 1px solid var(--border);
  margin-top: 6px;
  padding-top: 10px;
  color: var(--conversion-dark);
}
.overage-included { font-weight: 500; color: var(--muted); font-size: 12.5px; }
.overage-note { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }


/* ----- Leitura de cardápio por foto ----- */
/* faixa de destaque no painel: o caminho rápido antes do cadastro manual */
.scan-banner {
  display: flex; align-items: center; gap: 16px; text-decoration: none;
  padding: 18px 20px; margin-bottom: 24px; border-radius: 14px;
  border: 1px solid var(--conversion); background: var(--conversion-light);
  transition: box-shadow .18s ease, border-color .18s ease;
}
.scan-banner:hover { box-shadow: 0 6px 18px rgba(0,0,0,.09); border-color: var(--conversion-dark); }
.scan-banner-icon {
  flex: none; display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 12px; background: var(--conversion); color: #fff;
}
.scan-banner-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.scan-banner-text strong { font-family: var(--font-display); font-size: 16px; color: var(--ink); }
.scan-banner-text span { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.scan-banner-cta {
  flex: none; margin-left: auto; align-self: center; white-space: nowrap;
  font-size: 14px; font-weight: 600; color: var(--conversion-dark);
}
@media (max-width: 700px) {
  .scan-banner { flex-wrap: wrap; gap: 12px; }
  .scan-banner-cta { margin-left: 62px; }
}

.scan-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* duas portas de entrada: câmera ao vivo e arquivo do aparelho */
.scan-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.scan-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
  padding: 22px 16px;
  border: 2px dashed var(--border);
  border-radius: var(--radius-card);
  background: var(--bg);
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
/* display de autor vence o [hidden] do navegador; sem isto o botão da
   câmera aparece mesmo quando o JS o escondeu por falta de getUserMedia */
.scan-choice[hidden], .scan-camera[hidden] { display: none; }
.scan-choice:hover { border-color: var(--secondary); background: var(--card); }
.scan-choice svg { color: var(--primary); }
.scan-choice strong { font-family: var(--font-display); font-size: 15px; color: var(--ink); }
.scan-choice span { font-size: 12.5px; }
.scan-choice-primary { border-style: solid; border-color: var(--conversion); background: var(--conversion-light); }
.scan-choice-primary:hover { border-color: var(--conversion-dark); background: var(--conversion-light); }
.scan-choice-primary svg { color: var(--conversion-dark); }
/* o input fica fora do fluxo, então o foco de teclado precisa aparecer no rótulo */
.scan-choices:has(+ .scan-input:focus-visible) .scan-choice[for="fotos"] {
  outline: 2px solid var(--secondary); outline-offset: 3px;
}
@media (max-width: 560px) { .scan-choices { grid-template-columns: 1fr; } }

/* câmera ao vivo */
.scan-camera { margin-top: 16px; }
/* Em pé e alto: página de cardápio é retrato, e o quadro deitado de antes
   deixava a página pequena no meio da tela, difícil de enquadrar. A altura
   acompanha a tela (com folga pro botão de disparo logo abaixo). */
.scan-camera-frame {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #14110e;
  width: 100%;
  height: min(calc(100vh - 210px), 820px);
  height: min(calc(100dvh - 210px), 820px);
  min-height: 360px;
}
/* a barra do painel fica fixa no topo do celular: sem a margem, o
   scrollIntoView deixava o alto do quadro escondido atrás dela */
.scan-camera { scroll-margin-top: 72px; }
/* "Trocar câmera" e "Fechar câmera" são <button>: herdavam o fundo escuro
   do botão padrão com a cor de texto de link, e saíam como pílulas mudas */
.scan-camera-actions .btn-link { background: none; border: 0; box-shadow: none; color: var(--primary); font: 700 14px var(--font-body); padding: 10px 12px; min-height: 44px; cursor: pointer; }
.scan-camera-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* guia de enquadramento: ajuda a alinhar a página antes do disparo */
.scan-camera-guide {
  position: absolute;
  inset: 5% 7%;
  border: 2px dashed rgba(255,255,255,.55);
  border-radius: 10px;
  pointer-events: none;
}
.scan-camera-hint { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; text-align: center; }
.scan-camera-actions {
  display: flex; align-items: center; justify-content: center;
  gap: 18px; flex-wrap: wrap; margin-top: 12px;
}
.scan-shutter {
  width: 62px; height: 62px; padding: 0; flex: none;
  border-radius: 50%; border: 3px solid var(--conversion);
  background: var(--card); cursor: pointer;
  display: grid; place-items: center;
  transition: transform .12s ease, box-shadow .15s ease;
}
.scan-shutter span { display: block; width: 42px; height: 42px; border-radius: 50%; background: var(--conversion); }
.scan-shutter:hover { box-shadow: 0 0 0 6px var(--conversion-light); }
.scan-shutter:active { transform: scale(.94); }
.scan-shutter:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

.scan-limit { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; text-align: center; }

.scan-preview { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.scan-thumb-item { position: relative; }
/* miniatura em pé, do formato da página, e grande o bastante pra conferir
   se a foto saiu nítida antes de mandar ler */
.scan-thumb {
  width: 108px;
  height: 144px;
  object-fit: cover;
  border-radius: var(--radius-input);
  border: 1px solid var(--border);
  display: block;
}
.scan-thumb-remove {
  position: absolute; top: -6px; right: -6px;
  width: 22px; height: 22px; padding: 0; line-height: 1;
  border-radius: 50%; border: 1px solid var(--border);
  background: var(--card); color: var(--ink);
  font-size: 15px; cursor: pointer;
  display: grid; place-items: center;
}
.scan-thumb-remove:hover { background: var(--conversion); border-color: var(--conversion); color: #fff; }
.scan-thumb-num {
  position: absolute; bottom: 4px; left: 4px;
  padding: 1px 6px; border-radius: 20px;
  background: rgba(0,0,0,.6); color: #fff;
  font-size: 10.5px; font-weight: 700;
}
.scan-status { font-size: 13px; color: var(--muted); margin: 12px 0 0; min-height: 1.2em; }
.scan-note { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin: 16px 0 0; }

/* selo de confiança na revisão da leitura por foto */
.confidence-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}
.confidence-media { background: var(--secondary-light); color: var(--secondary-dark); }
.confidence-baixa { background: var(--conversion-light); color: var(--conversion-dark); }
.confidence-note { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.4; }

/* ----- Aviso de teste grátis (tela de assinatura) ----- */
.trial-banner {
  background: var(--secondary-light);
  border: 1px solid var(--secondary);
  border-radius: var(--radius-card);
  padding: 18px 20px;
  margin-bottom: 20px;
}
.trial-banner strong { display: block; font-family: var(--font-display); font-size: 16px; color: var(--secondary-dark); }
.trial-banner p { margin: 6px 0 14px; font-size: 14px; color: var(--ink); max-width: 62ch; }
.trial-banner-expired { background: var(--conversion-light); border-color: var(--conversion); }
.trial-banner-expired strong { color: var(--conversion-dark); }

/* ===== Cadastro em tela cheia (duas colunas) ===== */
.signup-page { background: var(--bg); }

/* Três regiões em vez de duas colunas simples. No desktop os planos ocupam
   a coluna direita inteira e o botão fica sob os campos; no mobile a ordem
   vira campos → planos → botão. Se o botão morasse dentro da coluna do
   formulário, no celular ele apareceria ANTES da escolha do plano. */
.signup-layout {
  display: grid;
  min-height: 100vh;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  /* a segunda linha (o botão) absorve a sobra vertical, então a grade
     preenche os 100vh e o painel dos planos vai até o fim da tela. Com
     align-content:start as linhas ficavam coladas no topo e o fundo bege
     parava no meio da página. */
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "fields plans"
    "actions plans";
}
.signup-fields { grid-area: fields; padding: 6px 32px 0; }
.signup-actions { grid-area: actions; padding: 26px 48px 48px; }
.signup-plans {
  grid-area: plans;
  background: var(--surface-alt);
  border-left: 1px solid var(--border);
  /* topo maior que o da coluna esquerda de propósito: lá o link de voltar
     ocupa a primeira linha, e é a marca que precisa alinhar com este título */
  padding: 40px 48px 48px;
}
/* segura o conteúdo legível em telas largas sem abrir mão do fundo sangrado */
.signup-inner { max-width: 460px; margin: 0 auto; }
.signup-plans .signup-inner { max-width: 500px; }

/* Fica FORA de .signup-inner de propósito: o inner é centralizado e limitado
   a 460px, então o link acompanharia o formulário pro meio da coluna em tela
   larga. Solto aqui, ele encosta na quina da página (só o padding da coluna).
   A .back-link original nasceu com margin-top, porque em dish.html ela vem
   depois do conteúdo — aqui ela abre a página, e a margem vai pra baixo. */
/* bem discreto no desktop, onde o alvo é o mouse. No celular ele volta a
   crescer (ver media query): a esse tamanho o alvo de toque fica em torno de
   22px, e o mínimo confortável é ~44px. */
.signup-back {
  display: inline-block;
  margin: 0 0 12px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
}
.signup-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; margin-bottom: 30px; }
.signup-title { font-size: 27px; line-height: 1.2; margin: 0 0 6px; text-wrap: balance; }
.signup-lead { color: var(--muted); font-size: 15px; margin: 0 0 26px; }

.signup-fields label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
  margin: 16px 0 5px;
}
.signup-fields .error { margin-bottom: 4px; }

.slug-input { display: flex; align-items: center; gap: 4px; }
.slug-prefix { color: var(--muted); font-size: 13px; white-space: nowrap; }

.signup-plans-title { font-size: 21px; margin: 0 0 8px; }
.signup-plans-sub { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin: 0 0 18px; }
.plan-option-price { display: block; font-size: 12.5px; font-weight: 700; color: var(--primary); margin-top: 3px; }
.plan-option-badge {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--secondary-dark);
  background: var(--secondary-light);
  padding: 2px 7px;
  border-radius: 20px;
  vertical-align: 1px;
}

.signup-reassurance { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 9px; }
.signup-reassurance li { position: relative; padding-left: 22px; font-size: 13px; color: var(--muted); }
.signup-reassurance li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--secondary-dark);
  border-bottom: 2px solid var(--secondary-dark);
  transform: rotate(-45deg);
}

.signup-submit { width: 100%; }
.signup-login { font-size: 14px; color: var(--muted); margin: 16px 0 0; text-align: center; }

@media (max-width: 860px) {
  .signup-layout {
    grid-template-columns: minmax(0, 1fr);
    /* empilhado, cada linha volta a ter a altura do próprio conteúdo */
    grid-template-rows: auto;
    grid-template-areas:
      "fields"
      "plans"
      "actions";
    min-height: 0;
  }
  .signup-fields { padding: 10px 22px 0; }
  /* alvo de toque utilizável no celular, onde o dedo não tem a precisão do mouse */
  .signup-back { padding: 8px 14px; font-size: 13px; margin-bottom: 16px; }
  .signup-plans {
    border-left: none;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-top: 30px;
    padding: 28px 22px;
  }
  .signup-actions { padding: 24px 22px 40px; }
  .signup-inner, .signup-plans .signup-inner { max-width: 460px; }
  .signup-title { font-size: 24px; }
}

/* ----- Escolha de plano no cadastro (radio disfarçado de card) ----- */
.plan-picker { display: grid; gap: 12px; margin-bottom: 6px; }

.plan-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--bg);
  cursor: pointer;
  font-weight: 400;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.plan-option:hover { border-color: var(--secondary); }
.plan-option input { width: auto; margin: 0; flex-shrink: 0; accent-color: var(--primary); }

/* :has permite destacar o card inteiro do rádio marcado sem JS; onde não
   houver suporte, a marcação do próprio rádio ainda comunica a escolha.
   O anel é box-shadow, e não borda mais grossa, pra não deslocar o layout
   um pixel a cada troca de seleção. */
.plan-picker:has(input:checked) .plan-option:has(input:checked) {
  border-color: var(--primary);
  background: var(--card);
  box-shadow: 0 0 0 1px var(--primary), var(--shadow-sm);
}
.plan-option:has(input:focus-visible) { outline: 2px solid var(--secondary); outline-offset: 2px; }

.plan-option-body { flex: 1; min-width: 0; }
.plan-option-name {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16.5px;
}
.plan-option-detail { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.45; margin-top: 3px; }
.plan-option-badge {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #fff;
  background: var(--conversion);
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

/* o preço fica ancorado à direita: é o que a pessoa compara entre os cards,
   e alinhado numa coluna se lê de cima a baixo sem procurar */
.plan-option-cost { flex-shrink: 0; text-align: right; line-height: 1.25; }
.plan-option-free {
  display: block;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 800;
  color: var(--conversion);
}
.plan-option-period { display: block; font-size: 11px; font-weight: 700; color: var(--conversion); }
.plan-option-after { display: block; font-size: 11.5px; color: var(--muted); margin-top: 4px; white-space: nowrap; }

/* O recomendado se destaca pelo selo, não pela borda: borda laranja num
   card não marcado, ao lado do anel do card marcado, deixava em dúvida
   qual dos dois estava escolhido. */

.signup-note { color: var(--muted); font-size: 12px; text-align: center; margin: 12px 0 0; line-height: 1.5; }
/* o card do rádio vira o fundo claro contra o painel bege dos planos */
.signup-plans .plan-option { background: var(--card); align-items: center; }
.signup-plans .plan-option input { margin-top: 0; }

/* cardápio público bloqueado (conta sem acesso) — ver menuBlocked em
   billing.go. Tom neutro de propósito: quem lê é o cliente na mesa. */
.unavailable-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 22px;
  width: 92%;
  max-width: 420px;
  margin-top: 8vh;
  padding: 40px 30px;
  text-align: center;
  box-shadow: var(--shadow-md);
}
.unavailable-card .logo-icon { margin-bottom: 8px; }
.unavailable-card h1 { font-size: 21px; margin: 0 0 18px; }
.unavailable-message { font-size: 16px; font-weight: 600; margin: 0 0 8px; }
.unavailable-hint { color: var(--muted); font-size: 14px; margin: 0; }

/* aspect-ratio no lugar de altura fixa: a mídia acompanha a largura do
   card, então o mesmo enquadramento vale no celular e no desktop */
.public-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--secondary-light);
}
/* prato sem foto: o mesmo painel com a inicial que a grade usa, pra o
   voltar não flutuar sobre um retângulo vazio */
.public-photo.is-sem-foto {
  display: grid;
  place-items: center;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--brand-soft) 82%, #fff),
    color-mix(in srgb, var(--brand-soft) 50%, #fff));
}
.public-photo.is-sem-foto .gallery-item-inicial { font-size: 72px; }
/* o vídeo do restaurante é quase sempre vertical, filmado no celular:
   max-height segura os 9:16 pra que nome e preço não saiam da tela */
.public-video {
  width: 100%;
  max-height: 62vh;
  display: block;
  background: #000;
}
/* Vídeo em pé (o caso comum) ocupa a largura toda em 4:5, cortando um pouco
   em cima e embaixo, em vez de sair como uma faixa estreita entre duas
   barras pretas. A classe vem de prato-video.js, que lê a proporção real
   do arquivo: vídeo deitado continua inteiro, sem corte. */
.public-video.is-retrato {
  aspect-ratio: 4 / 5;
  max-height: 70vh;
  object-fit: cover;
}
.public-body { padding: 22px 22px 28px; }
.public-body h1 { margin: 0; font-size: clamp(22px, 6vw, 30px); line-height: 1.2; }
/* o preço é a segunda coisa que se procura, depois da foto */
.public-body .price { font-size: 22px; margin: 0; }
.public-body .price-original { font-size: 16px; }
.public-body .desc { color: var(--muted); font-size: 15px; margin: 0; }
.back-link {
  margin-top: 22px;
  color: var(--primary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  padding: 9px 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  transition: background .15s ease, box-shadow .15s ease;
}
.back-link:hover { background: var(--secondary-light); box-shadow: var(--shadow-sm); }

/* ===================================================================
   MOLDURA DO PAINEL (body.app) — barra lateral + coluna de conteúdo

   Substituiu a barra superior. Sete destinos numa faixa horizontal já
   espremiam os rótulos; na vertical cada item respira e sobra a largura
   inteira pro conteúdo.

   A lateral é clara de propósito. A barra ameixa marcava "estou logado"
   pela cor; agora quem marca isso é a própria moldura — existir uma
   lateral já diz que você está dentro do aplicativo, e o painel ganha o
   ar limpo que a landing tem.
   =================================================================== */

body.app {
  display: grid;
  /* A coluna cresceu junto com o cartão de conta, que precisa caber um nome
     de restaurante de duas palavras sem quebrar em três linhas. */
  grid-template-columns: 276px minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
  min-height: 100vh;
  /* Creme chapado do rodapé ao topo deixava o painel inteiro numa nota só.
     Dois brilhos quentes bem diluídos — saffron no alto à direita,
     terracota embaixo à esquerda — dão profundidade sem virar cor de
     fundo: o card branco passa a flutuar sobre alguma coisa. Fixos, pra
     não escorregarem com o scroll do conteúdo. */
  background:
    radial-gradient(ellipse 80% 55% at 88% 0%, rgba(244,163,64,.13) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 0% 100%, rgba(216,92,65,.09) 0%, transparent 62%),
    var(--bg);
  background-attachment: fixed;
}

/* A lateral era uma coluna chapada colada na borda da janela, separada do
   conteúdo por um filete de 1px. Agora ela é uma pilha de cartões flutuando
   sobre o creme — marca solta no topo, cartão da conta e o bloco de
   navegação —, que é o que dá ao painel o ar de aplicativo montado em vez de
   template de admin. */
.app-side {
  position: sticky;
  top: 16px;
  align-self: start;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  background: none;
  border-right: none;
}
.app-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  /* O recuo do topo não é respiro: é o que põe a marca na mesma linha do
     título da página. O cartão do cabeçalho tem 20px de padding e um título
     de ~37px, então o centro dele cai por volta de 55px do topo da janela —
     e a marca, com 26px de altura, precisa destes 26 pra encontrar a mesma
     régua. Com o título em clamp() o encontro é exato na largura cheia e
     aproximado nas estreitas, que é o suficiente pra leitura. */
  padding: 26px 6px 4px;
  text-decoration: none;
  color: var(--ink);
}
.app-brand .logo-icon { color: var(--secondary); flex: none; }
.app-brand-name { font-size: 21px; }

/* Cartão da conta: o único bloco escuro da barra. Mesma receita do KPI
   principal da Visão geral (ameixa cheia com um brilho de saffron no canto),
   pra os dois lerem como a mesma família e não como duas ideias. */
.app-account {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 16px 14px;
  border-radius: 20px;
  background:
    radial-gradient(ellipse 90% 120% at 100% 0%, rgba(244,163,64,.28) 0%, transparent 60%),
    var(--primary);
  color: #fff;
  box-shadow: 0 1px 2px rgba(59,31,59,.06), 0 12px 30px -14px rgba(59,31,59,.35);
}
.app-account-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  color: #fff;
}
.app-account-name {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 16.5px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  /* nome longo corta em vez de esticar o cartão */
  overflow-wrap: anywhere;
}
.app-account-link {
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--secondary);
  text-decoration: none;
}
.app-account-link:hover { text-decoration: underline; }

/* O bloco de navegação é o segundo cartão da pilha. */
.app-nav-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 10px;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(59,31,59,.04), 0 10px 28px -16px rgba(59,31,59,.14);
}
.app-brand:hover .logo-icon { opacity: .75; }

.app-nav { display: flex; flex-direction: column; gap: 2px; }
.app-nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: none;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--muted);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.app-nav-item svg { width: 19px; height: 19px; flex: none; }
.app-nav-item:hover { background: var(--surface-alt); color: var(--ink); }
/* saffron é o token de "estado ativo" desde o começo; usar terracota aqui
   gastaria a cor reservada pra Publicar/Upgrade num item de menu */
.app-nav-item.active { background: var(--secondary-light); color: var(--secondary-dark); }
.app-nav-sair { color: var(--muted); }

.app-side-foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.app-main { min-width: 0; display: flex; flex-direction: column; }
/* Passou por dois extremos. Era faixa fixa com blur e filete embaixo — a
   única aresta reta da tela depois que a lateral virou cartão. Aí ficou solto
   no creme, e o título passou a boiar sem nada que o sustentasse. O certo era
   o meio: é um cartão como todos os outros, alinhado pelo topo com a coluna
   da esquerda e pela largura com o conteúdo abaixo.

   A régua da ação da direita é o meio do cartão — não a linha de base do
   título (onde um link de 14px lê como caído sob um título de 34px), nem o
   centro da linha do título (que deixa a ação acima do meio da caixa, já que
   o subtítulo ocupa altura embaixo).

   Duas coisas fazem isso valer: align-items:center, que centra a ação contra
   o bloco mais alto da faixa, e o padding vertical simétrico, sem o qual o
   meio do conteúdo e o meio da caixa não são o mesmo lugar. */
.app-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  margin-bottom: 16px;
  padding: 20px 24px;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(59,31,59,.04), 0 10px 28px -16px rgba(59,31,59,.14);
}
/* O bloco de texto encolhe antes das ações: sem min-width:0 um subtítulo
   longo empurra os botões da direita pra fora da faixa em vez de quebrar. */
/* Títulos do painel na serifada. Número e texto corrido seguem em sans: a
   serifada em corpo pequeno atrapalha a varredura, e o número é o dado, não
   a voz da marca — por isso .ov-kpi-value continua na display. */
body.app :where(h1, h2, h3),
body.app .app-title {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: -0.005em;
}
/* a serifada aguenta (e pede) corpo maior que a grotesca no mesmo espaço */
body.app { --app-title-size: clamp(26px, 2.9vw, 34px); --app-title-leading: 1.1; }
body.app .app-title { font-size: var(--app-title-size); line-height: var(--app-title-leading); }

.app-headline { min-width: 0; }
/* Contexto de onde a tela está pendurada. Só as telas que são um degrau
   abaixo de um destino da barra usam (editar prato vem do catálogo); nas
   outras, o item ativo da lateral já responde "onde estou". */
.app-eyebrow {
  margin: 0 0 3px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.app-eyebrow a { color: inherit; text-decoration: none; }
.app-eyebrow a:hover { color: var(--primary); text-decoration: underline; }
.app-title { margin: 0; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.02em; line-height: 1.15; }
.app-sub { margin: 4px 0 0; color: var(--muted); font-size: 14px; line-height: 1.4; }
/* O subtítulo virou o lugar do estado da tela ("7 de 19 pratos com vídeo").
   Destacar só o número deixa o dado legível de relance, sem ler a frase —
   é a diferença entre uma legenda e um indicador. */
.app-sub strong { color: var(--ink); font-weight: 700; }
.app-head-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.app-content { padding: 0 0 64px; min-width: 0; }
/* respiro entre blocos de uma tela, sem cada template inventar a margem */
.app-section { margin-bottom: 30px; }
.app-section:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  body.app { grid-template-columns: minmax(0, 1fr); padding: 0; gap: 0; }
  /* a lateral vira uma faixa que rola na horizontal: com 8 destinos, uma
     barra que quebra em três linhas come metade da tela do celular */
  .app-side {
    position: sticky;
    top: 0;
    z-index: 20;
    max-height: none;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--card);
    border-right: none;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
  }
  /* o cartão da conta não cabe numa faixa de 44px de altura; no celular quem
     diz de quem é o painel é o cabeçalho da tela */
  .app-account { display: none; }
  /* display:contents dissolve o cartão: nav e rodapé voltam a ser filhos
     diretos da faixa, e a rolagem horizontal continua funcionando */
  .app-nav-card {
    display: contents;
  }
  .app-side::-webkit-scrollbar { display: none; }
  .app-brand { padding: 0 6px 0 0; }
  .app-brand-name { display: none; }
  .app-nav { flex-direction: row; margin-top: 0; gap: 4px; }
  .app-side-foot {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    border-left: 1px solid var(--border);
    padding-left: 8px;
    flex-direction: row;
    gap: 4px;
  }
  .app-nav-item { padding: 9px 11px; font-size: 13.5px; }
  .app-head { margin: 14px; padding: 16px 18px; }
  .app-content { padding: 0 14px 52px; }
}

/* alerta no topo do conteúdo (erro/sucesso de uma ação) */
.app-alert { margin: 0 0 20px; }
/* telas de tarefa única (escanear) mantêm a coluna estreita: um cartão de
   passo a passo esticado em 1100px perde o fio */
.app-content-focus { max-width: 720px; }

/* ===================================================================
   VISÃO GERAL (/visao-geral) — a leitura do restaurante antes da edição

   Uma cor de dado por gráfico, de propósito. Sem runtime JS na máquina eu
   não consegui rodar o validador de paleta categórica, então nenhum
   gráfico aqui depende de o leitor distinguir duas matizes: a linha e as
   barras usam terracota sozinha, os medidores idem, e a composição do
   catálogo é uma rampa de UMA matiz (ameixa, escuro→claro) ordenada por
   quanto o prato aparece pro cliente. Rampa de uma matiz separa por
   luminosidade, que sobrevive a qualquer daltonismo.
   =================================================================== */

/* ----- faixa de números-título ----- */
.ov-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.ov-kpi {
  position: relative;
  overflow: hidden;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  border-radius: 22px;
  padding: 16px 19px 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  box-shadow: 0 1px 2px rgba(59,31,59,.04), 0 8px 24px -12px rgba(59,31,59,.10);
  transition: box-shadow .25s ease, transform .25s ease;
}
.ov-kpi:hover {
  box-shadow: 0 2px 4px rgba(59,31,59,.05), 0 16px 36px -14px rgba(59,31,59,.18);
  transform: translateY(-2px);
}

/* Um número manda na faixa; os outros três são apoio. Quatro cards
   idênticos não têm hierarquia — o olho não sabe onde pousar. O primeiro
   vem em ameixa cheia, com o brilho de saffron atrás, e é ele que
   responde "como foi o período". */
.ov-kpi.is-hero {
  background:
    radial-gradient(ellipse 90% 120% at 100% 0%, rgba(244,163,64,.30) 0%, transparent 58%),
    var(--primary);
  border-color: transparent;
  color: #fff;
}
.ov-kpi.is-hero .ov-kpi-label { color: rgba(255,255,255,.72); }
.ov-kpi.is-hero .ov-kpi-value { color: #fff; }
.ov-kpi.is-hero .ov-kpi-chip { background: rgba(255,255,255,.14); color: rgba(255,255,255,.9); }
.ov-kpi.is-hero .ov-kpi-chip.is-up { background: rgba(47,107,79,.34); color: #cdf3d5; }
.ov-kpi.is-hero .ov-kpi-chip.is-down { background: rgba(255,168,145,.20); color: #ffd6c9; }
/* Selo de ícone da faixa de KPIs. A cor não é decoração rotativa: cada uma
   é o token que o produto já usa pro assunto do número — saffron pra ritmo,
   verde pro que está no ar (mesma tinta do badge "ativo" e da rampa de
   status), terracota pro vídeo, que é o que o plano cobra. No card ameixa o
   selo vira branco translúcido, porque ali qualquer tinta clara brigaria
   com o brilho de saffron do fundo. */
.ov-kpi-badge {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 12px;
  border-radius: 12px;
  background: var(--secondary-light);
  color: var(--secondary-dark);
  flex: none;
}
.ov-kpi-badge svg { width: 19px; height: 19px; }
.ov-kpi-badge.is-fresh { background: var(--fresh-light); color: var(--fresh-dark); }
.ov-kpi-badge.is-video { background: var(--conversion-light); color: var(--conversion-dark); }
.ov-kpi.is-hero .ov-kpi-badge { background: rgba(255,255,255,.16); color: #fff; }

.ov-kpi-label { font-size: 12.5px; color: var(--muted); font-weight: 600; letter-spacing: 0.02em; }
.ov-kpi-value {
  font-family: var(--font-display);
  /* o número é a figura da tela: grande o bastante pra ser lido de longe */
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.ov-kpi-chip {
  font-size: 12px;
  color: var(--muted);
  background: var(--surface-alt);
  /* 12px, não 999px: numa linha o raio ainda cobre a altura inteira e o
     recorte continua sendo uma pílula, mas quando o texto quebra — e quebra,
     "10 inclusos no plano Crescimento, excedente cobrado" ocupa quatro
     linhas — o raio infinito virava uma elipse. */
  border-radius: 12px;
  padding: 3px 10px;
  align-self: flex-start;
  margin-top: 4px;
  /* o recorte é uma frase curta, mas nome de plano pode alongar: quebra
     em vez de esticar o card e desalinhar a faixa */
  max-width: 100%;
}

/* Selo de variação. Verde/vermelho aqui são status (subiu/caiu), não
   série: por isso vêm com a seta ao lado, nunca só a cor — quem não
   distingue as duas continua lendo o sinal e a porcentagem. */
.ov-kpi-chip.is-up { background: var(--fresh-light); color: var(--fresh-dark); }
.ov-kpi-chip.is-down { background: var(--conversion-light); color: var(--conversion-dark); }

/* ----- histograma por hora ----- */
.ov-hours {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 150px;
  margin-bottom: 14px;
}
.ov-hour { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; min-width: 0; }
.ov-hour-bar {
  width: 100%;
  /* ponta arredondada, base reta: o dado cresce de uma linha só */
  border-radius: 4px 4px 0 0;
  background: var(--gray-light);
  margin-top: auto;
  transition: background .15s ease;
}
/* ênfase: a hora de pico é a história, as outras são contexto */
.ov-hour-bar.is-peak { background: var(--conversion); }
.ov-hour:hover .ov-hour-bar { background: var(--secondary); }
.ov-hour-label { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; height: 13px; }

.ov-insight {
  margin: 0;
  padding: 12px 14px;
  background: var(--surface-alt);
  border-radius: 12px;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.5;
}
.ov-insight strong { color: var(--ink); }

/* ----- o que falta ----- */
.ov-health { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
.ov-health-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ov-health-label { font-size: 13.5px; }
.ov-health-label strong { font-size: 15px; font-family: var(--font-display); }
.ov-health-count { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ov-health-track { height: 6px; background: var(--surface-alt); border-radius: 999px; overflow: hidden; margin: 6px 0 5px; }
.ov-health-fill { height: 100%; background: var(--conversion); border-radius: 999px; }
.ov-health-hint { font-size: 12px; color: var(--muted); line-height: 1.45; }
.ov-health-item.is-done .ov-health-label { color: var(--muted); }
.ov-health-check { color: var(--secondary-dark); font-weight: 700; }

/* ----- grade de cards ----- */
.ov-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.ov-card {
  position: relative;
  background: var(--card);
  /* Borda de 1px cheia desenhava uma caixa; sombra quente e uma borda
     quase invisível fazem o card assentar sobre o fundo em vez de ser
     recortado nele. A sombra puxa pro ameixa, não pro cinza: sombra
     cinza sobre fundo creme suja. */
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  border-radius: 22px;
  padding: 20px 22px 22px;
  min-width: 0;
  box-shadow: 0 1px 2px rgba(59,31,59,.04), 0 8px 24px -12px rgba(59,31,59,.10);
  transition: box-shadow .25s ease, transform .25s ease;
}
/* o card responde ao ponteiro: sobe 2px e a sombra abre */
.ov-card:hover {
  box-shadow: 0 2px 4px rgba(59,31,59,.05), 0 16px 36px -14px rgba(59,31,59,.18);
  transform: translateY(-2px);
}
/* filete de cor no topo do card: dá identidade sem pintar a superfície */
.ov-card-head h2 { position: relative; padding-left: 13px; }
.ov-card-head h2::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 15px;
  border-radius: 999px;
  background: var(--secondary);
}
.ov-card-wide { grid-column: span 2; }
.ov-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.ov-card-head h2 { margin: 0; font-size: 17px; }
.ov-card-note { font-size: 12.5px; color: var(--muted); text-align: right; }
.ov-card-link { font-size: 13px; font-weight: 600; color: var(--primary); text-decoration: none; white-space: nowrap; }
.ov-card-link:hover { text-decoration: underline; }

/* ----- gráfico de linha ----- */
.ov-chart-wrap { position: relative; }
.ov-chart { display: block; width: 100%; height: auto; overflow: visible; }
/* hairline, sólida e recessiva: a grade não disputa com o dado */
.ov-grid-line { stroke: var(--border); stroke-width: 1; opacity: .55; }
.ov-axis-y, .ov-axis-x { fill: var(--muted); font-size: 11px; font-family: var(--font-body); }
.ov-area { fill: var(--conversion); opacity: .10; }
.ov-line { fill: none; stroke: var(--conversion); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
/* anel na cor da superfície pro ponto continuar legível sobre o traço */
.ov-dot { fill: var(--conversion); stroke: var(--card); stroke-width: 2; }
.ov-point-label {
  fill: var(--ink);
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-body);
}
.ov-hits rect { fill: transparent; cursor: crosshair; }
.ov-crosshair, .ov-cursor { opacity: 0; transition: opacity .12s ease; pointer-events: none; }
.ov-chart-wrap.is-hovering .ov-crosshair, .ov-chart-wrap.is-hovering .ov-cursor { opacity: 1; }
.ov-crosshair { stroke: var(--muted); stroke-width: 1; }
.ov-cursor { fill: var(--conversion); stroke: var(--card); stroke-width: 2; }

.ov-tooltip {
  position: absolute;
  transform: translate(-50%, calc(-100% - 14px));
  background: var(--primary);
  color: #fff;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--shadow-md);
  z-index: 3;
}
.ov-tooltip[hidden] { display: none; }
.ov-tooltip strong { display: block; font-size: 14px; }
.ov-tooltip span { color: rgba(255,255,255,.7); }

/* ----- medidores (uma classe por linha, mesma cor) ----- */
.ov-meter { margin-bottom: 18px; }
.ov-meter:last-child { margin-bottom: 0; }
.ov-meter-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.ov-meter-head span { font-size: 14px; font-weight: 600; }
.ov-meter-head strong { font-family: var(--font-display); font-size: 18px; }
.ov-meter-track { height: 8px; background: var(--surface-alt); border-radius: 999px; overflow: hidden; }
.ov-meter-fill { height: 100%; background: var(--conversion); border-radius: 999px; }
.ov-meter-note { display: block; font-size: 12px; color: var(--muted); margin-top: 5px; }

/* ----- barras horizontais do ranking ----- */
.ov-bars { display: flex; flex-direction: column; gap: 12px; }
.ov-bar-row { display: grid; grid-template-columns: minmax(0, 150px) 1fr 4ch; align-items: center; gap: 12px; }
.ov-bar-name {
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ov-bar-track { display: block; background: var(--surface-alt); border-radius: 4px; }
.ov-bar-fill {
  display: block;
  /* barra fina com a ponta arredondada e a base reta, como manda a régua
     de marcas: o dado cresce a partir de uma linha só */
  height: 16px;
  background: var(--conversion);
  border-radius: 0 4px 4px 0;
  min-width: 3px;
}
.ov-bar-value { text-align: right; font-size: 13.5px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
/* ênfase: o dia mais forte é a história, os outros seis são contexto */
.ov-bar-fill.is-peak { background: var(--conversion); }
.ov-bar-fill.is-muted { background: color-mix(in srgb, var(--conversion) 32%, var(--gray-light)); }

/* texto de apoio no topo de um card, antes da lista */
.ov-card-intro { margin: -6px 0 14px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }

.ov-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.ov-list li {
  font-size: 13.5px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface-alt);
}

/* barra dentro de célula de tabela: compara a linha com a maior sem
   precisar de uma coluna de gráfico separada */
.ov-inline-bar {
  display: inline-block;
  vertical-align: middle;
  width: 110px;
  height: 8px;
  border-radius: 999px;
  background: var(--surface-alt);
  overflow: hidden;
  margin-right: 10px;
}
.ov-inline-bar-fill { display: block; height: 100%; background: var(--conversion); border-radius: 999px; }
.ov-inline-bar-value { font-size: 12.5px; color: var(--muted); white-space: nowrap; }

/* ----- composição do catálogo: rampa de uma matiz, ordenada ----- */
.ov-stack { display: flex; gap: 2px; height: 14px; margin-bottom: 16px; }
.ov-stack-seg { display: block; height: 100%; min-width: 3px; }
.ov-stack-seg:first-child { border-radius: 4px 0 0 4px; }
.ov-stack-seg:last-child { border-radius: 0 4px 4px 0; }
.ov-stack-seg:only-child { border-radius: 4px; }
/* escuro→claro por quanto o prato aparece pro cliente:
   ativo (aparece) → esgotado (aparece marcado) → rascunho → inativo */
.ov-status-ativo { background: var(--fresh); }
.ov-status-esgotado { background: #6d5170; }
.ov-status-rascunho { background: #a08fa4; }
.ov-status-inativo { background: #d3c9d6; }

.ov-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ov-legend li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; }
.ov-legend-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.ov-legend-label { color: var(--muted); }
.ov-legend-value { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

.ov-empty {
  padding: 18px 0 6px;
  color: var(--muted);
  font-size: 14px;
}
.ov-empty p { margin: 0 0 6px; }
.ov-empty-hint { font-size: 13px; }
.ov-empty .button-link { margin-top: 8px; }

@media (max-width: 900px) {
  .ov-grid { grid-template-columns: minmax(0, 1fr); }
  .ov-card-wide { grid-column: auto; }
  .ov-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ov-head-actions { width: 100%; justify-content: space-between; }
  .ov-bar-row { grid-template-columns: minmax(0, 110px) 1fr 4ch; gap: 9px; }
}

/* ===================================================================
   LANDING PAGE (marketing, sem login)
   Redesign do handoff design_handoff_landing/.
   Prefixo lp- em tudo pra não colidir com o painel nem com a galeria.
   =================================================================== */

.landing-page {
  background: var(--bg);
  color: var(--ink);
}
/* Archivo fica escopado à landing de propósito: o resto do produto
   (painel, galeria, cadastro) não foi redesenhado, e trocar
   --font-display global mudaria o título de 28 telas de uma vez.

   :where() zera a especificidade dos seletores de elemento, deixando a
   regra em (0,1,0). Sem isso ".landing-page h1" (0,1,1) venceria
   ".lp-hero-title" (0,1,0) e o título do hero ficaria com o line-height
   e o letter-spacing errados. É o padrão de estilo-base: define o piso,
   nunca ganha do componente. */
.landing-page :where(h1, h2, h3) {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 0.95;
}

/* Nada de regra genérica de cor pra <a> aqui. O protótipo tinha uma, mas lá
   tudo era estilo inline, que ganha de qualquer seletor. Em classe, um
   ".landing-page a" (0,1,1) venceria todo ".lp-btn-*" (0,1,0) e pintaria o
   texto de cada botão da página. Todo link daqui é componente e traz a
   própria cor. */

.lp-container { max-width: 1180px; margin: 0 auto; padding: 104px 28px; }

/* ----- Barra de progresso do scroll ----- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--conversion);
  transform-origin: 0 50%;
  z-index: 60;
  animation: lpBarGrow linear both;
  animation-timeline: scroll(root);
}

/* ----- Header ----- */
.lp-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(248, 243, 234, .86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.lp-header-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 28px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.lp-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  flex-shrink: 0;
}
.lp-brand svg { color: var(--primary); flex-shrink: 0; }
.lp-brand span { font-size: 19px; }
.lp-nav { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.lp-nav a {
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.lp-nav a:hover { color: var(--conversion); }
.lp-header-actions { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.lp-login { color: var(--primary); text-decoration: none; font-weight: 700; font-size: 14px; }
.lp-login:hover { text-decoration: underline; }

/* ----- Botões ----- */
.lp-btn {
  display: inline-block;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  padding: 15px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease, transform .16s var(--ease-out);
}
.lp-btn:active { transform: scale(.97); }
.lp-btn-sm { font-size: 14px; padding: 11px 20px; }
.lp-btn-lg { padding: 16px 30px; }
.lp-btn-solid { background: var(--conversion); color: #fff; box-shadow: var(--shadow-sm); }
.lp-btn-solid:hover { background: var(--conversion-hover); color: #fff; box-shadow: 0 4px 20px rgba(59, 31, 59, .18); }
.lp-btn-ghost { background: transparent; color: #fffdf8; border-color: rgba(255, 253, 248, .32); }
.lp-btn-ghost:hover { background: rgba(255, 253, 248, .08); color: #fffdf8; }
.lp-btn-plum { background: var(--primary); color: #fff; }
.lp-btn-plum:hover { background: var(--primary-hover); color: #fff; }
.lp-btn-outline { background: transparent; color: var(--primary); border-color: var(--primary); }
.lp-btn-outline:hover { background: var(--secondary-light); color: var(--primary); }

/* ----- Eyebrows e pills ----- */
.lp-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.lp-eyebrow-pill {
  color: var(--secondary);
  padding: 6px 14px;
  border: 1px solid rgba(244, 163, 64, .4);
  border-radius: 999px;
  margin-bottom: 0;
}
.lp-eyebrow-warm { color: var(--conversion-dark); }
.lp-eyebrow-gold { color: var(--secondary); }
.lp-eyebrow-sand { color: var(--secondary-light); }

.lp-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 20px;
  margin-bottom: 18px;
}
.lp-pill-mute { color: var(--muted); background: var(--gray-light); }
.lp-pill-hot { color: #fff; background: var(--conversion); }

/* ----- Cabeçalho de seção ----- */
.lp-section-head { max-width: 700px; margin: 0 auto 52px; text-align: center; }
.lp-section-head h2 {
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 0.94;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.lp-section-head p { margin: 16px 0 0; color: var(--muted); font-size: 16.5px; line-height: 1.6; }

/* ===================== HERO ===================== */
.lp-hero {
  position: relative;
  overflow: hidden;
  background: var(--primary);
  color: #fffdf8;
}
.lp-hero-orb {
  position: absolute;
  top: -160px;
  right: -120px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 163, 64, .28), rgba(244, 163, 64, 0) 68%);
  animation: lpDriftDown linear both;
  animation-timeline: view();
  animation-range: cover 0% cover 100%;
}
.lp-hero-inner {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 92px 28px 104px;
  display: flex;
  gap: 56px;
  align-items: center;
  flex-wrap: wrap;
}
.lp-hero-copy { flex: 1 1 460px; min-width: 300px; }
.lp-hero-title {
  font-size: clamp(46px, 6.6vw, 84px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  margin: 22px 0 0;
  text-wrap: balance;
  max-width: 15ch;
}
.lp-hero-lead {
  color: rgba(255, 253, 248, .72);
  font-size: 18px;
  line-height: 1.6;
  max-width: 44ch;
  margin: 24px 0 34px;
}
.lp-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.lp-guarantees {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  margin: 34px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid rgba(255, 253, 248, .16);
}
.lp-guarantees li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 253, 248, .74);
}
.lp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--secondary); flex-shrink: 0; }

/* ----- Mockup do celular ----- */
.lp-hero-phone-col {
  flex: 1 1 340px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lp-phone-float {
  animation: lpFloatUp linear both;
  animation-timeline: view();
  animation-range: cover 0% cover 100%;
}
.lp-phone {
  display: block;
  position: relative;
  width: 288px;
  padding: 12px;
  background: var(--ink);
  border-radius: 42px;
  box-shadow: 0 34px 70px rgba(0, 0, 0, .42);
  text-decoration: none;
}
.lp-phone-badge {
  position: absolute;
  left: 50%;
  top: -18px;
  transform: translateX(-50%);
  background: var(--secondary);
  color: var(--primary);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 7px 14px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  z-index: 2;
}
.lp-phone-screen {
  position: relative;
  border-radius: 32px;
  overflow: hidden;
  background: var(--bg);
}
.lp-phone-top { background: var(--primary); color: #fff; padding: 26px 18px 18px; }
.lp-phone-top svg { color: var(--secondary); }
.lp-phone-top strong { display: block; font-size: 15px; margin-top: 4px; }
.lp-phone-top span { display: block; font-size: 10.5px; opacity: .72; margin-top: 2px; }

.lp-phone-list { padding: 16px 14px; animation: lpDemoScroll 12s ease-in-out infinite; }
.lp-phone-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px 8px 12px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}
.lp-phone-card-media {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: var(--gray-light);
  height: 132px;
  margin-bottom: 9px;
  line-height: 0;
}
.lp-phone-card-media img, .lp-phone-card-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-phone-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(30, 27, 29, .58);
  color: #fff;
  backdrop-filter: blur(2px);
}
.lp-phone-card strong { display: block; font-size: 13.5px; padding: 0 4px; line-height: 1.25; color: var(--ink); }
.lp-phone-desc { display: block; font-size: 10px; color: var(--muted); padding: 0 4px; margin-top: 2px; }
.lp-phone-price { display: block; font-size: 13px; font-weight: 800; color: var(--primary); padding: 0 4px; margin-top: 5px; }
.lp-phone-section {
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}
.lp-phone-row {
  position: relative;
  display: flex;
  gap: 11px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px;
  margin-bottom: 9px;
  box-shadow: var(--shadow-sm);
}
.lp-phone-row:last-child { margin-bottom: 0; }
.lp-phone-thumb { position: relative; flex-shrink: 0; }
.lp-phone-thumb img {
  display: block;
  width: 58px;
  height: 58px;
  border-radius: 9px;
  background: var(--gray-light);
  object-fit: cover;
}
.lp-phone-tag {
  position: absolute;
  left: 3px;
  bottom: 3px;
  font-size: 8px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 20px;
  background: rgba(30, 27, 29, .78);
  color: #fff;
  white-space: nowrap;
}
.lp-phone-row-body { min-width: 0; }
.lp-phone-row-body strong { display: block; font-size: 12.5px; line-height: 1.25; color: var(--ink); }
.lp-phone-row-body span { font-size: 12px; font-weight: 700; color: var(--primary); }

/* dedo e halo do toque simulado */
.lp-demo-finger {
  position: absolute;
  right: 32px;
  top: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0;
  border-radius: 50%;
  background: var(--conversion);
  border: 2px solid var(--card);
  box-shadow: 0 4px 10px rgba(30, 27, 29, .28);
  animation: lpDemoTap 12s ease-out infinite;
}
.lp-demo-ripple {
  position: absolute;
  right: 26px;
  top: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0;
  border-radius: 50%;
  background: rgba(216, 92, 65, .28);
  animation: lpDemoRipple 12s ease-out infinite;
}

/* página do prato que sobe cobrindo a tela */
.lp-phone-detail {
  position: absolute;
  inset: 0;
  background: var(--bg);
  animation: lpDemoOpen 12s ease-in-out infinite;
}
.lp-phone-detail-top {
  background: var(--primary);
  color: #fff;
  padding: 22px 16px 14px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.lp-phone-detail-top span { font-size: 15px; line-height: 1; }
.lp-phone-detail-top strong { font-size: 12.5px; font-weight: 700; }
.lp-phone-detail-body { padding: 14px; }
.lp-phone-detail-media {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: var(--gray-light);
  height: 178px;
  line-height: 0;
}
.lp-phone-detail-media img, .lp-phone-detail-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-demo-zoom { animation: lpDemoZoom 12s ease-out infinite; }
.lp-demo-play {
  width: 44px;
  height: 44px;
  animation: lpDemoPlay 12s ease-out infinite;
}
.lp-demo-bar {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .35);
  overflow: hidden;
}
.lp-demo-bar-fill {
  display: block;
  height: 100%;
  background: var(--secondary);
  transform-origin: 0 50%;
  animation: lpDemoProgress 12s linear infinite;
}
.lp-phone-cat {
  display: inline-block;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--gray-light);
  padding: 3px 8px;
  border-radius: 20px;
  margin-top: 12px;
}
.lp-phone-detail-name { display: block; font-size: 16px; margin-top: 7px; color: var(--ink); }
.lp-phone-detail-price { display: block; font-size: 15px; font-weight: 800; color: var(--primary); margin-top: 6px; }
.lp-phone-detail-desc { display: block; font-size: 10.5px; color: var(--muted); margin-top: 6px; line-height: 1.45; }
.lp-phone-detail-back { display: block; font-size: 10.5px; font-weight: 700; color: var(--primary); margin-top: 18px; }
.lp-phone-detail-foot { display: block; text-align: center; font-size: 9px; color: var(--muted); margin-top: 22px; }
.lp-phone-caption {
  margin: 26px 0 0;
  max-width: 30ch;
  text-align: center;
  font-size: 13px;
  color: rgba(255, 253, 248, .6);
  line-height: 1.5;
}

/* ===================== O PROBLEMA ===================== */
.lp-problem {
  background: var(--secondary-light);
  border-bottom: 1px solid var(--border);
  /* o card da direita entra deslizando 40px de fora; sem o clip, até ele
     chegar a página ganha rolagem lateral no celular */
  overflow-x: clip;
}
.lp-compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
  align-items: start;
}
.lp-compare-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px;
}
.lp-compare-card-on {
  border-color: var(--conversion);
  box-shadow: 0 24px 54px rgba(59, 31, 59, .12);
}
.lp-compare-dish {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 10px 16px;
}
.lp-compare-dish-plain { background: var(--bg); padding: 18px; }
.lp-compare-dish strong { display: block; font-size: 18px; padding: 0 4px; }
.lp-compare-desc { display: block; font-size: 13.5px; color: var(--muted); margin-top: 5px; padding: 0 4px; line-height: 1.5; }
.lp-compare-price { display: block; font-size: 16px; font-weight: 800; color: var(--primary); margin-top: 10px; padding: 0 4px; }
.lp-compare-media {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: var(--gray-light);
  height: 200px;
  margin-bottom: 12px;
  line-height: 0;
}
.lp-compare-media img, .lp-compare-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-compare-play { width: 46px; height: 46px; }
.lp-compare-note { font-size: 14.5px; color: var(--muted); line-height: 1.65; margin: 18px 0 0; }
.lp-compare-note strong { color: var(--ink); }

/* ===================== DEMONSTRAÇÃO ===================== */
.lp-demo { background: var(--conversion); color: #fffdf8; }
.lp-demo .lp-section-head { max-width: 760px; margin-bottom: 40px; }
.lp-demo .lp-section-head p { color: rgba(255, 253, 248, .82); }
.lp-demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px;
  margin-bottom: 34px;
}
.lp-demo-item { text-decoration: none; color: inherit; }
.lp-demo-item:hover { color: inherit; }
.lp-demo-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  background: var(--conversion-hover);
  transition: transform .4s var(--ease-out), box-shadow .4s ease;
}
.lp-demo-media img, .lp-demo-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-demo-item:hover .lp-demo-media {
  transform: scale(1.04) translateY(-6px);
  box-shadow: 0 22px 44px rgba(30, 27, 29, .28);
}
.lp-demo-cat {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--secondary-light);
  margin: 14px 0 5px;
}
.lp-demo-item strong { display: block; font-size: 15px; }
.lp-demo-price { display: block; font-size: 14px; font-weight: 700; color: #fffdf8; margin-top: 3px; }
.lp-demo-cta { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.lp-demo-note { color: var(--secondary-light); font-size: 13px; }

/* ===================== COMO FUNCIONA ===================== */
.lp-steps { background: var(--primary); color: #fffdf8; }
.lp-steps .lp-section-head { margin-bottom: 60px; }
.lp-steps .lp-section-head p { color: rgba(255, 253, 248, .66); }
.lp-timeline { position: relative; max-width: 760px; margin: 0 auto; display: grid; gap: 44px; }
.lp-timeline-line {
  position: absolute;
  left: 23px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: rgba(244, 163, 64, .5);
  transform-origin: 50% 0;
  animation: lpDrawLine linear both;
  animation-timeline: view();
  animation-range: entry 20% cover 78%;
}
.lp-step { position: relative; display: flex; gap: 26px; align-items: flex-start; }
.lp-step-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--secondary);
  color: var(--primary);
  font-weight: 800;
  font-size: 18px;
}
.lp-step h3 { margin: 10px 0 8px; font-size: 25px; letter-spacing: -0.005em; }
.lp-step p { margin: 0; color: rgba(255, 253, 248, .66); font-size: 15.5px; line-height: 1.65; }

/* ===================== RECURSOS ===================== */
.lp-features { max-width: 1180px; margin: 0 auto; padding: 104px 28px; }
.lp-features .lp-section-head { max-width: 720px; margin-bottom: 48px; }
.lp-core {
  background: var(--primary);
  color: #fffdf8;
  border-radius: 22px;
  padding: 44px 38px;
  margin-bottom: 24px;
  box-shadow: 0 24px 54px rgba(59, 31, 59, .18);
}
.lp-core h3 { margin: 0 0 12px; font-size: clamp(27px, 3vw, 38px); letter-spacing: -0.01em; }
.lp-core p { margin: 0; max-width: 60ch; font-size: 16px; line-height: 1.65; color: rgba(255, 253, 248, .82); }
.lp-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 24px;
}
.lp-feature-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px;
}
.lp-feature-card h3 { margin: 0 0 18px; font-size: 21px; }
.lp-feature-note { margin: 16px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.lp-feature-note strong { color: var(--ink); }

.lp-check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lp-check-list li {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.5;
}
.lp-check-list li > span:first-child { color: var(--secondary-dark); font-weight: 800; flex-shrink: 0; }

/* ===================== PLANOS ===================== */
.lp-plans {
  background: var(--secondary-light);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.lp-plans .lp-section-head { margin-bottom: 48px; }
.lp-plans .lp-section-head strong { color: var(--ink); }
.lp-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  perspective: 1000px;
}
.lp-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 30px 24px 24px;
  /* sem transition aqui de propósito: o rAF de plan-tilt.js escreve
     transform e box-shadow todo frame, e uma transition brigaria com ele */
  will-change: transform;
}
.lp-plan:hover { border-color: var(--secondary); }
.lp-plan-on { border-color: var(--primary); box-shadow: 0 24px 54px rgba(59, 31, 59, .14); }
.lp-plan-on:hover { border-color: var(--primary); }
.lp-plan-badge {
  position: absolute;
  top: -12px;
  left: 24px;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 5px 12px;
  border-radius: 20px;
}
.lp-plan h3 { margin: 0 0 12px; font-size: 23px; }
.lp-plan-videos { display: flex; align-items: baseline; gap: 7px; margin: 0 0 4px; }
.lp-plan-num { font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.lp-plan-videos-label { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.lp-plan-price { font-size: 20px; font-weight: 700; color: var(--muted); line-height: 1.1; margin: 0 0 20px; }
/* min-height reserva a linha do "a partir de" nos planos que não têm:
   sem isso, o card do Personalizado desalinha dos outros três */
.lp-plan-price-prefix {
  display: block;
  min-height: 1.35em;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
}
.lp-plan-price-period { font-size: 13px; font-weight: 600; }
.lp-plan-features { flex: 1; margin: 0 0 22px; align-content: start; gap: 9px; }
.lp-plan-features li { gap: 9px; }
.lp-plan-cta { display: block; text-align: center; font-size: 14px; padding: 13px 18px; }

/* O bloco do vídeo extra fica entre a grade e a tabela: é a resposta pra
   quem acabou de olhar os cards e não se viu em nenhum deles. */
.lp-plan-extra {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 380px);
  gap: 28px;
  align-items: center;
  margin-top: 32px;
  padding: 26px 28px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
}
.lp-plan-extra h3 { margin: 0 0 8px; font-size: 20px; }
.lp-plan-extra-text p { margin: 0; color: var(--muted); font-size: 14.5px; }
.lp-plan-extra-text strong { color: var(--ink); }
.lp-plan-extra-math {
  background: var(--secondary-light);
  border-radius: 14px;
  padding: 16px 18px;
  font-size: 14px;
}
.lp-plan-extra-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 7px 0;
  color: var(--muted);
}
.lp-plan-extra-row strong { color: var(--ink); white-space: nowrap; }
.lp-plan-extra-total {
  margin-top: 3px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  color: var(--ink);
  font-weight: 600;
}
.lp-plan-extra-total strong { color: var(--primary); font-size: 17px; }
@media (max-width: 720px) {
  .lp-plan-extra { grid-template-columns: 1fr; gap: 20px; padding: 22px 20px; }
}

.lp-plan-table-wrap { margin-top: 52px; }
.lp-plan-table-title { font-size: 24px; text-align: center; margin: 0 0 6px; }
.lp-plan-table-sub { text-align: center; color: var(--muted); font-size: 13px; margin: 0 0 18px; }
.lp-plan-table-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 20px 8px;
  margin: 0 auto;
  max-width: 800px;
  overflow-x: auto;
}
.lp-plan-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.lp-plan-table th[scope="col"] {
  text-align: center;
  font-size: 13px;
  padding: 16px 12px 10px;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
/* (0,2,2) pra vencer o th[scope="col"] (0,2,1) acima, que centraliza */
.lp-plan-table thead th[scope="col"]:first-child {
  text-align: left;
  color: var(--muted);
  font-weight: 600;
}
.lp-plan-table th[scope="row"] {
  text-align: left;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--muted);
  padding: 12px 14px 12px 0;
  border-bottom: 1px solid var(--border);
}
.lp-plan-table td {
  text-align: center;
  padding: 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.lp-plan-table tbody tr:last-child th,
.lp-plan-table tbody tr:last-child td { border-bottom: none; }
.lp-col-on { background: var(--secondary-light); }
/* No celular as quatro colunas não cabem com folga de desktop: a tabela
   rolava pro lado e a coluna Escala sumia sem ninguém perceber que havia
   mais. Menos respiro e o preço quebrando em duas linhas cabem em 360px. */
@media (max-width: 600px) {
  .lp-plan-table-box { padding: 2px 10px 6px; border-radius: 16px; }
  .lp-plan-table { font-size: 13px; table-layout: fixed; }
  .lp-plan-table th[scope="col"] { font-size: 11.5px; padding: 14px 2px 8px; letter-spacing: -.01em; }
  .lp-plan-table thead th[scope="col"]:first-child { width: 25%; }
  .lp-plan-table th[scope="row"] { font-size: 12px; padding: 10px 6px 10px 0; line-height: 1.3; }
  .lp-plan-table td { padding: 10px 4px; white-space: normal; line-height: 1.3; }
}
.lp-plan-table thead .lp-col-on { color: var(--secondary-dark); }

/* ===================== DÚVIDAS ===================== */
.lp-faq { background: var(--bg); }
.lp-faq .lp-container { padding-bottom: 90px; }
.lp-faq .lp-section-head { margin-bottom: 40px; }
.lp-faq-list { max-width: 760px; margin: 0 auto; }
.lp-faq-list details { border-bottom: 1px solid rgba(59, 31, 59, .22); }
.lp-faq-list summary {
  position: relative;
  cursor: pointer;
  padding: 20px 40px 20px 0;
  font-weight: 700;
  font-size: 16px;
  list-style: none;
}
.lp-faq-list summary::-webkit-details-marker { display: none; }
/* chevron em CSS puro, sem biblioteca de ícones */
.lp-faq-list summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 26px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.lp-faq-list details[open] summary::after { transform: rotate(-135deg); }
/* overflow hidden é o que permite recortar a altura durante a abertura
   (faq-toggle.js). Sem JS o bloco fica com altura automática e nada muda. */
.lp-faq-body { overflow: hidden; }
.lp-faq-list p { margin: 0 0 22px; color: #33272d; font-size: 14.5px; line-height: 1.65; max-width: 62ch; }

/* ===================== CTA FINAL + RODAPÉ ===================== */
/* Uma passagem de cor contínua entre <section> e <footer>: o padding
   inferior grande da seção é o que dá espaço pra cor virar. */
.lp-cta {
  position: relative;
  overflow: hidden;
  color: #fffdf8;
  text-align: center;
  /* Desce da ameixa da marca pra uma ameixa mais funda, que é onde o
     rodapé começa. A rampa antiga clareava até malva, e o rodapé herdava
     um lilás lavado com texto escuro por cima. */
  background: linear-gradient(180deg, #3b1f3b 0%, #3b1f3b 55%, #2a162a 100%);
}
.lp-cta-inner { position: relative; max-width: 760px; margin: 0 auto; padding: 110px 28px 120px; }
.lp-cta h2 {
  font-size: clamp(36px, 5vw, 64px);
  line-height: 0.94;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  text-wrap: balance;
}
.lp-cta p { color: rgba(255, 253, 248, .78); font-size: 16.5px; line-height: 1.6; margin: 0 0 32px; }

.lp-footer {
  /* Começa exatamente onde o CTA termina (#2a162a), senão aparece uma
     emenda entre <section> e <footer>. Texto claro a 72%: 9:1 sobre esse
     fundo. */
  background: #2a162a;
  color: rgba(255, 253, 248, .72);
  font-size: 13px;
}
.lp-footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 52px 28px 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 36px 60px;
}
.lp-footer-brand { flex: 1 1 260px; min-width: 220px; }
.lp-footer-brand .lp-brand { color: #fffdf8; }
.lp-footer-brand .lp-brand svg { color: #fffdf8; }
.lp-footer-brand .lp-brand span { font-size: 18px; }
.lp-footer-brand p { margin: 12px 0 0; max-width: 34ch; font-size: 13px; line-height: 1.6; }
.lp-footer h3 {
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #fffdf8;
  margin: 0 0 14px;
}
.lp-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
/* hex opaco, e não rgba: é o creme a 72% já misturado à ameixa, e é a cor
   que o teste de contraste do rodapé lê */
.lp-footer a { color: #c3bcbe; text-decoration: none; transition: color .15s ease; }
.lp-footer a:hover { color: #fffdf8; }
.lp-footer-bottom {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 28px 44px;
  border-top: 1px solid rgba(255, 253, 248, .12);
  font-size: 12px;
}
.lp-footer-bottom p { margin: 0; }

/* ===================== ANIMAÇÕES ===================== */
@keyframes lpRise { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes lpRiseSm { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes lpSlideLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@keyframes lpSlideRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes lpZoomIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes lpPopIn { from { opacity: 0; transform: scale(.9) rotate(-6deg); } to { opacity: 1; transform: none; } }
@keyframes lpDrawLine { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes lpBarGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes lpFloatUp { from { transform: translateY(46px); } to { transform: translateY(-46px); } }
@keyframes lpDriftDown { from { transform: translateY(-30px); } to { transform: translateY(30px); } }

/* Loop de 12s do celular. Os tempos vivem nos keyframes, e não em delays,
   porque é isso que mantém as seis camadas sincronizadas sem JS. */
@keyframes lpDemoScroll { 0%, 10% { transform: translateY(0); } 18%, 80% { transform: translateY(-34px); } 90%, 100% { transform: translateY(0); } }
@keyframes lpDemoTap { 0%, 17% { opacity: 0; transform: scale(.6); } 20% { opacity: 1; transform: scale(1); } 24% { opacity: 1; transform: scale(.72); } 30%, 100% { opacity: 0; transform: scale(1.1); } }
@keyframes lpDemoRipple { 0%, 20% { opacity: .55; transform: scale(.4); } 30%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes lpDemoOpen { 0%, 27% { opacity: 0; transform: translateY(100%); } 34%, 84% { opacity: 1; transform: translateY(0); } 92%, 100% { opacity: 0; transform: translateY(100%); } }
@keyframes lpDemoPlay { 0%, 33% { opacity: 0; transform: translate(-50%, -50%) scale(.8); } 36%, 42% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 47%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); } }
@keyframes lpDemoProgress { 0%, 44% { transform: scaleX(0); } 84%, 100% { transform: scaleX(1); } }
@keyframes lpDemoZoom { 0%, 44% { transform: scale(1); } 84%, 100% { transform: scale(1.14); } }

/* Entradas por scroll. Navegador sem scroll-driven animations ignora a
   animation-timeline e roda a animação uma vez no load — como todo keyframe
   termina em opacity 1, nada fica invisível em nenhum caso. */
.lp-anim-rise,
.lp-anim-riseSm,
.lp-anim-slideLeft,
.lp-anim-slideRight,
.lp-anim-zoomIn,
.lp-anim-popIn {
  animation-fill-mode: both;
  animation-timing-function: linear;
  animation-timeline: view();
}
.lp-anim-rise { animation-name: lpRise; animation-range: entry 0% cover 26%; }
.lp-anim-riseSm { animation-name: lpRiseSm; animation-range: entry 0% cover 18%; }
.lp-anim-slideLeft { animation-name: lpSlideLeft; animation-range: entry 0% cover 30%; }
.lp-anim-slideRight { animation-name: lpSlideRight; animation-range: entry 0% cover 30%; }
.lp-anim-zoomIn { animation-name: lpZoomIn; animation-range: entry 0% cover 32%; }
.lp-anim-popIn { animation-name: lpPopIn; animation-range: entry 0% cover 20%; }

/* escalona a entrada dos itens de lista sem repetir regra por item */
.lp-check-list li.lp-anim-riseSm { animation-range: entry 0% cover 16%; }
.lp-demo-item:nth-child(2) { animation-range: entry 0% cover 26%; }
.lp-demo-item:nth-child(3) { animation-range: entry 0% cover 30%; }
.lp-demo-item:nth-child(4) { animation-range: entry 0% cover 34%; }
.lp-feature-grid > :nth-child(2) { animation-range: entry 0% cover 30%; }
.lp-feature-grid > :nth-child(3) { animation-range: entry 0% cover 34%; }
.lp-faq-list details { animation-range: entry 0% cover 14%; }

@media (max-width: 720px) {
  .lp-container, .lp-features { padding-top: 72px; padding-bottom: 72px; }
  .lp-hero-inner { padding: 64px 28px 76px; }
  .lp-nav { display: none; }
  .lp-cta-inner { padding: 80px 28px 96px; }
  .lp-core { padding: 32px 24px; }
}

/* ----- Navegador sem scroll-driven animations (Safari até a 18.x, Firefox)
   Lá o animation-timeline é descartado como inválido e a animação roda na
   linha do tempo do documento. Como animation-duration fica em 0s com
   fill: both, cada uma pula direto pro último quadro: a barra de progresso
   fica cheia e parada no topo, o celular sobe 46px e o orbe sai do lugar.

   Neutralizar aqui é só metade do trabalho — scroll-anim.js refaz as quatro
   com um listener de scroll, senão o design perde animação em vez de
   degradar. */
@supports not (animation-timeline: view()) {
  /* estas quatro passam a ser dirigidas por scroll-anim.js. O animation:
     none tira o último quadro cravado; a barra ainda ganha scaleX(0) pra
     nascer vazia caso o JS não rode, em vez de cheia e parada. */
  .scroll-progress { animation: none; transform: scaleX(0); }
  .lp-hero-orb,
  .lp-phone-float,
  .lp-timeline-line { animation: none; }
  /* as entradas também: senão o fill: both cravaria opacity 1 e venceria
     o opacity 0 do estado inicial que o JS precisa aplicar abaixo */
  .lp-anim-rise,
  .lp-anim-riseSm,
  .lp-anim-slideLeft,
  .lp-anim-slideRight,
  .lp-anim-zoomIn,
  .lp-anim-popIn { animation: none; }
}

/* Entradas reproduzidas por IntersectionObserver (scroll-anim.js).
   A classe lp-io só entra quando o JS confirma que vai mesmo observar, e
   é ela que autoriza o opacity 0: sem JS, nada fica invisível. */
.lp-io .lp-anim-rise,
.lp-io .lp-anim-riseSm,
.lp-io .lp-anim-slideLeft,
.lp-io .lp-anim-slideRight,
.lp-io .lp-anim-zoomIn,
.lp-io .lp-anim-popIn { opacity: 0; }

.lp-io .lp-anim-rise.lp-in { animation: lpRise .62s var(--ease-out) both; }
.lp-io .lp-anim-riseSm.lp-in { animation: lpRiseSm .5s var(--ease-out) both; }
.lp-io .lp-anim-slideLeft.lp-in { animation: lpSlideLeft .66s var(--ease-out) both; }
.lp-io .lp-anim-slideRight.lp-in { animation: lpSlideRight .66s var(--ease-out) both; }
.lp-io .lp-anim-zoomIn.lp-in { animation: lpZoomIn .6s var(--ease-out) both; }
.lp-io .lp-anim-popIn.lp-in { animation: lpPopIn .5s var(--ease-out) both; }

/* escalonamento dentro de cada grupo, no lugar do animation-range */
.lp-io .lp-check-list li.lp-anim-riseSm:nth-child(2) { animation-delay: .05s; }
.lp-io .lp-check-list li.lp-anim-riseSm:nth-child(3) { animation-delay: .1s; }
.lp-io .lp-check-list li.lp-anim-riseSm:nth-child(4) { animation-delay: .15s; }
.lp-io .lp-check-list li.lp-anim-riseSm:nth-child(5) { animation-delay: .2s; }
.lp-io .lp-check-list li.lp-anim-riseSm:nth-child(6) { animation-delay: .25s; }
.lp-io .lp-check-list li.lp-anim-riseSm:nth-child(7) { animation-delay: .3s; }
.lp-io .lp-check-list li.lp-anim-riseSm:nth-child(8) { animation-delay: .35s; }
.lp-io .lp-demo-item:nth-child(2).lp-in { animation-delay: .07s; }
.lp-io .lp-demo-item:nth-child(3).lp-in { animation-delay: .14s; }
.lp-io .lp-demo-item:nth-child(4).lp-in { animation-delay: .21s; }

/* Uma única fonte de verdade pra parar tudo: as animações de entrada, o
   loop do celular e a barra de progresso. O rAF dos cards de plano se
   desliga sozinho em plan-tilt.js, que checa a mesma media query. */
@media (prefers-reduced-motion: reduce) {
  .landing-page *,
  .landing-page *::before,
  .landing-page *::after {
    animation: none !important;
  }
  .lp-demo-media,
  .lp-faq-list summary::after { transition: none; }

  /* O gallery-video.js já sai na primeira linha aqui — não há vídeo tocando
     nem entrada escalonada. Estas regras são a rede: se a classe gv-anim
     chegar por qualquer caminho, nenhum prato fica invisível. */
  .gv-anim .gallery-item { opacity: 1; transform: none; }
  .gallery-item,
  .gallery-item-media img,
  .gallery-item-video,
  .video-badge { transition: none; }
  .gallery-item:hover { transform: none; }
  .gallery-item:hover .gallery-item-media img { transform: none; }
}

/* Faixa de lacunas do catálogo: o mesmo dado da visão geral, mas colado na
   lista, que é onde o trabalho de fechar cada lacuna acontece. */
.health-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin: 0 0 20px;
}
/* Eram quatro caixas brancas iguais, e a única diferença entre "está tudo
   certo" e "faltam 2" era a cor de um algarismo de 20px. A faixa inteira
   carrega o estado agora: terracota clara enquanto falta alguma coisa, verde
   quando não falta. É a leitura que se faz de relance, sem contar número —
   e é onde o painel ganha área de cor em vez de mais um branco. */
.health-cell {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 11px 14px;
  background: var(--conversion-light);
  border: 1px solid transparent;
  border-radius: 12px;
  min-width: 0;
}
.health-cell strong { font-family: var(--font-display); font-size: 20px; color: var(--conversion-dark); }
.health-cell span { font-size: 12.5px; color: var(--conversion-dark); opacity: .78; }
.health-cell.is-done { background: var(--fresh-light); }
.health-cell.is-done strong { color: var(--fresh-dark); }
.health-cell.is-done span { color: var(--fresh-dark); }

/* ===================================================================
   MOVIMENTO DO PAINEL

   Tudo aqui é entrada: acontece uma vez, na carga, e termina. Nada fica
   pulsando — um painel que se mexe sozinho enquanto a pessoa lê é ruído,
   não vida. A animação serve pra dizer em que ordem ler a tela: números
   primeiro, depois os cards, e o dado dentro de cada um por último.

   Todas as regras vivem sob prefers-reduced-motion: no-preference. Assim
   o padrão de quem pediu menos movimento não é "desligar depois", é
   nunca ter ligado — e nada depende de um !important pra parar.
   =================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* ---- entrada dos blocos ---- */
  @keyframes appRise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }

  .app-head { animation: appRise .3s var(--ease-out) both; }
  .ov-kpi { animation: appRise .35s var(--ease-out) both; }
  /* o escalonamento é por posição na faixa; com nth-child não preciso
     marcar índice em cada card no template */
  .ov-kpi:nth-child(1) { animation-delay: .02s; }
  .ov-kpi:nth-child(2) { animation-delay: .06s; }
  .ov-kpi:nth-child(3) { animation-delay: .10s; }
  .ov-kpi:nth-child(4) { animation-delay: .14s; }

  .ov-grid > .ov-card { animation: appRise .35s var(--ease-out) both; }
  .ov-grid > .ov-card:nth-child(1) { animation-delay: .16s; }
  .ov-grid > .ov-card:nth-child(2) { animation-delay: .20s; }
  .ov-grid > .ov-card:nth-child(3) { animation-delay: .24s; }
  .ov-grid > .ov-card:nth-child(4) { animation-delay: .28s; }
  .ov-grid > .ov-card:nth-child(n+5) { animation-delay: .32s; }

  /* o hover só existe depois que o card chegou: sem isso, mexer o mouse
     durante a entrada faz o card saltar entre dois transforms */
  .ov-card { animation-fill-mode: both; }

  /* ---- o traço do gráfico se desenha ---- */
  /* pathLength="1" normaliza o comprimento do path: o dash funciona igual
     com 7 ou com 90 pontos, sem precisar medir nada em JS. */
  @keyframes appDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes appFade { from { opacity: 0; } to { opacity: .10; } }

  .ov-line {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: appDraw .7s var(--ease-in-out) .25s both;
  }
  .ov-area { animation: appFade .4s ease .55s both; }
  .ov-dot, .ov-point-label { animation: appFade2 .25s ease .85s both; }
  @keyframes appFade2 { from { opacity: 0; } to { opacity: 1; } }

  /* ---- barras crescem do próprio eixo ---- */
  /* scaleX/scaleY em vez de animar width/height: transform não recalcula
     layout a cada quadro, e a largura final continua sendo a inline do
     template — a animação não precisa saber o valor. */
  @keyframes appGrowX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes appGrowY { from { transform: scaleY(0); } to { transform: scaleY(1); } }

  .ov-bar-fill, .ov-meter-fill, .ov-health-fill, .ov-inline-bar-fill, .ov-stack-seg {
    transform-origin: left center;
    animation: appGrowX .5s var(--ease-out) .2s both;
  }
  .ov-hour-bar {
    transform-origin: bottom center;
    /* atraso pelo índice da hora, travado no fim pra a última coluna não
       esperar dois segundos */
    animation: appGrowY .4s var(--ease-out) both;
    animation-delay: calc(.2s + min(var(--i, 0), 23) * 10ms);
  }

  /* ---- realces de interação ---- */
  .dish-card { transition: box-shadow .22s ease, border-color .22s ease, transform .22s ease; }
  .dish-card:hover { transform: translateY(-3px); }
  .summary-stat, .health-cell { transition: transform .2s ease, box-shadow .2s ease; }
  .summary-stat:hover, .health-cell:hover { transform: translateY(-2px); }
}

/* Indicador do item ativo na lateral: uma barra de saffron colada na
   borda esquerda. Some no celular, onde a lateral é uma faixa horizontal
   e "esquerda" não quer dizer nada. */
.app-nav-item.active { position: relative; }
.app-nav-item.active::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: 0 999px 999px 0;
  background: var(--secondary);
}
@media (max-width: 900px) {
  .app-nav-item.active::before { display: none; }
}

/* ===================================================================
   AS DEMAIS TELAS DO PAINEL na mesma linguagem da visão geral

   Catálogo, Mídia, Unidades, Editar prato, Assinatura e Escanear ainda
   usavam os componentes antigos: borda cheia de 1px, raio menor, sombra
   plana e nenhum movimento. Aqui eles recebem a mesma superfície (sombra
   quente, borda quase invisível, raio de 22px), a mesma reação ao
   ponteiro e a mesma entrada escalonada.

   Uma exceção deliberada: o card escuro continua sendo um por tela. Na
   visão geral é o número principal; aqui nenhum bloco vira ameixa cheia,
   senão a tela ganha dois centros e nenhum deles manda.
   =================================================================== */

/* ----- superfícies ----- */
.dish-card,
.add-dish-card,
.summary-stat,
.health-cell,
.empty-state,
.onboarding-card,
.trial-banner,
.overage-box {
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  border-radius: 22px;
  box-shadow: 0 1px 2px rgba(59,31,59,.04), 0 8px 24px -12px rgba(59,31,59,.10);
}
.dish-card:hover {
  box-shadow: 0 2px 4px rgba(59,31,59,.05), 0 16px 36px -14px rgba(59,31,59,.18);
  border-color: color-mix(in srgb, var(--secondary) 55%, transparent);
}
/* a foto respira dentro do card ao passar o ponteiro, como na galeria */
.dish-card { overflow: hidden; }
.dish-card img:not(.qr) { transition: transform .3s var(--ease-out); }
.dish-card:hover img:not(.qr) { transform: scale(1.03); }

/* O QR é o objeto que o restaurante imprime e leva pra mesa: ganha
   superfície própria, quente, em vez de mais um branco na pilha. */
.hero-card {
  background:
    radial-gradient(ellipse 60% 100% at 100% 0%, rgba(244,163,64,.20) 0%, transparent 62%),
    var(--card);
  border: 1px solid color-mix(in srgb, var(--secondary) 45%, transparent);
  border-radius: 22px;
  box-shadow: 0 1px 2px rgba(59,31,59,.04), 0 12px 32px -14px rgba(109,65,0,.20);
}
.hero-qr img { border-radius: 16px; box-shadow: 0 6px 20px -8px rgba(59,31,59,.28); }

/* O atalho de escanear é ação, não informação: mantém a terracota, que é
   a cor reservada pra isso, e ganha o mesmo raio dos outros blocos. */
.scan-banner {
  border-radius: 22px;
  background:
    radial-gradient(ellipse 50% 130% at 0% 50%, rgba(216,92,65,.14) 0%, transparent 60%),
    var(--conversion-light);
  border-color: color-mix(in srgb, var(--conversion) 55%, transparent);
}
.scan-banner:hover {
  box-shadow: 0 2px 4px rgba(138,52,32,.06), 0 16px 36px -14px rgba(138,52,32,.28);
  border-color: var(--conversion);
}

/* ----- títulos de seção com o mesmo filete dos cards ----- */
.app-content section > h2,
.add-dish-card > h2 {
  position: relative;
  padding-left: 13px;
}
.app-content section > h2::before,
.add-dish-card > h2::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 16px;
  border-radius: 999px;
  background: var(--secondary);
}
/* o título do bloco recolhível fica dentro do <summary>, não em h2 solto */
.add-dish-summary strong { position: relative; }

/* ----- estado vazio com mais ar e menos cara de erro ----- */
.empty-state { background: var(--card); }

/* ----- campos ----- */
/* o halo de foco passa a ter a cor da marca em vez do azul do sistema, e
   o campo sobe um degrau de superfície quando está ativo */
input:focus, textarea:focus, select:focus {
  border-color: var(--secondary);
  box-shadow: 0 0 0 3px var(--secondary-light);
}

@media (prefers-reduced-motion: no-preference) {
  /* entrada dos blocos das telas de trabalho, na mesma curva e na mesma
     ordem de leitura da visão geral */
  .hero-card, .scan-banner, .add-dish-card, .catalog-toolbar,
  .health-strip, .summary-row, .table-scroll, .onboarding-card {
    animation: appRise .35s var(--ease-out) both;
  }
  .hero-card { animation-delay: .02s; }
  .scan-banner { animation-delay: .06s; }
  .summary-row, .health-strip { animation-delay: .06s; }
  .catalog-toolbar { animation-delay: .10s; }
  .add-dish-card { animation-delay: .10s; }
  .table-scroll { animation-delay: .12s; }

  /* a grade de pratos entra em cascata curta: passados os primeiros, o
     resto chega junto — um catálogo de 60 pratos não pode levar cinco
     segundos pra assentar */
  .dish-grid > .dish-card { animation: appRise .35s var(--ease-out) both; }
  .dish-grid > .dish-card:nth-child(1) { animation-delay: .12s; }
  .dish-grid > .dish-card:nth-child(2) { animation-delay: .15s; }
  .dish-grid > .dish-card:nth-child(3) { animation-delay: .18s; }
  .dish-grid > .dish-card:nth-child(4) { animation-delay: .21s; }
  .dish-grid > .dish-card:nth-child(5) { animation-delay: .24s; }
  .dish-grid > .dish-card:nth-child(6) { animation-delay: .27s; }
  .dish-grid > .dish-card:nth-child(n+7) { animation-delay: .30s; }

  /* o filtro esconde com [hidden]/display:none; sem isto o card que volta
     na busca reapareceria com a animação de entrada de novo, piscando */
  .dish-card.hidden-by-filter { animation: none; }

  .scan-choice { transition: border-color .15s ease, background .15s ease, transform .15s ease; }
  .scan-choice:hover { transform: translateY(-2px); }
  .filter-chip { transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease; }
  .filter-chip:hover { transform: translateY(-1px); }
}

/* Cobertura embaixo do número na Biblioteca de Mídia.

   .summary-stat é column-reverse: o eixo corre de baixo pra cima, então
   quem vem primeiro na ordem do flex encosta embaixo. O medidor está
   DEPOIS no HTML, e é o order negativo que o joga pra baixo do número —
   quanto menor o order, mais embaixo. Daí note(-2) < meter(-1) < os dois
   sem order, o que na tela lê, de cima pra baixo:
   rótulo, número, medidor, nota. */
.summary-meter {
  display: block;
  order: -1;
  height: 5px;
  margin-top: 9px;
  border-radius: 999px;
  background: var(--surface-alt);
  overflow: hidden;
}
.summary-meter-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--conversion);
}
.summary-meter-note { order: -2; display: block; font-size: 11.5px; color: var(--muted); margin-top: 5px; }

@media (prefers-reduced-motion: no-preference) {
  .summary-meter-fill { transform-origin: left center; animation: appGrowX .5s var(--ease-out) .15s both; }
}

/* ---------- ESCREVER A DESCRIÇÃO COM IA ---------- */
/* A caixa é visivelmente uma ferramenta, não um campo do formulário: fundo
   próprio e borda tracejada, pra ninguém achar que precisa preencher ali
   pra salvar o prato. */
.ia-box {
  margin-top: 10px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--secondary) 45%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--secondary-light) 45%, transparent);
}
.ia-box[hidden] { display: none; }
.ia-linha { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ia-linha input { flex: 1; min-width: 220px; }
.ia-botao { flex: none; }
.ia-botao:disabled { opacity: .6; cursor: default; }
.ia-nota { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; max-width: 72ch; }

/* O resto da explicação, atrás de um clique. Some o triângulo nativo, que
   destoa do resto: quem marca o estado é a seta do ::after. */
.ia-detalhe { margin-top: 6px; }
.ia-detalhe summary {
  display: inline-block;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--secondary-dark);
  list-style: none;
}
.ia-detalhe summary::-webkit-details-marker { display: none; }
.ia-detalhe summary::after { content: " ↓"; }
.ia-detalhe[open] summary::after { content: " ↑"; }
.ia-detalhe summary:hover { text-decoration: underline; }
.ia-detalhe p { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.55; max-width: 72ch; }
/* O que a IA vai receber neste clique. Muda enquanto a pessoa preenche o
   formulário, então precisa se distinguir da nota fixa acima — que explica a
   regra e nunca muda. Vazia no HTML: quem escreve o texto é o JS. */
.ia-referencias {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  max-width: 72ch;
  color: var(--ink);
  font-weight: 600;
}
.ia-referencias:empty { display: none; }
.ia-erro { margin: 10px 0 0; font-size: 13px; color: var(--conversion-dark); font-weight: 600; }
.ia-erro[hidden] { display: none; }

.ia-sugestoes { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.ia-sugestoes[hidden] { display: none; }
/* cada sugestão é um botão de largura inteira: o alvo de toque é a frase
   toda, não uma caixinha de seleção ao lado dela */
.ia-sugestao {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  box-shadow: none;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.ia-sugestao:hover { border-color: var(--secondary); background: var(--card); }
.ia-sugestao.is-escolhida { border-color: var(--secondary-dark); background: var(--secondary-light); }
.ia-sugestao-texto { display: block; }
.ia-sugestao-angulo {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

/* ===================================================================
   FORMULÁRIO DE PRATO (editar / adicionar)

   A tela de edição era o formulário mais antigo do painel e ficou pra
   trás: campos ocupando a largura inteira do conteúdo, controles de
   arquivo e checkbox crus do navegador, oito campos numa lista sem
   agrupamento, e o bloco de unidades escrito em style="" inline.
   =================================================================== */

/* Coluna estreita. Um campo de texto com 1800px de largura não é um campo,
   é uma faixa: o olho perde o começo da linha ao chegar no fim, e o
   formulário deixa de parecer um formulário. */
.app-content-form { max-width: 880px; }

/* ----- agrupamento ----- */
/* Oito campos numa lista contínua não têm hierarquia. Separados por
   assunto — identificação, preço, texto, disponibilidade, mídia — cada
   grupo vira uma decisão de cada vez. */
.form-group { padding-top: 24px; margin-top: 24px; border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.form-group:first-of-type { padding-top: 0; margin-top: 0; border-top: none; }
.form-group-head { margin-bottom: 16px; }
/* Sem caixa alta: é um <h2>, e no painel título em caixa alta pesa e
   atrapalha a leitura (a regra vale desde a unificação com a landing — a
   conexão é a família e o peso, não a caixa). O filete de saffron dá o
   destaque que a caixa alta daria, e é o mesmo dos títulos de card. */
.form-group-head h2 {
  position: relative;
  margin: 0;
  padding-left: 13px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.form-group-head h2::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 15px;
  border-radius: 999px;
  background: var(--secondary);
}
.form-group-head p { margin: 5px 0 0; font-size: 13px; color: var(--muted); max-width: 62ch; }

/* ----- seleção de arquivo ----- */
/* O controle nativo desenha um botão cinza do sistema seguido de "nenhum
   arquivo selecionado" — a única peça da tela que não parecia do produto.
   ::file-selector-button alcança justamente esse botão. */
input[type="file"] {
  padding: 10px 12px;
  font-size: 13.5px;
  color: var(--muted);
  cursor: pointer;
  background: var(--field);
}
input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 8px 15px;
  border: none;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease;
}
input[type="file"]::file-selector-button:hover { background: var(--primary-hover); }

/* ----- mídia já cadastrada ----- */
/* A miniatura flutuava solta acima do seletor, sem dizer o que era. Numa
   moldura com rótulo fica claro que aquilo é o que já está publicado, e
   que o campo abaixo substitui. */
.media-atual {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-alt);
}
.media-atual-info { min-width: 0; }
.media-atual-info strong { display: block; font-size: 13.5px; }
.media-atual-info span { font-size: 12.5px; color: var(--muted); }
.current-photo, .current-video { margin-bottom: 0; flex: none; }

/* ----- checkbox como chip ----- */
.checkbox-row { gap: 10px; }
.checkbox-row label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  font-size: 14px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.checkbox-row label:hover { border-color: var(--secondary); }
/* :has não é suportado em todo lugar; onde faltar, o chip só não acende —
   a caixa marcada continua sendo o estado visível */
.checkbox-row label:has(input:checked) {
  border-color: var(--secondary);
  background: var(--secondary-light);
  color: var(--secondary-dark);
  font-weight: 600;
}
input[type="checkbox"], input[type="radio"] {
  width: 17px;
  height: 17px;
  accent-color: var(--secondary-dark);
  flex: none;
}

/* ----- preço e disponibilidade por unidade ----- */
.override-lista { display: flex; flex-direction: column; gap: 10px; }
.override-linha {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
}
.override-nome { min-width: 150px; font-size: 14px; }
.override-preco { max-width: 180px; }
.override-linha .checkbox-row { margin-left: auto; }

/* ----- rodapé de ações ----- */
.form-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.form-actions button { margin-top: 0; }

/* ---------- APARÊNCIA DO CARDÁPIO ---------- */
.cor-linha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* o seletor nativo desenha uma caixa cinza do sistema; aqui ele vira um
   quadrado da própria cor, que é o que a pessoa está escolhendo */
.cor-linha input[type="color"] {
  width: 52px;
  height: 44px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  cursor: pointer;
}
.cor-linha input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.cor-linha input[type="color"]::-webkit-color-swatch { border: none; border-radius: 8px; }
.cor-linha input[type="text"] {
  width: 130px;
  flex: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: lowercase;
}
.cor-nota { font-size: 12.5px; color: var(--muted); }

.logo-atual {
  max-height: 56px;
  max-width: 150px;
  object-fit: contain;
  flex: none;
  /* xadrez discreto: sem ele não dá pra saber se o fundo da logo é
     transparente ou branco, e é isso que decide se ela vai ficar boa
     sobre a cor da marca */
  background-color: var(--card);
  background-image:
    linear-gradient(45deg, var(--surface-alt) 25%, transparent 25%, transparent 75%, var(--surface-alt) 75%),
    linear-gradient(45deg, var(--surface-alt) 25%, transparent 25%, transparent 75%, var(--surface-alt) 75%);
  background-size: 12px 12px;
  background-position: 0 0, 6px 6px;
  border-radius: 8px;
  padding: 6px;
}
.aparencia-remover { margin-top: 16px; }

/* ----- prévia ----- */
.previa-cardapio { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.previa-topo {
  padding: 28px 20px 24px;
  text-align: center;
  background:
    radial-gradient(ellipse 70% 90% at 50% 6%, rgba(255,255,255,.16) 0%, transparent 62%),
    var(--brand);
  color: var(--brand-ink);
  transition: background .2s ease, color .2s ease;
}
.previa-logo { display: block; max-height: 40px; max-width: 140px; margin: 0 auto 10px; object-fit: contain; }
.previa-nome { display: block; font-family: var(--font-body); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; }
.previa-sub { display: block; margin-top: 4px; font-size: 12.5px; opacity: .75; }
.previa-corpo { padding: 18px 20px 20px; background: var(--card); }
.previa-categoria {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-dark);
  margin-bottom: 10px;
}
.previa-prato { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.previa-prato strong { font-family: var(--font-body); font-weight: 700; font-size: 15px; }
.previa-preco { font-weight: 700; color: var(--brand-dark); }

/* ---------- DIAGNÓSTICO ---------- */
.diag-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.diag-item {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  border-radius: 18px;
  background: var(--card);
  box-shadow: 0 1px 2px rgba(59,31,59,.04), 0 8px 24px -12px rgba(59,31,59,.10);
}
/* o sinal vem acompanhado de texto sempre: cor sozinha não diz nada a quem
   não distingue verde de vermelho */
.diag-sinal {
  flex: none;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-weight: 800;
  font-size: 14px;
}
.diag-ok .diag-sinal { background: #e3f1e5; color: #1f5c2e; }
.diag-faltando .diag-sinal { background: var(--conversion-light); color: var(--conversion-dark); }
.diag-atencao .diag-sinal { background: var(--secondary-light); color: var(--secondary-dark); }
.diag-corpo { min-width: 0; }
.diag-corpo strong { display: block; font-size: 15px; margin-bottom: 3px; }
.diag-corpo p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.diag-arrumar { margin-top: 6px !important; color: var(--ink) !important; }

.diag-teste { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 20px; }
.diag-teste-nota { font-size: 12.5px; color: var(--muted); max-width: 62ch; line-height: 1.5; }

/* Faixa de serviço do cardápio público. Discreta de propósito: informa que o
   cardápio está mostrando o serviço da hora, sem competir com os pratos. */
.gallery-servico {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line, rgba(0, 0, 0, .08));
}

.gallery-servico-rotulo {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted, #777);
}

.gallery-servico-link {
  font-size: 13px;
  color: var(--muted, #777);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gallery-servico-link:hover {
  color: var(--primary, #000);
}

/* ---------- ETIQUETAS DE QR ----------
   Tela feita pra virar papel. Todas as medidas da folha estão em
   milímetros, não em pixels: o navegador converte mm pra ponto na
   impressão, então o QR sai do papel com o lado que a tela prometeu — e
   como 1mm também vale na tela, a prévia já está no tamanho real. Em
   pixels, o mesmo layout sairia de tamanhos diferentes em cada impressora. */

.etq-controles {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 24px;
}
.etq-controles-texto { max-width: 46ch; }
.etq-controles-texto h2 { margin: 0 0 6px; font-size: 19px; }
.etq-controles-texto p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.etq-controles-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

.etq-tamanhos { display: flex; flex-wrap: wrap; gap: 8px; }
.etq-tamanho {
  display: block;
  min-width: 132px;
  padding: 9px 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  text-decoration: none;
  color: var(--ink);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.etq-tamanho:hover { border-color: var(--secondary); }
.etq-tamanho.is-active { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.etq-tamanho strong { display: block; font-size: 14px; }
.etq-tamanho-lado {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.etq-tamanho-ajuda { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }

.etq-aviso { display: block; }

/* A folha. auto-fill com largura FIXA (e não minmax) é o que mantém a
   etiqueta do tamanho certo: com minmax, a coluna esticaria pra preencher a
   linha e o QR sairia maior que o escolhido. */
.etq-folha {
  --etq-qr: 32mm;
  display: grid;
  grid-template-columns: repeat(auto-fill, calc(var(--etq-qr) + 10mm));
  justify-content: start;
  gap: 4mm;
}
.etq-folha[data-tamanho="pequeno"] { --etq-qr: 22mm; }
.etq-folha[data-tamanho="medio"]   { --etq-qr: 32mm; }
.etq-folha[data-tamanho="grande"]  { --etq-qr: 45mm; }
.etq-folha[data-tamanho="cartaz"]  { --etq-qr: 110mm; }

.etq {
  width: calc(var(--etq-qr) + 10mm);
  padding: 3mm 2mm 2.5mm;
  /* pontilhado como linha de corte: borda imprime por padrão, fundo não —
     por isso o guia é a borda, e não um retângulo colorido que sairia
     branco na impressora de quase todo mundo */
  border: 1px dashed var(--border);
  border-radius: 3mm;
  background: #fff;
  text-align: center;
  /* etiqueta partida no meio por uma quebra de página é etiqueta perdida */
  break-inside: avoid;
  page-break-inside: avoid;
}
.etq-qr {
  display: block;
  width: var(--etq-qr);
  height: var(--etq-qr);
  margin: 0 auto;
}
.etq-nome {
  display: block;
  margin-top: 1.5mm;
  font-size: 8pt;
  font-weight: 700;
  line-height: 1.2;
  color: #1a1a1a;
  /* nome longo quebra dentro da etiqueta; estourar a largura desalinharia
     a grade inteira da folha */
  overflow-wrap: anywhere;
}
.etq-chamada {
  display: block;
  margin-top: 0.8mm;
  font-size: 6pt;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #6b6b6b;
}

.etq-vazio { text-align: center; }
.etq-vazio h2 { margin: 0 0 8px; }
.etq-vazio p { color: var(--muted); margin: 0 0 18px; line-height: 1.6; }

/* ----- A folha no papel -----
   O painel inteiro sai da frente: barra lateral, cabeçalho, controles e
   avisos são navegação, e navegação impressa é tinta gasta numa folha que
   vai pra tesoura. Sobra a grade de etiquetas, encostada na margem da
   página. */
@media print {
  @page { margin: 8mm; }

  /* tudo preso a .app-folha: o stylesheet é um só, e uma regra de
     impressão solta aqui mudaria também como saem do papel o Analytics, a
     Mídia e todas as outras telas do painel */
  body.app-folha {
    display: block;
    padding: 0;
    background: none;
    /* o painel pinta dois brilhos de fundo fixos; no papel viram duas
       manchas cinza atravessando as etiquetas */
    background-image: none;
  }
  body.app-folha .app-side,
  body.app-folha .app-head,
  body.app-folha .etq-controles,
  body.app-folha .etq-aviso,
  body.app-folha .app-alert { display: none !important; }

  body.app-folha .app-main,
  body.app-folha .app-content { display: block; padding: 0; margin: 0; }

  body.app-folha .etq-folha { gap: 3mm; }
  body.app-folha .etq {
    /* no papel o pontilhado precisa guiar sem competir com o QR */
    border-color: #c9c4bb;
  }
}

/* linha-ponte do QR principal pra folha de etiquetas */
.hero-extra { font-size: 13.5px; color: var(--muted); margin: 10px 0 0; line-height: 1.5; }
.hero-extra a { color: var(--primary); font-weight: 600; text-decoration: none; }
.hero-extra a:hover { text-decoration: underline; }

/* ---------- AÇÕES DE STATUS EM LOTE ----------
   Uma faixa de atalhos acima da busca do catálogo. Cada ação é um form
   próprio, então a faixa é uma grade de forms — e não uma linha de botões
   soltos. */
.lote-barra {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 16px;
}
.lote-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
}
.lote-botao {
  flex: none;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  background: var(--conversion);
  border: none;
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s ease;
}
.lote-botao:hover { background: var(--conversion-hover); }
/* a ajuda quebra pra baixo do botão em tela estreita em vez de espremer os
   dois numa linha que não cabe */
.lote-ajuda { font-size: 12.5px; color: var(--muted); line-height: 1.4; min-width: 0; }

/* A ação que TIRA pratos do ar não pode parecer a que põe. O preenchido em
   terracota é o botão de publicar/assinar do produto inteiro; repeti-lo
   aqui deixaria dois botões idênticos lado a lado, um pondo no ar e outro
   tirando — erro de clique esperando acontecer. Este é contornado e
   discreto: quem vem tirar o cardápio do ar está procurando por ele, não
   precisa ser atraído. */
.lote-form-saida { border-style: dashed; }
.lote-botao-saida {
  color: var(--muted);
  background: none;
  border: 1px solid var(--border);
}
.lote-botao-saida:hover {
  background: none;
  border-color: var(--ink);
  color: var(--ink);
}

/* ---------- CARDÁPIO EM VÍDEO (REEL) ----------
   Um prato por tela, passa com o dedo. A página inteira é uma trilha de
   scroll-snap: o CSS faz a rolagem, o JS só decide qual vídeo toca — sem
   ele isto continua sendo um álbum de fotos em tela cheia. */

.reel-page {
  margin: 0;
  background: #000;
  color: #fff;
  /* a trilha é que rola, não o body: assim a barra do topo fica parada e o
     snap não briga com o scroll da página */
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
}

.reel-trilha {
  height: 100vh;
  /* dvh porque no celular a barra do navegador entra e sai: com vh o slide
     fica alto demais e sobra um pedaço do próximo espiando embaixo */
  height: 100dvh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.reel-trilha::-webkit-scrollbar { display: none; }

.reel-slide {
  position: relative;
  height: 100vh;
  height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always; /* não deixa um gesto longo pular três pratos */
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.reel-media { position: absolute; inset: 0; background: #0a0a0a; }
.reel-poster,
.reel-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* o vídeo entra por cima do poster quando o primeiro quadro já está
   rolando: sem isso pisca preto entre o play() e a decodificação */
.reel-video { opacity: 0; transition: opacity .35s ease; }
.reel-media.is-playing .reel-video { opacity: 1; }

.reel-slide.is-esgotado .reel-media { filter: grayscale(.7); }

/* Barra fixa no topo, com o respiro do notch. */
.reel-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px;
  background: linear-gradient(to bottom, rgba(0,0,0,.6), transparent);
  pointer-events: none;
}
.reel-bar > * { pointer-events: auto; }
.reel-sair, .reel-som {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: none;
  border-radius: 999px;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.reel-sair svg, .reel-som svg { width: 17px; height: 17px; }
.reel-titulo {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
.reel-som { padding: 7px 10px; }
.reel-som .reel-som-on { display: none; }
.reel-som.is-ligado .reel-som-off { display: none; }
.reel-som.is-ligado .reel-som-on { display: inline; }

/* A tarja não é decoração: texto branco sobre um vídeo de massa, arroz ou
   prato branco desaparece sem ela. */
.reel-info {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 80px 20px calc(26px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, rgba(0,0,0,.82) 28%, rgba(0,0,0,.45) 62%, transparent);
}
.reel-categoria {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  margin-bottom: 6px;
}
.reel-nome {
  margin: 0 0 6px;
  font-family: var(--font-display, inherit);
  font-size: clamp(25px, 7vw, 36px);
  line-height: 1.12;
  letter-spacing: -.02em;
}
.reel-desc {
  margin: 0 0 14px;
  max-width: 34ch;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(255,255,255,.86);
  /* três linhas: o suficiente pra dar vontade sem empurrar o preço pra
     fora da tela num prato de descrição longa */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.reel-rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}
.reel-preco { margin: 0; display: flex; align-items: baseline; gap: 9px; }
.reel-preco-agora {
  font-family: var(--font-menu, inherit);
  font-size: 25px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.reel-preco-de {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,.6);
  text-decoration: line-through;
}
.reel-link {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.reel-link:hover { background: rgba(255,255,255,.88); }

.reel-contador {
  position: absolute;
  top: calc(60px + env(safe-area-inset-top, 0px));
  right: 14px;
  z-index: 2;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,.75);
  text-shadow: 0 1px 6px rgba(0,0,0,.7);
}

/* No meio da tela, e não colada embaixo: embaixo mora a tarja com nome,
   descrição e preço, e a dica tampava justo o texto do prato. */
.reel-dica {
  position: fixed;
  left: 50%;
  top: 46%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  animation: reelSobe 1.9s ease-in-out infinite;
}
.reel-dica svg { width: 15px; height: 15px; }
@keyframes reelSobe {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .reel-dica { animation: none; }
  .reel-trilha { scroll-behavior: auto; }
}

/* Em tela larga o reel não vira um vídeo de 1900px de largura: ele fica
   numa coluna de proporção de celular, centrada, que é a forma do
   conteúdo. */
@media (min-width: 720px) {
  .reel-slide { justify-content: center; }
  .reel-media, .reel-contador {
    left: 50%;
    transform: translateX(-50%);
    width: min(430px, 100%);
  }
  /* a tarja está no fluxo do flex, que já a centraliza: com o left de cima
     ela andava meia tela pra direita e se soltava do vídeo */
  .reel-info { width: min(430px, 100%); }
  /* a barra também: "Lista" e o som nos cantos de um monitor largo ficam a
     meio metro do vídeo que controlam */
  .reel-bar { left: 50%; right: auto; width: min(430px, 100%); transform: translateX(-50%); }
  .reel-media { right: auto; }
  /* mesma coluna do vídeo, encostado na borda direita dela */
  .reel-contador { right: auto; text-align: right; padding-right: 14px; box-sizing: border-box; }
}

/* Porta pro reel, na grade. Escura de propósito: a grade é clara, e este é
   o único bloco da página que promete outra coisa. */
.reel-chamada {
  display: flex;
  align-items: center;
  gap: 13px;
  /* alinhada à coluna dos pratos: .gallery-main tem 1040px de caixa com
     16px de padding, então o conteúdo dela mede 1008. O width em calc
     mantém o mesmo respiro de 16px no celular, onde não há 1008 pra ocupar. */
  max-width: 1008px;
  width: calc(100% - 32px);
  margin: 22px auto -4px;
  padding: 13px 16px;
  border-radius: 18px;
  background: #16130f;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.reel-chamada-icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 12px;
  background: rgba(255,255,255,.12);
}
.reel-chamada-icone svg { width: 21px; height: 21px; }
.reel-chamada-texto { min-width: 0; display: block; }
.reel-chamada-texto strong { display: block; font-size: 15px; letter-spacing: -.01em; }
.reel-chamada-texto span { display: block; font-size: 12.5px; color: rgba(255,255,255,.7); margin-top: 1px; }
.reel-chamada-seta { margin-left: auto; flex: none; font-size: 17px; color: rgba(255,255,255,.75); }
.reel-chamada:hover { background: #221d17; }

/* ---------- BANNER DO CARDÁPIO ----------
   Com banner, o topo deixa de ser um bloco de cor e vira capa: a foto ocupa
   o fundo e a identidade fica por cima. */

.gallery-banner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* a foto é fundo, não conteúdo: o texto por cima tem que ganhar sempre */
  z-index: 0;
}

.gallery-header.tem-banner {
  /* mais alto que o topo de cor: uma foto espremida em 100px não mostra
     nada do salão, e o que sobra é uma tarja */
  padding-top: 92px;
  padding-bottom: 34px;
  /* Texto branco FIXO, e não a cor calculada por contraste. O cálculo
     resolve texto sobre uma cor conhecida; aqui o fundo é uma foto que o
     restaurante pode trocar amanhã, e nenhuma cor é legível sobre todas
     elas. Quem garante o contraste passa a ser o véu abaixo. */
  color: #fff;
}
/* O véu. Escuro embaixo, onde mora o texto, e quase limpo em cima, pra não
   apagar a foto inteira: sem ele, nome branco sobre foto clara (prato
   branco, parede clara, céu) some. */
.gallery-header.tem-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(0,0,0,.30) 0%, rgba(0,0,0,.34) 38%, rgba(0,0,0,.72) 100%);
}
/* tudo que não é a foto sobe pra cima do véu */
.gallery-header.tem-banner > *:not(.gallery-banner) { position: relative; z-index: 2; }
.gallery-header.tem-banner h1 { text-shadow: 0 2px 14px rgba(0,0,0,.45); }
.gallery-header.tem-banner p { color: rgba(255,255,255,.82); }
.gallery-header.tem-banner .logo-icon { color: #fff; }
/* a logo sobre a foto ganha um respiro branco atrás: logo escura sobre foto
   escura desaparece, e é justamente a marca do restaurante */
.gallery-header.tem-banner .gallery-logo {
  background: rgba(255,255,255,.92);
  border-radius: 14px;
  padding: 7px 11px;
}
/* a linha de luz da borda não faz sentido sobre foto: o véu já fecha */
.gallery-header.tem-banner::after { display: none; }

/* A busca dentro do topo com banner: sobre foto, o campo precisa de corpo
   próprio pra não sumir. */
.gallery-header.tem-banner .gallery-search {
  background: rgba(255,255,255,.94);
  color: var(--ink);
  border-color: transparent;
}

/* ----- prévia da tela de aparência ----- */
.previa-topo.tem-banner { position: relative; overflow: hidden; color: #fff; }
.previa-banner {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.previa-topo.tem-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(0,0,0,.30), rgba(0,0,0,.72));
}
.previa-topo.tem-banner > *:not(.previa-banner) { position: relative; z-index: 2; }
.previa-topo.tem-banner .previa-sub { color: rgba(255,255,255,.8); }
.previa-topo.tem-banner .previa-logo {
  background: rgba(255,255,255,.92);
  border-radius: 8px;
  padding: 4px 7px;
}

/* o banner atual, na tela de aparência: deitado, como ele vai aparecer */
.banner-atual {
  width: 132px;
  height: 56px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border);
}

/* ---------- DESTAQUES DA CASA ----------
   A faixa que abre o cardápio público. Vem antes da barra de categorias: a
   barra é índice, e índice não é a primeira coisa que um garçom diz. */

.dst-faixa {
  max-width: 1040px;
  margin: 0 auto;
  padding: 20px 0 4px;
}
.dst-faixa-interior {
  display: flex;
  gap: 12px;
  padding: 0 16px 6px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 16px;
}
.dst-faixa-interior::-webkit-scrollbar { display: none; }
/* mesmo motivo da barra de categorias: num container de flex com overflow o
   padding do fim é ignorado na ponta da rolagem */
.dst-faixa-interior::after { content: ""; flex: 0 0 4px; }

.dst-card {
  flex: 0 0 200px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  box-shadow: 0 6px 18px -12px rgba(0,0,0,.4);
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
}
.dst-card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -14px rgba(0,0,0,.45); }
.dst-card.is-esgotado .dst-card-media { filter: grayscale(.6); }

.dst-card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--brand-soft, #eee);
  display: grid;
  place-items: center;
  overflow: hidden;
}
/* absoluta: em fluxo, uma foto vertical (as do exemplo são 540×960) estica o
   quadro até a altura dela e o 16:10 deixa de valer */
.dst-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.dst-card-inicial {
  font-family: var(--font-display, inherit);
  font-size: 34px;
  font-weight: 800;
  color: color-mix(in srgb, var(--brand, #666) 55%, transparent);
}

.dst-card-corpo { padding: 10px 13px 13px; display: flex; flex-direction: column; gap: 3px; }
/* A frase da casa é o único texto desta página escrito à mão pra aquele
   dia: ganha a cor da marca e vem antes do nome do prato. */
.dst-card-nota {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--brand-dark, #444);
  line-height: 1.3;
}
.dst-card-nome { font-size: 15px; line-height: 1.25; letter-spacing: -.01em; }
.dst-card-preco {
  font-family: var(--font-menu, inherit);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 14.5px;
}
.dst-card-preco-de {
  margin-right: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: line-through;
}
.dst-card-esgotado { font-size: 11.5px; font-weight: 700; color: var(--conversion-dark); }

/* ----- tela de curadoria ----- */
.dst-intro h2 { margin: 0 0 8px; font-size: 19px; }
.dst-intro p { margin: 0 0 8px; color: var(--muted); font-size: 14px; line-height: 1.6; max-width: 62ch; }
.dst-intro-nota { border-left: 3px solid var(--border); padding-left: 12px; }

.dst-lista { display: flex; flex-direction: column; gap: 10px; }
.dst-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 13px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
}
.dst-item.is-vencido { border-style: dashed; opacity: .82; }
.dst-foto { flex: none; width: 52px; height: 52px; border-radius: 10px; object-fit: cover; }
.dst-foto-vazia {
  display: grid;
  place-items: center;
  background: var(--secondary-light);
  color: var(--secondary-dark);
  font-weight: 800;
  font-size: 19px;
}
.dst-texto { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dst-texto strong { font-size: 15px; }
.dst-nota { font-size: 13px; color: var(--ink); font-style: italic; }
.dst-prazo { font-size: 12px; color: var(--muted); }
.dst-acao { display: flex; align-items: center; gap: 8px; margin: 0 0 0 auto; flex: none; }
.dst-acao select { padding: 6px 9px; font-size: 13px; }

.dst-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.dst-campo { display: flex; flex-direction: column; gap: 5px; min-width: 190px; flex: 1 1 190px; }
.dst-campo > span { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.dst-campo input, .dst-campo select { width: 100%; }
/* Um campo por linha: lado a lado, o prazo ("Só hoje — Sai do ar sozinho
   na virada do dia") saía cortado no meio da frase. */
.dst-form { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 520px; }
.dst-form > button { justify-self: start; }

/* ===================== Modo apresentação (/apresentar) =====================
   Tela de quem vende o Table360 na porta do restaurante: aberta no celular do
   vendedor, virada pro dono. Por isso o QR é grande e o resto é pouco — a
   pessoa do outro lado lê de longe. */
.apr-page { background: var(--bg); min-height: 100vh; color: var(--ink); font-family: var(--font-body); --apr-marca: var(--primary); }
.apr-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1080px; margin: 0 auto; padding: 16px 20px; }
.apr-topo .brand { color: var(--primary); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; font-weight: 800; }
.apr-selo { font: 700 12px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--secondary-dark); background: var(--secondary-light); border-radius: 999px; padding: 7px 12px; }
.apr-main { max-width: 1080px; margin: 0 auto; padding: 4px 16px 56px; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; }
.apr-roteiro { grid-column: 1 / -1; }
@media (max-width: 860px) { .apr-main { grid-template-columns: minmax(0, 1fr); } }
.apr-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 22px; box-shadow: var(--shadow-sm); }
.apr-eyebrow { margin: 0 0 6px; font: 800 12px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--conversion-dark); }
.apr-titulo { margin: 0 0 8px; font: 800 26px/1.1 var(--font-display); letter-spacing: -.01em; }
.apr-lead { margin: 0 0 16px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.apr-centro { text-align: center; margin-top: 4px; }
.apr-label { display: block; margin: 14px 0 8px; font-weight: 800; font-size: 14px; }
.apr-input { width: 100%; box-sizing: border-box; padding: 14px 16px; font: 600 18px var(--font-body); color: var(--ink); background: var(--field); border: 1.5px solid var(--border); border-radius: var(--radius-input); }
.apr-input:focus { outline: none; border-color: var(--apr-marca); box-shadow: 0 0 0 3px color-mix(in srgb, var(--apr-marca) 22%, transparent); }
.apr-tipos { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; background: var(--field); border: 1.5px solid var(--border); border-radius: var(--radius-input); }
.apr-tipo { min-height: 44px; padding: 8px 12px; border: 0; border-radius: calc(var(--radius-input) - 4px); background: transparent; color: var(--muted); font: 700 15px var(--font-body); cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.apr-tipo[aria-checked="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.12)); }
.apr-tipo:focus-visible { outline: 2px solid var(--apr-marca); outline-offset: 2px; }
.apr-cores { display: flex; flex-wrap: wrap; gap: 10px; }
.apr-cor { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--card); background: var(--c, var(--gray-light)); box-shadow: 0 0 0 1px var(--border); cursor: pointer; padding: 0; position: relative; }
.apr-cor[aria-checked="true"] { box-shadow: 0 0 0 3px var(--ink); }
.apr-cor-livre { display: grid; place-items: center; background: conic-gradient(#b3261e, #c98a0c, #4f6b2a, #1d3557, #3b1f3b, #b3261e); color: #fff; font: 800 20px/1 var(--font-body); }
.apr-cor-livre input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; border: 0; padding: 0; }
.apr-qr-card { text-align: center; border-top: 6px solid var(--apr-marca); }
.apr-qr { margin: 8px auto 6px; width: min(100%, 300px); aspect-ratio: 1; background: #fff; border-radius: 16px; padding: 14px; box-sizing: border-box; box-shadow: var(--shadow-md); }
.apr-qr img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.apr-qr-nome { margin: 12px 0 4px; font: 800 22px/1.15 var(--font-display); color: var(--apr-marca); overflow-wrap: anywhere; }
.apr-acoes { display: grid; gap: 10px; margin-top: 14px; }
.apr-btn { width: 100%; justify-content: center; text-align: center; box-sizing: border-box; }
.apr-aviso { min-height: 1.4em; margin: 8px 0 0; color: var(--fresh-dark); font-weight: 700; }
.apr-passos { margin: 6px 0 0; padding-left: 22px; display: grid; gap: 12px; line-height: 1.5; }
.apr-passos strong { color: var(--primary); }
.apr-link { font-family: ui-monospace, Menlo, monospace; background: var(--field); padding: 1px 6px; border-radius: 6px; }
.apr-objecoes { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px; }
.apr-objecoes summary { cursor: pointer; font-weight: 800; color: var(--primary); }
.apr-objecoes dl { margin: 12px 0 0; display: grid; gap: 4px; }
.apr-objecoes dt { font-weight: 800; margin-top: 10px; }
.apr-objecoes dd { margin: 0; color: var(--muted); line-height: 1.5; }

/* ===================== Assinatura: cartão do plano ===================== */
.asn-plano { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-md); padding: 26px; position: relative; overflow: hidden; }
.asn-plano::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: linear-gradient(90deg, var(--primary), var(--conversion), var(--secondary)); }
.asn-plano-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.asn-plano-rotulo { margin: 0 0 4px; font: 800 12px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.asn-plano-nome { margin: 0; font: 700 32px/1.05 var(--font-serif); color: var(--primary); }
.asn-status { flex-shrink: 0; font: 800 13px/1 var(--font-body); border-radius: 999px; padding: 8px 12px; display: inline-flex; align-items: center; gap: 6px; }
.asn-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.asn-status-ok { color: var(--fresh-dark); background: var(--fresh-light); }
.asn-status-teste { color: var(--secondary-dark); background: var(--secondary-light); }
.asn-status-alerta { color: var(--conversion-dark); background: var(--conversion-light); }
.asn-preco { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; margin: 18px 0 4px; }
.asn-preco strong { font: 800 34px/1 var(--font-display); color: var(--ink); }
.asn-preco span { color: var(--muted); font-weight: 700; }
.asn-preco em { flex-basis: 100%; font-style: normal; color: var(--muted); font-size: 14px; }
.asn-medidor { margin-top: 18px; max-width: 460px; }
.asn-incluso-titulo { margin: 24px 0 10px; font: 800 15px var(--font-body); }
.asn-incluso { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px 22px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.asn-incluso li { position: relative; padding-left: 28px; line-height: 1.45; font-size: 14.5px; color: var(--muted); }
.asn-incluso li strong { color: var(--ink); }
.asn-incluso li::before { content: ""; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: var(--fresh-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f5d3a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat; }
.asn-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border); }
.asn-seguranca { margin: 14px 0 0; font-size: 13px; color: var(--muted); }

/* ===================== Assinatura confirmada ===================== */
.ok-card { max-width: 620px; }
.ok-selo { color: var(--fresh); margin-bottom: 14px; }
.ok-circulo { stroke-dasharray: 152; stroke-dashoffset: 152; animation: okTraco .7s ease-out forwards; }
.ok-check { stroke-dasharray: 40; stroke-dashoffset: 40; animation: okTraco .45s .55s ease-out forwards; }
@keyframes okTraco { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .ok-circulo, .ok-check { animation: none; stroke-dashoffset: 0; } }
.ok-eyebrow { margin: 0 0 6px; font: 800 12px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--fresh-dark); }
.ok-titulo { margin: 0 0 10px; font: 800 30px/1.1 var(--font-display); letter-spacing: -.01em; }
.ok-recibo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; margin: 18px 0; }
.ok-recibo div { background: var(--field); padding: 12px 14px; display: grid; gap: 4px; }
.ok-recibo span { font-size: 12px; color: var(--muted); font-weight: 700; }
.ok-recibo strong { font: 800 16px var(--font-body); }
@media (max-width: 520px) { .ok-recibo { grid-template-columns: minmax(0, 1fr); } .ok-recibo div { grid-template-columns: 1fr auto; align-items: center; } }
.ok-cardapio { display: flex; gap: 14px; align-items: center; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--card); margin: 0 0 18px; }
.ok-cardapio img { border-radius: 10px; background: #fff; padding: 4px; flex-shrink: 0; }
.ok-cardapio strong { display: block; margin-bottom: 4px; }
.ok-cardapio a { color: var(--primary); font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.ok-proximos-titulo { margin: 4px 0 10px; font-weight: 800; }
.ok-proximos { display: grid; gap: 10px; margin-bottom: 20px; }
.ok-passo { display: grid; gap: 2px; padding: 12px 14px 12px 44px; border-radius: 12px; background: var(--field); border: 1px solid var(--border); text-decoration: none; color: var(--ink); position: relative; transition: border-color .15s, transform .15s; }
.ok-passo::before { content: "→"; position: absolute; left: 16px; top: 12px; font-weight: 800; color: var(--conversion); }
.ok-passo:hover { border-color: var(--primary); transform: translateX(2px); }
.ok-passo span { color: var(--muted); font-size: 14px; }
.ok-nota { margin: 18px 0 0; font-size: 13px; color: var(--muted); }

/* ===================== Boas-vindas do onboarding ===================== */
.bv-card { max-width: 640px; }
.bv-titulo { overflow-wrap: anywhere; }
.bv-ganhos { display: grid; gap: 10px; margin: 18px 0 6px; }
.bv-ganho { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--field); border: 1px solid var(--border); }
.bv-ganho-ic { font-size: 20px; line-height: 1.2; }
.bv-ganho strong { display: block; }
.bv-ganho span { color: var(--muted); font-size: 14px; }
.bv-url { font-family: ui-monospace, Menlo, monospace; font-size: 13px !important; color: var(--primary) !important; overflow-wrap: anywhere; }
.bv-trilha { list-style: none; counter-reset: bv; margin: 20px 0 24px; padding: 0; display: grid; gap: 14px; }
.bv-trilha li { counter-increment: bv; position: relative; padding-left: 44px; display: grid; gap: 2px; }
.bv-trilha li::before { content: counter(bv); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--secondary-light); color: var(--secondary-dark); font-weight: 800; }
.bv-trilha span { color: var(--muted); font-size: 14.5px; }

/* ===================== Visão geral: primeiros passos ===================== */
.pp-card { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 22px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-md); padding: 22px; margin-bottom: 16px; }
@media (max-width: 760px) { .pp-card { grid-template-columns: minmax(0, 1fr); } }
.pp-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pp-topo h2 { margin: 0; font: 700 24px/1.1 var(--font-serif); color: var(--primary); }
.pp-conta { font-weight: 800; color: var(--secondary-dark); background: var(--secondary-light); border-radius: 999px; padding: 5px 10px; font-size: 13px; }
.pp-barra { height: 8px; border-radius: 4px; background: var(--gray-light); overflow: hidden; margin: 12px 0 14px; }
.pp-barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--fresh), #4c9a73); border-radius: 4px; transition: width .4s; }
.pp-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pp-lista li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--gray-light); }
.pp-lista li:first-child { border-top: 0; }
.pp-marca { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); background: var(--card); }
.pp-lista li.is-feito .pp-marca { border-color: var(--fresh); background: var(--fresh) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat; }
.pp-texto { display: grid; gap: 2px; }
.pp-texto span { color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.pp-lista li.is-feito .pp-texto strong { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--border); }
.pp-acao { font-weight: 800; color: var(--conversion-dark); text-decoration: none; font-size: 14px; white-space: nowrap; }
.pp-ok { font-weight: 800; color: var(--fresh-dark); font-size: 13px; }
@media (max-width: 520px) { .pp-lista li { grid-template-columns: 26px minmax(0, 1fr); } .pp-acao, .pp-ok { grid-column: 2; } }
.pp-cardapio { display: grid; justify-items: center; align-content: start; gap: 6px; text-align: center; padding: 16px; border-radius: 16px; background: var(--field); border: 1px solid var(--border); }
.pp-cardapio img { background: #fff; border-radius: 12px; padding: 6px; }
.pp-link { font-size: 12.5px; color: var(--primary); overflow-wrap: anywhere; font-weight: 700; }
.pp-botoes { display: flex; gap: 14px; margin-top: 4px; }

/* ===================== Escolha de plano ===================== */
.esc-main { max-width: 1060px; margin: 0 auto; padding: 28px 16px 56px; }
.esc-topo { text-align: center; max-width: 680px; margin: 0 auto 26px; }
.esc-eyebrow { margin: 0 0 8px; font: 800 12px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--conversion-dark); }
.esc-titulo { margin: 0 0 10px; font: 800 clamp(26px, 4vw, 36px)/1.1 var(--font-display); letter-spacing: -.01em; text-wrap: balance; }
.esc-sub { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.55; }
.esc-aviso { margin: 14px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; background: var(--field); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; text-align: left; }
.esc-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; align-items: stretch; }
.esc-plano { display: flex; flex-direction: column; background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius-card); padding: 22px; box-shadow: var(--shadow-sm); position: relative; }
.esc-plano.is-recomendado { border-color: var(--primary); box-shadow: var(--shadow-lg); }
.esc-plano.is-atual { border-color: var(--fresh); }
.esc-selos { display: flex; gap: 6px; min-height: 24px; margin-bottom: 8px; flex-wrap: wrap; }
.esc-selo { font: 800 11px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; padding: 6px 9px; border-radius: 999px; background: var(--primary); color: #fff; }
.esc-selo-atual { background: var(--fresh-light); color: var(--fresh-dark); }
.esc-plano h2 { margin: 0; font: 800 22px var(--font-display); }
.esc-preco { margin: 10px 0 4px; display: flex; align-items: baseline; gap: 4px; }
.esc-preco strong { font: 800 36px/1 var(--font-display); }
.esc-preco span { color: var(--muted); font-weight: 700; }
.esc-destaque { margin: 0 0 14px; font-weight: 800; color: var(--primary); }
.esc-itens { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; flex: 1; }
.esc-itens li { position: relative; padding-left: 24px; color: var(--muted); font-size: 14.5px; line-height: 1.4; }
.esc-itens li::before { content: "✓"; position: absolute; left: 0; color: var(--fresh); font-weight: 900; }
.esc-acao .button-link { width: 100%; justify-content: center; text-align: center; box-sizing: border-box; }
.esc-atual-txt { display: block; text-align: center; font-weight: 800; color: var(--fresh-dark); padding: 12px; border-radius: 999px; background: var(--fresh-light); }
.esc-garantias { list-style: none; margin: 26px auto 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; max-width: 980px; }
.esc-garantias li { font-size: 14px; color: var(--muted); line-height: 1.45; padding: 12px 14px; background: var(--field); border-radius: 12px; border: 1px solid var(--border); }
.esc-garantias strong { color: var(--ink); }
/* o "Copiar link" é um <button> com cara de link: sem isto ele herda o
   fundo escuro dos botões e o texto some */
.pp-botoes button.btn-link { background: none; border: 0; padding: 0; color: var(--primary); font: 800 14px var(--font-body); cursor: pointer; box-shadow: none; }
.pp-botoes a.btn-link { font: 800 14px var(--font-body); }
.pp-botoes button.btn-link:hover { background: none; box-shadow: none; text-decoration: underline; }

/* monograma do restaurante no topo do cardápio quando ainda não há logo */
.gallery-monograma { width: 58px; height: 58px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 50%; font: 800 28px/1 var(--font-display); color: currentColor; background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45); }

/* ===================== Visão geral em três blocos ===================== */
.vg-resumo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); margin-bottom: 16px; overflow: hidden; }
.vg-num { padding: 18px 20px; display: grid; gap: 4px; align-content: start; border-left: 1px solid var(--gray-light); min-width: 0; }
.vg-num:first-child { border-left: 0; }
.vg-num.is-hero { background: linear-gradient(160deg, var(--primary), #5a2f55); color: #fff; }
.vg-num-rotulo { font-size: 13px; font-weight: 700; color: var(--muted); }
.vg-num.is-hero .vg-num-rotulo { color: rgba(255,255,255,.75); }
.vg-num strong { font: 800 32px/1.05 var(--font-display); font-variant-numeric: tabular-nums; }
.vg-num strong small { font: 700 15px var(--font-body); color: var(--muted); }
.vg-num-nota { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.vg-num.is-hero .vg-num-nota { color: rgba(255,255,255,.8); }
.vg-num-nota.is-up { color: #9fe3bd; }
.vg-num-nota.is-down { color: #ffc2b0; }
.vg-legenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12.5px; color: var(--muted); }
.vg-legenda li { display: inline-flex; align-items: center; gap: 4px; }
.vg-legenda .ov-legend-value { font-weight: 800; color: var(--ink); }
@media (max-width: 760px) {
  .vg-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vg-num:nth-child(3) { border-left: 0; }
  .vg-num:nth-child(n+3) { border-top: 1px solid var(--gray-light); }
  .vg-num strong { font-size: 28px; }
}
.vg-grade { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 980px) { .vg-grade { grid-template-columns: minmax(0, 1fr); } }
.vg-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: 20px 22px; min-width: 0; }
.vg-card-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.vg-card-topo h2 { margin: 0; font-size: 22px; color: var(--primary); }
.vg-link { font-weight: 800; font-size: 14px; color: var(--primary); text-decoration: none; white-space: nowrap; }
.vg-legenda-grafico { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.vg-fatos { list-style: none; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--gray-light); display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.vg-fatos li { display: grid; gap: 2px; }
.vg-fatos span { font-size: 12.5px; color: var(--muted); font-weight: 700; }
.vg-fatos strong { font-size: 15px; overflow-wrap: anywhere; }
.vg-vazio { display: flex; gap: 18px; align-items: center; padding: 6px 0 2px; }
.vg-vazio img { background: #fff; border-radius: 12px; padding: 6px; border: 1px solid var(--border); flex-shrink: 0; }
.vg-vazio p { margin: 0 0 8px; color: var(--muted); line-height: 1.5; font-size: 14.5px; }
.vg-vazio .vg-vazio-titulo { color: var(--ink); font-weight: 800; font-size: 16px; margin-bottom: 4px; }
@media (max-width: 520px) { .vg-vazio { flex-direction: column; align-items: flex-start; } }
.vg-botoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 10px; }
.vg-card button.btn-link, .vg-vazio button.btn-link { background: none; border: 0; padding: 0; box-shadow: none; color: var(--primary); font: 800 14px var(--font-body); cursor: pointer; }
.vg-card button.btn-link:hover { background: none; box-shadow: none; text-decoration: underline; }
.vg-acoes { list-style: none; margin: 0; padding: 0; display: grid; }
.vg-acoes li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--gray-light); }
.vg-acoes li:first-child { border-top: 0; padding-top: 2px; }
.vg-acoes strong { display: block; font-size: 14.5px; }
.vg-acoes span { display: block; font-size: 13px; color: var(--muted); line-height: 1.4; }
.vg-acoes a { font-weight: 800; font-size: 13.5px; color: var(--conversion-dark); text-decoration: none; white-space: nowrap; }
.vg-em-dia { margin: 4px 0 0; font-weight: 800; color: var(--fresh-dark); }
.vg-vazio-curto { padding: 4px 0 10px; }
.vg-vazio-curto p { margin: 0 0 10px; color: var(--muted); }
.vg-cardapio { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--field); border: 1px solid var(--border); }
.vg-cardapio span { grid-column: 1 / -1; font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.vg-cardapio a { font-size: 13px; font-weight: 700; color: var(--primary); overflow-wrap: anywhere; }
.vg-acoes span::first-letter { text-transform: uppercase; }

/* ===================== Seletor de arquivo (arquivo.js) ===================== */
.arq { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1.5px dashed var(--border); border-radius: 14px; background: var(--field); cursor: pointer; transition: border-color .15s, background .15s; margin: 0; }
.arq:hover, .arq:focus-within { border-color: var(--primary); background: color-mix(in srgb, var(--field) 70%, #fff); }
.arq input[type="file"] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.arq-mini { width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center; font-size: 20px; background: var(--card) center/cover no-repeat; border: 1px solid var(--border); color: var(--fresh-dark); font-weight: 900; }
.arq-texto { display: grid; gap: 1px; min-width: 0; }
.arq-texto strong { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arq-texto small { font-size: 12.5px; color: var(--muted); }
.arq-botao { font: 800 13px var(--font-body); color: var(--primary); background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 7px 12px; }
.arq.tem-arquivo { border-style: solid; border-color: var(--fresh); }

/* ===================== Catálogo enxuto ===================== */
.cat-entrada { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.cat-entrada .add-dish-card[open] { grid-column: 1 / -1; grid-row: 2; }
.cat-entrada .add-dish-card[open] ~ * { grid-column: 1 / -1; }
@media (max-width: 640px) { .cat-entrada { grid-template-columns: minmax(0, 1fr); } }
.cat-entrada .scan-banner, .cat-entrada .add-dish-card { margin: 0; }
.cat-entrada .scan-banner { padding: 14px 16px; min-height: 0; align-items: center; }
.cat-entrada .scan-banner-text span { font-size: 13px; }
.cat-entrada .add-dish-summary { padding: 14px 16px; }
.cat-lista-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cat-lista-topo .catalog-panel-title { margin: 0; }
.cat-lote { position: relative; }
.cat-lote > summary { list-style: none; cursor: pointer; font: 800 13.5px var(--font-body); color: var(--primary); border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; background: var(--card); }
.cat-lote > summary::-webkit-details-marker { display: none; }
.cat-lote > summary::after { content: " ▾"; }
.cat-lote[open] > summary { border-color: var(--primary); }
.cat-lote .lote-barra { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: min(380px, 86vw); display: grid; gap: 10px; padding: 14px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); margin: 0; }
.cat-dica { margin: 10px 0 0; font-size: 13.5px; color: var(--muted); }
.cat-dica strong { color: var(--conversion-dark); }
/* card do prato: descrição em duas linhas e ações numa linha só */
.dish-card .desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dish-card-actions .edit { flex: 1; text-align: center; font: 800 13.5px var(--font-body); color: var(--primary); background: var(--secondary-light); border-radius: 999px; padding: 8px 10px; text-decoration: none; }
.dish-card-actions .edit:hover { background: color-mix(in srgb, var(--secondary-light) 70%, var(--secondary)); }
.dish-card-actions .qr-details { position: relative; }
.dish-card-actions .qr-details > summary { list-style: none; cursor: pointer; font: 800 13px var(--font-body); color: var(--muted); padding: 8px 10px; border-radius: 999px; }
.dish-card-actions .qr-details > summary::-webkit-details-marker { display: none; }
.dish-card-actions .qr-details[open] > summary { background: var(--gray-light); color: var(--ink); }
.qr-pop { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 15; display: grid; justify-items: center; gap: 6px; padding: 12px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); width: 170px; }
.qr-pop .qr { width: 140px; height: 140px; margin: 0; }
.dish-card-actions form { margin: 0; }
.dish-card-actions .delete { background: none; border: 0; box-shadow: none; color: var(--muted); font: 700 13px var(--font-body); padding: 8px 6px; cursor: pointer; }
.dish-card-actions .delete:hover { color: var(--conversion-dark); background: none; box-shadow: none; }
.dish-card-body { display: flex; flex-direction: column; flex: 1; }
.dish-card { display: flex; flex-direction: column; }

/* ===================== Aparência em duas colunas ===================== */
.apa-grade { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
@media (max-width: 980px) { .apa-grade { grid-template-columns: minmax(0, 1fr); } .apa-previa { order: -1; position: static !important; } }
.apa-ajustes { display: grid; gap: 16px; min-width: 0; }
.apa-bloco { padding: 22px; }
.apa-titulo { margin: 0 0 4px; font-size: 19px; color: var(--primary); }
.apa-ajuda { margin: 0 0 12px; font-size: 14px; color: var(--muted); line-height: 1.5; max-width: 60ch; }
.apa-form { display: grid; gap: 0; }
.apa-campo { padding: 0 0 20px; margin: 0 0 20px; border-bottom: 1px solid var(--gray-light); }
.apa-nome-form { display: flex; gap: 10px; flex-wrap: wrap; }
.apa-nome-form input { flex: 1; min-width: 200px; }
.apa-remover { display: flex; gap: 18px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--gray-light); }
.apa-remover form { margin: 0; }
.apa-ordem-linha { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.apa-ordem-linha .apa-ajuda { margin-bottom: 0; }
.apa-chave-form { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin: 0; }
.apa-chave { width: 52px; height: 30px; padding: 3px; border-radius: 999px; background: var(--gray-light); border: 1px solid var(--border); box-shadow: none; position: relative; cursor: pointer; transition: background .2s ease, border-color .2s ease, transform .16s var(--ease-out); }
.apa-chave:hover { background: var(--border); box-shadow: none; }
.apa-chave.is-on { background: var(--fresh); border-color: var(--fresh); }
.apa-chave-bola { display: block; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s var(--ease-out); }
.apa-chave.is-on .apa-chave-bola { transform: translateX(22px); }
/* a regra geral de button:active encolheria a chave inteira: a bolinha já é a resposta */
.apa-chave:active { transform: none; }
@media (prefers-reduced-motion: reduce) { .apa-chave-bola { transition: none; } }
.apa-chave-rotulo { font-weight: 800; font-size: 14px; min-width: 76px; }
.apa-detalhe { margin-top: 12px; }
.apa-detalhe summary { cursor: pointer; font-weight: 800; font-size: 13.5px; color: var(--primary); }
.apa-detalhe p { margin: 8px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.apa-previa { position: sticky; top: 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-md); padding: 16px; }
.apa-previa-rotulo { margin: 0 0 10px; font: 800 12px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.apa-previa .previa-corpo { display: grid; gap: 6px; }
.apa-abrir { display: inline-block; margin-top: 12px; }
.previa-monograma { width: 48px; height: 48px; font-size: 22px; margin-bottom: 8px; }

/* ===================== Editar prato em duas colunas ===================== */
.edit-grade { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
@media (max-width: 980px) { .edit-grade { grid-template-columns: minmax(0, 1fr); } }
.edit-col { min-width: 0; }
.edit-lado { position: sticky; top: 16px; display: grid; gap: 16px; min-width: 0; }
@media (max-width: 980px) { .edit-lado { position: static; } }
.edit-midia { padding: 18px; border-radius: 16px; background: var(--field); border: 1px solid var(--border); margin: 0; }
.edit-midia .media-atual { grid-template-columns: 1fr; }
.edit-midia .media-atual .current-photo, .edit-midia .media-atual .current-video { width: 100%; height: auto; max-height: 260px; object-fit: cover; border-radius: 12px; }
.edit-acoes { margin: 0; padding: 14px 0 0; border-top: 0; }
.edit-acoes button { flex: 1; }

/* Destaques: ação no topo, listas em cartões */
.dst-novo, .dst-bloco { margin-bottom: 16px; }
.dst-novo .dst-form { margin-top: 4px; }
.an-nota { margin: -4px 0 14px; font-size: 12.5px; color: var(--muted); }
/* o seletor fica dentro de .dish-form, cujo label é display:block */
.dish-form label.arq, label.arq { display: grid; margin: 0; color: var(--ink); font-weight: 400; font-size: inherit; }
.arq-texto strong { color: var(--ink); }
/* na coluna lateral da edição, a mídia publicada fica empilhada */
.edit-midia .media-atual { flex-direction: column; align-items: stretch; }
.edit-midia .media-atual-info { display: grid; gap: 2px; }
/* as duas entradas do catálogo com a mesma altura */
.cat-entrada { align-items: stretch; }
.cat-entrada .add-dish-card:not([open]) { display: flex; align-items: center; }
.dish-card-actions .qr-details { border: 0; padding: 0; margin: 0; }

/* =====================================================================
   Painel plano (Visão geral e Catálogo)
   Uma folha só por página. As seções se separam por espaço e por uma linha
   fina, não por caixa: quando tudo é cartão arredondado com sombra, nada se
   destaca e a tela vira um mural. Cartão fica só pro que é objeto (o prato
   na grade). Cantos de 10px e sombra quase nenhuma — o arredondado
   generoso é do cardápio do cliente, não da ferramenta do dono.
   ===================================================================== */
.plano { --r-plano: 10px; }
.plano .app-head { background: none; border: 0; box-shadow: none; padding: 4px 4px 14px; }
.plano .app-content { background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 1px 2px rgba(59,31,59,.04); padding: 8px 28px 28px; }
@media (max-width: 640px) { .plano .app-content { padding: 4px 16px 20px; border-radius: 10px; } }
.plano .app-alert, .plano .vq, .plano [class*="quota"] { border-radius: var(--r-plano); }

/* --- Visão geral --- */
.plano .vg-resumo { background: none; border: 0; border-radius: 0; box-shadow: none; margin: 0; border-bottom: 1px solid var(--gray-light); }
.plano .vg-num { padding: 22px 20px 22px 0; border-left: 0; }
.plano .vg-num + .vg-num { padding-left: 20px; border-left: 1px solid var(--gray-light); }
.plano .vg-num.is-hero { background: none; color: var(--ink); }
.plano .vg-num.is-hero strong { color: var(--primary); }
.plano .vg-num.is-hero .vg-num-rotulo, .plano .vg-num.is-hero .vg-num-nota { color: var(--muted); }
.plano .vg-num-nota.is-up { color: var(--fresh-dark); font-weight: 700; }
.plano .vg-num-nota.is-down { color: var(--conversion-dark); font-weight: 700; }
@media (max-width: 760px) {
  .plano .vg-num { padding: 16px 12px 16px 0; }
  .plano .vg-num + .vg-num { padding-left: 12px; }
  .plano .vg-num:nth-child(3) { border-left: 0; padding-left: 0; }
}
.plano .vg-grade { gap: 0; }
.plano .vg-card { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 24px 0 0; }
.plano .vg-audiencia { padding-right: 28px; }
.plano .vg-fazer { padding-left: 28px; border-left: 1px solid var(--gray-light); }
@media (max-width: 980px) {
  .plano .vg-audiencia { padding-right: 0; }
  .plano .vg-fazer { padding-left: 0; border-left: 0; border-top: 1px solid var(--gray-light); margin-top: 24px; }
}
.plano .vg-card-topo h2 { font-size: 19px; }
.plano .vg-cardapio { border-radius: var(--r-plano); }
.plano .vg-vazio img, .plano .pp-conta { border-radius: 8px; }

/* --- Catálogo --- */
.plano .cat-entrada { padding: 20px 0; border-bottom: 1px solid var(--gray-light); margin: 0; }
.plano .scan-banner, .plano .add-dish-card { border-radius: var(--r-plano); box-shadow: none; background: var(--field); border: 1px solid var(--border); }
.plano .scan-banner:hover, .plano .add-dish-card:hover { border-color: var(--primary); }
.plano .scan-banner-icon { border-radius: 8px; }
.plano .catalog-panel { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 20px 0 14px; margin: 0; }
.plano .catalog-panel-title { font-size: 19px; }
.plano .catalog-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; }
.plano .catalog-search { flex: 1; min-width: 200px; }
.plano .catalog-search input, .plano .filter-chip, .plano .cat-lote > summary { border-radius: 8px; }
.cat-visao { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.cat-visao-btn { background: var(--card); color: var(--muted); border: 0; border-radius: 0; box-shadow: none; padding: 8px 14px; font: 800 13px var(--font-body); margin: 0; }
.cat-visao-btn + .cat-visao-btn { border-left: 1px solid var(--border); }
.cat-visao-btn:hover { background: var(--field); box-shadow: none; }
.cat-visao-btn.is-ativo { background: var(--primary); color: #fff; }
.plano .dish-card { border-radius: var(--r-plano); box-shadow: none; }
.dish-thumb { display: none; }
.dish-tem-video { font-size: 10px; color: var(--conversion); vertical-align: 2px; }

/* lista: uma linha por prato */
.dish-grid.is-lista { display: block; border-top: 1px solid var(--gray-light); }
.dish-grid.is-lista .dish-card { display: flex; flex-direction: row; align-items: center; gap: 14px; background: none; border: 0; border-bottom: 1px solid var(--gray-light); border-radius: 0; box-shadow: none; padding: 10px 4px; transform: none; }
.dish-grid.is-lista .dish-card:hover { background: var(--field); }
.dish-grid.is-lista .dish-card.hidden-by-filter { display: none; }
.dish-grid.is-lista .dish-video, .dish-grid.is-lista .dish-foto { display: none; }
.dish-grid.is-lista .dish-thumb { display: grid; place-items: center; width: 56px; height: 56px; flex-shrink: 0; border-radius: 8px; object-fit: cover; background: var(--secondary-light); color: var(--secondary-dark); font: 700 20px var(--font-serif); }
.dish-grid.is-lista .dish-card-body { flex: 1; min-width: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) 120px 110px auto; grid-template-areas: "nome preco status acoes" "cat preco status acoes"; align-items: center; column-gap: 16px; }
.dish-grid.is-lista .dish-card-top { display: contents; }
.dish-grid.is-lista .category { grid-area: cat; justify-self: start; background: none; padding: 0; font-size: 12px; color: var(--muted); letter-spacing: 0; text-transform: none; font-weight: 600; }
.dish-grid.is-lista .status-badge { grid-area: status; justify-self: start; }
.dish-grid.is-lista h3 { grid-area: nome; margin: 0; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dish-grid.is-lista .price { grid-area: preco; margin: 0; font-size: 14.5px; }
.dish-grid.is-lista .desc, .dish-grid.is-lista .context-badge { display: none; }
.dish-grid.is-lista .dish-card-actions { grid-area: acoes; margin: 0; padding: 0; border: 0; }
.dish-grid.is-lista .dish-card-actions .edit { flex: none; padding: 7px 14px; border-radius: 8px; }
@media (max-width: 760px) {
  .dish-grid.is-lista .dish-card { align-items: flex-start; }
  .dish-grid.is-lista .dish-card-body { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nome preco" "cat status" "acoes acoes"; row-gap: 4px; }
  .dish-grid.is-lista .price, .dish-grid.is-lista .status-badge { justify-self: end; }
  .dish-grid.is-lista .dish-card-actions { margin-top: 6px; }
}
/* barra do catálogo: busca à esquerda, alternância lista/grade à direita,
   filtros na linha de baixo */
.plano .catalog-toolbar { flex-direction: row; align-items: center; justify-content: flex-start; margin-bottom: 14px; }
.plano .catalog-toolbar .catalog-search { order: 1; }
.plano .catalog-toolbar .cat-visao { order: 2; margin-left: auto; }
.plano .catalog-toolbar .filter-chips { order: 3; flex-basis: 100%; }
.plano .catalog-search input { max-width: none; width: 100%; box-sizing: border-box; }
.dish-grid.is-lista .dish-card-body { grid-template-columns: minmax(0, 1fr) 170px 100px auto; }
.dish-grid.is-lista .price { white-space: nowrap; }
.plano .cat-entrada .scan-banner, .plano .cat-entrada .add-dish-summary { padding: 12px 14px; min-height: 0; }
.plano .cat-entrada .add-dish-card:not([open]) { padding: 0; }
.plano .cat-entrada .add-dish-summary-icon, .plano .scan-banner-icon { width: 38px; height: 38px; }
@media (max-width: 760px) { .dish-grid.is-lista .dish-card-body { grid-template-columns: minmax(0, 1fr) auto; } }

/* =====================================================================
   Painel plano em todas as telas + tela preenchida
   A folha de conteúdo e a lateral vão até o pé da janela (antes as duas
   terminavam no meio e sobrava uma faixa vazia de creme embaixo), e os
   blocos internos de cada tela deixam de ser caixas: viram seções da mesma
   folha, separadas por linha.
   ===================================================================== */
@media (min-width: 901px) {
  body.app { align-items: stretch; }
  .app-main.plano { min-height: calc(100vh - 32px); }
  .plano > .app-content { flex: 1; }
  /* lateral: uma coluna só, da marca até o pé */
  body.app .app-side { height: calc(100vh - 32px); max-height: none; }
  body.app .app-nav-card { flex: 1; display: flex; flex-direction: column; border-radius: 12px; box-shadow: none; border: 1px solid var(--border); }
  body.app .app-nav-card .app-nav { flex: 1; display: flex; flex-direction: column; }
  body.app .app-account { border-radius: 12px; box-shadow: none; }
}
body.app .app-nav-item { border-radius: 8px; }

/* blocos internos: seções da folha, não caixas */
.plano .app-content :is(.ov-card, .vg-card, .card, .asn-plano, .apa-bloco, .dst-novo, .dst-bloco) {
  background: none; border: 0; border-radius: 0; box-shadow: none; padding: 22px 0 0; margin: 0;
}
.plano .app-content :is(.ov-card, .vg-card, .card, .asn-plano, .apa-bloco, .dst-novo, .dst-bloco) + :is(.ov-card, .vg-card, .card, .asn-plano, .apa-bloco, .dst-novo, .dst-bloco) {
  margin-top: 22px; border-top: 1px solid var(--gray-light);
}
.plano .asn-plano::before { display: none; }
.plano .app-content > .add-dish-card, .plano .app-section > .add-dish-card { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 22px 0 0; }
.plano .app-content-form { max-width: none; }

/* grade de análises: as divisas viram linhas, não molduras */
.plano .ov-grid { gap: 0 32px; }
.plano .ov-grid > .ov-card { border-top: 1px solid var(--gray-light); margin-top: 0; padding: 20px 0 22px; }
.plano .ov-kpis { gap: 0; border-bottom: 1px solid var(--gray-light); margin-bottom: 0; }
.plano .ov-kpi { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 22px 20px 22px 0; color: var(--ink); }
.plano .ov-kpi + .ov-kpi { padding-left: 20px; border-left: 1px solid var(--gray-light); }
.plano .ov-kpi.is-hero { background: none; }
.plano .ov-kpi.is-hero .ov-kpi-value { color: var(--primary); }
.plano .ov-kpi.is-hero .ov-kpi-label, .plano .ov-kpi.is-hero .ov-kpi-chip { color: var(--muted); background: var(--gray-light); }
.plano .ov-kpi.is-hero .ov-kpi-label { background: none; }
.plano .ov-kpi-badge { display: none; }
@media (max-width: 760px) {
  .plano .ov-kpi { padding: 16px 12px 16px 0; }
  .plano .ov-kpi + .ov-kpi { padding-left: 12px; }
  .plano .ov-kpi:nth-child(odd) { border-left: 0; padding-left: 0; }
}

/* aparência e edição: prévia e mídia continuam destacadas, mas sem sombra */
.plano .apa-previa, .plano .edit-midia { box-shadow: none; border-radius: 10px; }
.plano .apa-grade { gap: 32px; }
.plano .dish-card, .plano .dst-item, .plano .media-atual, .plano .arq, .plano .ia-box { border-radius: 10px; box-shadow: none; }
.plano .trial-banner, .plano .overage-box, .plano .app-alert { border-radius: 10px; box-shadow: none; }

/* telas com coluna de apoio (Escanear, Unidades, Destaques) */
.tela-2col { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 0 36px; align-items: start; }
@media (max-width: 1080px) { .tela-2col { grid-template-columns: minmax(0, 1fr); } }
.tela-2col > :first-child { min-width: 0; }
.tela-apoio { padding: 22px 0 0 28px; border-left: 1px solid var(--gray-light); align-self: stretch; }
@media (max-width: 1080px) { .tela-apoio { padding: 22px 0 0; border-left: 0; border-top: 1px solid var(--gray-light); margin-top: 22px; } }
.apoio-sub { margin-top: 24px; }
.apoio-passos { list-style: none; counter-reset: ap; margin: 10px 0 0; padding: 0; display: grid; gap: 14px; }
.apoio-passos li { counter-increment: ap; position: relative; padding-left: 38px; display: grid; gap: 2px; }
.apoio-passos li::before { content: counter(ap); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--secondary-light); color: var(--secondary-dark); font-weight: 800; font-size: 13px; }
.apoio-passos span { color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.apoio-dicas { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.apoio-dicas li { position: relative; padding-left: 24px; font-size: 14px; color: var(--muted); line-height: 1.45; }
.apoio-dicas li::before { content: "✓"; position: absolute; left: 0; color: var(--fresh); font-weight: 900; }
.apoio-nota { margin-top: 16px; }
.plano .scan-principal { background: none; border: 0; box-shadow: none; padding: 22px 0 0; max-width: none; margin: 0; }
.plano .tela-2col > .add-dish-card { padding-top: 22px; }
/* prévia da faixa de destaques */
.dst-previa-tela { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 14px; display: grid; gap: 10px; }
.dst-previa-titulo { font: 800 12px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dst-previa-item { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; background: var(--card); border-radius: 10px; padding: 8px; border: 1px solid var(--gray-light); }
.dst-previa-item.is-exemplo { opacity: .85; }
.dst-previa-item img, .dst-previa-ini { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; display: grid; place-items: center; background: var(--secondary-light); font: 700 22px var(--font-serif); color: var(--secondary-dark); }
.dst-previa-item div { display: grid; gap: 1px; min-width: 0; }
.dst-previa-item em { font-style: normal; font-size: 12px; font-weight: 800; color: var(--conversion-dark); }
.dst-previa-item strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dst-previa-item span { font-size: 13px; color: var(--muted); font-weight: 700; }

/* Visão geral: as duas colunas da grade não levam o divisor de seção */
.plano .app-content .vg-grade > .vg-card + .vg-card { margin-top: 0; border-top: 0; }
.plano .app-content .vg-grade > .vg-audiencia { padding: 24px 28px 0 0; }
.plano .app-content .vg-grade > .vg-fazer { padding: 24px 0 0 28px; border-left: 1px solid var(--gray-light); }
@media (max-width: 980px) {
  .plano .app-content .vg-grade > .vg-audiencia { padding-right: 0; }
  .plano .app-content .vg-grade > .vg-fazer { padding-left: 0; border-left: 0; border-top: 1px solid var(--gray-light); margin-top: 24px; }
}
/* Mídia: números numa faixa, como nas outras telas */
.plano .summary-row { gap: 0; border-bottom: 1px solid var(--gray-light); padding-bottom: 4px; margin-bottom: 18px; }
.plano .summary-stat { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 18px 18px 14px 0; }
.plano .summary-stat + .summary-stat { padding-left: 18px; border-left: 1px solid var(--gray-light); }
.plano .tela-2col > .add-dish-card { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 22px 0 0; margin: 0; }

/* QR do prato: janela centralizada com fundo escuro. O fundo é o ::before
   do próprio <summary>, então tocar fora fecha o <details>. */
.dish-card:has(.qr-details[open]) { overflow: visible; transform: none !important; position: relative; z-index: 60; }
.dish-card-actions .qr-details[open] > summary::before { content: ""; position: fixed; inset: 0; background: rgba(30,27,29,.45); z-index: 99; cursor: default; }
.qr-details[open] .qr-pop { position: fixed; top: 50%; left: 50%; bottom: auto; transform: translate(-50%, -50%); z-index: 100; width: min(300px, calc(100vw - 32px)); padding: 22px; gap: 8px; text-align: center; border-radius: 14px; box-shadow: 0 24px 60px rgba(30,27,29,.35); }
.qr-pop .qr { width: 220px; height: 220px; max-width: 100%; margin: 6px 0; }
.qr-pop-nome { font: 700 18px var(--font-serif); color: var(--primary); }
.qr-pop-sub, .qr-pop-fechar { font-size: 12.5px; color: var(--muted); }
.qr-pop-acoes { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.qr-pop-x { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 50%; padding: 0; margin: 0; background: var(--gray-light); color: var(--ink); border: 0; box-shadow: none; font: 400 22px/1 var(--font-body); cursor: pointer; }
.qr-pop-x:hover { background: var(--border); box-shadow: none; }
button.qr-pop-fechar { margin-top: 4px; background: none; border: 1px solid var(--border); color: var(--ink); box-shadow: none; border-radius: 8px; padding: 8px 18px; font: 800 13.5px var(--font-body); cursor: pointer; align-self: center; }
button.qr-pop-fechar:hover { background: var(--field); box-shadow: none; }

/* janela única do QR (fora dos cards) */
.qr-janela { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; }
.qr-janela[hidden] { display: none; }
.qr-janela-fundo { position: absolute; inset: 0; background: rgba(30,27,29,.5); }
.qr-janela .qr-pop { position: relative; inset: auto; transform: none; display: grid; justify-items: center; gap: 8px; width: min(300px, 100%); padding: 22px; text-align: center; background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 24px 60px rgba(30,27,29,.35); }
html.qr-aberto { overflow: hidden; }
.dish-card-actions .qr-botao { font: 800 13px var(--font-body); color: var(--muted); padding: 8px 10px; border-radius: 8px; text-decoration: none; }
.dish-card-actions .qr-botao:hover { background: var(--gray-light); color: var(--ink); }

/* A janela do QR surge do centro, não do nada: começa em 96% e
   transparente. É modal, então a origem fica no meio da tela. Fecha sem
   animação — quem fechou já decidiu, não precisa esperar. */
@media (prefers-reduced-motion: no-preference) {
  .qr-janela:not([hidden]) .qr-pop { animation: qrEntra .2s var(--ease-out) both; }
  .qr-janela:not([hidden]) .qr-janela-fundo { animation: appFade2 .2s ease both; }
  @keyframes qrEntra { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
}

/* Toque não tem hover: no celular o toque dispara o :hover e o card fica
   levantado, com a foto ampliada, até tocar em outra coisa. Onde não há
   ponteiro fino, os realces de hover não se mexem — cor e borda ficam. */
@media (hover: none), (pointer: coarse) {
  .gallery-item:hover, .ov-kpi:hover, .ov-card:hover, .dish-card:hover,
  .summary-stat:hover, .health-cell:hover, .scan-choice:hover,
  .filter-chip:hover, .choice-card:hover, .dst-card:hover, .ok-passo:hover,
  .public-back:hover, .lp-demo-item:hover .lp-demo-media,
  .gallery-item:hover .gallery-item-media img,
  .dish-card:hover img:not(.qr) { transform: none; }
}

/* Visão geral: a grade de detalhe abaixo dos três blocos */
.vg-detalhe { margin-top: 24px; }

/* Grade de análises no painel plano. A regra genérica de "card depois de
   card" dava 22px de margem ao segundo card de cada linha, e as colunas
   começavam desalinhadas; dentro da grade quem separa é o gap. */
.plano .app-content .ov-grid > .ov-card { margin-top: 0; }
.plano .app-content .ov-grid { align-items: stretch; }
.plano .an-nota { margin: 10px 0 4px; }
.an-origem, .plano .app-content .an-ranking { margin-top: 8px; }
/* o selo do número principal segue as cores de subiu/caiu como os outros */
.plano .ov-kpi.is-hero .ov-kpi-chip.is-up { background: var(--fresh-light); color: var(--fresh-dark); }
.plano .ov-kpi.is-hero .ov-kpi-chip.is-down { background: var(--conversion-light); color: var(--conversion-dark); }

/* ===================================================================
   PEDIDO PELA MESA (pedidos.go)
   Cliente: botão de adicionar na página do prato, sacola fixa no pé,
   tela de envio e de acompanhamento. Painel: Mesas e Pedidos.
   =================================================================== */

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- adicionar (página do prato) ---- */
.pd-adicionar { display: flex; gap: 10px; align-items: center; margin-top: 20px; }
.pd-qtd { display: inline-flex; align-items: center; border: 1.5px solid var(--border); border-radius: 999px; background: var(--card); }
.pd-qtd button { width: 44px; height: 44px; border: 0; background: none; color: var(--ink); font: 700 20px/1 var(--font-body); cursor: pointer; border-radius: 999px; }
.pd-qtd button:active { transform: scale(.94); }
.pd-qtd output { min-width: 22px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.pd-add {
  flex: 1; min-height: 48px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--brand); color: var(--brand-ink, #fff);
  font: 800 16px var(--font-body); transition: transform .16s ease-out, background-color .2s ease;
}
.pd-add:active { transform: scale(.97); }
.pd-add.is-feito { background: var(--fresh-dark, #2f6b4f); color: #fff; }

/* ---- sacola fixa ---- */
body.com-sacola { padding-bottom: 96px; }
.pd-sacola { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); pointer-events: none; }
.pd-sacola-link {
  pointer-events: auto; display: flex; align-items: center; gap: 12px; max-width: 560px; margin: 0 auto;
  padding: 12px 16px; border-radius: 18px; text-decoration: none;
  background: var(--card); color: var(--ink); border: 1px solid var(--border);
  box-shadow: 0 10px 30px -12px rgba(30,27,29,.35);
}
.pd-sacola.tem-itens .pd-sacola-link { background: var(--brand); color: var(--brand-ink, #fff); border-color: transparent; }
/* encolhe com reticências: a mesa de uma praça leva o nome da praça
   ("Mesa 1 · Praça …"), e sem isso empurrava o resumo pra fora da tela */
.pd-sacola-mesa { flex: 0 1 auto; min-width: 0; max-width: 50%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; background: var(--brand-soft, var(--surface-alt)); color: var(--brand-dark, var(--primary)); }
.pd-sacola.tem-itens .pd-sacola-mesa { background: rgba(255,255,255,.18); color: inherit; }
.pd-sacola-resumo { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-sacola-cta { flex: none; font-weight: 800; font-size: 14.5px; }
.pd-sacola.pulsa .pd-sacola-link { animation: pdPulsa .45s cubic-bezier(.23,1,.32,1); }
@keyframes pdPulsa { 0% { transform: scale(1); } 40% { transform: scale(1.03); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .pd-sacola.pulsa .pd-sacola-link { animation: none; } }

/* ---- telas de envio e acompanhamento ---- */
.pd-page { align-items: stretch; }
.pd-topo { display: flex; align-items: center; gap: 12px; padding: 18px 16px 6px; max-width: 560px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.pd-topo h1 { margin: 0; font: 800 24px/1.15 var(--font-display); }
.pd-topo p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.pd-voltar { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 999px; background: var(--card); color: var(--ink); border: 1px solid var(--border); }
.pd-main { max-width: 560px; width: 100%; margin: 0 auto; padding: 8px 16px 24px; box-sizing: border-box; }
.pd-erro { margin: 8px 0 12px; padding: 12px 14px; border-radius: 12px; background: var(--conversion-light); color: var(--conversion-dark); font-weight: 700; font-size: 14.5px; }
.pd-itens { list-style: none; margin: 8px 0 0; padding: 0; background: var(--card); border-radius: 16px; border: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.pd-item { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "nome preco" "qtd qtd"; gap: 8px 12px; padding: 14px 16px; }
.pd-item + .pd-item { border-top: 1px solid var(--gray-light); }
.pd-item-nome { grid-area: nome; font-weight: 700; }
.pd-item-preco { grid-area: preco; font-weight: 800; font-variant-numeric: tabular-nums; }
.pd-item .pd-qtd { grid-area: qtd; justify-self: start; }
.pd-qtd-mini button { width: 38px; height: 38px; font-size: 18px; }
.pd-vazio { margin-top: 16px; padding: 22px; text-align: center; background: var(--card); border-radius: 16px; }
.pd-vazio p { margin: 0 0 12px; color: var(--muted); }
.pd-total { display: flex; justify-content: space-between; align-items: baseline; margin: 16px 2px; font-size: 16px; }
.pd-total strong { font: 800 22px var(--font-display); font-variant-numeric: tabular-nums; }
.pd-campo { display: grid; gap: 6px; margin: 0 0 14px; }
.pd-campo span { font-weight: 700; font-size: 14px; }
.pd-campo small { color: var(--muted); font-weight: 500; }
.pd-campo input, .pd-campo textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; font: 500 16px var(--font-body); color: var(--ink); background: var(--card); border: 1.5px solid var(--border); border-radius: 12px; resize: vertical; }
.pd-campo input:focus, .pd-campo textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent); }
.pd-enviar { width: 100%; min-height: 54px; border: 0; border-radius: 999px; cursor: pointer; background: var(--brand); color: var(--brand-ink, #fff); font: 800 17px var(--font-body); transition: transform .16s ease-out, opacity .2s ease; }
.pd-enviar:active { transform: scale(.97); }
.pd-enviar:disabled { opacity: .7; cursor: progress; }
.pd-nota { margin: 12px 0 0; text-align: center; color: var(--muted); font-size: 13.5px; }

.pd-acompanhar { text-align: center; padding-top: 32px; }
.pd-selo { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; background: var(--fresh-light, #e3f1e7); color: var(--fresh-dark, #2f6b4f); }
.pd-acompanhar h1 { margin: 0; font: 800 28px/1.1 var(--font-display); }
.pd-numero { color: var(--brand); }
.pd-sub { margin: 6px 0 18px; color: var(--muted); font-size: 14px; }
.pd-etapas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; list-style: none; padding: 0; margin: 0 0 10px; counter-reset: etapa; }
.pd-etapas li { position: relative; padding-top: 14px; font-size: 13px; font-weight: 700; color: var(--muted); }
.pd-etapas li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; border-radius: 999px; background: var(--gray-light); transition: background-color .3s ease; }
.pd-etapas li.is-feita { color: var(--ink); }
.pd-etapas li.is-feita::before { background: var(--brand); }
.pd-etapas li.is-atual { color: var(--brand-dark, var(--primary)); }
.pd-status-atual { margin: 8px 0 20px; font: 800 20px var(--font-display); }
.pd-cancelado { margin: 8px 0 20px; padding: 12px 14px; border-radius: 12px; background: var(--conversion-light); color: var(--conversion-dark); font-weight: 700; }
.pd-resumo { text-align: left; background: var(--card); border-radius: 16px; padding: 6px 16px; }
.pd-resumo ul { list-style: none; margin: 0; padding: 0; }
.pd-resumo li { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--gray-light); }
.pd-q { font-weight: 800; color: var(--brand-dark, var(--primary)); font-variant-numeric: tabular-nums; }
.pd-nome { font-weight: 600; }
.pd-sub-total { font-variant-numeric: tabular-nums; }
.pd-obs { margin: 10px 0 0; color: var(--muted); font-style: italic; }
.pd-mais { display: inline-block; margin-top: 18px; padding: 11px 20px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--primary); font-weight: 700; text-decoration: none; }

/* ---- painel: Mesas ---- */
.btn-outline { background: var(--card); color: var(--primary); border: 1.5px solid var(--border); box-shadow: none; }
.btn-outline:hover { background: var(--surface-alt); }
.ms-msg { margin-bottom: 14px; }
.ms-chave { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 20px; margin-bottom: 18px; border-radius: 14px; background: var(--field); border: 1px solid var(--gray-light); }
.ms-chave.is-ligado { background: var(--fresh-light, #e3f1e7); border-color: color-mix(in srgb, var(--fresh-dark, #2f6b4f) 25%, transparent); }
.ms-chave h2 { margin: 0 0 4px; font-size: 17px; }
.ms-chave p { margin: 0; color: var(--muted); font-size: 14px; max-width: 62ch; }
.ms-chave p a { color: var(--primary); font-weight: 700; }
.ms-chave form { flex: none; }
.ms-lista-sec { margin-top: 22px; }
.ms-lista { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 0; }
.ms-item { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--gray-light); }
.ms-qr { width: 72px; height: 72px; border-radius: 8px; background: #fff; border: 1px solid var(--gray-light); }
.ms-renomear { display: flex; gap: 8px; align-items: center; min-width: 0; }
.ms-renomear input { min-width: 0; max-width: 240px; }
.ms-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 13.5px; }
.ms-meta a { color: var(--primary); font-weight: 700; text-decoration: none; }
.ms-unidade { color: var(--muted); }
.ms-excluir { background: none; border: 0; box-shadow: none; padding: 6px; color: var(--muted); font-size: 13px; cursor: pointer; }
.ms-excluir:hover { color: var(--conversion-dark); }
@media (max-width: 640px) {
  .ms-chave { flex-direction: column; align-items: stretch; }
  .ms-item { grid-template-columns: 56px minmax(0, 1fr); }
  .ms-qr { width: 56px; height: 56px; }
  .ms-meta { grid-column: 2; align-items: flex-start; flex-direction: row; gap: 12px; }
  .ms-item > form:last-child { grid-column: 2; }
}
/* folha de QRs: a etiqueta grande ganha o nome da casa e da mesa */
.ms-etq { gap: 2mm; }
.ms-etq-casa { display: block; font-size: 9pt; color: #555; }
.ms-etq-mesa { display: block; font-size: 16pt; line-height: 1.1; }

/* ---- painel: Pedidos ---- */
.pp-ao-vivo { display: inline-flex; align-items: center; gap: 8px; }
.pp-ao-vivo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--fresh-dark, #2f6b4f); box-shadow: 0 0 0 4px color-mix(in srgb, var(--fresh-dark, #2f6b4f) 18%, transparent); }
.pp-ao-vivo.is-erro::before { background: var(--conversion); box-shadow: 0 0 0 4px var(--conversion-light); }
.pp-som.is-ligado { background: var(--fresh-light, #e3f1e7); border-color: transparent; color: var(--fresh-dark, #2f6b4f); }
.pp-quadro { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.pp-coluna { background: var(--field); border-radius: 14px; padding: 12px; min-height: 160px; }
.pp-coluna h2 { display: flex; align-items: center; gap: 8px; margin: 2px 4px 12px; font-size: 15px; }
.pp-conta { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--card); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pp-cartoes { display: grid; gap: 10px; }
.pp-cartao { background: var(--card); border-radius: 12px; padding: 12px 14px; border: 1px solid var(--gray-light); border-left: 4px solid var(--border); }
.pp-cartao.is-novo { border-left-color: var(--conversion); }
.pp-cartao.is-preparo { border-left-color: #c98a0c; }
.pp-cartao.is-pronto { border-left-color: var(--fresh-dark, #2f6b4f); }
.pp-cartao.is-chegou { animation: ppChegou .6s cubic-bezier(.23,1,.32,1); }
@keyframes ppChegou { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pp-cartao.is-chegou { animation: none; } }
.pp-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pp-mesa { font: 800 18px var(--font-display); }
.pp-num { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-cliente { margin: 2px 0 0; font-size: 13.5px; color: var(--muted); }
.pp-itens { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; font-size: 15px; }
.pp-itens li { display: grid; grid-template-columns: 2.4ch minmax(0, 1fr); gap: 6px; }
.pp-q { font-weight: 800; font-variant-numeric: tabular-nums; }
.pp-obs { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: #fff4d6; color: #6b4b00; font-size: 14px; font-weight: 600; }
.pp-pe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.pp-total { font-weight: 800; font-variant-numeric: tabular-nums; }
.pp-rotulo { font-size: 12.5px; color: var(--muted); font-weight: 700; }
.pp-acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.pp-acao { min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--card); color: var(--ink); font: 700 13.5px var(--font-body); cursor: pointer; box-shadow: none; transition: transform .16s ease-out; }
.pp-acao:active { transform: scale(.97); }
.pp-acao-preparo, .pp-acao-pronto, .pp-acao-entregue { background: var(--primary); border-color: var(--primary); color: #fff; }
.pp-acao-cancelado { color: var(--muted); border-color: transparent; background: none; }
.pp-vazio { margin: 14px 0 0; color: var(--muted); text-align: center; }
.pp-finalizados { margin-top: 22px; }
.pp-finalizados summary { cursor: pointer; font-weight: 700; display: inline-flex; gap: 8px; align-items: center; }
.pp-cartoes-fim { margin-top: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.pp-cartoes-fim .pp-cartao { opacity: .75; }
@media (max-width: 900px) { .pp-quadro { grid-template-columns: 1fr; } }

/* Rede de segurança do cardápio público: o que vier do restaurante (nome de
   categoria, de prato, palavra sem espaço) quebra em vez de alargar a
   página. clip, e não hidden: hidden quebraria a barra de categorias fixa. */
.gallery-page, .public-page { overflow-x: clip; }
.gallery-item-body h3, .public-body h1, .public-tags .category, .gallery-header h1 { overflow-wrap: anywhere; }

/* ---- "+" na grade (pedido pela mesa) ---- */
.gallery-cell { position: relative; min-width: 0; }
.gallery-cell[hidden] { display: none; }
.gallery-cell > .gallery-item { height: 100%; }
/* o preço não pode passar por baixo do botão */
.gallery-cell .gallery-item-body .price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; padding-right: 50px; }
.gallery-add {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  display: grid; place-items: center;
  background: var(--brand); color: var(--brand-ink, #fff);
  font: 800 24px/1 var(--font-body);
  box-shadow: 0 6px 16px -6px rgba(30,27,29,.45);
  transition: transform .16s cubic-bezier(.23,1,.32,1);
}
.gallery-add:active { transform: scale(.92); }
.gallery-add:focus-visible { outline: 2px solid var(--brand-dark, var(--primary)); outline-offset: 3px; }
.gallery-add.tem-qtd .gallery-add-mais { display: none; }
.gallery-add-qtd { font-size: 16px; font-variant-numeric: tabular-nums; }
.gallery-add.pulsa { animation: pdPulsa .45s cubic-bezier(.23,1,.32,1); }
@media (prefers-reduced-motion: reduce) { .gallery-add.pulsa { animation: none; } }
/* preço riscado e preço atual nunca quebram no meio do valor */
.price-original, .price-now, .price-promo { white-space: nowrap; }

/* ---- "Mais em {categoria}" na página do prato ---- */
.pr-mais { width: 100%; max-width: 640px; margin: 26px auto 0; box-sizing: border-box; }
.pr-mais h2 { margin: 0 16px 12px; font: 800 18px/1.2 var(--font-menu, var(--font-display)); color: var(--brand-dark, var(--primary)); overflow-wrap: anywhere; }
.pr-mais-trilho {
  display: grid; grid-auto-flow: column; grid-auto-columns: 42%; gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px;
  padding: 2px 16px 10px; scrollbar-width: none;
}
.pr-mais-trilho::-webkit-scrollbar { display: none; }
@media (min-width: 560px) { .pr-mais-trilho { grid-auto-columns: 30%; } }
.pr-mais-card {
  scroll-snap-align: start; display: flex; flex-direction: column; gap: 4px; min-width: 0;
  background: #fff; border-radius: 14px; overflow: hidden; text-decoration: none; color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
  box-shadow: 0 2px 5px rgba(31,26,29,.05);
  transition: transform .16s cubic-bezier(.23,1,.32,1);
}
.pr-mais-card:active { transform: scale(.97); }
.pr-mais-media { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--brand-soft, var(--surface-alt)); overflow: hidden; }
.pr-mais-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pr-mais-card strong { padding: 6px 10px 0; font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; }
.pr-mais-preco { padding: 0 10px 10px; font-size: 13.5px; font-weight: 800; white-space: nowrap; }
.pr-mais-card.is-esgotado .pr-mais-media { opacity: .6; }
.pr-mais-card.is-esgotado .pr-mais-preco { color: var(--muted); }

/* tela estreita: a sacola encurta o convite pra caber o total inteiro, e o
   botão de adicionar deixa o preço (que já está logo acima) de fora */
@media (max-width: 400px) {
  .pd-sacola-link { gap: 8px; padding: 12px 14px; }
  .pd-cta-extra { display: none; }
}
@media (max-width: 380px) {
  .pd-add [data-add-total] { display: none; }
}
.pd-add { white-space: nowrap; }

/* ---- tela de QR codes ---- */
.qr-bloco { padding: 22px 0; border-top: 1px solid var(--gray-light); }
.qr-bloco:first-child { border-top: 0; padding-top: 8px; }
.qr-bloco-topo h2 { margin: 0 0 4px; font-size: 19px; }
.qr-bloco-topo p { margin: 0 0 16px; color: var(--muted); font-size: 14.5px; max-width: 68ch; }
.qr-cardapios { display: grid; gap: 16px; }
.qr-cardapio { display: flex; gap: 18px; align-items: center; }
.qr-img { flex: none; width: 132px; height: 132px; border-radius: 12px; background: #fff; border: 1px solid var(--gray-light); padding: 6px; box-sizing: border-box; }
.qr-cardapio-info { display: grid; gap: 6px; min-width: 0; }
.qr-url { color: var(--muted); font-size: 13.5px; overflow-wrap: anywhere; }
.qr-acoes, .qr-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 4px; }
.qr-acoes button.btn-link { background: none; border: 0; box-shadow: none; padding: 6px 0; color: var(--primary); font: 700 14px var(--font-body); cursor: pointer; }
.qr-conta { color: var(--muted); font-size: 14.5px; margin-right: 6px; }
.qr-conta strong { color: var(--ink); }
@media (max-width: 560px) {
  .qr-cardapio { flex-direction: column; align-items: flex-start; }
}
/* cartaz: o nome da casa em cima, a chamada embaixo, grandes */
.qr-cartaz { gap: 5mm; padding: 10mm 8mm; }
.qr-cartaz-casa { font: 800 22pt/1.1 var(--font-display); text-align: center; }
.qr-cartaz-chamada { font-size: 15pt; font-weight: 700; text-align: center; }
.qr-cartaz-unidade { font-size: 11pt; color: #555; }
/* na tela do celular o cartaz cabe na largura; no papel volta aos 110mm */
@media screen {
  .etq-folha[data-tamanho="cartaz"] { grid-template-columns: minmax(0, calc(var(--etq-qr) + 10mm)); }
  .etq-folha[data-tamanho="cartaz"] .etq { width: auto; max-width: 100%; box-sizing: border-box; }
  .etq-folha[data-tamanho="cartaz"] .etq-qr { max-width: 100%; height: auto; aspect-ratio: 1; }
}

/* ===================== Praça de alimentação (praca.go) =====================
   A tela que o QR da mesa da praça abre: uma lista de restaurantes, cada
   card na cor e com a logo da casa que ele abre. Lista e não grade porque o
   cliente procura um nome, e nomes se leem de cima pra baixo. */
.praca-mesa {
  display: inline-block;
  margin-right: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  color: var(--brand);
  background: var(--brand-ink);
}
.praca-lista {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 560px;
  display: grid;
  gap: 10px;
}
.praca-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px 12px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.praca-card:hover { border-color: var(--casa); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.praca-card:focus-visible { outline: 2px solid var(--casa); outline-offset: 2px; }
.praca-card-logo {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  object-fit: contain;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--border);
}
.praca-card-inicial {
  display: grid;
  place-items: center;
  font: 800 24px/1 var(--font-display);
  color: var(--casa-ink);
  background: var(--casa);
  box-shadow: none;
}
.praca-card-texto { flex: 1; min-width: 0; display: grid; gap: 4px; }
.praca-card-texto strong {
  font: 700 17px/1.25 var(--font-display);
  overflow-wrap: anywhere;
}
.praca-card-tag {
  justify-self: start;
  font-size: 12px;
  font-weight: 700;
  color: var(--secondary-dark);
  background: var(--secondary-light);
  padding: 2px 9px;
  border-radius: 999px;
}
.praca-card-seta { flex: none; font-size: 20px; color: var(--muted); }
.praca-vazia { text-align: center; color: var(--muted); margin: 24px 0; }

/* O caminho de volta pra praça, no topo do cardápio de um restaurante. A
   regra dupla vence o "> *" do topo com banner, que punha tudo em
   position: relative. */
.gallery-header > .gallery-praca,
.gallery-header.tem-banner > a.gallery-praca {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  color: var(--brand-ink);
  background: rgba(0,0,0,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}
.gallery-header > .gallery-praca:hover { background: rgba(0,0,0,.28); }
.gallery-header.tem-banner > a.gallery-praca { color: #fff; background: rgba(0,0,0,.42); }

/* Folha de QRs da praça: sem a barra lateral, então a folha não herda a
   grade de duas colunas do painel. */
body.praca-folha { padding: 16px; background: var(--bg); }

/* ===================== Impressora da cozinha (impressao.go) ===================== */
.pp-impressora { margin: 0 0 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); }
.pp-impressora summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; cursor: pointer; list-style: none; }
.pp-impressora summary::-webkit-details-marker { display: none; }
.pp-impressora-titulo { font-weight: 800; }
.pp-impressora-estado { font-size: 13px; font-weight: 700; color: var(--muted); padding: 3px 10px; border-radius: 999px; background: var(--surface-alt); }
.pp-impressora.is-ligada .pp-impressora-estado { color: var(--fresh-dark); background: color-mix(in srgb, var(--fresh-dark) 12%, transparent); }
.pp-impressora-corpo { display: grid; gap: 14px; padding: 0 18px 18px; border-top: 1px solid var(--gray-light); padding-top: 14px; }
.pp-impressora-chave { display: flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; }
.pp-impressora-chave input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--primary); }
.pp-impressora-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pp-impressora-linha label { font-weight: 700; font-size: 14px; }
.pp-impressora-linha select { width: auto; min-width: 190px; }
.pp-impressora-ajuda { font-size: 13.5px; color: var(--muted); }
.pp-impressora-ajuda p { margin: 0 0 6px; }
.pp-impressora-ajuda code { font-size: 12.5px; background: var(--surface-alt); padding: 1px 5px; border-radius: 5px; overflow-wrap: anywhere; }
.pp-acao-imprimir { color: var(--muted); }
/* o quadro do cupom precisa existir pra imprimir, mas não pode aparecer
   nem ocupar lugar: display:none faria alguns navegadores imprimirem vazio */
.pp-quadro-impressao { position: fixed; right: 0; bottom: 0; width: 0; height: 0; border: 0; opacity: 0; pointer-events: none; }

/* ===================== Integrações (webhook.go) ===================== */
.in-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 900px) { .in-grade { grid-template-columns: 1fr; } }
.plano .app-content .in-grade > .in-cartao { margin-top: 0; }
.in-cartao h2 { margin: 6px 0 8px; }
.in-cartao > p { margin: 0 0 12px; color: var(--muted); }
.in-tag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--secondary-dark); background: var(--secondary-light); padding: 3px 9px; border-radius: 999px; }
/* Os dois campos do webhook seguem o mesmo molde: rótulo, linha com campo
   e botão da mesma altura, dica logo abaixo. O de endereço herdava as regras
   do formulário de prato (rótulo cinza, espaços maiores, botão 6px abaixo),
   e lado a lado com o do segredo os dois pareciam tortos. */
.in-form, .in-segredo { margin-top: 18px; }
.in-form label, .in-segredo label { display: block; margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--ink); }
.in-linha { display: flex; gap: 8px; align-items: stretch; }
.in-linha input { flex: 1; min-width: 0; height: 46px; margin: 0; box-sizing: border-box; }
.in-linha form { margin: 0; display: flex; }
.in-linha button { height: 46px; margin: 0; padding-top: 0; padding-bottom: 0; white-space: nowrap; }
.in-form .apa-ajuda, .in-segredo .apa-ajuda { margin: 8px 0 0; }
.in-segredo input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.in-teste { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-top: 22px; }
.in-teste .apa-ajuda { margin: 0; }
.in-historico { margin-top: 20px; }
.in-erro { font-size: 13px; color: var(--muted); }
.plano .app-alert.in-ok { background: color-mix(in srgb, var(--fresh-dark) 10%, var(--card)); }
.in-docs { margin-top: 20px; }
.in-docs summary { cursor: pointer; font-weight: 800; }
.in-docs ul { padding-left: 20px; }
.in-docs li { margin: 4px 0; }
.in-docs code { font-size: 12.5px; background: var(--surface-alt); padding: 1px 5px; border-radius: 5px; }
.in-exemplo { max-height: 360px; overflow: auto; padding: 14px; border-radius: 12px; background: #1e1b1d; color: #f3ece0; font-size: 12.5px; line-height: 1.5; }
.in-exemplo code { background: none; padding: 0; color: inherit; }
@media (max-width: 520px) { .in-linha { flex-wrap: wrap; } .in-linha input { flex-basis: 100%; } }

/* ---- alinhamento do topo do conteúdo nas telas planas ----
   O cartão de conteúdo tem 8px em cima porque a maioria das telas abre com
   um título de seção, que traz o próprio respiro. Quando a tela abre com um
   aviso ou com um bloco emoldurado, ele encostava na borda de cima (8px)
   enquanto tinha 28px dos lados. Esse primeiro bloco ganha o que faltava. */
.plano .app-content > :is(.app-alert, .pp-impressora, .in-grade):first-child { margin-top: 20px; }
/* o aviso era texto solto com o link no azul do navegador */
.plano .app-alert { padding: 12px 16px; background: var(--secondary-light); color: var(--ink); line-height: 1.45; }
.plano .app-alert a { color: var(--primary); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
/* o contador dos finalizados fica sobre o fundo branco do cartão, onde a
   etiqueta clara das colunas some: aqui ele leva o fundo de selo */
.pp-finalizados .pp-conta { background: var(--secondary-light); }

/* "Table360" é mais largo que o nome antigo: no celular estreito o botão do
   topo quebrava em duas linhas. Aperta o espaço em vez de deixar quebrar. */
@media (max-width: 420px) {
  .lp-header-actions { gap: 12px; }
  .lp-header-actions .lp-btn-sm { padding: 10px 14px; white-space: nowrap; }
}
/* abaixo disso nem apertado cabe: o convite do topo sai, e o do hero, logo
   abaixo ("Começar 14 dias grátis"), faz o mesmo papel */
@media (max-width: 360px) {
  .lp-header-actions .lp-btn-sm { display: none; }
}

/* ===================== Adicional Mesas e Pedidos (adicional.go) ===================== */
/* cadeado na barra lateral: o item continua clicável (leva à página que
   explica e contrata), só fica mais apagado */
.app-nav-item.is-bloqueado { color: var(--muted); }
.app-nav-item.is-bloqueado > svg:first-child { opacity: .6; }
.app-nav-cadeado { width: 14px !important; height: 14px !important; margin-left: auto; flex: none; opacity: .8; }

.ad-bloqueio { max-width: 640px; margin: 28px auto 8px; text-align: center; }
.ad-cadeado { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--secondary-light); color: var(--secondary-dark); margin-bottom: 14px; }
.ad-cadeado svg { width: 30px; height: 30px; }
.ad-bloqueio h2 { margin: 0 0 8px; }
.ad-lead { margin: 0 auto 22px; color: var(--muted); max-width: 52ch; }
.ad-oferta { text-align: left; background: var(--field, var(--card)); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 22px 24px; }
.ad-oferta-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--gray-light); }
.ad-oferta-nome { font-weight: 800; font-size: 17px; }
.ad-oferta-preco { color: var(--muted); }
.ad-oferta-preco strong { font-size: 24px; color: var(--ink); }
.ad-inclui { list-style: none; margin: 14px 0 18px; padding: 0; display: grid; gap: 9px; }
.ad-inclui li { position: relative; padding-left: 24px; line-height: 1.45; }
.ad-inclui li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 10px; height: 6px; border-left: 2px solid var(--fresh-dark); border-bottom: 2px solid var(--fresh-dark); transform: rotate(-45deg); }
.ad-form { margin: 0; }
.ad-form button { width: 100%; }
.ad-nota { margin: 12px 0 0; font-size: 13.5px; color: var(--muted); text-align: center; }

.asn-adicional { display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 16px; padding: 18px 20px; border: 1px dashed var(--border); border-radius: var(--radius-card); }
.asn-adicional.is-ativo { border-style: solid; background: color-mix(in srgb, var(--fresh-dark) 6%, var(--card)); }
.asn-adicional-texto { flex: 1 1 320px; min-width: 0; }
.asn-adicional h3 { margin: 2px 0 6px; font-size: 18px; }
.asn-adicional-preco { font-size: 14px; font-weight: 700; color: var(--muted); margin-left: 6px; }
.asn-adicional p { margin: 0; color: var(--muted); font-size: 14px; }
.asn-adicional .asn-adicional-estado { margin-top: 8px; color: var(--fresh-dark); font-weight: 700; }
.asn-adicional-acao form { margin: 0; }
/* o título da página do cadeado é centralizado: o traço de seção, feito pra
   título alinhado à esquerda, ficava solto do lado */
.ad-bloqueio h2::before { display: none; }

/* ===== Landing: adicional Mesas e Pedidos ===== */
.lp-addon { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 28px 40px; align-items: center; padding: 36px 38px; border-radius: 22px; background: linear-gradient(150deg, #fffdf8, var(--secondary-light)); border: 1px solid var(--border); }
.lp-addon-head h3 { margin: 12px 0 10px; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -0.01em; }
.lp-addon-head p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.6; max-width: 46ch; }
.lp-addon-list { margin: 0; }
.lp-addon-list li { align-items: flex-start; }
@media (max-width: 820px) { .lp-addon { grid-template-columns: 1fr; padding: 28px 22px; } }

.lp-plan-addon { display: grid; grid-template-columns: 1fr auto; gap: 20px 32px; align-items: center; margin-top: 20px; padding: 24px 28px; background: var(--card); border: 1.5px dashed var(--secondary); border-radius: 20px; }
.lp-plan-addon-tag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--secondary-dark); background: var(--secondary-light); padding: 3px 10px; border-radius: 999px; }
.lp-plan-addon h3 { margin: 10px 0 6px; font-size: 20px; }
.lp-plan-addon-text p { margin: 0; color: var(--muted); font-size: 14.5px; max-width: 62ch; }
.lp-plan-addon-preco { display: grid; justify-items: end; gap: 10px; text-align: right; }
.lp-plan-addon-preco p { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
.lp-plan-addon-mais { margin-right: 4px; color: var(--secondary-dark); }
.lp-plan-table-nota { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--secondary-dark); }
@media (max-width: 640px) {
  .lp-plan-addon { grid-template-columns: 1fr; padding: 22px 20px; }
  .lp-plan-addon-preco { justify-items: start; text-align: left; }
}
.esc-adicional { max-width: 760px; margin: 22px auto 0; padding: 14px 18px; border-radius: 14px; background: var(--secondary-light); color: var(--ink); font-size: 14.5px; line-height: 1.5; text-align: center; }
.esc-adicional a { color: var(--primary); font-weight: 700; }
/* o link "O que vem no adicional" pula pra este bloco, que não tem o
   respiro de topo das seções: sem a margem ele parava atrás do menu fixo,
   com o selo de preço e o primeiro item escondidos */
.lp-addon { scroll-margin-top: 104px; }