@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("/estatico/fonts/bricolage-grotesque-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 {
  --cor-marca: #d9431c;
  --cor-marca-escura: #b2340f;
  --cor-marca-clara: #fde8e0;
  --cor-acento: #1f7a55;
  --cor-acento-clara: #e2f3ea;
  --cor-dourado: #f2b63a;
  --cor-dourado-clara: #fdf0cf;
  --cor-alerta: #b3261e;
  --cor-aviso: #8a5a00;
  --cor-aviso-fundo: #fff5e0;
  --chapa: #1e1714;
  --chapa-texto: #f6efe8;
  --chapa-texto-2: #b9aa9f;
  --cor-botao: var(--cor-marca);
  --cor-botao-hover: var(--cor-marca-escura);
  --cor-botao-texto: #ffffff;

  --fundo: #faf8f5;
  --superficie: #ffffff;
  --superficie-2: #f3eee9;
  --superficie-3: #e9e2db;
  --borda: #e8e0d9;
  --borda-forte: #cfc4bb;

  --texto: #1f1613;
  --texto-2: #5a4f49;
  --texto-3: #8a7d75;
  --texto-invertido: #ffffff;

  --raio-p: 8px;
  --raio: 10px;
  --raio-g: 16px;
  --raio-total: 999px;

  --sombra-1: 0 1px 2px rgba(31, 22, 19, .06), 0 1px 3px rgba(31, 22, 19, .04);
  --sombra-2: 0 4px 14px rgba(31, 22, 19, .09);
  --sombra-3: 0 14px 36px rgba(31, 22, 19, .18);

  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;
  --e7: 48px;
  --e8: 64px;

  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-titulo: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-num: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --topo: 56px;
  --rodape-nav: 60px;
  --largura-max: 1180px;
  --largura-texto: 68ch;
  --toque: 44px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo: #14110f;
    --superficie: #1d1916;
    --superficie-2: #262019;
    --superficie-3: #332b24;
    --borda: #3a312a;
    --borda-forte: #4d423a;
    --texto: #f5f0ec;
    --texto-2: #c3b8b0;
    --texto-3: #958a82;
    --cor-marca: #ee6a42;
    --cor-marca-escura: #d9431c;
    --cor-marca-clara: #3a201a;
    --cor-acento: #4fb98a;
    --cor-acento-clara: #1b332a;
    --cor-dourado: #f2b63a;
    --cor-dourado-clara: #3a2f14;
    --cor-aviso: #e6b45a;
    --cor-aviso-fundo: #332a15;
    --cor-alerta: #ef6d64;
    --chapa: #0f0c0a;
    --sombra-1: 0 1px 2px rgba(0, 0, 0, .4);
    --sombra-2: 0 4px 12px rgba(0, 0, 0, .45);
    --sombra-3: 0 12px 32px rgba(0, 0, 0, .55);
  }
}

:root[data-tema="escuro"] {
  --fundo: #14110f;
  --superficie: #1d1916;
  --superficie-2: #262019;
  --superficie-3: #332b24;
  --borda: #3a312a;
  --borda-forte: #4d423a;
  --texto: #f5f0ec;
  --texto-2: #c3b8b0;
  --texto-3: #958a82;
  --cor-marca: #ee6a42;
  --cor-marca-escura: #d9431c;
  --cor-marca-clara: #3a201a;
  --cor-acento: #4fb98a;
  --cor-acento-clara: #1b332a;
  --cor-dourado: #f2b63a;
  --cor-dourado-clara: #3a2f14;
  --cor-aviso: #e6b45a;
  --cor-aviso-fundo: #332a15;
  --cor-alerta: #ef6d64;
  --chapa: #0f0c0a;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sombra-2: 0 4px 12px rgba(0, 0, 0, .45);
  --sombra-3: 0 12px 32px rgba(0, 0, 0, .55);
}

/* Tema "clean": branco, cinzas neutros e botão escuro. O laranja fica na marca,
   nos links ativos e nos selos. Os seletores do escuro têm um atributo a mais
   para vencer o bloco claro deste tema quando o modo escuro está ligado. */
:root[data-palette="clean"] {
  --cor-marca: #d9431c;
  --cor-marca-escura: #b2340f;
  --cor-marca-clara: #fdf1ed;
  --cor-acento: #15803d;
  --cor-acento-clara: #ecfdf3;
  --cor-dourado: #eab308;
  --cor-dourado-clara: #fef9c3;
  --cor-aviso: #92400e;
  --cor-aviso-fundo: #fffbeb;
  --chapa: #f4f4f5;
  --chapa-texto: #18181b;
  --chapa-texto-2: #52525b;
  --cor-botao: #18181b;
  --cor-botao-hover: #3f3f46;
  --cor-botao-texto: #ffffff;
  --fundo: #ffffff;
  --superficie: #ffffff;
  --superficie-2: #f4f4f5;
  --superficie-3: #e4e4e7;
  --borda: #e4e4e7;
  --borda-forte: #d4d4d8;
  --texto: #18181b;
  --texto-2: #52525b;
  --texto-3: #71717a;
  --sombra-1: 0 1px 2px rgba(24, 24, 27, .05);
  --sombra-2: 0 4px 12px rgba(24, 24, 27, .06);
  --sombra-3: 0 12px 28px rgba(24, 24, 27, .12);
}

@media (prefers-color-scheme: dark) {
  :root[data-palette="clean"]:not([data-tema="claro"]) {
    --cor-marca: #f0623d;
    --cor-marca-escura: #d9431c;
    --cor-marca-clara: #2a1a15;
    --cor-acento: #4ade80;
    --cor-acento-clara: #13261a;
    --cor-dourado-clara: #2b250f;
    --cor-aviso: #fbbf24;
    --cor-aviso-fundo: #2a2210;
    --cor-alerta: #f87171;
    --chapa: #1f1f23;
    --chapa-texto: #fafafa;
    --chapa-texto-2: #a1a1aa;
    --cor-botao: #fafafa;
    --cor-botao-hover: #d4d4d8;
    --cor-botao-texto: #18181b;
    --fundo: #111113;
    --superficie: #18181b;
    --superficie-2: #232327;
    --superficie-3: #2e2e33;
    --borda: #2e2e33;
    --borda-forte: #3f3f46;
    --texto: #fafafa;
    --texto-2: #a1a1aa;
    --texto-3: #8b8b94;
    --sombra-1: 0 1px 2px rgba(0, 0, 0, .4);
    --sombra-2: 0 4px 12px rgba(0, 0, 0, .45);
    --sombra-3: 0 12px 32px rgba(0, 0, 0, .55);
  }
}

