/* =========================================================================
   SIRIMBÓ — Cantina & Vermutería · Porto Alegre/RS
   Broadside de bar: cor chapada, grid quebrado, tudo é uma conta de balcão.
   Paradigma deliberadamente oposto ao template proibido e à Fornalha do Largo.
   ========================================================================= */

:root {
  --laranja: #FF5417;     /* cor-bloco dominante / entrada */
  --verde:   #143A2B;     /* segundo bloco / texto sobre laranja */
  --creme:   #F2E9D8;     /* fundo de respiro / texto sobre verde */
  --tinta:   #0C0C0C;     /* tipografia de dados */
  --rosa:    #E8607D;     /* ACENTO ÚNICO — reserva + estado ativo do índice */

  --rail-w: 4.5rem;       /* largura do índice numerado lateral (desktop) */
  --maxcol: 64rem;        /* largura máxima de uma coluna de leitura */
}

/* ---------- reset enxuto ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--creme);
  color: var(--tinta);
  font-family: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--rosa); outline-offset: 3px; }

.tabnum { font-variant-numeric: tabular-nums; }
.anton  { font-family: "Anton", "Space Grotesk", system-ui, sans-serif; font-weight: 400; letter-spacing: .01em; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =========================================================================
   ÍNDICE NUMERADO LATERAL — NÃO é header sticky.
   Fixo à esquerda no desktop; some no mobile (scroll natural + barra inferior).
   ========================================================================= */
.indice {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: var(--rail-w);
  z-index: 40;
  display: none;                 /* mobile: oculto */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  background: var(--tinta);
  border-right: 2px solid var(--tinta);
}
.indice a {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  color: var(--creme);
  opacity: .55;
  transition: opacity .25s ease, color .25s ease;
  writing-mode: vertical-rl;
}
.indice a .num {
  font-family: "Anton", sans-serif;
  font-size: 1.35rem;
  line-height: 1;
  writing-mode: horizontal-tb;
  font-variant-numeric: tabular-nums;
}
.indice a .lbl {
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.indice a:hover { opacity: 1; }
.indice a.is-active { opacity: 1; color: var(--rosa); }
.indice a.is-active .num { color: var(--rosa); }

/* marca da casa no topo do rail */
.indice .rail-mark {
  position: absolute; top: 1rem; left: 0; right: 0;
  text-align: center;
  font-family: "Anton", sans-serif;
  font-size: 1rem; color: var(--laranja);
  writing-mode: vertical-rl; height: auto;
}

@media (min-width: 920px) {
  .indice { display: flex; }
  .shell  { padding-left: var(--rail-w); }
}

/* =========================================================================
   BLOCOS DE COR CHAPADA — larguras diferentes, ritmos diferentes.
   ========================================================================= */
.bloco { position: relative; }
.bloco--laranja { background: var(--laranja); color: var(--tinta); }
.bloco--verde   { background: var(--verde);   color: var(--creme); }
.bloco--creme   { background: var(--creme);   color: var(--tinta); }
.bloco--tinta   { background: var(--tinta);   color: var(--creme); }

.pad      { padding: clamp(1.5rem, 5vw, 4rem) clamp(1.25rem, 5vw, 3.5rem); }
.pad-lg   { padding: clamp(3rem, 9vw, 7rem) clamp(1.25rem, 5vw, 3.5rem); }
.col-narrow { max-width: 34rem; }
.col-read   { max-width: var(--maxcol); }

/* recuo intencional de uma seção numa coluna estreita (ritmo quebrado) */
@media (min-width: 720px) {
  .recuo { margin-left: clamp(2rem, 18vw, 14rem); }
  .recuo-dir { margin-right: clamp(2rem, 18vw, 14rem); }
}

/* justaposição assimétrica 60/40 e 30/70 */
.split { display: grid; gap: 0; }
@media (min-width: 720px) {
  .split--6040 { grid-template-columns: 60% 40%; }
  .split--3070 { grid-template-columns: 32% 68%; }
}

/* =========================================================================
   ENTRADA / CARTAZ — SIRIMBÓ gigante girado, sem foto, sem scrim, sem botões.
   ========================================================================= */
.entrada {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.25rem, 5vw, 3.5rem);
  /* clip só no eixo X (não cria scroll) e deixa a vertical LIVRE pro nome girado
     não ser cortado nem invadir os vizinhos */
  overflow-x: clip;
  overflow-y: visible;
}
/* o "olho" da entrada ganha faixa-morta que o arco do nome girado não alcança */
.entrada .olho { margin-bottom: clamp(1rem, 3.5vw, 2rem); }
.cartaz-nome {
  font-family: "Anton", sans-serif;
  color: var(--verde);
  line-height: .82;
  letter-spacing: .005em;
  font-size: clamp(4.2rem, 28vw, 18rem);
  transform: rotate(-4deg);
  /* left BOTTOM: planta a base à esquerda e levanta só a direita (excursão previsível) */
  transform-origin: left bottom;
  margin: 0;
  /* reserva a caixa girada em vw (a subida ≈ largura×sin4° cresce com o viewport) */
  margin-top: clamp(1.2rem, 5vw, 3.4rem);
  margin-bottom: clamp(.8rem, 3vw, 2rem);
  /* quebra a baseline: empurra pra fora um tico à esquerda */
  margin-left: -.04em;
  text-transform: uppercase;
}
.cartaz-dado {
  font-family: "Anton", sans-serif;
  font-size: clamp(1.1rem, 4.6vw, 2.2rem);
  letter-spacing: .08em;
  margin-top: clamp(1.4rem, 4vw, 2.6rem);
  color: var(--tinta);
  display: flex; flex-wrap: wrap; gap: .35em 1.1em;
  align-items: baseline;
}
.cartaz-dado .ponto { color: var(--tinta); }
.cartaz-sub {
  margin-top: 1.1rem;
  max-width: 30rem;
  font-size: clamp(.95rem, 3.4vw, 1.15rem);
  color: var(--tinta);
  font-weight: 500;
}
/* tira de "edição de hoje" — dado vivo gerado por JS */
.edicao-hoje {
  margin-top: clamp(1.6rem, 5vw, 3rem);
  border-top: 2px solid var(--tinta);
  padding-top: .8rem;
  font-size: clamp(.8rem, 3vw, .95rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta);
  font-weight: 600;
}
.edicao-hoje b { color: var(--tinta); }

