@import url('fonts/fonts.css');

/* =========================================================================
   AÇOUGUE T-BONE — sistema
   Mundo: mercado de bairro bem feito. Claro, legível no sol, pedido acima
   de atmosfera. Convenção da categoria assumida sem ironia.
   ========================================================================= */

:root {
  /* superfícies */
  --paper:      #FBF9F6;
  --paper-2:    #F3EFE9;
  --surface:    #FFFFFF;
  --night:      #1C1714;
  --night-2:    #2A231E;

  /* tinta */
  --ink:        #191512;
  --ink-2:      #554C45;
  --ink-3:      #8B8079;
  --on-night:   #F4EFE8;
  --on-night-2: #B4A79C;

  /* linhas */
  --line:       #E6DFD5;
  --line-2:     #D4C9BC;
  --line-night: #3A312B;

  /* marca — vermelho da fachada, âmbar da placa do logo */
  --red:        #B21E27;
  --red-dark:   #8A141B;
  --red-wash:   #FBEFEF;
  --amber:      #C98A2B;
  --amber-wash: #FBF3E2;

  /* ação */
  --zap:        #1B9E52;
  --zap-dark:   #14803F;

  /* forma */
  --r-xs: 4px;
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 20px;

  /* medidas */
  --wrap: 1180px;
  --gut: clamp(1.125rem, 4vw, 2.5rem);
  --sec: clamp(3.5rem, 7.5vw, 6.5rem);

  /* sombra — discreta, só onde há elevação real */
  --sh-1: 0 1px 2px rgba(25,21,18,.06);
  --sh-2: 0 6px 24px -12px rgba(25,21,18,.28), 0 1px 3px rgba(25,21,18,.06);
  --sh-3: 0 24px 60px -24px rgba(25,21,18,.42);

  --head-h: 66px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-weight: 800; line-height: 1.06; letter-spacing: -.02em; font-stretch: 96%; }

/* ---------- foco ---------- */
:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
.skip {
  position: absolute; left: 12px; top: -100px; z-index: 200;
  background: var(--ink); color: #fff; padding: .7rem 1.1rem;
  border-radius: var(--r-sm); font-weight: 700; text-decoration: none;
  transition: top .15s;
}
.skip:focus { top: 12px; }

/* ---------- utilidades ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.sec { padding-block: var(--sec); }
.sec--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.band-2 { background: var(--paper-2); }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.eyebrow {
  font-size: .78rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--red);
  display: flex; align-items: center; gap: .6rem;
}
.eyebrow::after { content: ''; flex: 1; height: 1px; background: var(--line-2); max-width: 90px; }
.eyebrow--plain::after { display: none; }

.h2 { font-size: clamp(1.85rem, 3.6vw, 2.85rem); }
.h3 { font-size: clamp(1.15rem, 1.6vw, 1.35rem); letter-spacing: -.015em; }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--ink-2); line-height: 1.62; max-width: 62ch; }
.muted { color: var(--ink-2); }
.small { font-size: .9rem; }

.sec-head { display: grid; gap: .9rem; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); max-width: 68ch; }

/* ---------- botões ---------- */
.btn {
  --bg: var(--ink); --fg: #fff; --bd: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  background: var(--bg); color: var(--fg); border: 1.5px solid var(--bd);
  padding: .82rem 1.35rem; border-radius: var(--r-sm);
  font-weight: 700; font-size: .97rem; letter-spacing: -.005em;
  text-decoration: none; cursor: pointer;
  transition: transform .12s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--sh-2); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn svg { flex: none; }