:root[data-palette="clean"][data-tema="escuro"] {
  --cor-marca: #f0623d;
  --cor-marca-escura: #d9431c;
  --cor-marca-clara: #2a1a15;
  --cor-acento: #4ade80;
  --cor-acento-clara: #13261a;
  --cor-dourado-clara: #2b250f;
  --cor-aviso: #fbbf24;
  --cor-aviso-fundo: #2a2210;
  --cor-alerta: #f87171;
  --chapa: #1f1f23;
  --chapa-texto: #fafafa;
  --chapa-texto-2: #a1a1aa;
  --cor-botao: #fafafa;
  --cor-botao-hover: #d4d4d8;
  --cor-botao-texto: #18181b;
  --fundo: #111113;
  --superficie: #18181b;
  --superficie-2: #232327;
  --superficie-3: #2e2e33;
  --borda: #2e2e33;
  --borda-forte: #3f3f46;
  --texto: #fafafa;
  --texto-2: #a1a1aa;
  --texto-3: #8b8b94;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topo) + 56px); }

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fundo);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-optical-sizing: auto;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.015em;
  text-wrap: balance;
}
h1 { font-size: 1.75rem; font-weight: 800; }
h2 { font-size: 1.3125rem; }
h3 { font-size: 1.0625rem; }
h4 { font-size: .9375rem; }
p { margin: 0 0 var(--e3); max-width: var(--largura-texto); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
small { font-size: .8125rem; }
strong { font-weight: 700; }
ul, ol { padding-left: 1.25em; }

:focus-visible {
  outline: 3px solid var(--cor-marca);
  outline-offset: 2px;
  border-radius: var(--raio-p);
}

.pular-para-conteudo {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--cor-marca); color: #fff; padding: var(--e3) var(--e4);
  border-radius: 0 0 var(--raio) 0;
}
.pular-para-conteudo:focus { left: 0; }

.icone {
  width: 1.25em; height: 1.25em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -.22em;
}
.icone-g { width: 1.5em; height: 1.5em; }
.icone-xg { width: 2.25em; height: 2.25em; stroke-width: 1.75; }

.container {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--e4);
}
.container-estreito { max-width: 560px; }
.container-leitura { max-width: 760px; }

.pilha > * + * { margin-top: var(--e4); }
.pilha-p > * + * { margin-top: var(--e2); }
.pilha-g > * + * { margin-top: var(--e6); }

.linha { display: flex; align-items: center; gap: var(--e3); }
.linha-entre { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }
.linha-quebra { display: flex; flex-wrap: wrap; gap: var(--e2); position: relative; }
.crescer { flex: 1 1 auto; min-width: 0; }

.texto-2 { color: var(--texto-2); }
.texto-3 { color: var(--texto-3); font-size: .875rem; }
.texto-p { font-size: .875rem; }
.texto-pp { font-size: .8125rem; }
.texto-forte { font-weight: 700; }
.texto-media { font-weight: 600; }
.texto-centro { text-align: center; }
.texto-direita { text-align: right; }
.texto-titulo { font-family: var(--fonte-titulo); font-weight: 700; letter-spacing: -.015em; }
.texto-destaque { font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; }
.numero { font-variant-numeric: tabular-nums; }
.truncar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duas-linhas {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.so-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Cabeçalho da loja */
.topo {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--superficie) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--borda);
  min-height: var(--topo);
  display: flex; align-items: center;
}
.topo .container { display: flex; align-items: center; gap: var(--e3); min-height: var(--topo); }

.marca {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.125rem;
  letter-spacing: -.03em; line-height: 1; white-space: nowrap;
}
.marca-simbolo { width: 26px; height: 26px; flex: none; border-radius: 8px; }
.marca-ponto {
  width: 24px; height: 24px; border-radius: 8px;
  background: var(--cor-marca);
  display: inline-block; flex: none;
}
.marca-sufixo {
  font-family: var(--fonte); font-weight: 700; font-size: .6875rem; letter-spacing: .02em;
  padding: 2px 7px; border-radius: var(--raio-total);
  background: var(--cor-dourado); color: #1f1613; margin-left: 2px;
}

.seletor-local { position: relative; max-width: 100%; min-width: 0; }
.seletor-local > summary {
  display: flex; align-items: center; gap: var(--e2);
  background: var(--superficie-2); border: 1px solid transparent;
  border-radius: var(--raio-total); padding: 5px var(--e3) 5px var(--e3);
  font-size: .875rem; min-height: var(--toque); max-width: 100%;
  cursor: pointer; color: var(--texto); list-style: none; user-select: none;
}
.seletor-local > summary::-webkit-details-marker { display: none; }
.seletor-local > summary:hover { border-color: var(--borda-forte); }
.seletor-local > summary:focus-visible { outline: 2px solid var(--cor-marca); outline-offset: 2px; }
.seletor-local > summary .icone { color: var(--cor-marca); }

.seletor-local-texto {
  display: flex; flex-direction: column; line-height: 1.15;
  overflow: hidden; min-width: 0;
}
.seletor-local-texto small { font-size: .6875rem; color: var(--texto-3); }
.seletor-local-texto strong {
  font-weight: 600; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; max-width: 40vw;
}
.seletor-local-acao {
  font-size: .75rem; font-weight: 700; color: var(--cor-marca);
  white-space: nowrap;
}
.seletor-local-seta { color: var(--texto-3); transition: transform .15s ease; }
.seletor-local[open] > summary .seletor-local-seta { transform: rotate(180deg); }

.seletor-local-painel {
  position: absolute; right: 0; top: calc(100% + var(--e2)); z-index: 40;
  width: min(22rem, calc(100vw - 2 * var(--e4)));
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio-g); padding: var(--e4);
  box-shadow: var(--sombra-3);
  display: flex; flex-direction: column; gap: var(--e3);
}

@media (max-width: 480px) {
  .seletor-local-acao { display: none; }
  .seletor-local-texto strong { max-width: 34vw; }
}

/* Botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: var(--toque); padding: 0 var(--e5);
  border-radius: var(--raio-total); border: 1px solid transparent;
  font: inherit; font-weight: 700; font-size: .9375rem;
  cursor: pointer; text-align: center;
  transition: background-color .15s ease, border-color .15s ease, transform .06s ease, box-shadow .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"], .btn-desabilitado { opacity: .5; cursor: not-allowed; transform: none; pointer-events: none; }

.btn-principal { background: var(--cor-botao); color: var(--cor-botao-texto); box-shadow: 0 1px 0 rgba(0, 0, 0, .08); }
.btn-principal:hover:not(:disabled) { background: var(--cor-botao-hover); }
.btn-secundario { background: var(--superficie); color: var(--texto); border-color: var(--borda-forte); }
.btn-secundario:hover:not(:disabled) { background: var(--superficie-2); }
.btn-fantasma { background: transparent; color: var(--texto-2); }
.btn-fantasma:hover:not(:disabled) { background: var(--superficie-2); color: var(--texto); }
.btn-perigo { background: var(--cor-alerta); color: #fff; }
.btn-sucesso { background: var(--cor-acento); color: #fff; }
.btn-escuro { background: var(--chapa); color: var(--chapa-texto); }
.btn-escuro:hover:not(:disabled) { filter: brightness(.85); }
.btn-bloco { display: flex; width: 100%; }
.btn-p { min-height: 36px; padding: 0 var(--e4); font-size: .875rem; white-space: nowrap; }
.btn-icone { padding-inline: var(--e3); }
.btn-quadrado { width: var(--toque); padding: 0; }
.btn-quadrado.btn-p { width: 36px; }

/* Formulários */
.campo { display: block; }
.campo > label, .rotulo {
  display: block; font-size: .875rem; font-weight: 600;
  margin-bottom: 6px; color: var(--texto-2);
}
.entrada, select, textarea {
  width: 100%; min-height: var(--toque);
  padding: 10px var(--e3);
  font: inherit; font-size: 1rem; color: var(--texto);
  background: var(--superficie); border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
}
.entrada:focus, select:focus, textarea:focus {
  border-color: var(--cor-marca);
  outline: 3px solid color-mix(in srgb, var(--cor-marca) 25%, transparent);
  outline-offset: 0;
}
textarea { min-height: 88px; resize: vertical; }
.entrada[aria-invalid="true"] { border-color: var(--cor-alerta); }
.erro-campo { color: var(--cor-alerta); font-size: .8125rem; margin-top: 4px; }
.ajuda { color: var(--texto-3); font-size: .8125rem; margin-top: 4px; display: block; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--cor-marca); width: 20px; height: 20px; flex: none; }

/* Cartões e blocos */
.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  overflow: hidden;
}
.cartao-corpo { padding: var(--e4); }
.cartao-clicavel { display: block; transition: box-shadow .15s ease, border-color .15s ease; }
.cartao-clicavel:hover { box-shadow: var(--sombra-2); border-color: var(--borda-forte); }
.cartao-destaque { border-color: var(--cor-marca); box-shadow: 0 0 0 3px var(--cor-marca-clara); }

.secao-titulo {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3);
  margin-bottom: var(--e3);
}
.secao-titulo h2 { font-size: 1.375rem; }
.secao-titulo a { font-size: .875rem; font-weight: 700; color: var(--cor-marca); white-space: nowrap; }