/* =========================================================================
   MANCHETES DE SEÇÃO — Anton, número-motif à frente.
   ========================================================================= */
.manchete {
  display: flex;
  align-items: baseline;
  gap: .7em;
  font-family: "Anton", sans-serif;
  text-transform: uppercase;
  line-height: .9;
  margin: 0 0 1.4rem;
  font-size: clamp(2.2rem, 9vw, 5rem);
}
.manchete .conta {
  font-size: .42em;
  font-variant-numeric: tabular-nums;
  padding: .15em .45em;
  border: 3px solid currentColor;
  letter-spacing: .04em;
  line-height: 1;
  align-self: center;
}
.olho {                 /* "edição de hoje / hoje no balcão" curtinho */
  font-size: .8rem; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 700; margin: 0 0 .6rem; opacity: .85;
}
/* sobre o laranja (entrada), o olho vira tinta cheia — sem opacity (AA) */
.bloco--laranja .olho { opacity: 1; }
.manifesto {
  font-size: clamp(1.05rem, 4.2vw, 1.5rem);
  line-height: 1.4; font-weight: 500; max-width: 32rem;
}
.manifesto b { background: var(--rosa); color: var(--tinta); padding: 0 .15em; }

/* =========================================================================
   LISTA TIPOGRÁFICA COM LEADERS PONTILHADOS — conta de bar. NÃO são cards.
   ========================================================================= */
