/* Dom Bigode · gravura de catálogo antigo. Celular primeiro.
   O motor (scrollcraft.css) é o mecanismo; aqui só tokens e a marcação da página. */
:root {
  --sc-canvas: #1A120D;
  --sc-surface: #2A1B13;
  --sc-ink: #EDE3D0;
  --sc-ink-soft: #BFAE93;
  --sc-accent: #C9A54E;
  --sc-accent-ink: #1A120D;
  --sc-font-display: "Fraunces", Georgia, serif;
  --sc-font-text: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sc-shadow-color: 22 45% 4%;
  --db-oxblood: #3A1812;
  --db-paper: #EDE3D0;
  --db-paper-ink: #22160F;
  --db-bar: 56px;
}

body { line-height: 1.6; letter-spacing: 0; }
h1, h2, h3 { font-family: var(--sc-font-display); font-weight: 700; margin: 0; text-wrap: balance; }

/* ------------------------------------------------------------ barra --- */
.db-bar {
  position: fixed; inset: 0 0 auto; z-index: 70;
  height: calc(var(--db-bar) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--sc-gutter) 0;
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, color-mix(in oklab, var(--sc-canvas) 94%, transparent) 55%, transparent);
}
.db-mark { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 700 1.15rem/1 var(--sc-font-display); }
.db-mark svg { width: 34px; height: 16px; color: var(--sc-accent); }
.db-index-btn {
  min-height: 44px; padding: 0 16px; border-radius: 999px;
  background: transparent; border: 1px solid color-mix(in oklab, var(--sc-accent) 70%, transparent);
  color: var(--sc-ink); font-weight: 500; font-size: .95rem; cursor: pointer;
  transition: background-color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.db-index-btn[aria-expanded="true"] { background: var(--sc-accent); color: var(--sc-accent-ink); }
.db-index-btn:active { transform: scale(.97); }

.db-index {
  position: fixed; z-index: 65; left: 0; right: 0;
  top: calc(var(--db-bar) + env(safe-area-inset-top));
  background: var(--sc-surface);
  border-bottom: 1px solid var(--sc-hairline-strong);
  box-shadow: var(--sc-e3);
  padding: 8px var(--sc-gutter) 16px;
}
.db-index ol { list-style: none; margin: 0 auto; padding: 0; max-width: 34rem; }
.db-index a {
  display: flex; justify-content: space-between; gap: 16px;
  min-height: 52px; align-items: center;
  border-bottom: 1px solid var(--sc-hairline);
  text-decoration: none; font-size: 1.05rem;
}
.db-index a span:last-child { font-family: var(--sc-font-display); color: var(--sc-accent); font-variant-numeric: tabular-nums; }
.db-index__more a { color: var(--sc-ink-soft); border-bottom: 0; }

/* ---------------------------------------------------------- botões --- */
.db-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 26px; border-radius: 999px;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-weight: 600; font-size: 1.02rem; text-decoration: none; white-space: nowrap;
  box-shadow: var(--sc-e2), inset 0 1px 0 rgba(255, 240, 200, .45);
  transition: transform 120ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out);
}
.db-btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .db-btn:hover { background: #D8B661; } }
.db-btn--wide { width: 100%; }
.db-link { color: var(--sc-accent); font-weight: 500; text-underline-offset: .25em; }

/* ------------------------------------------------- 1 · herói em camadas --- */
.db-hero__stage { background: var(--sc-canvas); }
.db-plane { position: absolute; will-change: transform; }
.db-wall {
  inset: 0; width: 100%; height: 100%; max-width: none;
  transform-origin: 50% 72%;
  transform: scale(calc(1.07 - var(--sc-p, 0) * .05)) translate3d(0, calc(var(--sc-p, 0) * -1.2%), 0);
}
.db-glow { opacity: calc(.75 + var(--sc-p, 0) * .25); }
.db-chair-wrap {
  left: 50%; bottom: 3.5svh;
  height: min(54svh, 132vw); aspect-ratio: 400 / 560;
  transform-origin: 50% 100%;
  transform: translate3d(-50%, calc((1 - var(--sc-p, 0)) * 2.5svh), 0) scale(calc(.9 + var(--sc-p, 0) * .1));
}
.db-chair { width: 100%; height: 100%; max-width: none; filter: drop-shadow(0 18px 24px rgba(8, 4, 2, .55)); }
.db-counter {
  left: 0; right: 0; bottom: 0; width: 100%; height: 31svh; max-width: none;
  transform: translate3d(0, calc(var(--sc-p, 0) * 118%), 0);
  filter: drop-shadow(0 -10px 18px rgba(8, 4, 2, .6));
}
.db-copy {
  position: absolute; z-index: 20; left: var(--sc-gutter); right: var(--sc-gutter);
  top: calc(var(--db-bar) + env(safe-area-inset-top) + 2.2svh);
  display: grid; justify-items: start; gap: 12px;
}
.db-h1 {
  font-size: clamp(2.5rem, 11.4vw, 5.6rem); font-weight: 800;
  line-height: .98; letter-spacing: -.02em;
  font-variation-settings: "opsz" 144;
  text-shadow: 0 2px 14px rgba(10, 6, 3, .7);
}
.db-h1 em { display: block; font-style: italic; font-weight: 700; color: #E2C77E; }
.db-lede { margin: 0; max-width: 30ch; color: var(--sc-ink); font-size: 1.04rem; line-height: 1.5; text-shadow: 0 1px 10px rgba(10, 6, 3, .9); }
.db-copy .db-btn { margin-top: 4px; }
.db-label {
  position: absolute; z-index: 20; left: var(--sc-gutter); right: var(--sc-gutter); bottom: 4svh;
  margin: 0; max-width: 34ch; font-size: .95rem; line-height: 1.5; color: var(--sc-ink);
  padding: 12px 14px; background: color-mix(in oklab, var(--sc-canvas) 82%, transparent);
  border-left: 1px solid var(--sc-accent);
}
.db-label strong { font-family: var(--sc-font-display); font-weight: 700; color: #E2C77E; }

@media (max-height: 700px) {
  .db-h1 { font-size: clamp(2.1rem, 9.6vw, 4rem); }
  .db-lede { font-size: .95rem; }
  .db-chair-wrap { height: 50svh; }
}

/* ------------------------------------------------- 2 · o catálogo (pan) --- */
.db-cat__stage { display: flex; align-items: center; background: transparent; }
.db-rail { align-items: center; gap: 0; padding-inline: 0; height: 100%; }
.db-rail > * { flex: 0 0 auto; }
.db-rail__lead, .db-rail__end {
  width: min(78vw, 22rem); margin-left: var(--sc-gutter); margin-right: 6vw;
  padding-top: var(--db-bar);
}
.db-rail__end { margin-right: var(--sc-gutter); color: var(--sc-ink-soft); font-size: 1.05rem; }
.db-rail__lead p { color: var(--sc-ink-soft); max-width: 30ch; margin: 14px 0 0; }
.db-h2 { font-size: clamp(2.2rem, 9.5vw, 4rem); line-height: 1; letter-spacing: -.015em; font-variation-settings: "opsz" 144; }

.db-obj {
  width: min(76vw, 21rem); margin-right: 8vw;
  padding-top: var(--db-bar);
  display: grid; justify-items: start; gap: 8px;
}
.db-obj__art { width: min(52vw, 15rem); height: auto; aspect-ratio: 1; margin-bottom: 10px; filter: drop-shadow(0 14px 20px rgba(8, 4, 2, .55)); }
.db-obj h3 { font-size: clamp(1.9rem, 8vw, 2.6rem); line-height: 1.02; }
.db-obj__fact { margin: 0; color: var(--sc-ink-soft); max-width: 28ch; }
.db-obj__meta {
  margin: 4px 0 6px; width: 100%; display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 10px; border-top: 1px solid var(--sc-hairline-strong); color: var(--sc-ink-soft); font-size: .95rem;
}
.db-price { font: 700 1.6rem/1 var(--sc-font-display); color: #E2C77E; font-variant-numeric: tabular-nums; }
.db-add {
  min-height: 48px; padding: 0 20px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--sc-accent); background: transparent; color: var(--sc-ink);
  font-weight: 600; font-size: .98rem;
  transition: background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.db-add:active { transform: scale(.97); }
.db-add[aria-pressed="true"] { background: var(--sc-accent); color: var(--sc-accent-ink); }
.db-add[aria-pressed="true"]::before { content: "✓ "; }

@media (prefers-reduced-motion: no-preference) {
  .db-obj {
    --s: clamp(0, calc(var(--sc-p, 0) * 7 - var(--i) + 1.6), 1);
    opacity: clamp(.55, var(--s), 1);
    transform: translate3d(0, calc((1 - var(--s)) * 16px), 0);
  }
}

/* ------------------------------------------------------- 3 · vozes --- */
.db-voz { background: var(--sc-canvas); padding-block: clamp(4rem, 12vw, 8rem); }
.db-voz__t { display: block; text-align: center; margin: 0 0 2.5rem; color: var(--sc-accent); font-family: var(--sc-font-text); }
.db-voz__list { display: grid; gap: 2.6rem; }
.db-q { margin: 0; }
.db-q p { margin: 0 0 .6rem; font: 500 1.35rem/1.35 var(--sc-font-display); max-width: 24ch; }
.db-q--big p { font-size: clamp(1.8rem, 7.6vw, 3rem); line-height: 1.15; max-width: 18ch; }
.db-q--trail { justify-self: end; text-align: right; }
.db-q--trail p { margin-left: auto; }
.db-q footer { color: var(--sc-ink-soft); font-size: .95rem; }

/* ------------------------------------------------------- 4 · a casa --- */
.db-casa { background: var(--sc-canvas); padding: 1rem 0 0; }
.db-casa .db-h2 { margin-bottom: .4rem; }
.db-casa--plate { padding: 1.6rem 0 1.4rem; }
.db-plate { margin: 0; max-width: 46rem; }
.db-plate--l, .db-plate--r { max-width: 30rem; }
.db-plate--r { margin-left: auto; }
.db-plate svg { width: 100%; height: auto; border: 1px solid var(--sc-hairline-strong); box-shadow: var(--sc-e2); }
.db-plate figcaption { margin-top: 12px; color: var(--sc-ink-soft); font-size: .95rem; max-width: 40ch; }
.db-plate figcaption strong { color: var(--sc-ink); font-family: var(--sc-font-display); }

/* ------------------------------------------------------ 5 · visita --- */
.db-visita { background: var(--sc-surface); }
.db-visita__grid { display: grid; gap: 2rem; }
.db-hours { margin: 1.4rem 0; }
.db-hours div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--sc-hairline-strong); }
.db-hours dd { margin: 0; font: 700 1.15rem var(--sc-font-display); color: #E2C77E; }
.db-hours div:last-child dd { color: var(--sc-ink-soft); font-weight: 500; }
.db-visita address { font-style: normal; color: var(--sc-ink); margin-bottom: 1rem; }
.db-map { min-height: 280px; border: 1px solid var(--sc-hairline-strong); background: var(--sc-canvas); }
.db-map iframe { display: block; width: 100%; height: 100%; min-height: 280px; border: 0; filter: sepia(.35) saturate(.8) brightness(.92); }

/* ------------------------------------------------ 6 · a placa (fim) --- */
.db-placa { background: var(--sc-canvas); padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
.db-ticket {
  max-width: 30rem; margin: 0 auto;
  background: var(--db-paper); color: var(--db-paper-ink);
  padding: 28px 22px 24px; position: relative;
  box-shadow: var(--sc-e3);
}
.db-ticket::before, .db-ticket::after {
  content: ""; position: absolute; left: 0; right: 0; height: 8px;
  background: linear-gradient(135deg, transparent 50%, var(--db-paper) 50%) 0 0 / 12px 8px repeat-x,
              linear-gradient(225deg, transparent 50%, var(--db-paper) 50%) 0 0 / 12px 8px repeat-x;
}
.db-ticket::before { top: -8px; }
.db-ticket::after { bottom: -8px; transform: scaleY(-1); }
.db-ticket__t { font-size: clamp(2rem, 9vw, 2.8rem); line-height: 1; color: var(--db-oxblood); }
.db-ticket__line { margin: 12px 0 18px; color: #4A3A2C; }
.db-ticket__comanda { border-top: 1px dashed #8C7A62; border-bottom: 1px dashed #8C7A62; padding: 14px 0; margin-bottom: 20px; }
.db-ticket__comanda p { margin: 0; color: #4A3A2C; }
.db-ticket__comanda a { color: var(--db-oxblood); }
.db-ticket .db-btn { background: var(--db-oxblood); color: var(--db-paper); box-shadow: var(--sc-e1); }
.db-foot { margin-top: 3rem; text-align: center; color: var(--sc-ink-soft); font-size: .88rem; }
.db-foot p { margin: 0 0 .4rem; }
.db-foot__demo a { color: var(--sc-accent); }

/* Linhas da comanda (usadas na placa e no papel fixo) */
.db-lines { list-style: none; margin: 0; padding: 0; }
.db-lines li { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; }
.db-lines li::after { content: none; }
.db-lines .lead { flex: 1; border-bottom: 1px dotted #8C7A62; transform: translateY(-4px); }
.db-lines .v { font-variant-numeric: tabular-nums; font-weight: 600; }
.db-lines .rm { border: 0; background: none; color: var(--db-oxblood); font-size: 1.1rem; min-width: 32px; min-height: 32px; cursor: pointer; }
.db-total { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid #8C7A62; font: 700 1.2rem var(--sc-font-display); color: var(--db-oxblood); }

/* ------------------------------------------- ASSINATURA: comanda fixa --- */
.db-slip {
  position: fixed; z-index: 80; left: 10px; right: 80px;
  bottom: max(12px, env(safe-area-inset-bottom));
  background: var(--db-paper); color: var(--db-paper-ink);
  box-shadow: 0 -2px 6px rgba(10, 6, 3, .25), 0 14px 34px -8px rgba(10, 6, 3, .75);
  transform: translate3d(0, 0, 0);
  transition: transform 260ms var(--sc-ease-drawer);
}
.db-slip[data-enter] { transform: translate3d(0, 140%, 0); }
.db-slip::before {
  content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px;
  background: linear-gradient(135deg, transparent 50%, var(--db-paper) 50%) 0 0 / 12px 8px repeat-x,
              linear-gradient(225deg, transparent 50%, var(--db-paper) 50%) 0 0 / 12px 8px repeat-x;
}
.db-slip__head {
  width: 100%; min-height: 56px; padding: 0 16px; border: 0; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; color: inherit; text-align: left;
}
.db-slip__title { font: 700 1.15rem var(--sc-font-display); color: var(--db-oxblood); }
.db-slip__title::after { content: " ▴"; font-size: .8em; }
.db-slip__head[aria-expanded="true"] .db-slip__title::after { content: " ▾"; }
.db-slip__sum { font-size: .95rem; color: #4A3A2C; white-space: nowrap; }
.db-slip__sum strong { color: var(--db-paper-ink); font-variant-numeric: tabular-nums; }
.db-slip__body { padding: 0 16px 16px; max-height: 60svh; overflow: auto; }
.db-slip__note { margin: 10px 0 0; font-size: .9rem; color: #5B4632; }
.db-slip .db-btn { margin-top: 14px; background: var(--db-oxblood); color: var(--db-paper); }
.db-slip .db-lines .lead { border-color: #8C7A62; }

/* ---------------------------------------------------- WhatsApp fixo --- */
.db-zap {
  position: fixed; z-index: 85; right: 14px; bottom: max(12px, env(safe-area-inset-bottom));
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; background: #25D366; color: #fff;
  box-shadow: 0 4px 8px rgba(10, 6, 3, .3), 0 12px 24px -6px rgba(10, 6, 3, .6);
  transition: transform 120ms var(--sc-ease-out);
}
.db-zap svg { width: 30px; height: 30px; }
.db-zap:active { transform: scale(.95); }

/* ------------------------------------------------------------ desktop --- */
@media (min-width: 861px) {
  /* No desktop a parede inteira cabe na altura, centrada atrás da cadeira; o
     resto do palco continua o lambri. */
  .db-hero__stage {
    background:
      repeating-linear-gradient(90deg, transparent 0 calc(6vh - 1px), rgba(201, 165, 78, .07) calc(6vh - 1px) 6vh),
      linear-gradient(180deg, #140D09 0%, #2A1B12 62%, #1E140E 80%, #130D09 100%);
  }
  .db-wall {
    inset: 0 auto 0 64%; width: auto; aspect-ratio: 400 / 800;
    transform: translate3d(-50%, calc(var(--sc-p, 0) * -1.2%), 0) scale(calc(1.07 - var(--sc-p, 0) * .05));
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  }
  .db-copy { left: 8vw; right: auto; max-width: 34rem; top: 22svh; }
  .db-chair-wrap { left: 64%; height: 70svh; bottom: 5svh; }
  .db-counter { height: 30svh; }
  .db-label { left: auto; right: 6vw; bottom: 8svh; }
  .db-obj { width: 22rem; margin-right: 6rem; }
  .db-obj__art { width: 15rem; }
  .db-rail__lead { margin-left: 8vw; }
  .db-voz__list { max-width: 64rem; }
  .db-plate--l { margin-left: 8%; }
  .db-plate--r { margin-right: 8%; }
  .db-visita__grid { grid-template-columns: 1fr 1.2fr; gap: 4rem; align-items: stretch; }
  .db-slip { left: auto; right: 90px; width: 24rem; }
}

/* ------------------------------------------------- movimento reduzido ---
   Composição estática completa: sem espaço de pin extra, nada essencial escondido. */
@media (prefers-reduced-motion: reduce) {
  .db-hero { height: auto !important; }
  .db-hero__stage { position: relative !important; height: 100svh; }
  .db-wall { transform: scale(1.04); }
  .db-chair-wrap { transform: translate3d(-50%, 0, 0) scale(.96); }
  .db-counter { transform: translate3d(0, 62%, 0); }
  .db-hero [data-sc-cue] { opacity: 1 !important; transform: none !important; }
  .db-label { display: none; }
  .db-slip { transition: none; }
  /* O trilho vira rolagem lateral comum, sem as 6 telas de pin vazias. */
  .db-cat { height: auto !important; }
  .db-cat__stage { position: relative !important; height: auto; padding-block: 5rem 3rem; }
  .db-rail { height: auto; align-items: start; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 861px) {
  .db-counter { transform: translate3d(0, 70%, 0); }
}