/* Assinatura Vitória — direção A, interface completa.
   Tema do cliente; o painel mantém seus próprios tokens em painel.css.
   Contraste sobre branco / #F5F5F3:
   #242424: 15,52 / 14,22; #595959: 7,00 / 6,42;
   #860018: 10,36 / 9,49; #17633A sobre branco: 7,29.
   Laranja só em acentos decorativos, nunca em texto ou indicador de foco. */
:root {
  /* Vinho elegante (25/09): chão marfim quente, topo vinho profundo,
     detalhes finos em dourado. Contraste sobre o marfim #FBF7F2:
     texto #2B1B1D 15,4 · texto-2 #6A5557 6,5 · vinho #7A0F1F 10,3.
     Creme #FBF1E6 sobre o vinho #5E0B18: 12,3; abas a 70%: 6,9. */
  --carvao: #FBF7F2;
  --carvao-2: #F4EDE4;
  --carvao-3: #F4EDE4;
  --creme: #2B1B1D;
  --creme-2: #6A5557;
  --creme-3: #6A5557;
  --vinho: #7A0F1F;
  --vinho-2: #5E0B18;
  --vinho-fundo: #5E0B18;
  --vermelho: #7A0F1F;
  --vermelho-2: #5E0B18;
  --ouro: #7A0F1F;
  --ouro-2: #5E0B18;
  --dourado: #C8925A;
  --dourado-claro: #F2C48E;
  --marfim-claro: #FBF1E6;
  --laranja: #E07D3E;
  --linha: #E9DCCB;
  --linha-2: #8C7A72;
  --preto: var(--carvao); --preto-2: var(--carvao-2); --preto-3: var(--carvao-3);
  --pink: var(--vinho); --pink-2: var(--vinho); --turq: var(--vinho);
  --tinta: var(--creme); --tinta-2: var(--creme-2); --tinta-3: var(--creme-3);
  --choco: var(--creme);
  --f-display: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  --f-titulo: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  --f-texto: 'Manrope', system-ui, sans-serif;
  --larg: 1100px;
  --lado: clamp(16px, 4vw, 32px);
}
html { touch-action: auto; }
body { background: var(--carvao); color: var(--creme); overflow-x: clip; }
a:focus-visible, button:focus-visible, .campo:focus-visible,
.pi__obs textarea:focus-visible {
  outline: 2px solid var(--vinho); outline-offset: 3px;
}