.conta-lista { list-style: none; margin: 0; padding: 0; }
.conta-lista li { padding: .85rem 0; border-bottom: 1px solid currentColor; }
.conta-lista li:first-child { border-top: 1px solid currentColor; }

.item {
  display: flex; align-items: baseline; gap: .5rem;
  font-size: clamp(1.05rem, 4.4vw, 1.4rem);
  font-weight: 600;
}
.item .nome { flex: 0 1 auto; }
.item .leaders {
  flex: 1 1 auto;
  border-bottom: 2px dotted currentColor;
  transform: translateY(-.28em);
  min-width: 1.5rem;
  opacity: .65;
}
.item .preco {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}
.item .preco::before { content: "R$ "; font-size: .72em; opacity: .7; font-weight: 500; }
.item .preco.s-cifrao::before { content: ""; }
.desc {
  margin: .35rem 0 0;
  font-size: clamp(.95rem, 3.4vw, .98rem);
  line-height: 1.45; opacity: .82; font-weight: 400; max-width: 42rem;
}
.tag-novo {
  display: inline-block; font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 700;
  background: var(--rosa); color: var(--tinta);
  padding: .12em .5em; vertical-align: middle; margin-left: .5em;
}

/* hover que INVERTE o bloco (troca bg/cor) — desktop, ponteiro fino */
@media (hover: hover) and (pointer: fine) {
  .invert-hover { transition: background-color .18s ease, color .18s ease; }
  .bloco--creme .invert-hover:hover { background: var(--tinta); color: var(--creme); }
  .bloco--verde .invert-hover:hover { background: var(--creme); color: var(--verde); }
  .invert-hover:hover .item .leaders { opacity: .9; }
}

/* número que conta ao entrar na viewport (count-up) */
.contador { font-variant-numeric: tabular-nums; }

/* =========================================================================
   RAIL DE RESERVA — "PEGAR MESA" persistente. Faixa vertical (desktop),
   barra do polegar (mobile). Painel que desliza = o "balcão".
   ========================================================================= */
.pegar-rail {
  position: fixed; z-index: 55;
  background: var(--rosa); color: var(--tinta);
  border: none; cursor: pointer;
  font-family: "Anton", sans-serif; letter-spacing: .12em; text-transform: uppercase;
}
/* mobile: barra inferior do polegar */
.pegar-rail {
  left: 0; right: 0; bottom: 0;
  height: 56px;
  padding-bottom: env(safe-area-inset-bottom);
  font-size: 1.15rem;
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  box-shadow: 0 -3px 0 rgba(12,12,12,.18);
}
.pegar-rail .seta { font-size: 1rem; }
@media (min-width: 920px) {
  .pegar-rail {
    left: auto; right: 0; top: 0; bottom: 0; height: auto;
    width: 3.4rem; padding: 0;
    flex-direction: column;
    box-shadow: -3px 0 0 rgba(12,12,12,.18);
  }
  .pegar-rail .txt { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 1.05rem; }
  .pegar-rail .seta { transform: rotate(-90deg); }
}

/* painel deslizante = balcão */
.balcao-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(12,12,12,.55);
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.balcao-backdrop.aberto { opacity: 1; visibility: visible; }

