@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Barlow:wght@400;500&display=swap");

/* Visual de placa de preços de balcão: sempre claro, letras grandes e etiquetas amarelas */
:root {
  --brand: #14532d;
  --bg: #fbf7ee;
  --surface: #ffffff;
  --text: #1a1a1a;
  --muted: #6b6b6b;
  --line: #ece4d2;
  --faixa: #f7f2e6;
  --etiqueta: #ffd23f;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.45 Barlow, system-ui, sans-serif; }
.wrap { max-width: 720px; margin: 0 auto; padding: 0 16px; }

header.topo {
  background: var(--brand); color: #fff; text-align: center; padding: 26px 0 24px;
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 12px, transparent 12px 24px);
}
.topo .rot { font: 700 13px "Barlow Condensed", sans-serif; letter-spacing: .32em; text-transform: uppercase; opacity: .75; }
.topo h1 {
  font: 800 46px/0.95 "Barlow Condensed", sans-serif; text-transform: uppercase;
  letter-spacing: .01em; margin: 8px 0 6px; overflow-wrap: anywhere;
}
.topo p { margin: 0; opacity: .85; font-size: 15px; }

.atalhos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 16px 0 2px; }
.atalho {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 12px 14px; border-radius: 10px; text-decoration: none;
  background: var(--surface); border: 2px solid var(--brand); color: var(--brand);
  font: 700 18px/1.1 "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .02em;
}
.atalho span { font-size: 15px; opacity: .55; }
.atalho:active { background: var(--brand); color: #fff; }

section.cat { margin-top: 22px; scroll-margin-top: 12px; }
section.cat h2 {
  margin: 0; padding: 10px 16px; border-radius: 12px 12px 0 0;
  background: var(--brand); color: #fff;
  font: 800 25px/1.1 "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .05em;
}
ul.precos {
  list-style: none; margin: 0; padding: 0; overflow: hidden;
  background: var(--surface); border: 2px solid var(--brand); border-top: 0; border-radius: 0 0 12px 12px;
}
ul.precos li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--line); }
ul.precos li:first-child { border-top: 0; }
ul.precos li:nth-child(even) { background: var(--faixa); }
.nome {
  flex: 1; min-width: 0;
  font: 700 20px/1.12 "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .01em;
}
.nome small {
  display: block; margin-top: 3px; color: var(--muted); letter-spacing: 0;
  font: 400 13.5px/1.35 Barlow, sans-serif; text-transform: none;
}
.etq {
  flex: none; padding: 4px 10px 3px; border-radius: 8px; transform: rotate(-2deg);
  background: var(--etiqueta); color: #1a1a1a; box-shadow: 2px 2px 0 rgba(0,0,0,.18);
  font: 800 23px/1 "Barlow Condensed", sans-serif; white-space: nowrap;
}
.etq small { font-size: 14px; margin-right: 2px; }

.subir {
  position: fixed; right: 16px; bottom: 16px; width: 50px; height: 50px; border: 0; border-radius: 50%;
  background: var(--brand); color: #fff; font-size: 22px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.25); opacity: 0; pointer-events: none; transition: opacity .2s;
}
.subir.on { opacity: 1; pointer-events: auto; }

.empty { text-align: center; color: var(--muted); padding: 48px 0; }
.nota { font-size: 12.5px; color: var(--muted); text-align: center; padding: 24px 16px 40px; }