.selo {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: var(--raio-total);
  font-size: .75rem; font-weight: 700; letter-spacing: 0;
  background: var(--superficie-2); color: var(--texto-2);
  max-width: 100%; min-width: 0; text-align: left; line-height: 1.4;
}
.selo-marca { background: var(--cor-marca-clara); color: var(--cor-marca-escura); }
.selo-dourado { background: var(--cor-dourado-clara); color: #6b4a00; }
.selo-sucesso { background: var(--cor-acento-clara); color: var(--cor-acento); }
.selo-alerta { background: color-mix(in srgb, var(--cor-alerta) 12%, transparent); color: var(--cor-alerta); }
.selo-neutro { background: var(--superficie-3); color: var(--texto-2); }
.selo-aviso { background: var(--cor-aviso-fundo); color: var(--cor-aviso); }
.selo-escuro { background: var(--chapa); color: var(--chapa-texto); }
.selo .icone { width: 1em; height: 1em; }
.selo[hidden] { display: none; }

.ponto-estado {
  width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none;
  background: var(--texto-3);
}
.ponto-estado-aberto { background: var(--cor-acento); box-shadow: 0 0 0 3px var(--cor-acento-clara); }
.ponto-estado-fechado { background: var(--cor-alerta); }

.distancia-titulo {
  vertical-align: middle; margin-left: var(--e2);
  font-size: .8125rem; font-weight: 600; white-space: nowrap;
  font-family: var(--fonte); letter-spacing: 0;
}

.aviso {
  padding: var(--e3) var(--e4); border-radius: var(--raio);
  border: 1px solid var(--borda); background: var(--superficie-2);
  font-size: .9375rem;
}
.aviso-erro { background: color-mix(in srgb, var(--cor-alerta) 8%, var(--superficie)); border-color: color-mix(in srgb, var(--cor-alerta) 30%, transparent); color: var(--cor-alerta); }
.aviso-atencao { background: var(--cor-aviso-fundo); border-color: color-mix(in srgb, var(--cor-aviso) 30%, transparent); color: var(--cor-aviso); }
.aviso-sucesso { background: var(--cor-acento-clara); border-color: color-mix(in srgb, var(--cor-acento) 30%, transparent); color: var(--cor-acento); }

/* Boas-vindas sem endereço */
.boas-vindas {
  background: var(--chapa); color: var(--chapa-texto);
  border-radius: var(--raio-g); padding: var(--e6) var(--e5);
  position: relative; overflow: hidden;
}
.boas-vindas::after {
  content: ""; position: absolute; right: -70px; top: -70px; width: 220px; height: 220px;
  border-radius: 50%; background: var(--cor-marca); opacity: .9;
}
.boas-vindas > * { position: relative; z-index: 1; }
.boas-vindas-chamada {
  font-family: var(--fonte-titulo); font-weight: 800; font-size: 2.25rem; line-height: 1;
  letter-spacing: -.03em; max-width: 12ch; color: var(--chapa-texto);
}
.boas-vindas h1 { font-size: 1.0625rem; font-weight: 600; font-family: var(--fonte); letter-spacing: 0; color: var(--chapa-texto-2); margin-top: var(--e3); }
.boas-vindas .campo > label { color: var(--chapa-texto-2); }
.boas-vindas .entrada { background: #fff; color: #1f1613; border-color: transparent; }
.boas-vindas .btn-secundario { background: transparent; color: var(--chapa-texto); border-color: rgba(255, 255, 255, .35); }
.boas-vindas .btn-secundario:hover { background: rgba(255, 255, 255, .08); }

.saudacao h1 { font-size: 1.625rem; }
.busca-home { position: relative; }
.busca-home .icone { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--texto-3); pointer-events: none; }
.busca-home .entrada { padding-left: 44px; border-radius: var(--raio-total); background: var(--superficie); }

/* Categorias */
.categorias {
  display: flex; gap: var(--e2); overflow-x: auto; padding: 2px 2px var(--e2);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  min-width: 0; max-width: 100%;
}
.categorias::-webkit-scrollbar { display: none; }
.categoria {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 74px; padding: var(--e2) var(--e1); border-radius: var(--raio);
  font-size: .75rem; font-weight: 600; color: var(--texto-2); text-align: center;
}
.categoria-icone {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--superficie); border: 1px solid var(--borda);
  display: grid; place-items: center; font-size: 24px;
  transition: transform .12s ease, border-color .12s ease;
}
.categoria:hover .categoria-icone { transform: translateY(-2px); border-color: var(--borda-forte); }
.categoria[aria-current="true"] { color: var(--cor-marca-escura); }
.categoria[aria-current="true"] .categoria-icone { background: var(--cor-marca); border-color: var(--cor-marca); color: #fff; }

.filtros { display: flex; gap: var(--e2); overflow-x: auto; scrollbar-width: none; padding: 2px; min-width: 0; max-width: 100%; }
.filtros::-webkit-scrollbar { display: none; }
.filtro {
  flex: none; min-height: 36px; padding: 0 var(--e4);
  border-radius: var(--raio-total); border: 1px solid var(--borda-forte);
  background: var(--superficie); color: var(--texto-2);
  font-size: .8125rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; position: relative; white-space: nowrap;
}
.filtro:hover { border-color: var(--texto-3); color: var(--texto); }
.filtro[aria-pressed="true"] { background: var(--chapa); border-color: var(--chapa); color: var(--chapa-texto); }

/* Lista de restaurantes */
.lista-restaurantes { display: grid; gap: var(--e3); }
.restaurante-cartao {
  display: grid; grid-template-columns: 84px 1fr; gap: var(--e3);
  padding: var(--e3); background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--raio-g);
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.restaurante-cartao:hover { border-color: var(--borda-forte); box-shadow: var(--sombra-2); transform: translateY(-1px); }
.restaurante-cartao h3 { font-size: 1.125rem; }
.restaurante-logo {
  width: 84px; height: 84px; border-radius: var(--raio);
  object-fit: cover; background: var(--superficie-2); flex: none;
}
.restaurante-logo-vazio {
  width: 84px; height: 84px; border-radius: var(--raio);
  background: var(--cor-marca-clara); color: var(--cor-marca-escura);
  display: grid; place-items: center; font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.375rem;
}
.restaurante-meta { display: flex; flex-wrap: wrap; gap: 4px var(--e2); align-items: center; font-size: .8125rem; color: var(--texto-2); }
.restaurante-meta .ponto { color: var(--texto-3); }
.fechado { opacity: .62; }
.fechado:hover { opacity: .85; }

/* Página do restaurante */
.hero-restaurante { position: relative; }
.hero-banner {
  width: 100%; height: 176px; object-fit: cover; background: var(--superficie-2);
}
.hero-banner-vazio { background: linear-gradient(135deg, var(--cor-marca), var(--cor-dourado)); }
.hero-identidade {
  display: flex; gap: var(--e3); align-items: flex-end;
  margin-top: -40px; padding-inline: var(--e4); position: relative;
}
.hero-logo {
  width: 84px; height: 84px; border-radius: var(--raio-g);
  border: 4px solid var(--fundo); object-fit: cover; background: var(--superficie-2); flex: none;
  box-shadow: var(--sombra-2);
}
.hero-logo.restaurante-logo-vazio { width: 84px; height: 84px; }
.restaurante-cabecalho h1 { font-size: 1.75rem; }
.restaurante-cabecalho .btn-favorito { color: var(--texto-3); }
.restaurante-cabecalho .btn-favorito[aria-pressed="true"] { color: var(--cor-marca); }
.restaurante-cabecalho .btn-favorito[aria-pressed="true"] .icone { fill: currentColor; }

.ficha {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e2);
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-g);
  padding: var(--e3) var(--e4);
}
.ficha-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ficha-item small { font-size: .6875rem; font-weight: 600; color: var(--texto-3); }
.ficha-item strong { font-family: var(--fonte-titulo); font-size: 1.0625rem; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ficha-item strong .texto-3 { font-family: var(--fonte); font-size: .75rem; }
.ficha-mais { grid-column: 1 / -1; border-top: 1px solid var(--borda); padding-top: var(--e2); margin-top: var(--e1); }
.ficha-mais summary { cursor: pointer; font-weight: 600; font-size: .875rem; color: var(--texto-2); padding: var(--e1) 0; display: flex; align-items: center; gap: var(--e2); list-style: none; }
.ficha-mais summary::-webkit-details-marker { display: none; }
.ficha-mais summary .icone { transition: transform .15s ease; margin-left: auto; }
.ficha-mais[open] summary .icone { transform: rotate(180deg); }

.estado-loja { display: inline-flex; align-items: center; gap: var(--e2); font-weight: 600; font-size: .875rem; }
.estado-loja-aberto { color: var(--cor-acento); }
.estado-loja-fechado { color: var(--cor-alerta); }

.secoes-sticky {
  position: sticky; top: var(--topo); z-index: 30;
  background: color-mix(in srgb, var(--fundo) 94%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borda);
  padding-block: var(--e2);
}

.cardapio-secao h2 { font-size: 1.5rem; padding-top: var(--e2); }
.produto-item {
  display: grid; grid-template-columns: 1fr 96px; gap: var(--e3);
  padding: var(--e3) 0; border-bottom: 1px solid var(--borda);
  width: 100%; text-align: left; background: none; border-inline: 0; border-top: 0;
  cursor: pointer; color: inherit; font: inherit; align-items: start;
}
.produto-item:last-child { border-bottom: 0; }
.produto-item:hover .produto-nome { color: var(--cor-marca-escura); }
.produto-nome { font-weight: 700; font-size: 1rem; }
.produto-preco { font-weight: 700; font-variant-numeric: tabular-nums; }
.produto-foto { width: 96px; height: 96px; border-radius: var(--raio); object-fit: cover; background: var(--superficie-2); }
.produto-indisponivel { opacity: .5; cursor: not-allowed; }
.preco-antigo { text-decoration: line-through; color: var(--texto-3); font-size: .8125rem; margin-right: 6px; font-weight: 400; }

.carrinho-item { padding: var(--e3) 0; border-bottom: 1px solid var(--borda); display: grid; gap: var(--e3); }
.carrinho-item:last-child { border-bottom: 0; }
.carrinho-item-nome { font-size: 1rem; }
.carrinho-item-rodape { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.carrinho-item-preco { margin-left: auto; font-family: var(--fonte-titulo); font-size: 1.125rem; }

/* Folha do produto */
.folha {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(20, 15, 12, .55);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.folha[aberta] { opacity: 1; pointer-events: auto; }
.folha[hidden] { display: none; }
.folha-painel {
  width: 100%; max-width: 560px; max-height: 92vh;
  background: var(--superficie);
  border-radius: var(--raio-g) var(--raio-g) 0 0;
  display: flex; flex-direction: column;
  transform: translateY(100%); transition: transform .24s cubic-bezier(.32, .72, 0, 1);
}
.folha[aberta] .folha-painel { transform: translateY(0); }
.folha-topo {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) var(--e4); border-bottom: 1px solid var(--borda);
  position: sticky; top: 0; background: var(--superficie); z-index: 2;
}
.folha-corpo { overflow-y: auto; padding: var(--e4); flex: 1; -webkit-overflow-scrolling: touch; }
.folha-corpo img { border-radius: var(--raio-g); }
.folha-rodape {
  padding: var(--e3) var(--e4);
  padding-bottom: calc(var(--e3) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--borda); background: var(--superficie);
}

.opcao {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) 0; border-bottom: 1px solid var(--borda);
  cursor: pointer; min-height: var(--toque); position: relative;
}
.opcao:last-child { border-bottom: 0; }
.opcao input { width: 20px; height: 20px; accent-color: var(--cor-marca); flex: none; }
.opcao-esgotada { opacity: .45; }

.grupo-modificador { padding-block: var(--e3); }
.grupo-cabecalho { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e2); margin-bottom: var(--e2); }

