/* ═══════════════════════════════════════════════════════════════
   TOTEM — tema "cartaz de rua" (Submundo do Funk)
   Papel vermelho amassado, tinta preta, adesivos creme recortados,
   letras grossas desenhadas à mão, setas de timeline e estouros.
   ═══════════════════════════════════════════════════════════════ */
/* Fontes locais (OFL) — não dependem do Google Fonts na rede do evento */
@font-face { font-family: 'Rubik Dirt'; src: url('fonts/rubik-dirt-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: block; }
@font-face { font-family: 'Anton'; src: url('fonts/anton-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: block; }
@font-face { font-family: 'Archivo'; src: url('fonts/archivo-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('fonts/archivo-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('fonts/archivo-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('fonts/archivo-latin-800-normal.woff2') format('woff2'); font-weight: 800; font-display: swap; }

:root {
  --red: #a3141b;
  --red-2: #c21d24;
  --red-deep: #5e0a0d;
  --ink: #120b0b;
  --paper: #f5ede3;
  --paper-2: #e8dccd;
  --ok: #1f9d55;
  --danger: #c21d24;
  --cut: 6px;                 /* borda preta dos adesivos */
  --drop: 8px 8px 0 var(--ink);
  --hand: 'Rubik Dirt', 'Anton', Impact, sans-serif;
  --block: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --body: 'Archivo', 'Segoe UI', Arial, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input, select, textarea { font: inherit; color: inherit; }
.hidden { display: none !important; }

/* Totem: tela touch, sem seleção de texto, sem zoom */
html, body { overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
body {
  font-family: var(--body); font-size: clamp(15px, 1.6vmin, 22px); color: var(--ink);
  background: var(--red) url('img/papel.jpg') center / cover no-repeat;
}
img, svg { -webkit-user-drag: none; }

.screen { position: fixed; inset: 0; }
.screen.center { display: flex; align-items: center; justify-content: center; padding: 4vmin; }

/* Etiqueta preta pequena */
.eyebrow {
  display: inline-block; background: var(--ink); color: var(--paper);
  font-family: var(--block); font-size: 1em; letter-spacing: .14em; text-transform: uppercase;
  padding: .35em .9em .3em; transform: rotate(-2deg);
}

.mock-badge {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 50;
  background: var(--ink); color: var(--paper); font-family: var(--block); font-size: 14px; letter-spacing: .12em;
  padding: 6px 16px; border: 3px solid var(--paper); border-top: 0;
}

/* Letreiro desenhado: vermelho, contorno preto, recorte creme */
.lettering {
  font-family: var(--hand); font-weight: 400; text-transform: uppercase; color: var(--red);
  -webkit-text-stroke: .05em var(--ink); paint-order: stroke fill;
  text-shadow:
    .05em .05em 0 var(--paper), -.05em .05em 0 var(--paper), .05em -.05em 0 var(--paper), -.05em -.05em 0 var(--paper),
    .07em 0 0 var(--paper), -.07em 0 0 var(--paper), 0 .07em 0 var(--paper), 0 -.07em 0 var(--paper),
    .13em .13em 0 var(--ink);
}

/* ── Botões ───────────────────────────────── */
.btn-primary {
  background: var(--ink); color: var(--paper);
  font-family: var(--block); font-size: 1.6em; letter-spacing: .06em; text-transform: uppercase;
  padding: .55em 1.4em .5em; min-height: 72px;
  border: var(--cut) solid var(--ink); box-shadow: inset 0 0 0 3px var(--paper), var(--drop);
  transition: transform .08s;
}
.btn-primary:active { transform: translate(4px, 4px); box-shadow: inset 0 0 0 3px var(--paper), 4px 4px 0 var(--ink); }
.btn-primary:disabled { background: #5a5050; color: #b9aea2; box-shadow: inset 0 0 0 3px #b9aea2; }
.btn-ghost {
  background: var(--paper); color: var(--ink); font-family: var(--block); font-size: 1.15em;
  letter-spacing: .06em; text-transform: uppercase; padding: .6em 1.2em .55em; min-height: 56px;
  border: 4px solid var(--ink); box-shadow: 5px 5px 0 var(--ink);
}
.btn-ghost:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); }

/* Estouros e raios (decoração) */
.burst { position: absolute; width: 18vmin; height: 18vmin; max-width: 210px; max-height: 210px; pointer-events: none; }
.burst svg { width: 100%; height: 100%; display: block; overflow: visible; }
.bolt { position: absolute; width: 9vmin; max-width: 110px; pointer-events: none; }
.bolt svg { width: 100%; display: block; }

/* ── Descanso ─────────────────────────────── */
.idle { display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; cursor: pointer; }
.idle-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 48%, rgba(255, 70, 60, .18), transparent 60%);
  animation: breathe 5s ease-in-out infinite;
}
@keyframes breathe { 50% { opacity: .35; } }
.idle-content { position: relative; padding: 4vmin; display: flex; flex-direction: column; align-items: center; }
.idle .eyebrow { font-size: min(3vmin, 30px); }
.idle-title {
  font-size: min(17vmin, 200px); line-height: .92; margin: 4vmin 0 6vmin; width: 90vw;
  overflow-wrap: normal; word-break: keep-all; transform: rotate(-3deg);
}
.idle-cta {
  position: relative; display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--block); font-size: min(5.4vmin, 58px); text-transform: uppercase; letter-spacing: .05em;
  color: var(--paper); background: var(--ink); padding: .45em 1.6em .4em;
  clip-path: polygon(4% 0, 96% 0, 100% 50%, 96% 100%, 4% 100%, 0 50%);
  animation: shake 2.4s ease-in-out infinite;
}
.idle-cta::before, .idle-cta::after { content: '‹'; font-size: 1.1em; color: var(--red-2); }
.idle-cta::after { content: '›'; }
@keyframes shake {
  0%, 70%, 100% { transform: rotate(1.5deg) scale(1); }
  76% { transform: rotate(-1.5deg) scale(1.06); }
  82% { transform: rotate(2deg) scale(1.06); }
  88% { transform: rotate(-1deg) scale(1.03); }
}
.idle-pay {
  margin-top: 6vmin; display: flex; gap: 1em; align-items: center; justify-content: center; flex-wrap: wrap;
  font-family: var(--block); text-transform: uppercase; letter-spacing: .12em; font-size: min(3vmin, 30px);
}
.idle-pay span { background: var(--paper); color: var(--ink); border: 4px solid var(--ink); padding: .25em .8em .2em; box-shadow: 4px 4px 0 var(--ink); }
.idle-pay span:nth-child(odd) { transform: rotate(-2deg); }
.idle-pay span:nth-child(3) { transform: rotate(2deg); }
.idle-pay i { display: none; }
.idle .burst.b1 { top: 5vmin; left: 4vmin; transform: rotate(-12deg); }
.idle .burst.b2 { bottom: 6vmin; right: 5vmin; transform: rotate(14deg); }
.idle .bolt.l1 { top: 18vh; right: 8vmin; transform: rotate(18deg); }
.idle .bolt.l2 { bottom: 20vh; left: 7vmin; transform: rotate(-160deg); }

/* ── Cardápio ─────────────────────────────── */
.menu {
  display: grid;
  grid-template-columns: 1fr minmax(360px, 30vw);
  grid-template-rows: auto auto 1fr;
  grid-template-areas: "header cart" "cats cart" "products cart";
}
.menu-header { grid-area: header; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 46px 26px 10px; }
.brand { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 10px; flex: 1; min-width: 0; }
.brand-name { display: block; width: 100%; font-size: 3.2em; line-height: 1.05; white-space: nowrap; transform: rotate(-2deg); transform-origin: left; padding: .08em .1em 0; }
.brand-sub {
  background: var(--ink); color: var(--paper); font-family: var(--block); text-transform: uppercase;
  letter-spacing: .12em; font-size: .95em; padding: .2em .7em .15em;
}

/* Categorias = setas da timeline */
.cats { grid-area: cats; display: flex; gap: 12px; padding: 12px 26px 18px; overflow-x: auto; scrollbar-width: none; }
.cats::-webkit-scrollbar { display: none; }
.cat {
  flex: 0 0 auto; position: relative; padding: .5em 1.6em .45em; min-height: 56px;
  font-family: var(--block); font-size: 1.3em; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  color: var(--paper); background: var(--ink);
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
}
.cat.active { background: var(--paper); color: var(--red); box-shadow: inset 0 0 0 4px var(--ink); }

.products { grid-area: products; overflow-y: auto; padding: 6px 26px 140px; scroll-behavior: smooth; }
.cat-section + .cat-section { margin-top: 34px; }
.cat-title { font-size: 2.6em; line-height: 1; margin: 0 0 18px 4px; transform: rotate(-1.5deg); transform-origin: left; display: inline-block; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px 20px; }

.product {
  position: relative; display: flex; flex-direction: column; text-align: left;
  background: var(--paper); border: 5px solid var(--ink); box-shadow: var(--drop);
  transition: transform .08s;
}
.product:nth-child(3n+1) { transform: rotate(-.6deg); }
.product:nth-child(3n+2) { transform: rotate(.5deg); }
.product:active { transform: translate(4px, 4px) !important; box-shadow: 3px 3px 0 var(--ink); }
.product.in-cart { background: #fff7ec; outline: 5px solid var(--red-2); outline-offset: -11px; }
.product.sold-out { filter: grayscale(.8) brightness(.8); }
.product-img {
  aspect-ratio: 4 / 3; background: #1d1414 center / cover no-repeat; border-bottom: 5px solid var(--ink);
  display: flex; align-items: center; justify-content: center; filter: contrast(1.08) saturate(.9);
}
.product-img.art {
  background:
    repeating-linear-gradient(-45deg, transparent 0 7px, rgba(18, 11, 11, .08) 7px 9px),
    var(--paper-2);
  perspective: 600px; overflow: hidden;
}
/* Adesivo "vivo": balança e gira de leve em 3D (cada card fora de fase) */
.product-img.art img {
  width: 78%; height: 88%; object-fit: contain;
  animation: sway 4s ease-in-out infinite; transform-origin: 50% 90%; will-change: transform;
}
@keyframes sway {
  0%, 100% { transform: rotateY(-16deg) rotateZ(-3deg) translateY(0); }
  50%      { transform: rotateY(16deg)  rotateZ(3deg)  translateY(-5%); }
}
.product.in-cart .product-img.art img { animation-duration: 1.6s; }
@media (prefers-reduced-motion: reduce) { .product-img.art img { animation: none; } }
.product-img.mono {
  background:
    repeating-linear-gradient(-45deg, transparent 0 7px, rgba(18, 11, 11, .14) 7px 9px),
    var(--paper-2);
  font-family: var(--hand); font-size: 3.6em; color: var(--red);
  -webkit-text-stroke: .04em var(--ink); paint-order: stroke fill; text-shadow: .08em .08em 0 var(--ink);
}
.product-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.product-name { font-family: var(--block); font-size: 1.45em; line-height: 1.05; text-transform: uppercase; letter-spacing: .02em; color: var(--ink); }
.product-desc { font-size: .85em; color: #4c3f3a; line-height: 1.3; font-weight: 600; }
.product-price {
  align-self: flex-start; margin-top: auto; position: relative; top: 4px;
  font-family: var(--block); font-size: 1.5em; color: var(--paper); background: var(--red);
  padding: .1em .55em .05em; border: 3px solid var(--ink); transform: rotate(-2deg);
}
.product-badge {
  position: absolute; top: -14px; right: -14px; min-width: 52px; height: 52px; padding: 0 12px; border-radius: 999px;
  background: var(--red-2); color: var(--paper); font-family: var(--block); font-size: 1.6em;
  display: flex; align-items: center; justify-content: center; border: 4px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
}
.product-soldout {
  position: absolute; top: 34%; left: 50%; transform: translate(-50%, -50%) rotate(-10deg); z-index: 2;
  background: var(--ink); color: var(--paper); font-family: var(--block); font-size: 1.5em; letter-spacing: .12em;
  padding: .2em .8em .15em; border: 3px solid var(--paper); box-shadow: 0 0 0 4px var(--ink);
}

/* Carrinho */
.cart {
  grid-area: cart; display: flex; flex-direction: column; min-height: 0;
  background: var(--paper); border-left: var(--cut) solid var(--ink);
  box-shadow: -10px 0 0 rgba(18, 11, 11, .35);
}
.cart-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 22px 14px; border-bottom: 5px solid var(--ink); }
.cart-head h2 { font-family: var(--hand); font-weight: 400; font-size: 2.6em; color: var(--red); -webkit-text-stroke: .04em var(--ink); paint-order: stroke fill; text-transform: uppercase; }
.cart-close { display: none; font-family: var(--block); font-size: 1.6em; width: 56px; height: 56px; background: var(--ink); color: var(--paper); }
.cart-lines { flex: 1; overflow-y: auto; padding: 0 16px; }
.cart-empty { flex: 1; padding: 22px; color: #5b4c46; font-weight: 700; font-size: 1.1em; }
.line { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; padding: 14px 6px; border-bottom: 3px dashed rgba(18, 11, 11, .35); }
.line-name { font-family: var(--block); font-size: 1.25em; text-transform: uppercase; letter-spacing: .02em; }
.line-price { color: #5b4c46; font-size: .95em; font-weight: 600; }
.line-sub { font-family: var(--block); color: var(--red); font-size: 1.15em; font-weight: 400; }
.stepper { display: flex; align-items: center; gap: 6px; justify-self: end; grid-column: 2; grid-row: 1 / span 2; }
.stepper button { width: 52px; height: 52px; background: var(--ink); color: var(--paper); font-family: var(--block); font-size: 1.7em; line-height: 1; }
.stepper button:active { background: var(--red); }
.stepper span { min-width: 40px; text-align: center; font-family: var(--block); font-size: 1.5em; }
.cart-foot { padding: 16px 22px 22px; border-top: 5px solid var(--ink); display: flex; flex-direction: column; gap: 16px; }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--block); text-transform: uppercase; font-size: 1.4em; letter-spacing: .04em; }
.cart-total strong { font-size: 1.7em; color: var(--red); font-weight: 400; }
.cart-bar { display: none; }

/* Retrato (totem vertical): carrinho vira gaveta com barra fixa embaixo */
@media (orientation: portrait) {
  .menu { grid-template-columns: 1fr; grid-template-areas: "header" "cats" "products"; }
  .cart {
    position: fixed; left: 0; right: 0; bottom: 0; height: 74vh; z-index: 20;
    border-left: 0; border-top: var(--cut) solid var(--ink);
    transform: translateY(105%); transition: transform .25s ease; box-shadow: 0 -16px 0 rgba(18, 11, 11, .45);
  }
  .cart.open { transform: none; }
  .cart-close { display: block; }
  .cart-bar {
    position: fixed; left: 22px; right: 22px; bottom: 22px; z-index: 10;
    display: flex; align-items: center; gap: 16px; padding: 16px 24px;
    background: var(--ink); color: var(--paper); font-family: var(--block); font-size: 1.6em; text-transform: uppercase; letter-spacing: .04em;
    border: 4px solid var(--paper); box-shadow: 0 0 0 5px var(--ink), 10px 10px 0 5px rgba(18, 11, 11, .55);
  }
  .cart-bar:disabled { background: #4d4343; color: #b9aea2; }
  .cart-bar-count { background: var(--red-2); color: var(--paper); border: 3px solid var(--paper); border-radius: 999px; min-width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; }
  .cart-bar-label { flex: 1; text-align: left; }
  .cart-bar strong { font-weight: 400; }
}

/* ── Painéis (pagamento, sucesso, erro) ───── */
.panel {
  position: relative; width: min(900px, 100%); background: var(--paper);
  border: var(--cut) solid var(--ink); box-shadow: 14px 14px 0 var(--ink);
  padding: 5vmin; display: flex; flex-direction: column; align-items: center; gap: 2.6vmin; text-align: center;
  transform: rotate(-.8deg);
}
.panel h2 {
  font-family: var(--hand); font-weight: 400; font-size: 4em; line-height: .95; text-transform: uppercase; color: var(--red);
  -webkit-text-stroke: .04em var(--ink); paint-order: stroke fill; text-shadow: .07em .07em 0 var(--ink);
}
.big-total { font-family: var(--block); font-size: 6em; color: var(--ink); line-height: 1; letter-spacing: .01em; }
.methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 3vmin; width: 100%; }
.method {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4vmin 2vmin;
  background: var(--ink); color: var(--paper); border: 4px solid var(--ink); box-shadow: inset 0 0 0 4px var(--paper), 8px 8px 0 var(--red);
  transition: transform .08s;
}
.method:nth-child(2) { transform: rotate(1deg); }
.method:active { transform: translate(4px, 4px); box-shadow: inset 0 0 0 4px var(--paper), 4px 4px 0 var(--red); }
.method svg { width: 12vmin; height: 12vmin; max-width: 120px; max-height: 120px; color: var(--red-2); }
.method-name { font-family: var(--hand); font-size: 3.6em; line-height: 1; text-transform: uppercase; }
.method-sub { font-family: var(--block); text-transform: uppercase; letter-spacing: .1em; color: #cfc3b5; }

.pix-panel { width: min(1200px, 100%); flex-direction: row; align-items: center; text-align: left; gap: 5vmin; }
.pix-left { flex: 1; display: flex; flex-direction: column; gap: 2.6vmin; align-items: flex-start; }
.pix-qr { flex: 0 0 auto; width: min(52vmin, 520px); aspect-ratio: 1; background: #fff; border: var(--cut) solid var(--ink); box-shadow: 10px 10px 0 var(--red); padding: 2.4vmin; transform: rotate(1.2deg); }
.pix-qr svg { width: 100%; height: 100%; display: block; }
@media (orientation: portrait) {
  .pix-panel { flex-direction: column-reverse; text-align: center; }
  .pix-left { align-items: center; }
  .pix-qr { width: min(70vw, 620px); }
}
.steps { list-style: none; counter-reset: s; padding: 0; display: flex; flex-direction: column; gap: .6em; font-size: 1.35em; font-weight: 700; text-align: left; }
.steps li { counter-increment: s; position: relative; padding-left: 2.3em; min-height: 1.7em; line-height: 1.7em; }
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: 0; width: 1.7em; height: 1.7em; display: flex; align-items: center; justify-content: center; line-height: 1;
  background: var(--red); color: var(--paper); font-family: var(--block); border: 3px solid var(--ink); border-radius: 50%;
}
.waiting { display: flex; align-items: center; gap: 12px; font-family: var(--block); text-transform: uppercase; letter-spacing: .08em; font-size: 1.15em; }
.spinner { width: 26px; height: 26px; border-radius: 50%; border: 4px solid rgba(18, 11, 11, .2); border-top-color: var(--red); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.card-anim svg { width: 30vmin; height: 30vmin; max-width: 260px; max-height: 260px; color: var(--ink); }
.card-chip { animation: insert 1.8s ease-in-out infinite; }
@keyframes insert { 0%, 100% { transform: translateY(18px); } 50% { transform: translateY(-10px); } }
.card-msg { font-family: var(--block); font-size: 1.7em; text-transform: uppercase; letter-spacing: .03em; }

/* Selo de aprovado / erro: estouro recortado */
.check {
  width: 22vmin; height: 22vmin; max-width: 200px; max-height: 200px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--block); font-size: min(11vmin, 100px); color: var(--paper);
  background: var(--ink);
  clip-path: polygon(50% 0, 61% 18%, 82% 8%, 80% 30%, 100% 36%, 86% 52%, 98% 72%, 76% 74%, 72% 96%, 54% 84%, 36% 100%, 30% 78%, 8% 82%, 16% 62%, 0 46%, 18% 36%, 10% 14%, 32% 18%);
  animation: pop .45s cubic-bezier(.2, 1.6, .5, 1);
}
.check.fail { background: var(--red); }
@keyframes pop { from { transform: scale(.3) rotate(-30deg); opacity: 0; } }
.done-sub { font-size: 1.5em; font-weight: 700; }
.done-order { font-family: var(--block); text-transform: uppercase; font-size: 1.5em; letter-spacing: .06em; display: flex; align-items: center; gap: .4em; }
.done-order strong { font-family: var(--block); font-weight: 400; font-size: 2.2em; color: var(--paper); background: var(--red); border: 4px solid var(--ink); padding: 0 .35em; transform: rotate(-3deg); }
.done-hint { font-weight: 700; color: #5b4c46; }
.row { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }

.modal { position: fixed; inset: 0; z-index: 40; background: rgba(18, 6, 6, .72); display: flex; align-items: center; justify-content: center; padding: 4vmin; }
.modal .panel { width: min(660px, 100%); }

.toast {
  position: fixed; left: 50%; bottom: 140px; transform: translateX(-50%) rotate(-1deg); z-index: 60;
  background: var(--ink); color: var(--paper); border: 4px solid var(--paper); box-shadow: 0 0 0 5px var(--ink), 8px 8px 0 5px var(--red);
  padding: 16px 26px; font-family: var(--block); text-transform: uppercase; letter-spacing: .04em; font-size: 1.25em; max-width: 90vw; text-align: center;
}
.print-frame { position: fixed; width: 0; height: 0; border: 0; visibility: hidden; }

/* ── Pareamento ───────────────────────────── */
.pair-panel { width: min(660px, 100%); }
.pair-code {
  font-family: var(--block); font-size: 5em; letter-spacing: .3em; min-height: 1.1em; line-height: 1.1;
  padding-left: .3em; border-bottom: 5px solid var(--ink); width: 100%;
}
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8vmin; width: 100%; }
.keypad button {
  font-family: var(--block); font-size: 3em; color: var(--paper); background: var(--ink);
  min-height: 9vmin; box-shadow: 5px 5px 0 var(--red); transition: transform .08s;
}
.keypad button:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--red); }
.keypad button.ok { background: var(--red); box-shadow: 5px 5px 0 var(--ink); }
.pair-error { color: var(--red); font-weight: 800; min-height: 1.3em; font-size: 1.2em; }

/* ── Sem conexão ──────────────────────────── */
.offline { z-index: 70; }
.spinner.big { width: 80px; height: 80px; border-width: 8px; }