.btn--zap  { --bg: var(--zap); --bd: var(--zap); }
.btn--zap:hover { --bg: var(--zap-dark); --bd: var(--zap-dark); }
.btn--red  { --bg: var(--red); --bd: var(--red); }
.btn--red:hover { --bg: var(--red-dark); --bd: var(--red-dark); }
.btn--ghost { --bg: transparent; --fg: var(--ink); --bd: var(--line-2); }
.btn--ghost:hover { --bd: var(--ink); }
.btn--on-night { --bg: transparent; --fg: var(--on-night); --bd: #55483F; }
.btn--on-night:hover { --bd: var(--on-night); }
.btn--sm { padding: .55rem .95rem; font-size: .88rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* =========================================================================
   CABEÇALHO
   ========================================================================= */
.head {
  position: sticky; top: 0; z-index: 90;
  background: rgba(251,249,246,.94);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.head__in {
  height: var(--head-h);
  display: flex; align-items: center; gap: clamp(.75rem, 2vw, 1.75rem);
}
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex: none; }
.brand img { height: 40px; width: auto; }
.brand__txt { display: none; }

.nav { display: none; gap: clamp(.6rem, 1.6vw, 1.35rem); margin-inline-start: auto; }
.nav a {
  text-decoration: none; font-weight: 600; font-size: .95rem; color: var(--ink-2);
  padding: .45rem .1rem; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--red); }

.head__act { display: flex; align-items: center; gap: .6rem; margin-inline-start: auto; }
.nav + .head__act { margin-inline-start: 0; }

.status {
  display: none; align-items: center; gap: .45rem;
  font-size: .82rem; font-weight: 650; color: var(--ink-2);
  padding: .35rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
}
.status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: none; }
.status.is-open   .status__dot { background: var(--zap); box-shadow: 0 0 0 3px rgba(27,158,82,.16); }
.status.is-closed .status__dot { background: var(--ink-3); }

.burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border: 1.5px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--surface); cursor: pointer;
}
.burger span { display: block; width: 18px; height: 2px; background: var(--ink); position: relative; }
.burger span::before, .burger span::after { content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: var(--ink); }
.burger span::before { top: -6px; } .burger span::after { top: 6px; }

.mnav { display: none; border-top: 1px solid var(--line); background: var(--surface); }
.mnav.is-open { display: block; }
.mnav ul { display: grid; }
.mnav a {
  display: block; padding: .95rem .25rem; text-decoration: none; font-weight: 650;
  border-bottom: 1px solid var(--line);
}
.mnav li:last-child a { border-bottom: 0; }

@media (min-width: 900px) {
  .nav { display: flex; }
  .status { display: inline-flex; }
  .burger { display: none; }
  .brand__txt { display: block; }
}

/* =========================================================================
   HERÓI
   ========================================================================= */
.hero { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 6vw, 5rem); }
.hero__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 940px) { .hero__grid { grid-template-columns: 1.05fr .95fr; } }

.hero h1 {
  font-size: clamp(2.5rem, 6.2vw, 4.35rem);
  line-height: .98; margin-block: 1.1rem .95rem; font-stretch: 92%;
}
.hero h1 em { font-style: normal; color: var(--red); }
.hero .lead { max-width: 46ch; }
.hero .btn-row { margin-top: 1.7rem; }

.trust {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 1.4rem;
  margin-top: 1.9rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
  font-size: .92rem; color: var(--ink-2);
}
.trust b { color: var(--ink); font-weight: 750; }
.trust__i { display: flex; align-items: center; gap: .45rem; }
.stars { color: var(--amber); letter-spacing: .06em; font-size: .95rem; }

.hero__fig { position: relative; }
.hero__fig img {
  width: 100%; border-radius: var(--r-lg); box-shadow: var(--sh-3);
  aspect-ratio: 4 / 5; object-fit: cover;
}
.hero__tag {
  position: absolute; left: -6px; bottom: 22px;
  background: var(--surface); border: 1px solid var(--line);
  padding: .8rem 1.05rem; border-radius: var(--r-sm); box-shadow: var(--sh-2);
  max-width: 15rem;
}
.hero__tag b { display: block; font-size: .95rem; }
.hero__tag span { font-size: .82rem; color: var(--ink-2); }
@media (min-width: 940px) { .hero__tag { left: -28px; } }

/* =========================================================================
   COMO FUNCIONA
   ========================================================================= */
.steps { display: grid; gap: 1.5rem; counter-reset: s; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); } }
.step { display: grid; gap: .5rem; padding-top: 1.1rem; border-top: 3px solid var(--ink); }
.step__n {
  counter-increment: s;
  font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--red);
}
.step__n::before { content: '0' counter(s) ' · '; }
.step p { color: var(--ink-2); font-size: .98rem; }