.balcao {
  position: fixed; z-index: 61;
  background: var(--creme); color: var(--tinta);
  display: flex; flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* mobile: full-screen, sobe de baixo */
.balcao {
  inset: 0;
  transform: translateY(100%);
  transition: transform .34s cubic-bezier(.2,.7,.2,1);
}
.balcao.aberto { transform: translateY(0); }
@media (min-width: 920px) {
  .balcao {
    top: 0; bottom: 0; right: 0; left: auto;
    width: min(50vw, 38rem);
    transform: translateX(100%);
  }
  .balcao.aberto { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .balcao { transition: none; }
}

.balcao-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.25rem; background: var(--rosa); color: var(--tinta);
  position: sticky; top: 0; z-index: 2;
}
.balcao-top h2 { font-family: "Anton", sans-serif; margin: 0; font-size: 1.5rem; letter-spacing: .04em; }
.balcao-fechar {
  background: var(--tinta); color: var(--creme); border: none; cursor: pointer;
  width: 44px; height: 44px; font-size: 1.4rem; line-height: 1; border-radius: 0;
}
.balcao-body { padding: 1.25rem 1.25rem 2.5rem; }

.passo-tit {
  font-family: "Anton", sans-serif; font-size: 1.05rem; letter-spacing: .06em;
  text-transform: uppercase; margin: 1.6rem 0 .7rem;
  display: flex; align-items: baseline; gap: .55rem;
}
.passo-tit:first-child { margin-top: 0; }
.passo-tit .conta {
  font-size: .8rem; border: 2px solid currentColor; padding: .05em .4em;
  font-variant-numeric: tabular-nums;
}

/* fichas / chips de dia */
.fichas { display: flex; gap: .5rem; flex-wrap: wrap; }
.ficha {
  min-height: 44px; min-width: 56px;
  padding: .5rem .7rem;
  border: 2px solid var(--tinta); background: var(--creme); color: var(--tinta);
  cursor: pointer; font-weight: 700; line-height: 1.05; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: background-color .15s, color .15s;
}
.ficha .dia-num { font-variant-numeric: tabular-nums; font-size: 1.15rem; font-family: "Anton", sans-serif; }
.ficha .dia-dow { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; }
.ficha[aria-pressed="true"] { background: var(--tinta); color: var(--creme); }
.ficha:disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }

/* fila de horários — números do menu, esgotados riscados */
.horarios { display: flex; flex-wrap: wrap; gap: .5rem; }
.hslot {
  min-height: 44px; padding: .55rem .8rem;
  border: 2px solid var(--tinta); background: var(--creme); color: var(--tinta);
  font-family: "Anton", sans-serif; font-variant-numeric: tabular-nums;
  font-size: 1.1rem; letter-spacing: .03em; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.hslot[aria-pressed="true"] { background: var(--rosa); color: var(--tinta); border-color: var(--tinta); }
.hslot:disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
.hslot .cheio { display: block; font-family: "Space Grotesk", sans-serif; font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; }

/* grupo */
.grupos { display: flex; gap: .5rem; flex-wrap: wrap; }
.grupo {
  min-height: 52px; min-width: 56px; padding: .6rem 1rem;
  border: 2px solid var(--tinta); background: var(--creme); color: var(--tinta);
  font-family: "Anton", sans-serif; font-size: 1.25rem; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.grupo[aria-pressed="true"] { background: var(--tinta); color: var(--creme); }

/* campo nome */
.campo { margin-top: 1.4rem; }
.campo label { display: block; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; margin-bottom: .4rem; }
.campo input, .campo textarea {
  width: 100%; min-height: 48px; padding: .7rem .8rem;
  border: 2px solid var(--tinta); background: var(--creme); color: var(--tinta);
  font: inherit; border-radius: 0;
}
.campo textarea { min-height: 70px; resize: vertical; }
.erro-campo { color: #b00020; font-size: .8rem; font-weight: 700; margin-top: .35rem; }
.erro-campo[hidden] { display: none; }

.btn-confirmar {
  margin-top: 1.6rem; width: 100%; min-height: 56px;
  background: var(--tinta); color: var(--creme); border: none; cursor: pointer;
  font-family: "Anton", sans-serif; font-size: 1.3rem; letter-spacing: .08em; text-transform: uppercase;
  transition: background-color .15s;
}
.btn-confirmar:hover { background: var(--rosa); color: var(--tinta); }
.btn-confirmar:disabled { opacity: .45; cursor: not-allowed; }
.aviso-demo { margin-top: .9rem; font-size: .75rem; letter-spacing: .04em; opacity: .7; text-align: center; }

/* =========================================================================
   COMANDA TÉRMICA — "imprime" linha a linha. Motif de número da conta.
   ========================================================================= */
.comanda-wrap { display: none; }
.comanda-wrap.show { display: block; }
.comanda {
  background: var(--creme);
  border: 2px dashed var(--tinta);
  padding: 1.4rem 1.2rem 1.8rem;
  font-variant-numeric: tabular-nums;
  max-width: 22rem; margin: 0 auto;
  position: relative;
}
.comanda::before, .comanda::after {
  content: ""; position: absolute; left: 0; right: 0; height: 10px;
  background-image: radial-gradient(circle at 6px -2px, transparent 5px, var(--creme) 5px);
  background-size: 12px 10px;
}
.comanda::before { top: -10px; }
.comanda::after  { bottom: -10px; transform: scaleY(-1); }

.comanda .linha {
  opacity: 0;
  transform: translateY(4px);
}
.comanda.printing .linha { animation: tinta-seca .5s ease forwards; }
@keyframes tinta-seca {
  from { opacity: 0; transform: translateY(4px); filter: blur(1px); }
  to   { opacity: 1; transform: translateY(0);  filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .comanda.printing .linha { animation: none; opacity: 1; transform: none; }
}

.comanda-head { text-align: center; border-bottom: 2px dashed var(--tinta); padding-bottom: .6rem; margin-bottom: .7rem; }
.comanda-head .marca { font-family: "Anton", sans-serif; font-size: 1.7rem; letter-spacing: .06em; }
.comanda-head .end { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.comanda-row { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem 0; font-size: .95rem; }
.comanda-row .k { letter-spacing: .08em; text-transform: uppercase; font-size: .7rem; opacity: .75; align-self: center; }
.comanda-row .v { font-weight: 700; text-align: right; }
.comanda-mesa {
  text-align: center; margin: .9rem 0 .4rem;
  font-family: "Anton", sans-serif;
}
.comanda-mesa .conta {
  display: inline-block; border: 3px solid var(--tinta); padding: .15em .55em;
  font-size: 2rem; letter-spacing: .04em;
}
.comanda-mesa .rotulo { display: block; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; opacity: .7; margin-bottom: .3rem; font-family: "Space Grotesk", sans-serif; }
.comanda-bordao {
  text-align: center; margin-top: 1rem; padding-top: .7rem; border-top: 2px dashed var(--tinta);
  font-family: "Anton", sans-serif; font-size: 1.5rem; letter-spacing: .12em; color: var(--laranja);
}
.comanda-codigo { text-align: center; font-size: .72rem; letter-spacing: .1em; opacity: .7; margin-top: .5rem; }
.comanda-acoes { display: flex; gap: .5rem; margin-top: 1.2rem; }
.comanda-acoes button {
  flex: 1; min-height: 48px; cursor: pointer; border: 2px solid var(--tinta);
  background: var(--creme); color: var(--tinta); font-weight: 700; font: inherit; font-weight: 700;
}
.comanda-acoes .primaria { background: var(--tinta); color: var(--creme); }

/* =========================================================================
   MARQUEE DE TORNEIRAS — rodapé. Loop sem costura (conteúdo duplicado).
   ========================================================================= */
.marquee {
  overflow: hidden; white-space: nowrap;
  border-top: 3px solid var(--creme); border-bottom: 3px solid var(--creme);
  padding: .55rem 0;
}
.marquee__track {
  display: inline-flex; gap: 0; will-change: transform;
  animation: corre 26s linear infinite;
}
.marquee__track span {
  font-family: "Anton", sans-serif; font-size: 1.3rem; letter-spacing: .08em;
  text-transform: uppercase; padding: 0 1.1rem;
}
.marquee__track span::after { content: "·"; margin-left: 1.1rem; opacity: .55; }
@keyframes corre { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; white-space: normal; }
}

/* =========================================================================
   RODAPÉ / ONDE
   ========================================================================= */
.dados-onde { display: grid; gap: 1.6rem; }
/* mobile/tablet: mapa por último e em largura cheia (some do topo do grid) */
.dados-onde .mapa { order: 9; }
@media (min-width: 640px) {
  .dados-onde { grid-template-columns: 1fr 1fr; }
  .dados-onde .mapa { grid-column: 1 / -1; }
}
/* tela grande: Onde ganha colunas — mapa + endereço + contato + horários lado a lado */
@media (min-width: 1400px) {
  .dados-onde { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; align-items: start; }
  .dados-onde .mapa { order: 0; grid-column: auto; align-self: stretch; }
}
.dado-bloco h3 { font-family: "Anton", sans-serif; font-size: 1.1rem; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .5rem; }
.dado-bloco p { margin: .2rem 0; }
.dado-bloco a { text-decoration: underline; text-underline-offset: 3px; }
.horario-linha { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; border-bottom: 1px solid currentColor; font-variant-numeric: tabular-nums; }
.horario-linha:last-child { border-bottom: 0; }

.rodape-base {
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  align-items: center;
}
.rodape-base a { text-decoration: underline; text-underline-offset: 2px; }

/* mapa estático fingido (sem libs, sem foto): malha de ruas em SVG-CSS */
.mapa {
  aspect-ratio: 16 / 9; width: 100%;
  background:
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(242,233,216,.12) 22px 24px),
    repeating-linear-gradient(90deg, transparent 0 30px, rgba(242,233,216,.12) 30px 32px),
    var(--verde);
  position: relative; border: 2px solid var(--creme);
  display: flex; align-items: center; justify-content: center;
}
.mapa .pin {
  position: relative; color: var(--rosa);
  font-family: "Anton", sans-serif; text-align: center;
}
.mapa .pin .ponto { display: block; width: 16px; height: 16px; background: var(--rosa); border-radius: 50%; margin: 0 auto .4rem; box-shadow: 0 0 0 6px rgba(232,96,125,.3); }
.mapa .pin small { display: block; font-family: "Space Grotesk", sans-serif; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--creme); }

/* botão genérico de texto (links âncora dentro do conteúdo) */
.btn-texto {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 48px;
  padding: .65rem 1.1rem; cursor: pointer; text-decoration: none;
  font-family: "Anton", sans-serif; letter-spacing: .06em; text-transform: uppercase;
  background: var(--rosa); color: var(--tinta); border: 2px solid var(--tinta);
  transition: background-color .15s, color .15s;
}
.btn-texto:hover { background: var(--tinta); color: var(--creme); }
.btn-texto--ghost { background: transparent; }
.btn-texto--ghost:hover { background: var(--tinta); color: var(--creme); }

/* float WhatsApp — ícone verde, fora do caminho do rail/barra */
.zap {
  position: fixed; z-index: 50;
  right: 1rem; bottom: calc(56px + 1rem + env(safe-area-inset-bottom));
  width: 52px; height: 52px; border-radius: 50%;
  background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(12,12,12,.3); text-decoration: none;
}
@media (min-width: 920px) {
  .zap { right: calc(3.4rem + 1rem); bottom: 1rem; }
}
.zap svg { width: 28px; height: 28px; }

/* página de reserva (reservar.html) — stepper acessível */
.reserva-page { max-width: 40rem; margin: 0 auto; }
.stepper { display: flex; gap: .4rem; margin-bottom: 1.6rem; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; flex-wrap: wrap; }
.stepper .step { display: flex; align-items: center; gap: .4rem; opacity: .5; font-weight: 700; }
.stepper .step .b { font-family: "Anton", sans-serif; border: 2px solid currentColor; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; }
.stepper .step.ativo { opacity: 1; color: var(--rosa); }
.stepper .step.feito { opacity: 1; }

.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.cal-head button { width: 44px; height: 44px; border: 2px solid currentColor; background: transparent; color: inherit; cursor: pointer; font-size: 1.2rem; }
.cal-head button:disabled { opacity: .3; cursor: not-allowed; }
.cal-mes { font-family: "Anton", sans-serif; font-size: 1.3rem; letter-spacing: .04em; text-transform: uppercase; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; }
.cal-dow { text-align: center; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; opacity: .6; padding: .3rem 0; }
.cal-cel {
  aspect-ratio: 1; min-height: 44px; border: 2px solid currentColor; background: transparent; color: inherit;
  cursor: pointer; font-variant-numeric: tabular-nums; font-weight: 700; font-family: "Anton", sans-serif; font-size: 1.05rem;
}
.cal-cel.vazia { border: 0; cursor: default; }
.cal-cel:disabled { opacity: .25; cursor: not-allowed; text-decoration: line-through; border-style: dotted; }
.cal-cel[aria-pressed="true"] { background: var(--rosa); color: var(--tinta); border-color: var(--tinta); }
.cal-legenda { font-size: .72rem; opacity: .7; margin-top: .6rem; }

.minhas-reservas { margin-top: 2.5rem; }
.mr-item { border: 2px solid currentColor; padding: .9rem 1rem; margin-bottom: .7rem; display: flex; justify-content: space-between; gap: 1rem; align-items: center; flex-wrap: wrap; }
.mr-item .info { font-variant-numeric: tabular-nums; }
.mr-item .info b { font-family: "Anton", sans-serif; letter-spacing: .03em; }
.mr-item .cod { font-family: "Anton", sans-serif; letter-spacing: .06em; color: var(--tinta); }
.mr-cancelar { min-height: 40px; padding: .4rem .8rem; border: 2px solid currentColor; background: transparent; color: inherit; cursor: pointer; font-weight: 700; font-size: .8rem; }
.mr-vazio { opacity: .65; font-style: italic; }

/* =========================================================================
   ENHANCEMENT (aditivo) — matéria/prova de casa viva + pulso.
   Fotos entram só como DUOTONE da paleta (mancha de cor com grão), nunca
   como herói-scrim. Toda animação respeita prefers-reduced-motion.
   ========================================================================= */

/* ---------- duotone puro-CSS: sombra = --lo, luz = --hi (2 cores da paleta) ---------- */
/* ordem de pintura correta: bg = --hi (luz); img MULTIPLY sobre o bg; ::after LIGHTEN --lo (sombra).
   assim os dois blends ficam ACIMA da img e resultam num duotone verde→laranja da paleta. */
.duo { position: relative; overflow: hidden; --lo: var(--verde); --hi: var(--laranja); background: var(--hi); }
.duo > img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.14); mix-blend-mode: multiply; }
.duo::after  { content: ""; position: absolute; inset: 0; mix-blend-mode: lighten; background: var(--lo); pointer-events: none; }
.duo--vl { --lo: var(--verde); --hi: var(--laranja); }   /* verde→laranja */
.duo--tc { --lo: var(--tinta); --hi: var(--creme);  }    /* preto→creme (câmara escura) */
.duo--tr { --lo: var(--tinta); --hi: var(--rosa);   }    /* preto→rosa (acento) */
/* grão de impressão de jornal por cima do duotone */
.grao-noise {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .11; mix-blend-mode: overlay; z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- TIRA PAREDE DO BAR — a "matéria" que faltava (só-mais-um-bloco) ---------- */
.tira-parede { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.tp-cel { position: relative; aspect-ratio: 3 / 4; display: block; overflow: hidden; text-decoration: none; }
.tp-cel img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.tp-cel:hover img, .tp-cel:focus-visible img { transform: scale(1.05); }
.tp-cel:focus-visible { outline: 3px solid var(--rosa); outline-offset: -3px; }
.tp-palavra {
  position: absolute; left: .7rem; bottom: .55rem; z-index: 3;
  font-family: "Anton", sans-serif; text-transform: uppercase; color: var(--creme);
  font-size: clamp(1.05rem, 2.3vw, 2.1rem); letter-spacing: .02em; line-height: 1;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}
.tp-num { position: absolute; right: .6rem; top: .5rem; z-index: 3; font-family: "Space Grotesk"; font-variant-numeric: tabular-nums; font-weight: 700; font-size: .7rem; color: var(--creme); opacity: .8; letter-spacing: .1em; }
@media (max-width: 640px) {
  .tira-parede { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74%; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tira-parede::-webkit-scrollbar { display: none; }
  .tp-cel { scroll-snap-align: start; aspect-ratio: 4 / 5; }
}

/* ---------- foto na Torneira (banda que acompanha a lista, não substitui) ---------- */
.torneira-foto { position: relative; aspect-ratio: 16 / 7; margin: 0 0 1.8rem; }
@media (min-width: 920px) { .torneira-foto { aspect-ratio: 16 / 6; } }

/* ---------- ANIMAÇÃO 1 · o nome ASSENTA girando no load ---------- */
@keyframes sb-assenta {
  from { transform: rotate(1.5deg) scale(1.04); opacity: 0; }
  60%  { transform: rotate(-5.4deg) scale(1); opacity: 1; }
  to   { transform: rotate(-4deg) scale(1); opacity: 1; }
}
.cartaz-nome { animation: sb-assenta .72s cubic-bezier(.2,.8,.2,1) both; }

/* ---------- ANIMAÇÃO 2 · reveal por CORTE DE COR (não fade) ---------- */
.reveal { clip-path: inset(0 100% 0 0); transition: clip-path .6s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in { clip-path: inset(0 0 0 0); }

/* ---------- ANIMAÇÃO 3 · selo ABERTO/FECHADO no índice (desktop) ---------- */
.indice-selo { margin-top: auto; padding-top: 1rem; display: none; flex-direction: column; align-items: center; gap: .35rem; writing-mode: vertical-rl; }
.indice-selo .ponto { writing-mode: horizontal-tb; width: .5rem; height: .5rem; border-radius: 50%; background: var(--rosa); }
.indice-selo.aberto .ponto { animation: sb-pulso 1.8s ease-in-out infinite; }
.indice-selo .txt { font-family: "Space Grotesk"; font-weight: 700; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--rosa); }
.indice-selo.fechado .txt { color: var(--creme); opacity: .55; }
.indice-selo.fechado .ponto { background: var(--creme); opacity: .4; }
@keyframes sb-pulso { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.9); opacity: .35; } }
@media (min-width: 920px) { .indice { flex-direction: column; } .indice-selo { display: flex; } }

/* ---------- ticker do índice no MOBILE (o índice lateral some no ≤920px) ---------- */
.indice-mob {
  display: flex; gap: 0; position: sticky; top: 0; z-index: 30;
  background: var(--tinta); border-bottom: 1px solid rgba(242,233,216,.14);
  font-family: "Anton", sans-serif; font-size: .78rem; letter-spacing: .04em;
}
.indice-mob a { flex: 1; text-align: center; padding: .55rem .2rem; color: var(--creme); opacity: .5; text-decoration: none; text-transform: uppercase; border-right: 1px solid rgba(242,233,216,.12); }
.indice-mob a:last-child { border-right: 0; }
.indice-mob a.is-active { opacity: 1; color: var(--rosa); }
.indice-mob .n { font-variant-numeric: tabular-nums; }
@media (min-width: 920px) { .indice-mob { display: none; } }

/* ---------- comanda vira ARTEFATO: fibra de papel + leve "arrancado" ---------- */
.comanda {
  background-image: repeating-linear-gradient(0deg, rgba(12,12,12,.035) 0 1px, transparent 1px 3px);
  transform: rotate(-1.1deg);
  box-shadow: 0 10px 26px -12px rgba(12,12,12,.5), 0 2px 6px -3px rgba(12,12,12,.35);
}

@media (prefers-reduced-motion: reduce) {
  .cartaz-nome { animation: none; }
  .reveal { clip-path: none !important; transition: none; }
  .indice-selo.aberto .ponto { animation: none; }
  .comanda { transform: none; }
  .tp-cel:hover img, .tp-cel:focus-visible img { transform: none; }
}