.contador { display: inline-flex; align-items: center; gap: var(--e2); }
.contador button {
  width: var(--toque); height: var(--toque);
  border-radius: var(--raio-total); border: 1px solid var(--borda-forte);
  background: var(--superficie); color: var(--texto); font-size: 1.125rem; font-weight: 700;
  cursor: pointer; display: grid; place-items: center;
}
.contador button:disabled { opacity: .4; cursor: not-allowed; }
.contador output { min-width: 28px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Barra do carrinho */
.barra-carrinho {
  position: fixed; left: 0; right: 0; z-index: 60;
  bottom: calc(var(--rodape-nav) + env(safe-area-inset-bottom));
  padding: 0 var(--e4) var(--e3);
  transform: translateY(150%); transition: transform .22s ease;
  pointer-events: none;
}
.barra-carrinho[visivel] { transform: translateY(0); pointer-events: auto; }
.barra-carrinho .btn { box-shadow: var(--sombra-3); justify-content: space-between; padding-inline: var(--e5); background: var(--chapa); color: var(--chapa-texto); }
.barra-carrinho .btn:hover { background: var(--chapa); filter: brightness(.9); }
.barra-carrinho-total { font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.0625rem; }

/* Navegação inferior */
.nav-inferior {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--superficie); border-top: 1px solid var(--borda);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-inferior a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: var(--rodape-nav); font-size: .6875rem; font-weight: 600; color: var(--texto-3);
}
.nav-inferior a .icone { width: 24px; height: 24px; stroke-width: 1.9; }
.nav-inferior a[aria-current="page"] { color: var(--cor-marca); }
.nav-inferior a[aria-current="page"] .icone { stroke-width: 2.4; }
.nav-icone { font-size: 20px; line-height: 1; }

.conteudo { padding-block: var(--e4) calc(var(--rodape-nav) + var(--e7)); min-height: 60vh; }

/* Resumos e linhas do pedido */
.resumo-linha { display: flex; justify-content: space-between; gap: var(--e3); padding: 6px 0; font-size: .9375rem; }
.resumo-total { font-size: 1.125rem; font-weight: 800; padding-top: var(--e3); border-top: 1px solid var(--borda); margin-top: var(--e2); font-family: var(--fonte-titulo); }
.resumo-desconto { color: var(--cor-acento); }

.passos { display: flex; gap: var(--e2); margin-bottom: var(--e4); }
.passo { flex: 1; height: 4px; border-radius: var(--raio-total); background: var(--superficie-3); }
.passo[ativo] { background: var(--cor-marca); }