/* =========================================================================
   CATÁLOGO
   ========================================================================= */
.catrail {
  position: sticky; top: var(--head-h); z-index: 60;
  background: rgba(251,249,246,.95); backdrop-filter: blur(8px);
  border-block: 1px solid var(--line);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.catrail ul {
  display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none;
  /* o padding da direita e ignorado no fim de um container com scroll-x:
     o respiro final vem do ::after abaixo */
  padding: .7rem 0 .7rem var(--gut);
  max-width: var(--wrap); margin-inline: auto;
  overscroll-behavior-x: contain;
}
.catrail ul::-webkit-scrollbar { display: none; }
/* sombra na borda direita: avisa que ainda tem categoria para o lado */
.catrail { position: sticky; }
.catrail::after {
  content: ""; position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: 2.5rem;
  background: linear-gradient(to right, rgba(251,249,246,0), rgba(251,249,246,.95));
  pointer-events: none;
}
/* sem isto os itens encolhem e o texto longo ("Natal e Ano Novo") corta */
.catrail li { flex: none; }
.catrail ul::after { content: ""; flex: none; inline-size: max(var(--gut), 1.5rem); }
.catrail a {
  display: block; white-space: nowrap; text-decoration: none;
  font-size: .9rem; font-weight: 650; color: var(--ink-2);
  padding: .42rem .85rem; border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--surface); transition: all .15s;
}
.catrail a:hover { color: var(--ink); border-color: var(--ink); }
.catrail a.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
/* 13 categorias: no desktop o pill fica mais justo para caber tudo numa linha.
   Medido no Edge: a partir de 1240px cabe; abaixo disso rola, com a sombra avisando. */
@media (min-width: 1100px) {
  .catrail ul { gap: .4rem; }
  .catrail a { padding-inline: .7rem; }
}
@media (min-width: 1240px) { .catrail::after, .catrail ul::after { display: none; } }

.cat { scroll-margin-top: calc(var(--head-h) + 62px); }
.cat + .cat { margin-top: clamp(3rem, 6vw, 4.5rem); }
.cat__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; padding-bottom: .9rem; border-bottom: 2px solid var(--ink); }
.cat__head p { color: var(--ink-2); font-size: .95rem; max-width: 46ch; }