/* Logo inteira, proporcional, sobre branco. */
.cardapio-topo { position: static; background: #fff; border: 0; }
.cardapio-topo__miolo {
  padding: 20px var(--lado); grid-template-columns: 148px minmax(0, 1fr); gap: 16px;
}
.cardapio-topo__marca { display: block; line-height: 1; }
.cardapio-topo__marca img { width: 148px; height: auto; object-fit: contain; }
.cardapio-topo__status {
  font-family: var(--f-texto); font-size: .75rem; font-weight: 600;
  text-transform: none; letter-spacing: 0; gap: 6px; flex-wrap: wrap;
  justify-content: flex-end; color: var(--creme-2);
}
.cardapio-topo__status[data-aberto="sim"] { color: #17633A; }
.cardapio-topo__status[data-aberto="sim"] .ponto { background: #17633A; }
.cardapio-topo__status[data-aberto="nao"] { color: var(--creme-2); }
.cardapio-topo__status[data-aberto="nao"] .ponto { background: var(--creme-2); }

/* Só as categorias ficam presas; a logo sai ao rolar. */
.categorias {
  position: sticky; top: 0; z-index: 60; max-width: none;
  background: #fff; border-block: 1px solid var(--linha);
  padding: 4px var(--lado) 0; gap: 24px; scroll-padding: 8px;
}
.categorias button {
  min-height: 48px; padding: 10px 4px; border-bottom-width: 3px;
  font-family: var(--f-texto); font-size: .875rem; font-weight: 600;
  text-transform: none; letter-spacing: 0; color: var(--creme-2);
}
.categorias button:hover { color: var(--vinho-2); }
.categorias button[aria-current="true"] { color: var(--vinho); border-bottom-color: var(--vinho); }
.categorias button:focus-visible { outline-offset: -3px; }
.cardapio { width: 100%; max-width: 760px; }
.grupo-cat { padding-top: 28px; }
.grupo-cat + .grupo-cat { padding-top: 48px; }
.cat-capa { display: grid; gap: 8px; margin-bottom: 6px; }
.cat-capa__nome {
  font-size: 26px; font-weight: 600; line-height: 1.15;
  text-transform: none; letter-spacing: 0; color: var(--creme);
}
.cat-capa__conta { font-size: .75rem; line-height: 1.65; color: var(--creme-2); }
.cat-capa__monta { font-weight: 600; color: var(--vinho); }
.cat-capa__conta > * + *::before { opacity: 1; }
.cat-capa__disco { max-width: 100%; margin: 0 0 8px; }
.cat-capa__disco img { width: auto; height: auto; max-width: 100%; max-height: 200px; object-fit: contain; }
.itens { grid-template-columns: minmax(0, 1fr); gap: 0; }

/* Texto e miniatura na primeira linha. Preço e ação abaixo, na largura toda:
   assim "Escolher +" termina na mesma borda direita com ou sem foto. */
.item {
  grid-template-columns: minmax(0, 1fr) 88px;
  grid-template-areas: 'texto foto' 'valor valor';
  gap: 6px 14px; align-items: start;
  padding: 12px 0; border-bottom: 1px solid var(--linha);
  transition: background-color .15s;
}
.item--sem-foto { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'texto' 'valor'; }
.item__texto { grid-area: texto; display: block; }
.item__nome {
  display: block; font-size: 21px; font-weight: 600; line-height: 1.2;
  text-transform: none; letter-spacing: 0; overflow-wrap: anywhere;
}
.item__x { color: inherit; }
.item:hover .item__nome, .item:hover .item__x { color: var(--vinho); }
.item__desc { font-size: .875rem; line-height: 1.5; margin-top: 4px; max-width: 62ch; }
.item__monta { font-family: var(--f-texto); font-size: .75rem; text-transform: none; letter-spacing: 0; color: var(--creme-2); }
.item__valor {
  grid-area: valor; flex-direction: row; align-items: center; justify-content: space-between;
  gap: 12px; padding: 0; text-align: left; white-space: normal; flex-wrap: wrap;
}
.item__preco { font-family: var(--f-texto); font-size: .9375rem; font-weight: 600; letter-spacing: 0; }
.item__escolher {
  display: inline-flex; align-items: center; gap: 12px; min-height: 28px;
  font-size: .75rem; font-weight: 600; color: var(--vinho);
}
.item__escolher > span { font-size: 22px; font-weight: 400; line-height: 1; }
.item__foto { grid-area: foto; width: 88px; aspect-ratio: 1; background: var(--carvao-2); border-radius: 6px; }
.item__foto img { object-fit: contain; }
.item:hover .item__foto img { transform: none; }
.item--esgotado { opacity: 1; }
.item--esgotado .item__nome, .item--esgotado .item__x { color: var(--creme-2); }
.item__preco--fora { font-size: .8125rem; text-transform: none; }
.cardapio-rodape { font-size: .8125rem; }

/* Pedido: superfícies claras e ações em vinho. */
.barra-pedido { background: var(--vinho); color: #fff; bottom: calc(12px + env(safe-area-inset-bottom)); box-shadow: none; }
.barra-pedido:hover { background: var(--vinho-2); }
.barra-pedido__qtd { background: #fff; color: var(--vinho); }
.barra-pedido:focus-visible { outline-color: var(--creme); }
.painel, .painel__topo { background: #fff; }
.painel__titulo, .painel__fechar, .painel__voltar { color: var(--creme); }
.pi__foto { height: 230px; aspect-ratio: auto; object-fit: contain; }
.pi__nome { text-transform: none; }
.pi__cabeca .item__x { color: inherit; }
.btn--pink, .btn--turq { background: var(--vinho); color: #fff; }
.btn--pink:hover, .btn--turq:hover { background: var(--vinho-2); }
.pg__regra--cheio { color: #17633A; border-color: #17633A; }
.pgto-marca--on, .pgto-marca:has(input:checked) { background: var(--carvao-2); }
.opcao--travada, .opcao__add:disabled, .qtd button:disabled, .btn:disabled { opacity: 1; }
.opcao--travada, .opcao__add:disabled, .qtd button:disabled, .btn:disabled {
  color: var(--creme-2); background: var(--carvao-2);
}
.pe-linha { flex-wrap: wrap; gap: 12px; }
.pe-linha .btn { white-space: normal; padding-inline: 12px; }

@media (min-width: 641px) {
  .cardapio-topo__status { font-size: .8125rem; }
  .item { grid-template-columns: minmax(0, 1fr) 104px; }
  .item--sem-foto { grid-template-columns: minmax(0, 1fr); }
  .item__foto { width: 104px; }
  .item__desc { font-size: .875rem; }
}
@media (min-width: 1100px) {
  .cardapio-topo__miolo { padding-block: 24px; grid-template-columns: 184px 1fr; }
  .cardapio-topo__marca img { width: 184px; }
  .cardapio-layout {
    display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 64px;
    max-width: var(--larg); margin-inline: auto; padding: 12px var(--lado) 0;
    align-items: start;
  }
  .categorias {
    top: 24px; width: 100%; max-height: calc(100dvh - 48px);
    flex-direction: column; gap: 4px; padding: 4px; border: 0;
    overflow-x: hidden; overflow-y: auto; scrollbar-width: thin;
  }
  .categorias button { flex-shrink: 0; text-align: left; padding: 12px; white-space: normal; overflow-wrap: anywhere; }
  .categorias button[aria-current="true"] { background: var(--carvao-2); }
  .cardapio { max-width: none; padding: 0; min-width: 0; }
  .grupo-cat { padding-top: 8px; }
  .cat-capa__nome { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}

/* Um único acento, ecoando os três círculos da logo: faixa de 4 px no topo,
   em três blocos (vinho → vermelho → laranja), com corte seco — não é
   degradê. Antes eram três bolinhas ao lado do status, que pareciam o
   botão de menu "⋮" e convidavam a um toque que não fazia nada. */
.cardapio-topo {
  background-color: #fff;
  background-image: linear-gradient(90deg, #860018 0 33.34%, #C92530 33.34% 66.67%, #E07D3E 66.67%);
  background-size: 100% 4px; background-repeat: no-repeat; background-position: top;
}
.cardapio-topo__info { justify-self: end; }
.cardapio-topo__status { font-size: .8125rem; }
/* Texto que só o leitor de tela lê (ex.: nome do lanche no título da janela). */
.so-leitor {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.item:disabled { cursor: default; }
.item:disabled .item__nome, .item:disabled .item__x,
.item:disabled .item__preco { color: var(--creme-2); }
.item__preco--fora { letter-spacing: 0; }
.item:not(:disabled):hover { background: var(--carvao-2); }
.item { scroll-margin-block: 90px 140px; }
.pagina-cardapio { padding-bottom: 24px; }
.pagina-cardapio.tem-pedido { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
html:has(.tem-pedido) { scroll-padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
.cardapio-rodape { margin-top: 36px; padding-block: 24px; line-height: 1.6; }
/* Uma só voz: nomes em Barlow; controles e leitura em Manrope. */
.painel h2, .painel h3, .painel h4, .contas div.total,
.painel .btn, .barra-pedido, .pg__regra, .pi__obs label,
.linha-pedido__nome, .linha-pedido__tirar, .fs__titulo, .fs__campos label span,
.escolha, .aviso-pe, .fechado-faixa, .pgto-marca, .pgto-duas__rotulo,
.opcao__preco--acabou { text-transform: none; letter-spacing: 0; font-weight: 600; }
.painel .btn, .barra-pedido, .pg__regra, .pi__obs label, .linha-pedido__tirar,
.fs__campos label span, .escolha, .aviso-pe, .fechado-faixa,
.pgto-marca, .pgto-duas__rotulo { font-family: var(--f-texto); }
.painel .btn { font-size: .875rem; min-height: 48px; padding: 12px; white-space: normal; }
.painel .btn:hover { transform: none; }
.barra-pedido { padding: 14px 16px; gap: 10px; border-radius: 6px; }
.barra-pedido__texto, .barra-pedido__total { font-size: .875rem; }
.barra-pedido__total, .pi__preco, .linha-pedido__preco { font-variant-numeric: tabular-nums; }
.painel { height: 92dvh; max-height: 92dvh; border-radius: 12px 12px 0 0; }
.painel__titulo { font-size: 1.25rem; line-height: 1.2; overflow-wrap: anywhere; }
.painel__corpo { min-height: 0; }
.painel__pe { padding-top: 12px; }
.painel-fundo { background: rgb(36 36 36 / 45%); }
.pi__nome { font-size: 1.625rem; }
.pi__cabeca { padding-block: 16px; }
.pi__desc { font-size: .875rem; }
.pg__cabeca { gap: 6px 12px; padding-block: 16px 10px; }
.pg__regra { font-size: .8125rem; border: 0; padding: 0; }
.pg__regra--obrig, .pg__regra--cheio { padding: 2px 6px; border: 1px solid currentColor; }
.opcao--conta { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'nome conta' 'preco conta'; gap: 2px 12px; }
.opcao--conta .opcao__nome { grid-area: nome; }
.opcao--conta .opcao__conta { display: contents; }
.opcao--conta .opcao__preco { grid-area: preco; justify-self: start; }
.opcao--conta .qtd, .opcao--conta .opcao__add { grid-area: conta; }
.opcao__nome { font-size: .875rem; }
.opcao__add, .qtd--mini button { width: 44px; height: 44px; }
.qtd--mini span { min-width: 24px; }
.qtd { border-radius: 4px; flex-shrink: 0; }
.opcao__add { border-radius: 4px; color: var(--vinho); }
.campo, .pi__obs textarea { border-color: var(--linha-2); border-radius: 4px; }
.campo::placeholder, .pi__obs textarea::placeholder { color: var(--creme-2); opacity: 1; }
.linha-pedido { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding-block: 16px; }
.linha-pedido__nome { color: var(--creme); overflow-wrap: anywhere; }
.linha-pedido__pe { gap: 12px; flex-wrap: wrap; }
.linha-pedido__tirar { min-height: 44px; }
.aviso-pe { font-size: .875rem; line-height: 1.5; }
.fechado-faixa { background: var(--carvao-2); color: var(--creme); border-bottom: 1px solid var(--linha); }
@media (min-width: 1100px) {
  .cardapio-layout { gap: 40px; grid-template-columns: 180px minmax(0, 1fr); }
  .categorias { align-self: start; }
  .item { grid-template-columns: minmax(0, 1fr) 100px 88px; grid-template-areas: 'texto valor foto'; gap: 24px; align-items: center; padding-block: 18px; }
  .item--sem-foto { grid-template-columns: minmax(0, 1fr) 100px; grid-template-areas: 'texto valor'; }
  /* Categoria com pelo menos uma foto: quem não tem foto guarda a coluna
     vazia, e os preços ficam todos na mesma vertical. */
  .grupo-cat--com-fotos .item--sem-foto {
    grid-template-columns: minmax(0, 1fr) 100px 88px; grid-template-areas: 'texto valor .';
  }
  .item__valor { flex-direction: column; align-items: flex-start; gap: 8px; }
  .item__foto { width: 88px; }
  .item__desc { max-width: 56ch; }
  .painel { height: 100dvh; max-height: 100dvh; border-radius: 0; }
}
@media (max-width: 359px) {
  .painel__pe .pe-linha > .qtd { margin-inline: auto; }
  .painel__pe .pe-linha > .qtd + .btn { flex-basis: 100%; }
  .barra-pedido { padding-inline: 12px; gap: 8px; }
}


/* =====================================================================
   VINHO ELEGANTE (25/09/2026) — topo e abas em vinho profundo formando
   um só bloco; a logo mora numa placa marfim (sobre o vinho a fita dela
   sumiria); lista em marfim com fios dourados finos e fotos do cartaz.
   ===================================================================== */
.cardapio-topo {
  background: var(--vinho-fundo); background-image: none;
  color: var(--marfim-claro);
}
.cardapio-topo__miolo { padding-block: 18px 14px; }
.cardapio-topo__marca {
  background: var(--marfim-claro); border-radius: 14px; padding: 8px 10px;
  box-shadow: 0 0 0 1px rgb(242 196 142 / 55%), 0 10px 24px -12px rgb(0 0 0 / 55%);
  width: max-content;
}
.cardapio-topo__marca img { width: 128px; }
.cardapio-topo__status,
.cardapio-topo__status[data-aberto="nao"] { color: rgb(251 241 230 / 82%); }
.cardapio-topo__status[data-aberto="nao"] .ponto { background: var(--dourado-claro); }
.cardapio-topo__status[data-aberto="sim"] { color: #CDEFD9; }
.cardapio-topo__status[data-aberto="sim"] .ponto { background: #7FDDA5; }
.cardapio-topo a:focus-visible { outline-color: var(--dourado-claro); }

/* Abas (celular/tablet): continuam o vinho do topo, fio dourado embaixo. */
.categorias {
  background: var(--vinho-fundo); border: 0;
  box-shadow: inset 0 -1px 0 rgb(242 196 142 / 35%);
}
.categorias button { color: rgb(251 241 230 / 70%); }
.categorias button:hover { color: var(--marfim-claro); }
.categorias button[aria-current="true"] { color: var(--marfim-claro); border-bottom-color: var(--dourado-claro); }
.categorias button:focus-visible { outline-color: var(--dourado-claro); }

/* Título da categoria: vinho, com um fio dourado curto embaixo. */
.cat-capa__nome { color: var(--vinho); }
.cat-capa__nome::after {
  content: ""; display: block; width: 44px; height: 2px; margin-top: 8px;
  background: var(--dourado);
}
.cat-capa__monta { color: var(--vinho); }

/* Itens */
.item { border-bottom-color: var(--linha); }
.item__preco { color: var(--vinho); font-weight: 700; }
.item__foto {
  width: 92px; border-radius: 12px; overflow: hidden; background: #1B0F10;
  box-shadow: 0 0 0 1px rgb(200 146 90 / 35%), 0 6px 14px -8px rgb(60 10 20 / 55%);
}
.item__foto img { object-fit: cover; }
.item { grid-template-columns: minmax(0, 1fr) 92px; }
.item--sem-foto { grid-template-columns: minmax(0, 1fr); }
.pi__foto { height: auto; width: min(240px, 70%); aspect-ratio: 1; object-fit: cover; border-radius: 16px; margin-inline: auto; display: block; }

/* Pedido */
.barra-pedido { background: var(--vinho-fundo); box-shadow: 0 10px 28px -12px rgb(60 10 20 / 70%); }
.barra-pedido:hover { background: var(--vinho); }
.barra-pedido__qtd { background: var(--dourado-claro); color: var(--vinho-fundo); }
.painel, .painel__topo { background: var(--carvao); }
.painel-fundo { background: rgb(43 27 29 / 50%); }

.cardapio-rodape { color: var(--creme-2); border-top: 1px solid var(--linha); }

@media (min-width: 641px) {
  .item { grid-template-columns: minmax(0, 1fr) 104px; }
  .item--sem-foto { grid-template-columns: minmax(0, 1fr); }
  .item__foto { width: 104px; }
  .cardapio-topo__marca img { width: 150px; }
}
@media (min-width: 1100px) {
  .cardapio-topo__miolo { padding-block: 24px; grid-template-columns: max-content 1fr; }
  .cardapio-topo__marca img { width: 168px; }
  .cardapio-layout { padding-top: 32px; }
  /* No desktop as abas viram coluna lateral sobre o marfim. */
  .categorias { background: transparent; box-shadow: none; }
  .categorias button { color: var(--creme-2); border-radius: 8px; border-bottom: 0; }
  .categorias button:hover { color: var(--vinho); background: var(--carvao-2); }
  .categorias button[aria-current="true"] { background: var(--vinho-fundo); color: var(--marfim-claro); }
  .categorias button:focus-visible { outline-color: var(--vinho); }
  .item { grid-template-columns: minmax(0, 1fr) 100px 104px; }
  .item--sem-foto { grid-template-columns: minmax(0, 1fr) 100px; }
  .grupo-cat--com-fotos .item--sem-foto { grid-template-columns: minmax(0, 1fr) 100px 104px; }
}