.trilha { list-style: none; margin: 0; padding: 0; }
.trilha li { display: grid; grid-template-columns: 28px 1fr; gap: var(--e3); padding-bottom: var(--e4); position: relative; }
.trilha li:last-child { padding-bottom: 0; }
.trilha li:not(:last-child)::before {
  content: ""; position: absolute; left: 13px; top: 26px; bottom: 0;
  width: 2px; background: var(--borda);
}
.trilha li[data-feito="1"]:not(:last-child)::before { background: var(--cor-acento); }
.trilha-marca {
  width: 28px; height: 28px; border-radius: var(--raio-total);
  border: 2px solid var(--borda); background: var(--superficie);
  display: grid; place-items: center; font-size: .75rem; font-weight: 700; z-index: 1;
}
.trilha li[data-feito="1"] .trilha-marca { background: var(--cor-acento); border-color: var(--cor-acento); color: #fff; }
.trilha li[data-atual="1"] .trilha-marca {
  border-color: var(--cor-marca); color: var(--cor-marca);
  box-shadow: 0 0 0 4px var(--cor-marca-clara);
}
.trilha li[data-atual="1"] .trilha-texto { font-weight: 700; }
.trilha li[data-futuro="1"] .trilha-texto { color: var(--texto-3); }

.esqueleto {
  background: linear-gradient(90deg, var(--superficie-2) 25%, var(--superficie-3) 50%, var(--superficie-2) 75%);
  background-size: 200% 100%; animation: brilho 1.4s infinite; border-radius: var(--raio);
}
@keyframes brilho { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.avisos-toast {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 200;
  bottom: calc(var(--rodape-nav) + var(--e5)); width: calc(100% - var(--e6)); max-width: 420px;
  display: grid; gap: var(--e2); pointer-events: none;
}
.toast {
  background: var(--chapa); color: var(--chapa-texto);
  padding: var(--e3) var(--e4); border-radius: var(--raio);
  box-shadow: var(--sombra-3); font-size: .875rem; font-weight: 600;
  animation: sobe .22s ease;
}
.toast-erro { background: var(--cor-alerta); color: #fff; }
.toast-ok { background: var(--cor-acento); color: #fff; }
@keyframes sobe { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.vazio { text-align: center; padding: var(--e7) var(--e4); color: var(--texto-2); }
.vazio-icone { font-size: 40px; margin-bottom: var(--e3); }
.vazio-simbolo { width: 72px; height: 72px; border-radius: 50%; background: var(--superficie-2); color: var(--texto-3); display: grid; place-items: center; margin: 0 auto var(--e4); }
.vazio-simbolo .icone { width: 32px; height: 32px; stroke-width: 1.6; }
.vazio h1, .vazio h2 { margin-bottom: var(--e2); }
.vazio .btn { margin-top: var(--e3); }

/* Painel do restaurante e administração */
.painel { display: grid; min-height: 100vh; }
.painel > * { min-width: 0; }
.painel-topo {
  position: sticky; top: 0; z-index: 40;
  background: var(--chapa); color: var(--chapa-texto);
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e2) var(--e4); min-height: var(--topo);
}
.painel-topo .marca { color: var(--chapa-texto); }
.painel-topo .btn-fantasma { color: var(--chapa-texto-2); }
.painel-topo .btn-fantasma:hover { background: rgba(255, 255, 255, .08); color: var(--chapa-texto); }
.painel-topo .texto-media { color: var(--chapa-texto-2); font-size: .875rem; }
.painel-conteudo { padding: var(--e4); padding-bottom: calc(var(--rodape-nav) + var(--e7)); min-width: 0; }
.painel-lateral { display: none; }
.painel-conteudo h1 { font-size: 1.625rem; }

.horario-linha { display: grid; grid-template-columns: 1fr auto auto auto; gap: var(--e2); align-items: center; }
.horario-linha .entrada { width: 108px; padding-inline: var(--e2); }
.horario-linha .opcao { border: 0; padding: 0; min-height: 0; }
@media (max-width: 420px) { .horario-linha { grid-template-columns: 1fr 1fr; } .horario-linha .opcao { grid-column: 1 / -1; } .horario-linha .entrada { width: 100%; } .horario-linha .horario-ate { display: none; } }
.painel-acoes { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.painel-conteudo > .linha-entre { flex-wrap: wrap; }
.painel-conteudo > .linha-entre > form.linha { flex-wrap: wrap; }
.tabela-rolagem .tabela th { white-space: nowrap; }

/* Quadro de pedidos: as colunas rolam na horizontal dentro do quadro, nunca o
   documento, que é o que os testes de responsividade proíbem. */
.kds {
  display: flex; gap: var(--e3); overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity; scrollbar-gutter: stable;
  padding-bottom: var(--e2); overscroll-behavior-x: contain;
}
.kds-coluna {
  background: var(--superficie-2); border-radius: var(--raio-g); padding: var(--e3);
  display: flex; flex-direction: column; scroll-snap-align: start;
  flex: 0 0 min(86vw, 300px);
  max-height: calc(100dvh - var(--topo) - 132px);
}
.kds-coluna h2 {
  font-family: var(--fonte); font-size: .875rem; font-weight: 700; letter-spacing: 0;
  color: var(--texto-2); margin-bottom: var(--e3);
  position: sticky; top: 0; z-index: 1;
  background: var(--superficie-2); padding-bottom: var(--e2);
  display: flex; align-items: center; gap: var(--e2);
}
.kds-coluna h2 .numero {
  background: var(--superficie); border-radius: var(--raio-total); padding: 1px 8px;
  font-size: .75rem; color: var(--texto-3);
}
.kds-coluna[data-coluna="novos"] h2 { color: var(--cor-marca-escura); }
.kds-coluna[data-coluna="novos"] h2 .numero { background: var(--cor-marca); color: #fff; }
.kds-lista { overflow-y: auto; overscroll-behavior-y: contain; flex: 1; min-height: 0; }
.kds-cartao {
  background: var(--superficie); border: 1px solid var(--borda); border-left: 4px solid var(--borda-forte);
  border-radius: var(--raio); padding: var(--e3); margin-bottom: var(--e2);
}
.kds-coluna[data-coluna="novos"] .kds-cartao { border-left-color: var(--cor-marca); }
.kds-coluna[data-coluna="aceitos"] .kds-cartao,
.kds-coluna[data-coluna="preparando"] .kds-cartao { border-left-color: var(--cor-dourado); }
.kds-coluna[data-coluna="prontos"] .kds-cartao,
.kds-coluna[data-coluna="entrega"] .kds-cartao { border-left-color: var(--cor-acento); }
.kds-cartao[data-novo="1"] { box-shadow: 0 0 0 3px var(--cor-marca-clara); }
.kds-cartao[data-atrasado="1"] { border-color: var(--cor-alerta); border-left-color: var(--cor-alerta); }
.kds-numero { font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.1875rem; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kds-itens { margin: var(--e2) 0; font-size: .875rem; color: var(--texto-2); }
.kds-acoes { display: flex; gap: var(--e2); flex-wrap: wrap; }
.kds-acoes form { flex: 1 1 auto; }
.kds-acoes form .btn { width: 100%; }

/* Tabelas e métricas */
.tabela { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.tabela th, .tabela td { padding: var(--e3); text-align: left; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela th { font-size: .8125rem; color: var(--texto-3); font-weight: 600; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: var(--superficie-2); }
.tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.metricas { display: grid; gap: var(--e3); grid-template-columns: repeat(2, 1fr); }
.metrica { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-g); padding: var(--e4); min-width: 0; }
.metrica-valor { font-family: var(--fonte-titulo); font-size: 1.625rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1.1; margin-top: 2px; }
.metrica-rotulo { font-size: .8125rem; color: var(--texto-3); font-weight: 600; display: block; }
.metrica-valor { display: block; }
.metrica-valor a { text-decoration: underline; text-decoration-color: var(--cor-marca); text-underline-offset: 4px; }
.metrica-destaque { background: var(--chapa); color: var(--chapa-texto); border-color: var(--chapa); }
.metrica-destaque .metrica-rotulo { color: var(--chapa-texto-2); }

.progresso { height: 8px; border-radius: var(--raio-total); background: var(--superficie-3); overflow: hidden; }
.progresso > div { height: 100%; background: var(--cor-acento); border-radius: var(--raio-total); transition: width .3s ease; }

.lista-passos { list-style: none; margin: 0; padding: 0; }
.lista-passos li { display: flex; align-items: flex-start; gap: var(--e3); padding: var(--e2) 0; border-bottom: 1px solid var(--borda); }
.lista-passos li:last-child { border-bottom: 0; }
.passo-marca {
  width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center;
  border: 2px solid var(--borda-forte); color: transparent; margin-top: 1px;
}
.passo-marca .icone { width: 14px; height: 14px; stroke-width: 3; }
li[data-feito="1"] .passo-marca { background: var(--cor-acento); border-color: var(--cor-acento); color: #fff; }
li[data-feito="1"] .passo-texto { color: var(--texto-3); }

.feed-cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-g); overflow: hidden; display: flex; flex-direction: column; }
.feed-imagem { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--superficie-2); }
.feed-corpo { padding: var(--e4); flex: 1; }
.feed-corpo h3 { font-size: 1.125rem; }
.feed-autor { font-size: .8125rem; font-weight: 700; color: var(--cor-marca-escura); }
.feed-preco { font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.125rem; }

.rodape {
  border-top: 1px solid var(--borda); background: var(--superficie);
  padding: var(--e5) 0 calc(var(--rodape-nav) + var(--e5));
  color: var(--texto-2); font-size: .875rem;
}

/* Landing comercial */
.landing-hero { padding-block: var(--e5) var(--e4); }
.landing-hero .linha-quebra { margin-top: var(--e5); }
.landing-hero h1 { font-size: 2.375rem; font-weight: 800; letter-spacing: -.035em; line-height: 1.02; max-width: 16ch; }
.landing-hero p { font-size: 1.0625rem; max-width: 52ch; }
.landing-prova { display: grid; gap: var(--e2); list-style: none; padding: 0; margin: var(--e5) 0 0; }
.landing-prova li { display: flex; gap: var(--e2); align-items: flex-start; font-weight: 600; }
.landing-prova .icone { color: var(--cor-acento); stroke-width: 2.5; margin-top: 2px; }
.landing-recursos { display: grid; gap: var(--e4); list-style: none; padding: 0; margin: 0; }
.landing-recursos li { display: grid; grid-template-columns: 44px 1fr; gap: var(--e3); align-items: start; }
.landing-recursos .recurso-icone {
  width: 44px; height: 44px; border-radius: var(--raio); display: grid; place-items: center;
  background: var(--cor-marca-clara); color: var(--cor-marca-escura);
}
.landing-recursos h3 { font-size: 1.0625rem; margin-bottom: 2px; }
.landing-recursos p { margin: 0; font-size: .9375rem; color: var(--texto-2); }
.landing-passos { list-style: none; padding: 0; margin: 0; counter-reset: passo; display: grid; gap: var(--e3); }
.landing-passos li { display: grid; grid-template-columns: 32px 1fr; gap: var(--e3); align-items: start; counter-increment: passo; }
.landing-passos li::before {
  content: counter(passo); width: 32px; height: 32px; border-radius: 50%;
  background: var(--chapa); color: var(--chapa-texto); display: grid; place-items: center;
  font-family: var(--fonte-titulo); font-weight: 800; font-size: .9375rem;
}
.planos { display: grid; gap: var(--e3); }
.plano { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-g); padding: var(--e5); display: flex; flex-direction: column; gap: var(--e3); position: relative; }
.plano-destaque { border-color: var(--cor-marca); box-shadow: 0 0 0 3px var(--cor-marca-clara); }
.plano-selo { position: absolute; top: -12px; left: var(--e5); }
.plano h3 { font-size: 1.25rem; }
.plano-preco { font-family: var(--fonte-titulo); font-weight: 800; font-size: 2.25rem; letter-spacing: -.035em; line-height: 1; }
.plano-preco small { font-family: var(--fonte); font-weight: 600; font-size: .875rem; color: var(--texto-3); letter-spacing: 0; }
.plano-cota { font-weight: 700; }
.plano p { margin: 0; color: var(--texto-2); font-size: .9375rem; flex: 1; }
.faq { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--borda); }
.faq details { border-bottom: 1px solid var(--borda); }
.faq summary { cursor: pointer; padding: var(--e4) 0; font-weight: 700; font-family: var(--fonte-titulo); font-size: 1.0625rem; list-style: none; display: flex; align-items: center; gap: var(--e3); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icone { margin-left: auto; color: var(--texto-3); transition: transform .15s ease; }
.faq details[open] summary .icone { transform: rotate(45deg); }
.faq details > div { padding: 0 0 var(--e4); color: var(--texto-2); font-size: .9375rem; max-width: var(--largura-texto); }
.chamada-final {
  background: var(--chapa); color: var(--chapa-texto); border-radius: var(--raio-g);
  padding: var(--e6) var(--e5); display: grid; gap: var(--e4);
}
.chamada-final h2 { font-size: 1.75rem; color: var(--chapa-texto); max-width: 18ch; }
.chamada-final p { color: var(--chapa-texto-2); }
.chamada-final .btn-secundario { background: transparent; color: var(--chapa-texto); border-color: rgba(255, 255, 255, .35); }
.exemplo-loja { border: 1px dashed var(--borda-forte); border-radius: var(--raio-g); padding: var(--e4); background: var(--superficie-2); }

/* Escolha de tema no admin */
.opcoes-tema { display: grid; gap: var(--e3); }
.opcao-tema {
  display: grid; grid-template-columns: auto 96px 1fr; gap: var(--e4); align-items: center;
  padding: var(--e4); background: var(--superficie); border: 1px solid var(--borda-forte);
  border-radius: var(--raio-g); cursor: pointer;
}
.opcao-tema:has(input:checked) { border-color: var(--cor-marca); box-shadow: 0 0 0 3px var(--cor-marca-clara); }
.opcao-tema-amostra { display: grid; grid-template-columns: repeat(2, 1fr); width: 96px; height: 64px; border-radius: var(--raio); overflow: hidden; border: 1px solid var(--borda); }
.opcao-tema-amostra span { display: block; }
@media (max-width: 480px) { .opcao-tema { grid-template-columns: auto 1fr; } .opcao-tema-amostra { grid-column: 2; } .opcao-tema > .pilha-p { grid-column: 1 / -1; } }

/* Cadastro de restaurante */
.opcoes-plano { display: grid; gap: var(--e2); }
.opcao-plano {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--e3); align-items: center;
  padding: var(--e3) var(--e4); background: var(--superficie); border: 1px solid var(--borda-forte);
  border-radius: var(--raio-g); cursor: pointer;
}
.opcao-plano:has(input:checked) { border-color: var(--cor-marca); box-shadow: 0 0 0 3px var(--cor-marca-clara); }
.opcao-plano strong { font-family: var(--fonte-titulo); font-size: 1.0625rem; }
.opcao-plano .opcao-plano-preco { font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.125rem; white-space: nowrap; text-align: right; }
.opcao-plano .opcao-plano-preco small { display: block; font-family: var(--fonte); font-weight: 500; font-size: .75rem; color: var(--texto-3); }

/* Telas de entrada (login, senha, ativação) */
.entrada-pagina { max-width: 420px; margin-inline: auto; padding-top: var(--e5); }
.entrada-pagina h1 { font-size: 1.75rem; }

@media (min-width: 768px) {
  h1 { font-size: 2.125rem; }
  h2 { font-size: 1.5rem; }
  .boas-vindas { padding: var(--e8) var(--e7); }
  .boas-vindas-chamada { font-size: 3.25rem; }
  .boas-vindas form { max-width: 520px; }
  .lista-restaurantes { grid-template-columns: repeat(2, 1fr); }
  .metricas { grid-template-columns: repeat(4, 1fr); }
  .kds-coluna { flex-basis: 300px; }
  .folha { align-items: center; }
  .folha-painel { border-radius: var(--raio-g); max-height: 86vh; }
  .hero-banner { height: 260px; border-radius: var(--raio-g); }
  .hero-identidade { margin-top: -48px; }
  .hero-logo, .hero-logo.restaurante-logo-vazio { width: 104px; height: 104px; }
  .ficha { grid-template-columns: repeat(4, 1fr); }
  .ficha-item strong { font-size: 1.1875rem; }
  .landing-hero { padding-block: var(--e7) var(--e5); }
  .landing-hero h1 { font-size: 3.25rem; }
  .landing-recursos { grid-template-columns: repeat(2, 1fr); gap: var(--e5); }
  .chamada-final { grid-template-columns: 1fr auto; align-items: center; padding: var(--e7); }
  .chamada-final h2 { font-size: 2.25rem; }
  .painel-conteudo { padding: var(--e5); }
}

@media (min-width: 1024px) {
  .nav-inferior { display: none; }
  .conteudo { padding-bottom: var(--e7); }
  .barra-carrinho { bottom: var(--e4); }
  .barra-carrinho .btn { max-width: 560px; margin-inline: auto; }
  .lista-restaurantes { grid-template-columns: repeat(3, 1fr); }
  .kds-coluna { flex-basis: 320px; }
  .planos { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: stretch; }
  .painel { grid-template-columns: 240px 1fr; }
  .painel-conteudo { padding: var(--e6); padding-bottom: var(--e7); }
  .painel-lateral {
    display: block; background: var(--superficie); border-right: 1px solid var(--borda);
    padding: var(--e4) var(--e3); position: sticky; top: 0; height: 100vh; overflow-y: auto;
  }
  .painel-lateral a {
    display: flex; align-items: center; gap: var(--e3);
    padding: 10px var(--e3); border-radius: var(--raio);
    font-size: .9375rem; font-weight: 600; color: var(--texto-2);
  }
  .painel-lateral a .icone { color: var(--texto-3); }
  .painel-lateral a[aria-current="page"] { background: var(--cor-marca-clara); color: var(--cor-marca-escura); }
  .painel-lateral a[aria-current="page"] .icone { color: var(--cor-marca); }
  .painel-lateral a:hover:not([aria-current="page"]) { background: var(--superficie-2); color: var(--texto); }
  .painel-lateral-grupo { font-size: .6875rem; font-weight: 700; color: var(--texto-3); padding: var(--e4) var(--e3) var(--e1); }
  .colunas-checkout { display: grid; grid-template-columns: 1fr 360px; gap: var(--e5); align-items: start; }
  .coluna-resumo { position: sticky; top: calc(var(--topo) + var(--e4)); }
  .boas-vindas-chamada { font-size: 4rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .topo, .nav-inferior, .barra-carrinho, .rodape, .nao-imprimir { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .conteudo { padding: 0; }
}

.barra { height: 10px; border-radius: var(--raio-total); background: var(--superficie-3); overflow: hidden; }
.barra > span { display: block; height: 100%; background: var(--cor-marca); border-radius: inherit; }
.campo-isca { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Edição do cardápio */
.catalog { overflow-wrap: anywhere; }
.catalog-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.catalog-item { display: grid; gap: var(--e2); padding: var(--e3) 0; border-top: 1px solid var(--borda); min-width: 0; }
.catalog-item:first-child { border-top: 0; padding-top: 0; }
.catalog-actions { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.catalog-actions form { margin: 0; }
.catalog .linha, .catalog .linha-entre { flex-wrap: wrap; min-width: 0; }
.catalog .linha-quebra > .campo { min-width: 9rem; }
.fold > summary {
  display: flex; align-items: center; gap: var(--e2);
  min-height: var(--toque); cursor: pointer;
  font-weight: 600; color: var(--texto-2); list-style: none;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold[open] > summary { margin-bottom: var(--e3); }
.fold > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--texto-3); border-bottom: 2px solid var(--texto-3); transform: rotate(45deg); transition: transform .15s ease; }
.fold[open] > summary::after { transform: rotate(-135deg); }
.price-field { font-variant-numeric: tabular-nums; }
.input-compact { min-height: 36px; padding: 6px var(--e2); font-size: .9375rem; width: auto; max-width: 9rem; }
.subform { border-top: 1px dashed var(--borda-forte); padding-top: var(--e3); }
fieldset.pilha-p { border: 0; margin: 0; padding: 0; min-width: 0; }

/* Conversa do pedido */
.chat-lista { display: flex; flex-direction: column; gap: var(--e2); max-height: 360px; overflow-y: auto; padding: var(--e1); }
.chat-mensagem { max-width: 85%; padding: var(--e2) var(--e3); border-radius: var(--raio-g); background: var(--superficie-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-mensagem-minha { align-self: flex-end; background: var(--cor-marca-clara); color: var(--cor-marca-escura); }
.chat-autor { display: block; font-size: .78rem; color: var(--texto-3); }

/* Ajustes de componente do tema "clean": o que no clássico é bloco escuro aqui
   vira superfície clara com borda, e o que é ação vira o botão escuro. */
[data-palette="clean"] .painel-topo { border-bottom: 1px solid var(--borda); background: var(--superficie); }
[data-palette="clean"] .painel-topo .btn-fantasma:hover { background: var(--superficie-2); }
[data-palette="clean"] .boas-vindas { border: 1px solid var(--borda); }
[data-palette="clean"] .boas-vindas::after { background: var(--cor-marca-clara); opacity: 1; }
[data-palette="clean"] .boas-vindas-chamada { color: var(--texto); }
[data-palette="clean"] .boas-vindas .entrada { background: var(--superficie); color: var(--texto); border-color: var(--borda-forte); }
[data-palette="clean"] .boas-vindas .btn-secundario,
[data-palette="clean"] .chamada-final .btn-secundario { background: var(--superficie); color: var(--texto); border-color: var(--borda-forte); }
[data-palette="clean"] .chamada-final { border: 1px solid var(--borda); }
[data-palette="clean"] .barra-carrinho .btn { background: var(--cor-botao); color: var(--cor-botao-texto); }
[data-palette="clean"] .filtro[aria-pressed="true"] { background: var(--cor-botao); border-color: var(--cor-botao); color: var(--cor-botao-texto); }
[data-palette="clean"] .toast { background: var(--cor-botao); color: var(--cor-botao-texto); }
[data-palette="clean"] .metrica-destaque { border-color: var(--borda-forte); }
[data-palette="clean"] .landing-passos li::before { background: var(--superficie-2); color: var(--texto); border: 1px solid var(--borda-forte); }
[data-palette="clean"] .categoria[aria-current="true"] .categoria-icone { background: var(--cor-botao); border-color: var(--cor-botao); color: var(--cor-botao-texto); }
[data-palette="clean"] .kds-coluna { background: var(--superficie-2); }
[data-palette="clean"] .cartao, [data-palette="clean"] .restaurante-cartao, [data-palette="clean"] .metrica { box-shadow: var(--sombra-1); }