.cuts { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.cut {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; transition: border-color .18s, box-shadow .18s, transform .18s;
}
.cut:hover { border-color: var(--line-2); box-shadow: var(--sh-2); }
.cut.is-in { border-color: var(--zap); box-shadow: 0 0 0 1px var(--zap) inset; }
.cut__img { aspect-ratio: 16 / 11; object-fit: cover; width: 100%; background: var(--paper-2); }
.cut__body { padding: .95rem 1rem 1rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.cut__name { font-size: 1.03rem; font-weight: 750; letter-spacing: -.015em; }
.cut__note { font-size: .87rem; color: var(--ink-2); flex: 1; }
.cut__add {
  margin-top: .85rem; width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  border: 1.5px solid var(--line-2); background: var(--paper); color: var(--ink);
  padding: .58rem .9rem; border-radius: var(--r-sm); font-weight: 700; font-size: .9rem; cursor: pointer;
  transition: all .15s;
}
.cut__add:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.cut.is-in .cut__add { border-color: var(--zap); color: var(--zap-dark); background: #F1FAF4; }

/* painel de preparo dentro do card */
.cut__panel { display: none; margin-top: .8rem; padding-top: .85rem; border-top: 1px dashed var(--line-2); gap: .7rem; }
.cut.is-open .cut__panel { display: grid; }
.cut.is-open .cut__add { display: none; }
.field { display: grid; gap: .35rem; }
.field > span { font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.field__hint { font-size: .78rem; line-height: 1.35; color: var(--ink-3); font-weight: 400; text-transform: none; letter-spacing: 0; margin: -.1rem 0 .15rem; }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip {
  border: 1px solid var(--line-2); background: var(--paper); border-radius: 999px;
  padding: .3rem .7rem; font-size: .82rem; font-weight: 600; cursor: pointer; transition: all .13s;
}
.chip:hover { border-color: var(--ink-3); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
/* divisão que deixaria pacote abaixo de 100 g */
.chip:disabled { opacity: .38; cursor: not-allowed; border-color: var(--line-2); text-decoration: line-through; }
/* os preparos mudam conforme o tipo; o invólucro não ocupa linha própria no painel */
.cut__preps { display: contents; }
/* .btn e .sheet__foot têm display próprio, que venceria o atributo hidden */
.btn[hidden], .sheet__foot[hidden] { display: none; }
.cut__confirm { display: flex; gap: .5rem; }
.cut__confirm .btn { flex: 1; }

/* peso escrito pelo cliente, com o eco do que o site entendeu */
.field > label { font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.campo--qtd { font-size: 1.05rem; font-weight: 650; padding: .6rem .75rem; } /* 16px+: o iPhone não dá zoom */
.campo--qtd[aria-invalid="true"] { border-color: var(--red); }
.field__eco { margin: 0; min-height: 1.1em; color: var(--ink-2); font-weight: 600; }
.field__eco.is-erro { color: var(--red); }

/* versões do mesmo produto: grill, sem gordura, temperado... */
.cut__var { font-size: .8rem; font-weight: 650; color: var(--ink-2); }
.cat__head p a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* lista compacta: o resto do balcão, sem foto */
.rows__tit {
  margin: clamp(1.6rem, 3vw, 2.2rem) 0 .3rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3);
}
.rows {
  list-style: none; padding: 0; margin: 0; display: grid; align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0 clamp(1.5rem, 4vw, 3rem);
}
.cut--row { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; overflow: visible; }
.cut--row:hover { box-shadow: none; border-color: var(--line-2); }
.cut--row .cut__body { padding: .65rem 0; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .1rem .9rem; }
.cut--row .cut__tit { display: grid; gap: .1rem; }
.cut--row .cut__name { font-size: .98rem; font-weight: 700; }
.cut--row .cut__add { margin: 0; width: auto; padding: .38rem .8rem; font-size: .84rem; }
.cut--row .cut__panel { grid-column: 1 / -1; }
.cut--row.is-open { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 0 .85rem; margin-block: .3rem; }
.rows__mais { margin-top: 1.2rem; }


/* =========================================================================
   TABELA DE PROTEINAS PARA PET
   Lista de preco em duas colunas, com guia pontilhado ate o valor.
   ========================================================================= */
.petmenu {
  max-width: var(--wrap); margin: clamp(2rem,4vw,3rem) auto 0; padding: 0 var(--gut);
}
.petmenu__head { margin-bottom: clamp(1rem,2vw,1.4rem); }
.petmenu__list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0 clamp(1.5rem,4vw,3rem); list-style: none; padding: 0; margin: 0;
}
.petmenu__list li {
  display: flex; align-items: baseline; gap: .5rem;
  padding: .52rem 0; border-bottom: 1px dotted var(--line-2);
}
.petmenu__list li > span { flex: 1; font-size: .96rem; }
.petmenu__un {
  display: block; font-style: normal; font-size: .78rem; color: var(--ink-3); margin-top: .1rem;
}
.petmenu__list li i { font-style: normal; color: var(--ink-3); font-size: .85em; }
.petmenu__list b {
  font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .96rem;
}

.aviso {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(1.4rem, 3vw, 2rem); display: grid; gap: 1rem; max-width: 52rem;
}

/* =========================================================================
   KITS
   ========================================================================= */
.kits { display: grid; gap: 1.25rem; }
@media (min-width: 820px) { .kits { grid-template-columns: repeat(3, 1fr); } }
.kit {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.5rem 1.4rem 1.4rem;
}
.kit__serve {
  align-self: flex-start; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  background: var(--amber-wash); color: #7A5312; padding: .3rem .65rem; border-radius: 999px; margin-bottom: .9rem;
}
.kit h3 { font-size: 1.35rem; margin-bottom: .9rem; }
.kit ul { display: grid; gap: .5rem; margin-bottom: 1.3rem; flex: 1; }
.kit li { display: grid; grid-template-columns: 4.6rem 1fr; gap: .6rem; font-size: .93rem; align-items: baseline; }
.kit li b { font-variant-numeric: tabular-nums; font-weight: 750; color: var(--red); font-size: .87rem; }
.kit li span { color: var(--ink-2); }

/* =========================================================================
   BUFFET / GUARNIÇÕES
   ========================================================================= */
.split { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; align-items: start; } }

.buf { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.buf img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.buf__b { padding: 1.4rem; display: grid; gap: .6rem; }
.buf h3 { font-size: 1.3rem; }
.buf p { color: var(--ink-2); font-size: .95rem; }
.buf .btn { margin-top: .5rem; justify-self: start; }

.garn { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.garn li {
  border: 1px solid var(--line-2); background: var(--surface);
  padding: .4rem .8rem; border-radius: 999px; font-size: .89rem; font-weight: 600;
}

/* =========================================================================
   PETS
   ========================================================================= */
.pets__grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }
@media (min-width: 900px) { .pets__grid { grid-template-columns: .9fr 1.1fr; } }
.pets img { border-radius: var(--r); width: 100%; aspect-ratio: 5/4; object-fit: cover; box-shadow: var(--sh-2); }
.petlist { display: grid; gap: .55rem; margin-block: 1.35rem; }
@media (min-width: 560px) { .petlist { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; } }
.petlist li { display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: .97rem; border-bottom: 1px solid var(--line); padding-bottom: .55rem; }
.petlist svg { color: var(--zap); flex: none; }

/* =========================================================================
   CULTURAL — a banda escura
   ========================================================================= */
.cult { background: var(--night); color: var(--on-night); }
.cult .eyebrow { color: var(--amber); }
.cult .eyebrow::after { background: var(--line-night); }
.cult h2 { color: #fff; }
.cult .lead { color: var(--on-night-2); }

.cult__top { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 900px) { .cult__top { grid-template-columns: 1.1fr .9fr; } }
.cult__top img { border-radius: var(--r); aspect-ratio: 3/2; object-fit: cover; width: 100%; }

.quote { border-left: 3px solid var(--amber); padding-left: clamp(1.1rem, 2.5vw, 1.8rem); margin-block: clamp(2rem, 4vw, 3rem); }
.quote p {
  font-family: 'Petrona', Georgia, serif; font-style: italic;
  font-size: clamp(1.25rem, 2.6vw, 1.85rem); line-height: 1.34; color: #fff; letter-spacing: -.01em;
  max-width: 30ch;
}
.quote cite { display: block; margin-top: .9rem; font-style: normal; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-night-2); font-weight: 650; }

.figs { display: grid; gap: 1px; background: var(--line-night); border: 1px solid var(--line-night); border-radius: var(--r); overflow: hidden; }
@media (min-width: 640px) { .figs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .figs { grid-template-columns: repeat(4, 1fr); } }
.fig { background: var(--night-2); padding: 1.4rem 1.3rem; }
.fig b { display: block; font-size: clamp(1.7rem, 3.4vw, 2.35rem); font-weight: 800; letter-spacing: -.03em; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; }
.fig span { display: block; margin-top: .5rem; font-size: .89rem; color: var(--on-night-2); line-height: 1.45; }

.tl { display: grid; gap: 0; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.tl li { display: grid; grid-template-columns: 4.5rem 1fr; gap: clamp(1rem, 3vw, 2rem); padding: 1.15rem 0; border-top: 1px solid var(--line-night); }
.tl li:last-child { border-bottom: 1px solid var(--line-night); }
.tl b { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--amber); font-size: 1.02rem; letter-spacing: -.01em; }
.tl span { color: var(--on-night-2); font-size: .97rem; }
.tl strong { color: #fff; font-weight: 650; }

/* =========================================================================
   AVALIAÇÕES
   ========================================================================= */
.rev__score { display: flex; flex-wrap: wrap; align-items: baseline; gap: .7rem 1.1rem; margin-bottom: 2rem; }
.rev__num { font-size: clamp(2.8rem, 6vw, 4rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.revs { display: grid; gap: 1rem; }
@media (min-width: 700px) { .revs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .revs { grid-template-columns: repeat(3, 1fr); } }
.rev {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.3rem 1.35rem; display: grid; gap: .75rem; align-content: start;
}
.rev p { font-size: .97rem; color: var(--ink-2); line-height: 1.58; }
.rev footer { font-size: .8rem; color: var(--ink-3); letter-spacing: .04em; }

/* =========================================================================
   VISITE
   ========================================================================= */
.visit__grid { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); }
@media (min-width: 880px) { .visit__grid { grid-template-columns: 1fr 1fr; } }
.addr { font-size: 1.15rem; line-height: 1.5; font-weight: 600; }
.hours { margin-top: 1.6rem; border-top: 1px solid var(--line); }
.hours li { display: flex; justify-content: space-between; gap: 1rem; padding: .68rem 0; border-bottom: 1px solid var(--line); font-size: .96rem; }
.hours li.is-today { font-weight: 750; }
.hours li.is-today span:first-child::after {
  content: 'hoje'; margin-left: .55rem; font-size: .68rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--red);
  background: var(--red-wash); padding: .16rem .45rem; border-radius: 999px; vertical-align: 2px;
}
.hours span:last-child { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.hours li.is-today span:last-child { color: var(--ink); }
.facts { display: grid; border-top: 1px solid var(--line); align-content: start; }
.fact { display: grid; gap: .2rem; padding: .95rem 0; border-bottom: 1px solid var(--line); }
.fact b { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.fact span { font-size: .97rem; color: var(--ink-2); }

/* =========================================================================
   RODAPÉ
   ========================================================================= */
.foot { background: var(--night); color: var(--on-night-2); padding-block: clamp(2.5rem, 5vw, 4rem) 8rem; }
.foot__grid { display: grid; gap: 2rem; }
@media (min-width: 780px) { .foot__grid { grid-template-columns: 1.2fr 1fr 1fr; } .foot { padding-bottom: clamp(2.5rem, 5vw, 4rem); } }
.foot img { height: 46px; width: auto; background: #fff; padding: .35rem .5rem; border-radius: var(--r-xs); }
.foot h4 { color: #fff; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .9rem; font-weight: 700; }
.foot a { text-decoration: none; }
.foot a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.foot li { padding: .28rem 0; font-size: .95rem; }
.foot__legal { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line-night); font-size: .82rem; line-height: 1.6; display: grid; gap: .4rem; }
.social { display: flex; gap: .55rem; margin-top: 1.1rem; }
.social a {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--line-night); border-radius: var(--r-sm); transition: all .15s;
}
.social a:hover { background: #fff; color: var(--night); border-color: #fff; }

/* =========================================================================
   COMANDA — barra fixa + gaveta
   ========================================================================= */
.bar {
  position: fixed; inset: auto 0 0 0; z-index: 95;
  background: var(--surface); border-top: 1px solid var(--line-2);
  box-shadow: 0 -8px 30px -14px rgba(25,21,18,.3);
  padding: .7rem var(--gut) calc(.7rem + env(safe-area-inset-bottom));
  transform: translateY(105%); transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.bar.is-up { transform: none; }
.bar__in { max-width: var(--wrap); margin-inline: auto; display: flex; align-items: center; gap: .8rem; }
.bar__sum { flex: 1; min-width: 0; }
.bar__sum b { display: block; font-size: .98rem; font-weight: 750; }
.bar__sum span { display: block; font-size: .82rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sheet { border: 0; padding: 0; background: transparent; max-width: 100%; max-height: 100%; width: 100%; height: 100%; }
.sheet::backdrop { background: rgba(25,21,18,.55); backdrop-filter: blur(3px); }
.sheet__box {
  position: absolute; inset: auto 0 0 0; background: var(--paper);
  border-radius: var(--r-lg) var(--r-lg) 0 0; max-height: 88vh; display: flex; flex-direction: column;
}
@media (min-width: 720px) {
  .sheet__box { inset: 0 0 0 auto; width: min(440px, 100%); border-radius: 0; max-height: 100%; }
}
.sheet__head { display: flex; align-items: center; gap: 1rem; padding: 1.15rem var(--gut); border-bottom: 1px solid var(--line); }
.sheet__head h2 { font-size: 1.2rem; flex: 1; }
.sheet__close { width: 38px; height: 38px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; display: grid; place-items: center; }
.sheet__body { overflow-y: auto; padding: 1rem var(--gut); flex: 1; }
.sheet__foot { padding: 1rem var(--gut) calc(1rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); display: grid; gap: .7rem; }

.line { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line); align-items: center; }
.line b { font-size: 1rem; font-weight: 700; }
.line span { display: block; font-size: .85rem; color: var(--ink-2); }
.line__ctrl { display: flex; align-items: center; gap: .3rem; }
.line__ctrl button {
  width: 34px; height: 34px; border: 1px solid var(--line-2); background: var(--surface);
  border-radius: var(--r-xs); cursor: pointer; font-weight: 700; display: grid; place-items: center;
}
.line__ctrl button:hover { border-color: var(--ink); }
.line__qt { min-width: 3.6rem; text-align: center; font-weight: 750; font-variant-numeric: tabular-nums; font-size: .92rem; }
.line__in {
  width: 6.4rem; border: 1px solid var(--line-2); border-radius: var(--r-xs); background: var(--surface);
  padding: .45rem .5rem; text-align: center; font: inherit; font-size: 1rem; font-weight: 750;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.line__in:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.line__rm { border: 0; background: none; color: var(--ink-3); font-size: .82rem; cursor: pointer; text-decoration: underline; padding: 0; justify-self: start; }
.line__rm:hover { color: var(--red); }

.line__pac { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; margin-top: .1rem; }
.line__pac > span { font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.line__pac .chips { gap: .25rem; }
.line__pac .chip { padding: .15rem .5rem; font-size: .78rem; min-width: 1.9rem; }
.line__calc { font-size: .8rem; color: var(--ink-2); font-weight: 600; }
.field__calc { font-size: .82rem; color: var(--ink-2); font-weight: 650; min-height: 1.1em; }

.campo {
  border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: .7rem .8rem;
  font: inherit; font-size: .95rem; background: var(--surface); color: var(--ink);
  width: 100%; resize: vertical;
}
.campo:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

.hist { margin-top: 1.6rem; border-top: 1px solid var(--line); padding-top: 1.1rem; }
.hist__tit { font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.hist__nota { font-size: .8rem; color: var(--ink-3); margin: .25rem 0 .7rem; }
.hist__l {
  display: flex; align-items: center; gap: .8rem; justify-content: space-between;
  padding: .6rem 0; border-bottom: 1px solid var(--line);
}
.hist__l b { font-size: .92rem; font-variant-numeric: tabular-nums; }
.hist__l span { display: block; font-size: .82rem; color: var(--ink-2); line-height: 1.35; }
.hist__l .btn { flex: none; }

.sheet__empty { text-align: center; padding: 3rem 1rem; color: var(--ink-2); }
.sheet__empty svg { margin: 0 auto 1rem; color: var(--line-2); }

.obs { display: grid; gap: .35rem; margin-top: 1.2rem; }
.obs label { font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.obs textarea {
  border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: .7rem .8rem;
  font-size: .95rem; resize: vertical; min-height: 74px; background: var(--surface); width: 100%;
}

/* toast */
.toast {
  position: fixed; left: 50%; bottom: 92px; transform: translate(-50%, 12px);
  background: var(--ink); color: #fff; padding: .7rem 1.1rem; border-radius: 999px;
  font-size: .9rem; font-weight: 650; z-index: 120; opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; box-shadow: var(--sh-3);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* revelação discreta */
.rise { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.rise.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rise { opacity: 1; transform: none; } }

/* sem JS: some o que não funciona, o catálogo e os botões de WhatsApp ficam */
.no-js .cut__add,
.no-js .bar,
.no-js .catrail a.is-active { display: none; }
.no-js .status { display: none !important; }

/* impressão */
@media print {
  .head, .bar, .sheet, .catrail, .btn { display: none !important; }
  body { background: #fff; }
}