/* ============================================================
   ALDEA Restaurante & Bar — estilos globais
   Paleta: brasa (vermelho/laranja) sobre fundo escuro + área clara
   ============================================================ */

@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/anton.woff2') format('woff2');
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/caveat.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../fonts/nunito-sans.woff2') format('woff2');
}

:root {
  --dark: #150e0b;
  --dark-2: #1e1410;
  --dark-3: #241a15;
  --panel: #16100d;
  --light: #f1efec;
  --card: #ffffff;
  --red: #e63122;
  --red-dark: #c21f14;
  --orange: #ff7a1a;
  --amber: #ffb400;
  --green: #2ecc71;
  --ink: #1d1b19;
  --muted: #6f6862;
  --line: #e6e1dc;
  --grad-fire: linear-gradient(92deg, #ff8a00 0%, #ff4d12 38%, #e8251a 100%);
  --grad-fire-v: linear-gradient(180deg, #ff8a00 0%, #e8251a 100%);
  --shadow: 0 10px 24px rgba(20, 10, 5, 0.12);
  --radius: 16px;
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-body: 'Nunito Sans', 'Segoe UI', sans-serif;
  --font-hand: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* foco visível para navegação por teclado, sem poluir o clique/touch */
:focus-visible { outline: 2.5px solid var(--orange); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-body);
  background: #0c0806;
  color: var(--ink);
  min-height: 100vh;
}

/* “Moldura” mobile centralizada no desktop */
.app {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--light);
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.55);
  padding-bottom: 92px; /* espaço para a bottom-nav */
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; }

.display { font-family: var(--font-display); letter-spacing: 0.02em; text-transform: uppercase; }

/* ------------------------------------------------------------
   Header
   ------------------------------------------------------------ */
.topbar {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 18px 0;
}

.icon-btn {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  display: grid;
  place-items: center;
  color: #fff;
  flex: 0 0 auto;
  transition: background 0.2s;
}
.icon-btn:hover { background: rgba(255, 255, 255, 0.12); }
.icon-btn svg { width: 22px; height: 22px; }

.burger {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  gap: 0;
}
.burger span {
  display: block;
  width: 30px;
  height: 4px;
  border-radius: 3px;
  background: #fff;
  margin: 3px 0;
}

.top-actions { display: flex; gap: 12px; }

.cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--red);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  display: grid;
  place-items: center;
  border: 2px solid var(--dark);
}
.cart-badge.is-empty { display: none; }

/* Logo */
.brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 8px;
  text-align: center;
  z-index: 6;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
}
.brand .flame { font-size: 30px; line-height: 1; }
.brand .name {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 0.9;
  color: #fff;
  letter-spacing: 0.03em;
}
.brand .tag {
  display: inline-block;
  margin-top: 2px;
  background: #fff;
  color: #14100d;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.22em;
  padding: 3px 12px;
  clip-path: polygon(6% 0, 94% 0, 100% 50%, 94% 100%, 6% 100%, 0 50%);
}
.brand.small .name { font-size: 34px; }
.brand.small .flame { font-size: 24px; }

/* ------------------------------------------------------------
   Hero escuro
   ------------------------------------------------------------ */
.hero {
  position: relative;
  background:
    radial-gradient(120% 90% at 85% 30%, rgba(120, 40, 8, 0.55) 0%, transparent 55%),
    radial-gradient(90% 70% at 15% 100%, rgba(180, 50, 10, 0.35) 0%, transparent 60%),
    linear-gradient(180deg, #17100c 0%, #100a07 100%);
  color: #fff;
  padding-bottom: 30px;
}
.hero::after {
  /* brasas sutis */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(3px 3px at 84% 18%, rgba(255, 150, 40, 0.8), transparent 60%),
    radial-gradient(2px 2px at 70% 40%, rgba(255, 120, 30, 0.7), transparent 60%),
    radial-gradient(2px 2px at 92% 55%, rgba(255, 170, 60, 0.6), transparent 60%);
}
.hero-body { position: relative; padding: 86px 22px 0; z-index: 2; }

.hero-title {
  font-weight: 900;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}
.hero-title .hot { color: var(--amber); }

.hero-sub {
  margin-top: 10px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.btn-fire {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
  padding: 14px 22px;
  border-radius: 12px;
  background: var(--grad-fire);
  color: #fff;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 24px rgba(232, 37, 26, 0.38);
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn-fire:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(232, 37, 26, 0.48); }
.btn-fire svg { width: 22px; height: 22px; }

.hero-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}
.hero-meta .dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.hero-meta .sep { color: rgba(255, 255, 255, 0.35); }
.hero-meta a { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------
   Cartão de destaque abaixo do herói (sobrepõe a base da foto)
   ------------------------------------------------------------ */
.hero-card {
  position: relative;
  z-index: 3;
  margin: -24px 16px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(20, 10, 5, 0.12);
}
.hero-card .hc-ic {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(230, 49, 34, 0.08);
  color: var(--red);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.hero-card .hc-ic svg { width: 24px; height: 24px; }
.hero-card .hc-txt { min-width: 0; }
.hero-card .l1 { font-weight: 900; font-size: 15px; color: var(--ink); }
.hero-card .hc-arrow { margin-left: auto; color: var(--red); font-weight: 900; font-size: 22px; line-height: 1; }
.hero-card .l2 { margin-top: 2px; color: var(--muted); font-size: 12.5px; font-weight: 700; }

/* ------------------------------------------------------------
   Seções claras
   ------------------------------------------------------------ */
.section { padding: 26px 16px 0; }
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.section-title { font-weight: 900; font-size: 19px; letter-spacing: -0.01em; color: var(--ink); }
.section-link { display: inline-flex; align-items: center; gap: 4px; color: var(--red); font-weight: 800; font-size: 12.5px; }

/* Categorias */
.cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 8px; }
.cat { text-align: center; }
.cat-ic {
  width: 100%;
  max-width: 64px;
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 16px;
  background: #fff;
  border: 1.5px solid var(--line);
  color: var(--ink);
  display: grid;
  place-items: center;
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
}
.cat-ic svg { width: 46%; height: 46%; }
.cat:hover .cat-ic { transform: translateY(-2px); }
.cat.active .cat-ic { background: rgba(230, 49, 34, 0.08); border-color: var(--red); color: var(--red); }
.cat-name { margin-top: 7px; font-weight: 800; font-size: 11px; color: var(--ink); }
.cat.active .cat-name { color: var(--red); }

/* Cards de produto */
.cards-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 74%;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.cards-row::-webkit-scrollbar { display: none; }
.cards-row .pcard { scroll-snap-align: start; }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.pcard {
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.pcard-img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.pcard-img img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.fav {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(2px);
  transition: color 0.15s, transform 0.15s;
}
.fav svg { width: 20px; height: 20px; }
.fav.on { color: var(--red); }
.fav.on svg path { fill: currentColor; }
.fav:active { transform: scale(1.15); }

.pcard-body { padding: 12px 14px 14px; display: flex; flex-direction: column; flex: 1; }
.pcard-name { font-weight: 800; font-size: 16px; color: #171310; }
.pcard-desc { color: var(--muted); font-size: 13px; line-height: 1.35; margin-top: 3px; flex: 1; }
.pcard-price {
  color: var(--red);
  font-family: var(--font-display);
  font-size: 20px;
  margin-top: 8px;
}
/* item cujo preço ainda não está na cartela */
.sob-consulta {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--light);
  color: var(--muted);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 0.01em;
  vertical-align: middle;
}
.btn-add {
  margin-top: 10px;
  width: 100%;
  padding: 10px;
  border-radius: 999px;
  border: 1.6px solid var(--red);
  color: var(--red);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.15s, color 0.15s;
}
.btn-add:hover { background: var(--red); color: #fff; }

/* Cartão de cupom */
.coupon-strip {
  margin: 22px 16px 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
}
.coupon-strip .ticket {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 180, 0, 0.16);
  color: #c47f00;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.coupon-strip .ticket svg { width: 24px; height: 24px; }
.coupon-strip > div:not(.ticket) { min-width: 0; }
.coupon-strip .t1 { font-weight: 900; font-size: 14px; color: var(--ink); }
.coupon-strip .t2 { margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 700; }
.coupon-strip code { background: var(--light); color: var(--ink); font-weight: 900; padding: 1px 6px; border-radius: 6px; font-family: inherit; }
.coupon-strip .off { color: var(--red); font-weight: 900; }
.coupon-strip .use {
  margin-left: auto;
  flex: 0 0 auto;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--grad-fire);
  color: #fff;
  font-weight: 900;
  font-size: 12px;
  white-space: nowrap;
}

/* ------------------------------------------------------------
   Bottom nav
   ------------------------------------------------------------ */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  background: #14100d;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 12px 6px calc(10px + env(safe-area-inset-bottom));
  z-index: 50;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
}
.bn-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: #cfc8c1;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.06em;
}
.bn-item svg { width: 24px; height: 24px; }
.bn-item.active { color: var(--red); }
.bn-item.active .bn-underline { width: 26px; }
.bn-underline { height: 3px; width: 0; border-radius: 2px; background: var(--red); transition: width 0.2s; }

.bn-cta {
  position: relative;
  display: flex;
  justify-content: center;
}
.bn-cta a {
  position: absolute;
  bottom: 6px;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #ff5b2e 0%, var(--red) 70%);
  border: 6px solid var(--light);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.05em;
  box-shadow: 0 10px 24px rgba(232, 37, 26, 0.45);
}
.bn-cta a svg { width: 26px; height: 26px; }
.page-dark .bn-cta a { border-color: #14100d; }

/* ------------------------------------------------------------
   Cardápio
   ------------------------------------------------------------ */
.menu-hero { padding-bottom: 0; }
.menu-hero .hero-body { padding-top: 96px; }
.menu-title { font-family: var(--font-display); font-size: 52px; }
.menu-sub {
  color: var(--amber);
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.08em;
  margin-top: 4px;
}
.search {
  margin-top: 18px;
  background: #fff;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  color: var(--muted);
}
.search svg { width: 20px; height: 20px; flex: 0 0 auto; }
.search input { border: none; outline: none; width: 100%; font-size: 15px; background: transparent; }

.tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 20px 8px 0;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 1 0 auto;
  color: #d8d1ca;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.04em;
  padding: 10px 12px 12px;
  border-bottom: 4px solid transparent;
  text-align: center;
}
.tab.active { color: var(--red); border-bottom-color: var(--red); }

/* Banner combo */
/* Destaque do cardápio — cartão em degradê de fogo com a foto do produto */
.combo {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  margin: 16px 16px 0;
  padding: 14px;
  border-radius: 20px;
  background: var(--grad-fire);
  box-shadow: 0 14px 30px rgba(200, 45, 20, 0.28);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
/* brilho de canto, só decorativo */
.combo::before {
  content: '';
  position: absolute;
  inset: -40% -30% auto auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}
/* reflexo que atravessa o cartão de vez em quando */
.combo::after {
  content: '';
  position: absolute;
  top: -60%;
  left: -60%;
  width: 45%;
  height: 220%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.34) 50%, rgba(255, 255, 255, 0) 100%);
  animation: comboBrilho 5.5s ease-in-out 1.2s infinite;
  pointer-events: none;
}
@keyframes comboBrilho {
  0%, 62% { left: -60%; }
  88%, 100% { left: 130%; }
}
.combo .cb-foto {
  position: relative;
  width: 92px;
  height: 92px;
  flex: 0 0 auto;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 16px rgba(90, 20, 8, 0.3);
}
.combo .cb-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.combo .cb-txt { min-width: 0; }
.combo .cb-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fff;
  color: var(--red);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.combo .cb-nome {
  margin-top: 7px;
  font-weight: 900;
  font-size: 17px;
  line-height: 1.15;
  text-shadow: 0 1px 2px rgba(120, 30, 10, 0.25);
}
.combo .cb-desc {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* preços e botão na mesma linha, embaixo do texto */
.combo .cb-preco {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.combo .cb-preco s { color: rgba(255, 255, 255, 0.7); font-size: 12px; font-weight: 700; }
.combo .cb-valor { font-weight: 900; font-size: 20px; line-height: 1; white-space: nowrap; }
.combo .cb-ver {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #fff;
  color: var(--red);
  font-size: 11.5px;
  font-weight: 900;
  box-shadow: 0 4px 12px rgba(90, 20, 8, 0.28);
  transition: transform 0.16s ease;
}
.combo:active { transform: scale(0.99); }
.combo:hover .cb-ver { transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) {
  .combo::after { animation: none; display: none; }
  .combo .cb-ver { transition: none; }
}

.chips {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 16px 16px 2px;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
/* fila de subcategorias (aparece nas abas agrupadas, como Bebidas) */
.subcats {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 14px 16px 0;
  scrollbar-width: none;
}
.subcats[hidden] { display: none; }
.subcats::-webkit-scrollbar { display: none; }
.subcat {
  flex: 0 0 auto;
  background: transparent;
  border: 1.4px solid var(--line);
  color: #6f6862;
  border-radius: 999px;
  padding: 7px 14px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.subcat.active { background: var(--grad-fire); border-color: transparent; color: #fff; }

.chip[hidden] { display: none; }
.chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1.4px solid var(--line);
  color: #3b352f;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.chip.active { border-color: var(--red); color: var(--red); background: #fdf1ef; }

/* ------------------------------------------------------------
   Produto (detalhe)
   ------------------------------------------------------------ */
.product-hero {
  position: relative;
  color: #fff;
  background: linear-gradient(180deg, #17100c 0%, #100a07 100%);
}
.product-img {
  position: relative;
  aspect-ratio: 1 / 0.82;
  margin-top: -56px;
}
.product-img img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.product-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 10, 7, 0.85) 0%, transparent 30%, transparent 72%, rgba(16, 10, 7, 0.4) 100%);
}
.badge-ponto {
  position: absolute;
  right: 14px;
  bottom: 16px;
  z-index: 2;
  background: rgba(15, 9, 6, 0.85);
  border: 1.4px solid var(--orange);
  border-radius: 12px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.badge-ponto b { color: var(--amber); font-weight: 900; letter-spacing: 0.04em; }

/* ficha do produto — mesma linguagem do carrinho: fundo claro,
   cartões brancos, fonte do corpo em negrito e stepper em pílula */
.product-info { background: var(--light); padding: 18px 16px 0; }
.product-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.product-name { font-weight: 900; font-size: 24px; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); }
.rating {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  margin-top: 3px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.rating svg { width: 14px; height: 14px; color: var(--amber); }
.rating b { color: var(--ink); font-weight: 900; }
.product-desc { margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.product-price { margin: 10px 0 4px; color: var(--red); font-weight: 900; font-size: 24px; }
.hr { border: none; border-top: 1px solid var(--line); margin: 14px 0 2px; }

/* grupos de opções */
.opt-group { margin-top: 18px; }
.opt-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 900; color: var(--ink); }
.tag-required {
  background: rgba(230, 49, 34, 0.1);
  color: var(--red);
  font-weight: 900;
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 999px;
}
.opt-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.opt {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 9px 14px;
  font-weight: 800;
  font-size: 13px;
  color: var(--ink);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.opt .oi { display: none; }
.opt .opt-price { color: var(--muted); font-weight: 700; font-size: 12px; }
.opt.selected { border-color: var(--red); background: rgba(230, 49, 34, 0.07); color: var(--red); }
.opt.selected .opt-price { color: var(--red); }
.opt .check { display: none; }

/* adicionais e sugestões */
.addon {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  margin-top: 8px;
  transition: border-color 0.15s;
}
.addon.selected { border-color: var(--red); }
.addon-img { width: 56px; height: 56px; border-radius: 10px; overflow: hidden; flex: 0 0 auto; position: relative; background: var(--light); }
.addon-img img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.addon-img[data-foto="clara"] img { object-fit: contain; background: #fff; padding: 2px; }
.addon > div:not(.addon-img):not(.addon-right) { min-width: 0; }
.addon-name { font-weight: 800; font-size: 14px; color: var(--ink); }
.addon-desc {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.addon-right { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 0 auto; }
.addon-price { color: var(--red); font-weight: 900; font-size: 14px; white-space: nowrap; }
.addon-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--light);
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background 0.15s, color 0.15s;
}
.addon.selected .addon-btn, .addon-btn.on { background: var(--red); color: #fff; }

/* quantidade e observações */
.qty-obs { display: flex; gap: 12px; margin-top: 18px; align-items: flex-start; }
.qty { flex: 0 0 auto; display: inline-flex; align-items: center; background: #fff; border: 1.5px solid var(--line); border-radius: 999px; padding: 4px; }
.qty button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--light);
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  display: grid;
  place-items: center;
}
.qty .qv { min-width: 30px; text-align: center; font-weight: 900; font-size: 15px; }
.obs { flex: 1; min-width: 0; }
.obs label { display: block; margin-bottom: 6px; font-weight: 900; font-size: 12.5px; color: var(--ink); }
.obs textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  font-size: 13.5px;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s;
}
.obs textarea:focus { border-color: var(--orange); }

/* barra de total — fixa acima da barra inferior no celular */
.total-bar {
  position: fixed;
  left: 50%;
  bottom: 60px;
  z-index: 45;
  transform: translateX(-50%);
  width: 100%;
  max-width: 520px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 24px rgba(20, 10, 5, 0.08);
  color: var(--ink);
}
.total-bar .lbl { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; color: var(--muted); }
.total-bar .items { font-size: 11px; color: var(--muted); }
.total-bar .val { font-weight: 900; font-size: 20px; color: var(--red); white-space: nowrap; }
.total-bar .go {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 16px;
  border-radius: 12px;
  background: var(--grad-fire);
  color: #fff;
  font-weight: 900;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(232, 37, 26, 0.35);
}
.total-bar .go svg { width: 20px; height: 20px; }
/* o conteúdo não pode terminar escondido atrás da barra fixa */
.product-page .product-info { padding-bottom: 96px; }

@media (max-width: 360px) {
  .total-bar .go span { display: none; }
  .total-bar .go { padding: 13px 14px; }
}

/* desktop: ficha mais larga, barra de total no fluxo */
@media (min-width: 1100px) {
  .product-page .product-info { padding: 24px var(--gutter) 30px; }
  .product-page .product-name { font-size: 32px; }
  .product-page .product-desc { font-size: 15px; max-width: 720px; }
  .product-page .product-price { font-size: 28px; }
  .product-page .opt-title { font-size: 15px; }
  .product-page .opt { padding: 10px 16px; font-size: 13.5px; }
  .product-page .addon { max-width: 720px; }
  .product-page .qty-obs { max-width: 720px; }
  .product-page .total-bar {
    position: static;
    transform: none;
    max-width: 720px;
    margin-top: 24px;
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: none;
  }
  .product-page .total-bar .val { font-size: 24px; }
  .product-page .total-bar .go { padding: 14px 24px; font-size: 14px; }
}

/* ------------------------------------------------------------
   Carrinho — cartões brancos, ícones em SVG, item com foto grande,
   stepper de quantidade e resumo fixo na lateral no desktop.
   ------------------------------------------------------------ */
.cart-head { position: relative; height: 76px; color: #fff; background: #0f0a08; }
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.06em;
  font-size: 14px;
}
.back-link svg { width: 22px; height: 22px; }

.page-title-row { padding: 22px 18px 12px; }
.page-title { font-family: var(--font-display); font-size: 32px; color: #171310; display: flex; align-items: center; gap: 10px; letter-spacing: 0.02em; }
.page-sub { color: var(--muted); margin-top: 3px; font-size: 14px; }

.cart-layout.is-empty { display: none; }
.cart-main, .cart-side { min-width: 0; }
.cart-side { padding-bottom: 84px; }   /* espaço para o botão fixo no celular */

/* cartão branco padrão das seções */
.cbox {
  margin: 0 16px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px 16px;
}
.cbox-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 13.5px;
  font-weight: 900;
  color: var(--ink);
}
.cbox-title svg { width: 18px; height: 18px; color: var(--red); flex: 0 0 auto; }

/* item do carrinho */
.cart-item {
  display: flex;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px;
  margin: 0 16px 10px;
}
.ci-img { width: 86px; height: 86px; border-radius: 12px; overflow: hidden; flex: 0 0 auto; position: relative; background: var(--light); }
.ci-img img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.cart-item[data-foto="clara"] .ci-img img { object-fit: contain; background: #fff; padding: 2px; }
.ci-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ci-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.ci-name { font-weight: 800; font-size: 15px; line-height: 1.2; color: var(--ink); }
.ci-desc {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ci-del {
  width: 30px;
  height: 30px;
  margin: 0 -4px 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #9a918a;
  flex: 0 0 auto;
  transition: background 0.15s, color 0.15s;
}
.ci-del svg { width: 17px; height: 17px; }
.ci-del:hover { background: rgba(230, 49, 34, 0.08); color: var(--red); }
.ci-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: auto; padding-top: 8px; }
.ci-qty { display: inline-flex; align-items: center; background: var(--light); border-radius: 999px; padding: 3px; }
.ci-qty button {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  display: grid;
  place-items: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.ci-qty .n { min-width: 22px; text-align: center; font-size: 14px; font-weight: 900; }
.ci-edit { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12px; font-weight: 800; }
.ci-edit svg { width: 13px; height: 13px; }
/* largura reservada: o preço crescer (72.000 → 144.000) não pode
   empurrar o nome para uma segunda linha e mexer no card */
.ci-price { flex: 0 0 auto; min-width: 96px; padding-top: 1px; text-align: right; color: var(--red); font-weight: 900; font-size: 15.5px; white-space: nowrap; }

/* cupom */
.coupon-row { display: flex; gap: 8px; }
.coupon-row input {
  min-width: 0;
  flex: 1;
  height: 44px;
  background: var(--light);
  border: 1.5px solid transparent;
  border-radius: 12px;
  color: var(--ink);
  padding: 0 14px;
  font-size: 14px;
  font-weight: 700;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.coupon-row input::placeholder { color: #a39b94; font-weight: 600; }
.coupon-row input:focus { border-color: var(--orange); background: #fff; }
.coupon-row button {
  height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  font-weight: 900;
  font-size: 12.5px;
  letter-spacing: 0.06em;
}
.coupon-msg { display: none; margin-top: 8px; font-size: 12.5px; font-weight: 700; }
.coupon-msg.ok { display: block; color: #1f9d55; }
.coupon-msg.err { display: block; color: var(--red); }

/* entrega ou retirada */
.order-type { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.order-type .cbox-title { flex: 1; margin: 0; }
.switch { display: flex; background: var(--light); border-radius: 999px; padding: 3px; gap: 3px; }
.switch button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 800;
  font-size: 13px;
  transition: background 0.15s, color 0.15s;
}
.switch button svg { width: 16px; height: 16px; }
.switch button.active { background: var(--grad-fire); color: #fff; box-shadow: 0 4px 10px rgba(232, 37, 26, 0.25); }

/* endereço / retirada */
.address {
  margin: 0 16px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}
.address .pin {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(230, 49, 34, 0.08);
  color: var(--red);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.address .pin svg { width: 20px; height: 20px; }
.address .a1 { font-weight: 900; font-size: 13px; color: var(--ink); }
.address .a2 { margin-top: 2px; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.address .alter {
  margin-left: auto;
  padding: 7px 12px;
  border: 1.5px solid rgba(230, 49, 34, 0.35);
  border-radius: 999px;
  color: var(--red);
  font-weight: 900;
  font-size: 12.5px;
  white-space: nowrap;
}

/* pagamento */
.pay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pay {
  background: var(--light);
  border: 2px solid transparent;
  border-radius: 14px;
  padding: 12px 6px;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}
.pay .pi { width: 34px; height: 34px; margin: 0 auto; border-radius: 10px; background: #fff; color: var(--ink); display: grid; place-items: center; }
.pay .pi svg { width: 20px; height: 20px; }
.pay .pn { margin-top: 8px; font-weight: 900; font-size: 13px; color: var(--ink); }
.pay .pd { margin-top: 2px; color: var(--muted); font-size: 10.5px; line-height: 1.25; }
.pay.selected { border-color: var(--red); background: #fff; }
.pay.selected .pi { background: var(--grad-fire); color: #fff; }

/* resumo */
.summary-rows { font-size: 14px; }
.summary-rows .row { display: flex; justify-content: space-between; padding: 6px 0; color: var(--muted); }
.summary-rows .row b { font-weight: 800; color: var(--ink); }
.summary-rows .row.disc, .summary-rows .row.disc b { color: #1f9d55; }
.summary-rows .total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.summary-rows .total .t { font-weight: 900; font-size: 14px; letter-spacing: 0.04em; color: var(--ink); }
.summary-rows .total .v { font-family: var(--font-display); font-size: 27px; color: var(--red); letter-spacing: 0.01em; }

/* finalizar — fixo acima da barra inferior no celular */
.checkout {
  position: fixed;
  left: 50%;
  bottom: 74px;
  z-index: 44;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 488px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--grad-fire);
  border-radius: 14px;
  color: #fff;
  padding: 15px 18px;
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.04em;
  box-shadow: 0 12px 26px rgba(232, 37, 26, 0.38);
}
.checkout .cv { font-size: 15px; letter-spacing: 0; }
.checkout svg { width: 20px; height: 20px; }

/* telas bem estreitas */
@media (max-width: 360px) {
  .ci-img { width: 70px; height: 70px; }
  .ci-price { min-width: 82px; font-size: 14px; }
  .ci-actions { gap: 8px; }
  .ci-edit span { display: none; }
  .coupon-row button { padding: 0 14px; }
  .pay .pd { display: none; }
}

.cart-empty { text-align: center; padding: 60px 30px; color: var(--muted); }
.cart-empty .big { display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto; border-radius: 50%; background: #fff; color: #c9c1ba; }
.cart-empty .big svg { width: 40px; height: 40px; }
.cart-empty p { margin-top: 14px; font-size: 15px; }
.cart-empty a { color: var(--red); font-weight: 900; }

/* desktop: itens à esquerda, resumo e botão fixos à direita */
@media (min-width: 1100px) {
  .cart-head { height: 84px; }
  .cart-page .page-title-row { padding: 24px var(--gutter) 16px; }
  .cart-page .page-title { font-size: 34px; }
  .cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 0 24px; align-items: start; padding: 0 var(--gutter) 30px; }
  .cart-layout.is-empty { display: none; }
  .cart-layout .cart-item, .cart-layout .cbox, .cart-layout .address { margin-left: 0; margin-right: 0; }
  .cart-side { position: sticky; top: 100px; padding-bottom: 0; }
  .ci-img { width: 96px; height: 96px; }
  .ci-name { font-size: 16px; }
  .ci-desc { font-size: 13px; }
  .ci-price { font-size: 17px; }
  .pay { padding: 14px 10px; }
  .checkout { position: static; transform: none; width: 100%; max-width: none; margin-top: 12px; padding: 17px 20px; font-size: 16px; }
  .checkout .cv { font-size: 16px; }
}

/* ------------------------------------------------------------
   Reservas (página escura)
   ------------------------------------------------------------ */
.page-dark { background: #120c09; color: #fff; padding-bottom: 92px; }
.page-dark .app-bg {
  background:
    radial-gradient(120% 70% at 80% 0%, rgba(150, 70, 15, 0.4) 0%, transparent 55%),
    linear-gradient(180deg, #191009 0%, #120c09 60%);
}

.res-hero { position: relative; padding: 96px 18px 8px; }
.res-title { font-family: var(--font-display); font-size: 52px; }
.res-sub { margin-top: 8px; font-size: 16.5px; color: #ece5df; max-width: 210px; line-height: 1.45; }
.res-sub .hl { color: var(--orange); font-weight: 800; }
.res-flame { margin-top: 10px; }
.res-flame::after {
  content: '';
  display: block;
  width: 150px;
  height: 3px;
  margin-top: -12px;
  background: linear-gradient(90deg, var(--orange), transparent);
}

.happy {
  position: absolute;
  right: 16px;
  top: 120px;
  width: 200px;
  background: rgba(24, 15, 10, 0.92);
  border: 1.4px solid var(--orange);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
}
.happy .h1 { font-family: var(--font-display); color: var(--amber); font-size: 17px; display: flex; gap: 6px; align-items: center; }
.happy .h2 { font-weight: 900; font-size: 11px; letter-spacing: 0.06em; margin-top: 4px; }
.happy .h3 { color: #d9d2cb; font-size: 12.5px; margin-top: 6px; line-height: 1.4; }

@media (max-width: 430px) {
  .happy { position: static; width: auto; margin-top: 18px; }
  .res-sub { max-width: none; }
}

.form { padding: 22px 18px 0; display: grid; gap: 20px; }
.f-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.f-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.07em;
  margin-bottom: 10px;
}
.f-label .opt-note { font-family: var(--font-body); font-weight: 700; color: #b7aea6; font-size: 11px; letter-spacing: 0.04em; }
.f-input, .f-select, .f-textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1.4px solid rgba(255, 255, 255, 0.28);
  border-radius: 12px;
  color: #fff;
  padding: 14px 16px;
  font-size: 15px;
  outline: none;
  transition: border-color 0.15s;
}
.f-input::placeholder, .f-textarea::placeholder { color: #a99f96; }
.f-input:focus, .f-select:focus, .f-textarea:focus { border-color: var(--orange); }
.f-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23e63122' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.f-select option { color: #171310; }
.f-textarea { min-height: 96px; resize: vertical; }
.f-count { text-align: right; color: #a99f96; font-size: 12px; margin-top: 6px; }

.time-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.time-chip {
  border: 1.4px solid rgba(255, 255, 255, 0.32);
  color: #fff;
  border-radius: 10px;
  padding: 12px 14px;
  font-weight: 800;
  font-size: 14.5px;
}
.time-chip.active { background: var(--grad-fire); border-color: transparent; box-shadow: 0 8px 18px rgba(232, 37, 26, 0.4); }

.btn-confirm {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--grad-fire);
  color: #fff;
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.08em;
  padding: 18px;
  border-radius: 14px;
  box-shadow: 0 14px 30px rgba(232, 37, 26, 0.4);
}
.secure-note {
  text-align: center;
  color: #b7aea6;
  font-size: 13px;
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.ambience {
  margin: 26px 18px 10px;
  border: 1.4px solid var(--orange);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  background:
    radial-gradient(80% 120% at 100% 50%, rgba(190, 80, 15, 0.35) 0%, transparent 60%),
    rgba(20, 12, 8, 0.7);
}
.ambience .a-t { font-family: var(--font-display); font-size: 17px; color: #fff; display: flex; gap: 8px; align-items: center; }
.ambience .a-d { color: #d9d2cb; font-size: 13.5px; margin-top: 6px; line-height: 1.45; }

/* ------------------------------------------------------------
   Pedidos (páginas simples)
   ------------------------------------------------------------ */
.order-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  margin: 0 16px 12px;
  padding: 14px 16px 16px;
}
.order-card .o-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.order-card .o-id { font-weight: 900; font-size: 15px; color: var(--ink); }
.order-card .o-date { margin-top: 2px; color: var(--muted); font-size: 12.5px; font-weight: 700; }
.order-card .o-status {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(46, 204, 113, 0.12);
  color: #1f9d55;
  font-weight: 800;
  font-size: 12px;
}
.order-card ul { list-style: none; margin-top: 12px; color: var(--muted); font-size: 13.5px; font-weight: 700; }
.order-card ul li { padding: 3px 0; }
.order-card .o-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-weight: 900;
  font-size: 14px;
}
.order-card .o-total .v { color: var(--red); font-size: 18px; }
.order-card .o-again {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  margin-top: 12px;
}
.order-card .o-again svg { width: 16px; height: 16px; }

.profile-box {
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow);
  margin: 0 16px 14px;
  overflow: hidden;
}
.profile-box .p-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-bottom: 1.4px solid var(--line);
  color: #2c2723;
  font-weight: 700;
  font-size: 14.5px;
  width: 100%;
  text-align: left;
}
.profile-box .p-row:last-child { border-bottom: none; }
.profile-box .p-ic { font-size: 20px; width: 28px; text-align: center; }
.profile-box .p-arrow { margin-left: auto; color: var(--muted); }

.avatar-big {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--grad-fire-v);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 32px;
  margin: 0 auto;
  box-shadow: 0 10px 24px rgba(232, 37, 26, 0.4);
}

/* ------------------------------------------------------------
   Drawer (menu hamburguer)
   ------------------------------------------------------------ */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
  z-index: 90;
}
.drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-105%);
  width: 300px;
  max-width: 80vw;
  background: #fff;
  color: var(--ink);
  z-index: 95;
  transition: transform 0.28s ease;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  box-shadow: 20px 0 60px rgba(0, 0, 0, 0.28);
}
body.drawer-open .drawer { transform: translateX(0); }
body.drawer-open .drawer-overlay { opacity: 1; pointer-events: auto; }
.drawer .d-logo { font-family: var(--font-display); font-size: 30px; }
.drawer nav { margin-top: 26px; display: grid; gap: 4px; }
.drawer nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 12px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 15px;
  color: #e8e2dc;
}
.drawer nav a:hover, .drawer nav a.active { background: rgba(232, 37, 26, 0.16); color: #ff8d80; }
.drawer .d-lang {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  font-size: 17px;
}
.drawer .d-lang button {
  border: 1.4px solid rgba(255, 255, 255, 0.3);
  color: #e8e2dc;
  padding: 7px 16px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.05em;
}
.drawer .d-lang button.on { background: var(--grad-fire); border-color: transparent; color: #fff; }
.drawer .d-foot { margin-top: auto; color: #a99f96; font-size: 12.5px; line-height: 1.6; }

/* ------------------------------------------------------------
   Placeholders de imagem (substituídos pelas fotos reais)
   ------------------------------------------------------------ */
.ph { display: grid; place-items: center; width: 100%; height: 100%; position: absolute; inset: 0; }
.ph::before { font-size: 40px; }
.ph-picanha { background: radial-gradient(120% 120% at 30% 20%, #7a3a1c 0%, #4a2010 55%, #2a120a 100%); }
.ph-picanha::before { content: '🥩'; }
.ph-feijoada { background: radial-gradient(120% 120% at 30% 20%, #5a3a28 0%, #2e1c12 60%, #1c100a 100%); }
.ph-feijoada::before { content: '🍲'; }
.ph-paodealho { background: radial-gradient(120% 120% at 30% 20%, #c98f4e 0%, #96601f 60%, #5c3a10 100%); }
.ph-paodealho::before { content: '🥖'; }
.ph-frango { background: radial-gradient(120% 120% at 30% 20%, #a35a22 0%, #6e3812 60%, #3c1e08 100%); }
.ph-frango::before { content: '🍗'; }
.ph-costela { background: radial-gradient(120% 120% at 30% 20%, #6e3820 0%, #40200e 60%, #24100a 100%); }
.ph-costela::before { content: '🍖'; }
.ph-linguica { background: radial-gradient(120% 120% at 30% 20%, #8e4020 0%, #5c2410 60%, #30140a 100%); }
.ph-linguica::before { content: '🌭'; }
.ph-mandioca { background: radial-gradient(120% 120% at 30% 20%, #d8b25e 0%, #a97f2e 60%, #6e4c14 100%); }
.ph-mandioca::before { content: '🍟'; }
.ph-refri { background: radial-gradient(120% 120% at 30% 20%, #d32f2f 0%, #8e1414 60%, #4a0a0a 100%); }
.ph-refri::before { content: '🥤'; }
.ph-chopp { background: radial-gradient(120% 120% at 30% 20%, #e0a52e 0%, #a5701a 60%, #5c3c0e 100%); }
.ph-chopp::before { content: '🍺'; }
.ph-caipirinha { background: radial-gradient(120% 120% at 30% 20%, #7fb069 0%, #4a7040 60%, #274020 100%); }
.ph-caipirinha::before { content: '🍹'; }
.ph-suco { background: radial-gradient(120% 120% at 30% 20%, #ffb32e 0%, #d07c14 60%, #7c480c 100%); }
.ph-suco::before { content: '🧃'; }
.ph-pudim { background: radial-gradient(120% 120% at 30% 20%, #e8b04e 0%, #b0781f 60%, #6e4610 100%); }
.ph-pudim::before { content: '🍮'; }
.ph-gateau { background: radial-gradient(120% 120% at 30% 20%, #5c3520 0%, #38200f 60%, #20100a 100%); }
.ph-gateau::before { content: '🍫'; }
.ph-burger { background: radial-gradient(120% 120% at 30% 20%, #a05c24 0%, #6e3812 60%, #3c1e0a 100%); }
.ph-burger::before { content: '🍔'; }
.ph-burger-egg { background: radial-gradient(120% 120% at 30% 20%, #b07030 0%, #7a4416 60%, #40220c 100%); }
.ph-burger-egg::before { content: '🍳'; }
.ph-asadito { background: radial-gradient(120% 120% at 30% 20%, #8a4620 0%, #58280e 60%, #2e1408 100%); }
.ph-asadito::before { content: '🍢'; }
.ph-bodega { background: radial-gradient(120% 120% at 30% 20%, #c08a3a 0%, #8a5a1c 60%, #4e300c 100%); }
.ph-bodega::before { content: '🍟'; }
.ph-fritas { background: radial-gradient(120% 120% at 30% 20%, #d8a24a 0%, #a5701f 60%, #5c3c0e 100%); }
.ph-fritas::before { content: '🍟'; }
.ph-marmita { background: radial-gradient(120% 120% at 30% 20%, #7a5a30 0%, #4c3416 60%, #2a1c0a 100%); }
.ph-marmita::before { content: '🍱'; }
.ph-cerveza { background: radial-gradient(120% 120% at 30% 20%, #d8952e 0%, #96601a 60%, #50300c 100%); }
.ph-cerveza::before { content: '🍺'; }
.ph-smirnoff { background: radial-gradient(120% 120% at 30% 20%, #8a2020 0%, #58100e 60%, #2e0808 100%); }
.ph-smirnoff::before { content: '🍾'; }
.ph-energetico { background: radial-gradient(120% 120% at 30% 20%, #2a4a5c 0%, #16303e 60%, #0a1a22 100%); }
.ph-energetico::before { content: '⚡'; }
.ph-narguile { background: radial-gradient(120% 120% at 30% 20%, #4a3a5c 0%, #2c2038 60%, #16101e 100%); }
.ph-narguile::before { content: '💨'; }
.ph-sinuca { background: radial-gradient(120% 120% at 30% 20%, #2e6b4a 0%, #14402a 60%, #0a2216 100%); }
.ph-sinuca::before { content: '🎱'; }
/* refrigerantes: cada marca com a própria cor, para os cards não ficarem iguais */
.ph-coca { background: radial-gradient(120% 120% at 30% 20%, #e03434 0%, #9a1414 60%, #4a0808 100%); }
.ph-coca::before { content: '🥤'; }
.ph-guarana { background: radial-gradient(120% 120% at 30% 20%, #2e6b4a 0%, #14402a 60%, #0a2216 100%); }
.ph-guarana::before { content: '🥤'; }
.ph-fanta { background: radial-gradient(120% 120% at 30% 20%, #ff9a2e 0%, #c25c0a 60%, #6e3206 100%); }
.ph-fanta::before { content: '🍊'; }
.ph-sprite { background: radial-gradient(120% 120% at 30% 20%, #5ec27a 0%, #2a7a44 60%, #133e22 100%); }
.ph-sprite::before { content: '🍋'; }
.ph-schweppes { background: radial-gradient(120% 120% at 30% 20%, #d8b24a 0%, #96741a 60%, #4e3c0c 100%); }
.ph-schweppes::before { content: '🥂'; }
.ph-h2oh { background: radial-gradient(120% 120% at 30% 20%, #4aa8d8 0%, #1a6a96 60%, #0c3a52 100%); }
.ph-h2oh::before { content: '💧'; }
.ph-queijo { background: radial-gradient(120% 120% at 30% 20%, #e8c05a 0%, #b08820 60%, #6a5210 100%); }
.ph-queijo::before { content: '🧀'; }
.ph-torresmo { background: radial-gradient(120% 120% at 30% 20%, #b06a3a 0%, #7a4018 60%, #40220c 100%); }
.ph-torresmo::before { content: '🥓'; }

/* ------------------------------------------------------------
   Modal (endereço, confirmações)
   ------------------------------------------------------------ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 6, 4, 0.6);
  display: none;
  place-items: end center;
  z-index: 110;
}
.modal-overlay.open { display: grid; }
.modal {
  width: 100%;
  max-width: 480px;
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 22px 20px calc(22px + env(safe-area-inset-bottom));
  animation: modal-up 0.22s ease;
}
@keyframes modal-up {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@media (min-width: 700px) {
  .modal-overlay { place-items: center; padding: 20px; }
  .modal { border-radius: 20px; }
}
.modal-title {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.03em;
  color: #171310;
  display: flex;
  align-items: center;
  gap: 8px;
}
.modal label {
  display: block;
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #4d453f;
  margin: 14px 0 6px;
}
.modal input {
  width: 100%;
  border: 1.4px solid var(--line);
  border-radius: 12px;
  padding: 13px 14px;
  font-size: 15px;
  outline-color: var(--orange);
  background: #fff;
}
.modal-actions { display: flex; gap: 10px; margin-top: 20px; }
.modal-actions .btn-cancel {
  flex: 1;
  padding: 14px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  color: #4d453f;
  font-weight: 800;
  font-size: 14px;
}
.modal-actions .btn-save {
  flex: 2;
  padding: 14px;
  border-radius: 12px;
  background: var(--grad-fire);
  color: #fff;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.05em;
}
.address .a2.placeholder { color: #a39b94; font-style: italic; }

/* Troco (pagamento em dinheiro) */
#troco-row { margin-top: 14px; display: none; }
#troco-row.show { display: block; }
#troco-row .troco-label {
  font-weight: 800;
  font-size: 12.5px;
  color: var(--ink);
  margin-bottom: 8px;
}

/* Toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 110px;
  transform: translateX(-50%) translateY(20px);
  background: #14100d;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  padding: 13px 22px;
  border-radius: 999px;
  border: 1.4px solid var(--orange);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 120;
  white-space: nowrap;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.toast .toast-action {
  margin-left: 14px;
  color: var(--amber);
  font-weight: 900;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ============================================================
   Direção visual 2026 — reprodução dos layouts de referência
   ============================================================ */
:root {
  --dark: #090909;
  --dark-2: #111;
  --light: #f7f7f6;
  --card: #fff;
  --red: #ef3027;
  --red-dark: #d91f19;
  --orange: #ff7418;
  --amber: #ffad18;
  --ink: #171717;
  --muted: #555;
  --line: #dedede;
  --radius: 10px;
  --shadow: 0 4px 12px rgba(0, 0, 0, .14);
}

body { background: #090909; }
.app { max-width: 520px; background: var(--light); padding-bottom: 80px; }
.topbar {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 60;
  width: 100%;
  max-width: 520px;
  min-height: 76px;
  padding: 16px 19px 0;
  transform: translateX(-50%);
  align-items: flex-start;
  background: transparent;
  box-shadow: none;
}
.burger, .icon-btn { width: 42px; height: 42px; }
.burger span { width: 27px; height: 3px; margin: 2.7px 0; }
.icon-btn { border-width: 1.3px; }
.icon-btn svg { width: 23px; height: 23px; }
.top-actions { gap: 12px; }
.cart-badge { top: -5px; right: -4px; min-width: 20px; height: 20px; font-size: 11px; }

.brand { top: 7px; min-width: 180px; }
.brand .flame { font-size: 28px; height: 28px; }
.brand .name,
.brand.small .name { font-size: 54px; line-height: .82; letter-spacing: .025em; }
.brand.small .flame { font-size: 27px; }
.brand .tag {
  margin-top: 5px;
  padding: 3px 13px;
  font-size: 7px;
  letter-spacing: .08em;
}

/* Início */
.home-hero {
  height: 372px;
  padding-bottom: 0;
  background:
    linear-gradient(90deg, rgba(5,5,5,.96) 0%, rgba(5,5,5,.86) 40%, rgba(5,5,5,.2) 78%),
    linear-gradient(180deg, rgba(0,0,0,.15) 55%, rgba(0,0,0,.8) 100%),
    url('../img/picanha-brasa-cel.webp') 66% center / cover no-repeat;
}
.home-hero::after { background: radial-gradient(80% 80% at 3% 60%, rgba(229,46,30,.22), transparent 65%); }
.home-hero .hero-body { padding: 104px 18px 0; max-width: 350px; }
.home-hero .hero-title { font-size: 31px; }
.home-hero .hero-sub { font-size: 11px; white-space: nowrap; }
.home-hero .btn-fire { margin-top: 16px; padding: 13px 20px; font-size: 14px; }
.home-hero .btn-fire svg { width: 20px; height: 20px; }
.home-hero .hero-meta { margin-top: 12px; gap: 6px 8px; font-size: 12px; flex-wrap: wrap; }

.home-page .section { padding: 20px 18px 0; }
.home-page .section-head { margin-bottom: 10px; }
.home-page .section-title { font-size: 18px; }
.home-page .cats { gap: 8px; }
.home-page .cat-ic { max-width: 60px; }
.home-page .cat-name { margin-top: 6px; font-size: 10.5px; }
.home-page .cards-row {
  grid-auto-columns: calc((100% - 20px) / 3);
  gap: 10px;
  padding-bottom: 2px;
}
.home-page .pcard { border-radius: 10px; }
.home-page .pcard-img { aspect-ratio: 16 / 9; }
.home-page .pcard-body { padding: 6px 8px 8px; }
.home-page .pcard-name { overflow: hidden; font-size: 11.5px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.home-page .pcard-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 28px;
  font-size: 10.5px;
  line-height: 1.28;
}
.home-page .pcard-price { margin-top: 4px; font-family: var(--font-body); font-weight: 900; font-size: 13px; }
.home-page .btn-add { margin-top: 4px; padding: 3px; font-size: 9.5px; border-width: 1.2px; }
.home-page .fav { width: 28px; height: 28px; top: 5px; right: 5px; }
.home-page .fav svg { width: 17px; height: 17px; }
.home-page .pcard-tag { left: 6px; top: 6px; padding: 3px 7px; font-size: 9px; }
.home-page .coupon-strip { margin: 16px 18px 4px; }

/* Cardápio */
.menu-page .menu-hero {
  /* altura com folga entre a busca e as abas de categoria */
  height: 285px;
  background:
    linear-gradient(90deg, rgba(3,3,3,.94) 0%, rgba(3,3,3,.72) 45%, rgba(3,3,3,.08) 100%),
    linear-gradient(180deg, rgba(0,0,0,.05) 55%, #080808 100%),
    url('../img/picanha-brasa-cel.webp') 75% center / cover no-repeat;
}
.menu-page .menu-hero::after { display: none; }
.menu-page .menu-hero .hero-body { padding: 108px 19px 0; }
.menu-page .menu-title { font-family: var(--font-body); font-weight: 900; font-size: 42px; line-height: 1.05; letter-spacing: -0.01em; text-transform: none; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); }
.menu-page .menu-sub { margin-top: 0; font-family: var(--font-body); font-weight: 900; font-size: 12px; letter-spacing: .04em; }
.menu-page .search { height: 42px; margin-top: 8px; padding: 9px 15px; }
.menu-page .search input { font-size: 13px; }
.menu-page .tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; padding: 0 8px; gap: 0; }
.menu-page .tab { padding: 8px 7px 9px; font-family: var(--font-body); font-weight: 800; font-size: 12.5px; letter-spacing: 0; border-bottom-width: 3px; }
.menu-page .combo { margin: 14px 17px 0; padding: 12px; gap: 12px; border-radius: 18px; }
.menu-page .combo .cb-foto { width: 82px; height: 82px; border-radius: 14px; }
.menu-page .combo .cb-nome { font-size: 16px; }
.menu-page .combo .cb-desc { font-size: 11.5px; }
.menu-page .combo .cb-valor { font-size: 18px; }
.menu-page .chips { padding: 12px 17px 2px; gap: 9px; }
.menu-page .chip { min-height: 38px; padding: 8px 14px; font-size: 10.5px; }
.menu-page .section { padding: 12px 18px 0; }
.menu-page .grid-2 { gap: 10px; }
.menu-page .pcard { border-radius: 8px; }
.menu-page .pcard-img { aspect-ratio: 16 / 9; }
.menu-page .pcard-body { padding: 8px 10px 9px; }
.menu-page .pcard-name { font-size: 14px; }
.menu-page .pcard-desc { min-height: 34px; font-size: 11.5px; line-height: 1.25; }
.menu-page .pcard-price { margin-top: 4px; font-family: var(--font-body); font-weight: 900; font-size: 15px; }
.menu-page .btn-add { margin-top: 6px; padding: 7px; font-size: 10px; }
.menu-page .fav { width: 30px; height: 30px; top: 6px; right: 6px; }

/* Produto */
.product-page .product-hero { height: 277px; overflow: hidden; }
.product-page .product-img { height: 277px; aspect-ratio: auto; margin-top: 0; }
.product-page .product-img img { object-position: center 58%; }
.product-page .product-img::after { background: linear-gradient(180deg, rgba(0,0,0,.72), transparent 26%, transparent 78%, rgba(0,0,0,.28)); }
.product-page .badge-ponto { right: 12px; bottom: 12px; border-radius: 10px; padding: 7px 12px; font-size: 10px; }
.product-page #crosssell-group { display: none; }


/* Reservas */
.reservations-page .app.page-dark {
  background: #030303;
  color: #fff;
  isolation: isolate;
}
.reservations-page .app.page-dark::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 294px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.12) 48%, #030303 100%),
    linear-gradient(90deg, rgba(0,0,0,.35), transparent 70%),
    url('../img/restaurante-interior-cel.webp') center top / cover no-repeat;
}
.reservations-page .res-hero { min-height: 296px; padding: 166px 25px 5px; }
.reservations-page .res-title { font-size: 42px; }
.reservations-page .res-sub { margin-top: 3px; max-width: 220px; font-size: 14px; line-height: 1.35; }
.reservations-page .res-flame { margin-top: 7px; }
.reservations-page .happy { top: 125px; right: 25px; width: 190px; padding: 12px; border-radius: 10px; }
.reservations-page .happy .h1 { font-size: 15px; }
.reservations-page .happy .h2 { font-size: 9px; }
.reservations-page .happy .h3 { max-width: 120px; font-size: 10.5px; }
.reservations-page .happy::after { content: '🍹'; position: absolute; right: 12px; bottom: 8px; font-size: 44px; }
.reservations-page .form { padding: 8px 26px 0; gap: 8px; }
.reservations-page .f-2col { gap: 18px; }
.reservations-page .f-label { margin-bottom: 4px; font-size: 10px; }
.reservations-page .f-input,
.reservations-page .f-select,
.reservations-page .f-textarea { padding: 7px 10px; border-radius: 7px; font-size: 11px; }
.reservations-page .f-input,
.reservations-page .f-select { min-height: 32px; padding-top: 6px; padding-bottom: 6px; }
.reservations-page .f-textarea { min-height: 50px; }
.reservations-page .time-chips { flex-wrap: nowrap; gap: 7px; }
.reservations-page .time-chip { padding: 8px 8px; border-radius: 7px; font-size: 10.5px; }
.reservations-page .btn-confirm { padding: 10px; border-radius: 7px; font-size: 16px; }
.reservations-page .secure-note { margin-top: 4px; font-size: 9px; }
.reservations-page .ambience {
  position: relative;
  min-height: 76px;
  margin: 7px 25px 6px;
  padding: 11px 14px;
  overflow: hidden;
  border-radius: 9px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.88) 52%, rgba(0,0,0,.05) 100%),
    url('../img/picanha-brasa-cel.webp') right center / 58% auto no-repeat;
}
.reservations-page .ambience .a-t { font-size: 14px; color: var(--amber); }
.reservations-page .ambience .a-d { max-width: 250px; font-size: 11px; }
.reservations-page .ambience-photo { width: 150px; }

/* Navegação inferior comum */
.bottom-nav {
  max-width: 520px;
  min-height: 60px;
  padding: 6px 7px calc(5px + env(safe-area-inset-bottom));
  background: linear-gradient(90deg, #111, #1b1b1b 52%, #111);
}
.bn-item { gap: 2px; font-size: 9px; }
.bn-item svg { width: 21px; height: 21px; }
.bn-cta a { bottom: 0; width: 64px; height: 64px; border-width: 2px; font-size: 10px; }
.bn-cta a svg { width: 23px; height: 23px; }

@media (max-width: 440px) {
  .brand { min-width: 155px; }
  .brand .name, .brand.small .name { font-size: 48px; }
  .home-hero { background-position: 63% center; }
  .home-hero .hero-title { font-size: 27px; }
  .home-hero .hero-title .hot { font-size: 47px; }
  .product-page #opt-groups .opt-group:nth-child(n+2) .opt-row { grid-template-columns: repeat(2, 1fr); }
  .cart-page .ci-img { width: 98px; }
  .cart-page .switch button { min-width: 92px; }
  .reservations-page .happy { position: absolute; width: 170px; right: 16px; }
  .reservations-page .form { padding-left: 18px; padding-right: 18px; }
}

/* ============================================================
   DESKTOP (≥1100px) — layout de aplicação em tela cheia
   O site preenche toda a largura (fundos e fotos full-bleed);
   o conteúdo interno centraliza em --cmax. Fica no FIM do
   arquivo para vencer a skin mobile de 520px definida acima.
   ============================================================ */
@media (min-width: 1100px) {
  /* uma coluna só: quem guia é a barra do topo. O menu lateral virou
     gaveta, aberta pelo ícone de conta ou por "Sobre nós". */
  body { display: block; background: #fff; }
  .bottom-nav { display: none; }
  .drawer-overlay { display: block; }

  /* conteúdo ocupa a largura toda; --cmax limita só o miolo */
  .app {
    --cmax: 1320px;
    --gutter: max(40px, calc((100% - var(--cmax)) / 2));
    width: 100%;
    max-width: none;
    min-height: 100vh;
    padding-bottom: 60px;
    box-shadow: none;
  }
  /* a barra ancora no conteúdo em vez de fixar na viewport */
  .topbar, .dk-nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    transform: none;
    padding: 22px var(--gutter) 0;
  }
  .brand { min-width: 220px; }

  /* ---------- Início ---------- */
  .home-page .home-hero { height: 520px; }
  .home-page .home-hero .hero-body { max-width: none; padding: 150px var(--gutter) 0; }
  .home-page .home-hero .hero-title { max-width: 560px; font-size: 50px; }
  .home-page .home-hero .hero-sub { font-size: 14px; margin-top: 14px; }
  .home-page .home-hero .btn-fire { margin-top: 22px; padding: 16px 28px; font-size: 16px; }
  .home-page .home-hero .btn-fire svg { width: 24px; height: 24px; }
  .home-page .home-hero .hero-meta { font-size: 14px; margin-top: 16px; }
  .home-page .hero-card { margin: -30px var(--gutter) 0; max-width: 560px; padding: 16px 20px; }
  .home-page .hero-card .hc-ic { width: 52px; height: 52px; }
  .home-page .hero-card .l1 { font-size: 17px; }
  .home-page .hero-card .l2 { font-size: 13.5px; }
  .home-page .section { padding: 34px var(--gutter) 0; }
  .home-page .section-title { font-size: 24px; }
  .home-page .section-link { font-size: 14px; }
  .home-page .cats { max-width: 620px; gap: 14px; }
  .home-page .cat-ic { max-width: 88px; border-radius: 20px; }
  .home-page .cat-name { font-size: 13px; margin-top: 9px; }
  .home-page .cards-row { grid-auto-columns: unset; grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .home-page .pcard { border-radius: 12px; }
  .home-page .pcard-body { padding: 12px 16px 14px; }
  .home-page .pcard-name { font-size: 16px; }
  .home-page .pcard-desc { min-height: 36px; font-size: 13px; }
  .home-page .pcard-price { font-size: 18px; margin-top: 8px; }
  .home-page .btn-add { padding: 8px; font-size: 12px; margin-top: 10px; }
  .home-page .fav { width: 36px; height: 36px; }
  .home-page .fav svg { width: 20px; height: 20px; }
  .home-page .pcard-tag { left: 10px; top: 10px; padding: 4px 9px; font-size: 10px; }
  .home-page .coupon-strip { max-width: 720px; margin: 30px var(--gutter) 6px; padding: 16px 20px; }
  .home-page .coupon-strip .t1 { font-size: 16px; }
  .home-page .coupon-strip .t2 { font-size: 13.5px; }
  .home-page .coupon-strip .use { padding: 12px 20px; font-size: 13px; }

  /* ---------- Cardápio ---------- */
  .menu-page .menu-hero { height: 352px; }
  .menu-page .menu-hero .hero-body { padding: 120px var(--gutter) 0; }
  .menu-page .menu-title { font-size: 54px; }
  .menu-page .menu-sub { font-size: 15px; }
  .menu-page .search { max-width: 560px; height: 50px; margin-top: 14px; padding: 12px 20px; }
  .menu-page .search input { font-size: 15px; }
  .menu-page .tabs { height: 44px; padding: 0 calc(var(--gutter) - 12px); justify-content: flex-start; }
  .menu-page .tab { flex: 0 0 auto; padding: 9px 22px 10px; font-size: 14px; }
  .menu-page .combo { max-width: 760px; margin: 22px var(--gutter) 0; padding: 18px 22px; gap: 20px; border-radius: 22px; }
  .menu-page .combo .cb-foto { width: 112px; height: 112px; border-radius: 18px; }
  .menu-page .combo .cb-tag { font-size: 11.5px; padding: 5px 12px; }
  .menu-page .combo .cb-nome { font-size: 21px; margin-top: 9px; }
  .menu-page .combo .cb-desc { font-size: 13px; }
  .menu-page .combo .cb-valor { font-size: 23px; }
  .menu-page .combo .cb-ver { padding: 9px 20px; font-size: 13px; margin-left: 0; }
  /* na tela grande o preço e o botão vão para a direita, ao lado do texto */
  .menu-page .combo .cb-txt {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'tag preco' 'nome preco' 'desc preco';
    align-items: center;
    column-gap: 26px;
  }
  .menu-page .combo .cb-tag { grid-area: tag; justify-self: start; }
  .menu-page .combo .cb-nome { grid-area: nome; }
  .menu-page .combo .cb-desc { grid-area: desc; }
  .menu-page .combo .cb-preco {
    grid-area: preco;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
    margin-top: 0;
  }
  .home-page .cats { grid-template-columns: repeat(6, 1fr); }
  .menu-page .chips { padding: 20px var(--gutter) 2px; gap: 12px; }
  .menu-page .chip { min-height: 44px; padding: 10px 20px; font-size: 12px; }
  .menu-page .section { padding: 22px var(--gutter) 0; }
  .menu-page .grid-2 { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .menu-page .pcard { border-radius: 12px; transition: transform 0.18s, box-shadow 0.18s; }
  .menu-page .pcard:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(20, 10, 5, 0.22); }
  .menu-page .pcard-body { padding: 12px 16px 14px; }
  .menu-page .pcard-name { font-size: 16px; }
  .menu-page .pcard-desc { min-height: 38px; font-size: 13px; }
  .menu-page .pcard-price { font-size: 18px; }
  .menu-page .btn-add { padding: 9px; font-size: 11.5px; }

  /* ---------- Produto ---------- */
  .product-page .product-hero,
  .product-page .product-img { height: 400px; }
  .product-page .badge-ponto { right: var(--gutter); }

  /* ---------- Reservas ---------- */
  .reservations-page .app.page-dark::before { height: 380px; }
  .reservations-page .res-hero { min-height: 380px; padding: 200px var(--gutter) 10px; }
  .reservations-page .res-title { font-size: 56px; }
  .reservations-page .res-sub { max-width: 340px; font-size: 16px; }
  .reservations-page .happy { top: 160px; right: var(--gutter); width: 240px; padding: 16px; }
  .reservations-page .happy .h1 { font-size: 18px; }
  .reservations-page .happy .h2 { font-size: 11px; }
  .reservations-page .happy .h3 { max-width: 160px; font-size: 12px; }
  .reservations-page .form { padding: 20px var(--gutter) 0; gap: 14px; }
  .reservations-page .f-label { font-size: 11.5px; }
  .reservations-page .f-input,
  .reservations-page .f-select,
  .reservations-page .f-textarea { min-height: 42px; padding: 10px 14px; font-size: 13.5px; }
  .reservations-page .f-textarea { min-height: 70px; }
  .reservations-page .time-chip { padding: 10px 14px; font-size: 12.5px; }
  .reservations-page .btn-confirm { padding: 14px; font-size: 19px; }
  .reservations-page .ambience { margin: 16px var(--gutter) 10px; min-height: 96px; padding: 18px 22px; }
  .reservations-page #minhas-reservas { padding: 6px var(--gutter) 0; }

  /* ---------- Pedidos ---------- */
}

@media (min-width: 1500px) {
  .home-page .cards-row,
  .menu-page .grid-2 { grid-template-columns: repeat(4, 1fr); }
}
/* telas bem largas: mais colunas em vez de cards gigantes */
@media (min-width: 1700px) {
  .home-page .app,
  .menu-page .app { --cmax: 1420px; }
  .home-page .cards-row,
  .menu-page .grid-2 { grid-template-columns: repeat(5, 1fr); }
}


/* ------------------------------------------------------------
   Menu lateral (drawer no celular, sidebar no desktop): fundo
   claro na mesma linguagem dos cartões, logo no topo, status de
   funcionamento em pílula, itens com ícone e o ativo em vermelho,
   idioma em seletor deslizante e contatos com ícones na base.
   ------------------------------------------------------------ */
.drawer { padding: 26px 18px 22px; overflow-y: auto; }

.d-brand { text-align: center; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.d-open {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(46, 204, 113, 0.12);
  color: #1f9d55;
  font-weight: 800;
  font-size: 12px;
}
.d-open.closed { background: rgba(230, 49, 34, 0.08); color: var(--red); }
.d-dot { width: 8px; height: 8px; border-radius: 50%; background: #2ecc71; }
.d-open.closed .d-dot { background: var(--red); }

.d-label {
  display: block;
  margin: 2px 12px -4px;
  font-weight: 900;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a39b94;
}

.drawer nav { margin-top: 20px; display: grid; gap: 4px; }
.drawer nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 15px;
  color: var(--ink);
  transition: background 0.15s, color 0.15s;
}
.drawer nav a svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--muted); transition: color 0.15s; }
.drawer nav a:hover { background: var(--light); }
.drawer nav a.active { background: rgba(230, 49, 34, 0.08); color: var(--red); }
.drawer nav a.active svg { color: var(--red); }

.d-bottom { margin-top: auto; display: grid; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }

/* horário, endereço e contatos num cartão só, para não ficarem soltos */
.d-card { display: grid; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--light); }
.d-row { display: flex; gap: 9px; align-items: flex-start; color: var(--muted); font-size: 12.5px; font-weight: 700; line-height: 1.45; }
.d-row svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; color: var(--red); }

/* seletor de idioma com as bandeiras */
.drawer .d-lang {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 3px;
  border-radius: 999px;
  background: var(--light);
}
.drawer .d-lang button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: none;
  padding: 9px 0;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12.5px;
  color: var(--muted);
  transition: background 0.15s, color 0.15s;
}
.drawer .d-lang button.on { background: var(--grad-fire); color: #fff; box-shadow: 0 4px 10px rgba(232, 37, 26, 0.25); }
.drawer .d-lang button svg {
  width: 21px;
  height: 14px;
  flex: 0 0 auto;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(20, 10, 5, 0.12);
}

.d-social { display: flex; justify-content: center; gap: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.d-soc {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  transition: transform 0.15s, box-shadow 0.15s;
}
.d-soc svg { width: 21px; height: 21px; }
.d-soc:hover { transform: translateY(-2px); }
.d-soc.wa { background: #25d366; box-shadow: 0 6px 14px rgba(37, 211, 102, 0.3); }
.d-soc.wa:hover { box-shadow: 0 9px 18px rgba(37, 211, 102, 0.4); }
.d-soc.ig { background: linear-gradient(45deg, #f9ce34 0%, #ee2a7b 52%, #6228d7 100%); box-shadow: 0 6px 14px rgba(238, 42, 123, 0.28); }
.d-soc.ig:hover { box-shadow: 0 9px 18px rgba(238, 42, 123, 0.38); }

/* ------------------------------------------------------------
   Topbar reorganizada: altura fixa com todos os elementos
   centralizados verticalmente, logo compacto, degradê para
   legibilidade sobre as fotos e fundo sólido ao rolar
   (classe topbar-solid adicionada via JS).
   ------------------------------------------------------------ */
.topbar {
  align-items: center;
  min-height: 64px;
  padding: 8px 16px 8px;
  background: linear-gradient(180deg, rgba(8, 5, 3, 0.82) 0%, rgba(8, 5, 3, 0.38) 68%, rgba(8, 5, 3, 0) 100%);
  transition: background 0.25s, box-shadow 0.25s;
}
body.topbar-solid .topbar {
  background: rgba(12, 8, 5, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 26px rgba(0, 0, 0, 0.35);
}

/* logo compacto, centralizado na altura da barra */
.brand,
.brand.small {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 0;
}
.brand .flame,
.brand.small .flame {
  font-size: 15px;
  height: auto;
  line-height: 1;
  margin-bottom: -3px;
}
.brand .name,
.brand.small .name { font-size: 30px; line-height: 0.9; letter-spacing: 0.03em; }
.brand .tag,
.brand.small .tag {
  margin-top: 3px;
  padding: 2px 10px;
  font-size: 6px;
  letter-spacing: 0.16em;
}

/* botões alinhados com a barra */
.burger, .icon-btn { width: 40px; height: 40px; }
.back-link { margin-top: 0 !important; }

@media (min-width: 1100px) {
  .topbar { min-height: 76px; padding: 10px var(--gutter); }
  .brand .name, .brand.small .name { font-size: 34px; }
  .brand .flame, .brand.small .flame { font-size: 17px; }
}




/* ------------------------------------------------------------
   Logo oficial (assets/img/logo.webp) no lugar da marca em texto
   ------------------------------------------------------------ */
.brand-logo {
  height: 64px;
  width: auto;
  display: block;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.55));
}
.brand .flame, .brand .name, .brand .tag { display: none; }

.d-logo-img {
  width: 132px;
  max-width: 78%;
  height: auto;
  margin: 0 auto;
  display: block;
  filter: drop-shadow(0 6px 14px rgba(20, 10, 5, 0.22));
}

@media (min-width: 1100px) {
  .brand-logo { height: 68px; }
  .d-logo-img { width: 150px; }
}
@media (max-width: 360px) {
  .brand-logo { height: 52px; }
}

/* a barra acompanha a altura da logo */
.topbar { min-height: 76px; }
@media (min-width: 1100px) { .topbar { min-height: 84px; } }
@media (max-width: 360px) { .topbar { min-height: 66px; } }

/* placeholders das novas categorias */
.ph-pizza { background: radial-gradient(120% 120% at 30% 20%, #d8912e 0%, #a2521a 55%, #57280c 100%); }
.ph-pizza::before { content: '🍕'; }
.ph-cocktail { background: radial-gradient(120% 120% at 30% 20%, #4a7c8c 0%, #2a4a5c 55%, #14242e 100%); }
.ph-cocktail::before { content: '🍹'; }

/* ------------------------------------------------------------
   Card do produto: botão "Comprar" + atalho para o carrinho
   ------------------------------------------------------------ */
.pcard-actions {
  display: flex;
  gap: 6px;
  align-items: stretch;
  margin-top: 10px;
}
.pcard-actions .btn-add {
  flex: 1;
  margin-top: 0;
  min-width: 0;
}
.pcard-actions .btn-add b { font-weight: 900; }
.pcard-actions .btn-cart {
  flex: 0 0 auto;
  width: 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1.6px solid var(--red);
  color: var(--red);
  background: #fff;
  transition: background 0.15s, color 0.15s;
}
.pcard-actions .btn-cart svg { width: 19px; height: 19px; }
.pcard-actions .btn-cart:hover { background: var(--red); color: #fff; }

/* na skin compacta do cardápio/início os controles acompanham a escala */
.home-page .pcard-actions, .menu-page .pcard-actions { gap: 5px; }
.home-page .pcard-actions .btn-cart { width: 30px; border-width: 1.2px; }
.home-page .pcard-actions .btn-cart svg { width: 15px; height: 15px; }
.menu-page .pcard-actions .btn-cart { width: 34px; }
.menu-page .pcard-actions .btn-cart svg { width: 17px; height: 17px; }
@media (min-width: 1100px) {
  .home-page .pcard-actions .btn-cart,
  .menu-page .pcard-actions .btn-cart { width: 42px; }
  .home-page .pcard-actions .btn-cart svg,
  .menu-page .pcard-actions .btn-cart svg { width: 20px; height: 20px; }
}

/* ------------------------------------------------------------
   Animações do carrinho
   ------------------------------------------------------------ */
/* ícone do topo balança quando algo entra no carrinho */
@keyframes cart-bump {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.22) rotate(-8deg); }
  55%  { transform: scale(0.94) rotate(5deg); }
  75%  { transform: scale(1.08) rotate(-2deg); }
  100% { transform: scale(1); }
}
.icon-btn.bump { animation: cart-bump 0.55s ease; border-color: var(--orange); }

/* número do carrinho dá um "pop" ao mudar */
@keyframes badge-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.55); }
  100% { transform: scale(1); }
}
.cart-badge.pop { animation: badge-pop 0.45s cubic-bezier(.3,1.4,.5,1); }

/* botão de carrinho do card responde ao toque */
@keyframes cart-btn-press {
  0%   { transform: scale(1); }
  45%  { transform: scale(0.82); }
  100% { transform: scale(1); }
}
.pcard-actions .btn-cart.clicked {
  animation: cart-btn-press 0.26s ease;
  background: var(--red);
  color: #fff;
}
.pcard-actions .btn-cart:active { transform: scale(0.9); }

/* a foto do produto voa até o carrinho ao ser adicionada */
.fly-cart {
  position: fixed;
  z-index: 200;
  border-radius: 14px;
  background-size: cover;
  background-position: center;
  background-color: var(--red);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  transition: transform 0.6s cubic-bezier(.5,-0.2,.7,1), opacity 0.6s ease;
}

/* botão "Comprar" é um link: mantém a aparência de botão */
a.btn-add {
  display: grid;
  place-items: center;
  text-decoration: none;
}

/* preço de cada variante (ex.: tipos de chopp) */
.opt .opt-price {
  margin-left: 6px;
  font-weight: 900;
  font-size: 0.86em;
  color: var(--red);
}
.opt.selected .opt-price { color: var(--red); }

/* "a partir de" nos itens com variantes de preço */
.pcard-price .from {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.62em;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-transform: none;
  line-height: 1.1;
}

/* ============================================================
   TRANSIÇÕES ENTRE PÁGINAS
   Usa a View Transitions API (Chrome, Edge e Safari recentes):
   o conteúdo faz crossfade com leve subida enquanto a navegação
   e a barra lateral permanecem paradas, como num app nativo.
   Navegadores sem suporte usam o fallback logo abaixo.
   ============================================================ */
@view-transition { navigation: auto; }

@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

::view-transition-old(root) { animation: vt-fade-out 0.18s ease both; }
::view-transition-new(root) { animation: vt-fade-in-up 0.34s cubic-bezier(.2,.7,.3,1) both; }

/* elementos de moldura não participam do crossfade: ficam firmes */
.bottom-nav { view-transition-name: aldea-nav; }
.drawer { view-transition-name: aldea-sidebar; }
::view-transition-group(aldea-nav),
::view-transition-group(aldea-sidebar) { animation-duration: 0.001s; }

/* a foto do prato cresce do card para a página do produto */
.product-page .product-img img { view-transition-name: aldea-foto; }
::view-transition-group(aldea-foto) { animation-duration: 0.42s; }
::view-transition-old(aldea-foto),
::view-transition-new(aldea-foto) { animation: none; mix-blend-mode: normal; }

/* Fallback: navegadores sem View Transitions ganham fade na entrada
   e saída (a classe page-leaving é aplicada pelo app.js) */
@supports not (view-transition-name: none) {
  @keyframes page-enter {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
  .app { animation: page-enter 0.3s ease both; }
  body.page-leaving .app { opacity: 0; transition: opacity 0.16s ease; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  .app { animation: none !important; }
}

/* A descrição fica presa em duas linhas. O -webkit-box precisa estar
   dentro de um invólucro: como filho direto do .pcard-body (flex) ele
   era "blockificado" e o corte deixava aparecer um terceiro renglão
   pela metade. O preço é que empurra o rodapé para baixo. */
.pcard-descwrap { flex: 0 0 auto; }
.pcard-price,
.home-page .pcard-price,
.menu-page .pcard-price { margin-top: auto; padding-top: 4px; }

/* ------------------------------------------------------------
   Cards: mais foto, menos texto.
   A descrição ocupava até quatro linhas e empurrava a foto para
   uma faixa estreita. Agora ela é cortada em duas linhas (com
   reticências) e, no desktop, a foto passa a 4/3 — bem mais alta.
   ------------------------------------------------------------ */
.pcard-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 1100px) {
  .home-page .pcard-body,
  .menu-page .pcard-body { padding: 12px 16px 14px; gap: 2px; }
  .home-page .pcard-desc,
  .menu-page .pcard-desc { min-height: 33px; font-size: 12.5px; line-height: 1.3; }
  .home-page .pcard-price,
  .menu-page .pcard-price { margin-top: 6px; }
}

/* ------------------------------------------------------------
   Fotos recortadas em fundo branco (garrafa, copo, hambúrguer).
   Com object-fit: cover a garrafa era cortada em cima e embaixo —
   aqui a imagem inteira aparece sobre o branco da própria foto.
   Quem recebe isso é definido por Aldea.FOTO_CLARA, no app.js.
   ------------------------------------------------------------ */
.pcard[data-foto="clara"] .pcard-img { background: #fff; }
.pcard[data-foto="clara"] .pcard-img img {
  object-fit: contain;
  padding: 4px;
  background: #fff;          /* cobre o placeholder colorido nas laterais */
}

.product-img[data-foto="clara"] { background: #fff; }
.product-img[data-foto="clara"] img {
  object-fit: contain;
  object-position: center 54%;
  padding: 10px 0 6px;
  background: #fff;          /* cobre o placeholder colorido atrás */
}

/* Altura de exatamente duas linhas na descrição do card.
   Com min-height maior que isso, o Chrome desenha uma terceira
   linha cortada por baixo das reticências; em "em" a caixa
   acompanha o tamanho da fonte em qualquer breakpoint. */
.home-page .pcard-desc,
.menu-page .pcard-desc {
  line-height: 1.32;
  min-height: 2.64em;
  max-height: 2.64em;
}

/* Topo da página do produto quando a foto tem fundo branco.
   A faixa escura do herói sujava o branco e os botões de contorno
   claro sumiam; aqui o degradê e os botões viram claros. */
body.foto-clara .product-img::after { background: none; }
/* a barra do topo troca o degradê escuro por um claro */
body.foto-clara .topbar {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.6) 62%, rgba(255, 255, 255, 0) 100%);
}
/* ao rolar, a barra volta a ser sólida e escura — os botões acompanham */
body.foto-clara.topbar-solid .topbar { background: rgba(12, 8, 5, 0.95); }
body.foto-clara.topbar-solid .product-hero .icon-btn {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
  background: transparent;
  box-shadow: none;
}
body.foto-clara .product-hero .icon-btn {
  color: #171310;
  border-color: rgba(23, 19, 16, 0.14);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 18px rgba(20, 10, 5, 0.16);
}
body.foto-clara .product-hero .icon-btn:hover { background: #fff; }

/* ------------------------------------------------------------
   Abas do cardápio: indicador que desliza de uma categoria para a
   outra, e produtos entrando em cascata na troca.
   ------------------------------------------------------------ */
.tab-ind {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--red);
  pointer-events: none;
  opacity: 0;
}
.tabs.ind-ready .tab-ind {
  transition: transform 0.32s cubic-bezier(0.3, 0.8, 0.3, 1), width 0.32s cubic-bezier(0.3, 0.8, 0.3, 1), opacity 0.2s;
}
.tabs.has-ind .tab { transition: color 0.2s; }
.tabs.has-ind .tab.active { border-bottom-color: transparent; }

@keyframes grid-swap {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
#menu-grid.swap > .pcard { animation: grid-swap 0.36s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
#menu-grid.swap > .pcard:nth-child(2) { animation-delay: 0.04s; }
#menu-grid.swap > .pcard:nth-child(3) { animation-delay: 0.08s; }
#menu-grid.swap > .pcard:nth-child(4) { animation-delay: 0.12s; }
#menu-grid.swap > .pcard:nth-child(5) { animation-delay: 0.16s; }
#menu-grid.swap > .pcard:nth-child(6) { animation-delay: 0.2s; }
#menu-grid.swap > .pcard:nth-child(n+7) { animation-delay: 0.24s; }

/* ------------------------------------------------------------
   Página do produto: barra com o voltar, a logo no meio e o
   carrinho no canto, como nas outras telas.
   ------------------------------------------------------------ */
.product-page .topbar .top-actions { width: 40px; flex: 0 0 auto; }
.brand.bump .brand-logo { animation: cart-bump 0.55s ease; }

/* chips de filtro do cardápio com ícones em SVG (chama sólida, etiqueta,
   casa e sliders) no lugar dos emojis */
.chip svg { width: 16px; height: 16px; flex: 0 0 auto; }
.chip[data-filter="popular"] svg { color: var(--red); }
.menu-page .chip { gap: 6px; }
@media (min-width: 1100px) { .chip svg { width: 18px; height: 18px; } }

/* promoção: preço de tabela riscado ao lado do preço atual e selo no card */
.pcard-price .old,
.product-price .old {
  color: #a39b94;
  font-weight: 700;
  font-size: 0.72em;
  text-decoration: line-through;
  margin-right: 2px;
}
.pcard-tag {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 2;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--grad-fire);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  box-shadow: 0 4px 10px rgba(232, 37, 26, 0.3);
}

/* preço de tabela + promocional lado a lado; em card estreito o
   riscado vai para a linha de cima em vez de partir o número */
.pcard-price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 5px; }
.pcard-price .old { margin-right: 0; }

/* em telas bem estreitas o link da área de entrega sai da linha de
   status (a seção existe logo abaixo) para nada sobrepor o cartão */
@media (max-width: 360px) {
  .home-hero .hero-meta .sep, .home-hero .hero-meta a { display: none; }
}

/* categorias do início com os ícones 3D enviados (pastilha branca já
   vem na imagem; o quadro só recorta os cantos e marca o ativo) */
.cat-ic { padding: 0; border: none; background: transparent; overflow: hidden; border-radius: 22%; }
.cat-ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat.active .cat-ic { background: transparent; box-shadow: 0 0 0 2px var(--red); }
.cat .cat-ic { transition: transform 0.15s, box-shadow 0.15s; }

/* clique nas categorias do início: o quadro encolhe, volta com balanço
   e ganha o anel vermelho enquanto o ícone dá um pulo; a navegação
   espera a animação terminar (index.html) */
@keyframes cat-pop {
  0% { transform: scale(1) rotate(0); }
  30% { transform: scale(0.84) rotate(-5deg); }
  65% { transform: scale(1.14) rotate(3deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes cat-jump {
  0%, 100% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-16%) scale(1.1); }
}
.cat.clicked .cat-ic {
  animation: cat-pop 0.3s cubic-bezier(0.3, 1.3, 0.5, 1) both;
  box-shadow: 0 0 0 2px var(--red), 0 12px 22px rgba(232, 37, 26, 0.28);
}
.cat.clicked .cat-ic img { animation: cat-jump 0.3s ease both; }
.cat.clicked .cat-name { color: var(--red); }
.cat-name { transition: color 0.15s; }

/* atalho discreto para o painel de gestão, no rodapé do menu lateral */
.drawer .d-admin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
  color: #a39b94;
  font-size: 12px;
  font-weight: 700;
}
.drawer .d-admin svg { width: 14px; height: 14px; }
.drawer .d-admin:hover { color: var(--ink); }

/* ------------------------------------------------------------
   Troca de idioma: a bandeira escolhida toma a tela, a página
   recarrega traduzida e o conteúdo entra com um fade.
   ------------------------------------------------------------ */
.lang-splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: rgba(12, 8, 5, 0.94);
  opacity: 0;
  transition: opacity 0.24s ease;
}
.lang-splash.on { opacity: 1; }
.ls-box { text-align: center; animation: ls-pop 0.42s cubic-bezier(0.2, 1.2, 0.4, 1) both; }
.ls-flag {
  width: 108px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.55);
}
.ls-flag svg { display: block; width: 100%; height: auto; }
.ls-txt { margin-top: 14px; color: #fff; font-weight: 900; font-size: 15px; letter-spacing: 0.03em; }
@keyframes ls-pop {
  from { transform: scale(0.5) rotate(-10deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* só o conteúdo da página anima com escala: a barra inferior e o menu
   lateral usam transform para se posicionar (centralizar / ficar fora da
   tela), então neles a animação é apenas de opacidade */
html.lang-in .app { animation: lang-enter 0.44s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
html.lang-in .bottom-nav { animation: lang-fade 0.44s ease both; }
@keyframes lang-enter {
  from { opacity: 0; transform: scale(0.99); }
  to { opacity: 1; transform: none; }
}
@keyframes lang-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html.lang-in .app, html.lang-in .bottom-nav { animation: none; }
}

/* Todos os cards com o mesmo quadro quadrado — com proporções diferentes por
   categoria, as fileiras ficavam desalinhadas (bebida alta ao lado de porção
   baixa). A categoria decide só se a foto preenche ou aparece inteira. */
.home-page .pcard-img,
.menu-page .pcard-img { aspect-ratio: 1 / 1; }

/* Pedidos no desktop: mesma largura confortável do carrinho */
@media (min-width: 1100px) {
  .orders-page .page-title-row { padding: 24px var(--gutter) 16px; }
  .orders-page .order-card { margin: 0 var(--gutter) 12px; max-width: 760px; }
}


/* ============================================================
   INÍCIO — versão do mockup (celular)
   Herói com a foto por trás, título em Anton, frases à mão em
   Caveat, busca sobreposta, pílula de status, cartão do almoço com
   foto, seis categorias numa fila e cards com botão vermelho.
   ============================================================ */
/* o fundo é a <img> da arte; aqui fica só o escuro que aparece enquanto ela carrega */
.home-hero { position: relative; overflow: hidden; padding: 0; background: #0b0908; }
.home-hero::after { display: none; }
.home-hero .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0 50%; z-index: 0; }
/* com a arte pronta: sombra mais leve, texto em HTML escondido (fica só
   para leitores de tela e tradução), o herói inteiro leva ao cardápio */
/* com a arte pronta o herói assume a proporção dela: nada de corte, as
   escritas ficam onde foram desenhadas */
.home-hero.com-arte { height: auto; aspect-ratio: 1536 / 1024; }
.home-hero.com-arte .hero-bg { object-fit: cover; object-position: 50% 50%; }
.home-hero.com-arte .hero-shade { background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 82%, rgba(11,9,8,.7) 96%, #0b0908 100%); }
/* as duas frases à mão já vêm na arte */
.home-hero.com-arte .hero-kicker, .home-hero.com-arte .hero-script { display: none; }
.home-hero.com-arte .hero-dots { bottom: 36px; }
/* faixa escura que continua o herói atrás da busca e do status */
.hero-apron { position: relative; z-index: 1; padding-bottom: 0; background: linear-gradient(180deg, #0b0908 0%, #13100e 58%, #241d19 100%); }
.home-hero.com-arte .hero-body { visibility: hidden; }
.home-hero .hero-link { display: none; position: absolute; inset: 0; z-index: 2; }
.home-hero.com-arte .hero-link { display: block; }
.home-hero .hero-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4,3,3,.94) 0%, rgba(4,3,3,.78) 34%, rgba(4,3,3,.22) 62%, rgba(4,3,3,.06) 100%),
    linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,.1) 62%, rgba(11,9,8,.82) 92%, #0b0908 100%);
}
.home-hero .topbar { position: relative; z-index: 3; }
.home-hero .hero-body { position: relative; z-index: 2; }

/* "Muito mais que hambúrgueres", no canto alto direito */
/* no início as frases à mão são reserva: só aparecem se a arte não carregar
   (sem isso a fonte Caveat, de 50KB, era baixada em toda visita) */
.home-page .hero-kicker, .home-page .hero-script { display: none; }
.home-page .home-hero.sem-arte .hero-kicker, .home-page .home-hero.sem-arte .hero-script { display: block; }
.hero-kicker {
  position: absolute; z-index: 3; top: 82px; right: 12px; width: 128px;
  font-family: var(--font-hand); font-weight: 700; font-size: 18px; line-height: .92;
  color: var(--red); text-align: center; transform: rotate(-9deg);
  text-shadow: 0 1px 4px rgba(0,0,0,.95), 0 0 14px rgba(0,0,0,.9);
}
.hero-kicker svg { display: block; width: 100px; height: 7px; margin: 3px auto 0; color: var(--red); }

/* título: Anton, "verdade" em vermelho com o traço de pincel embaixo */
.home-hero .hero-title {
  position: relative; display: block; margin: 0; font-family: var(--font-display); font-weight: 400;
  letter-spacing: .01em; text-transform: uppercase; line-height: .9; text-shadow: 0 3px 14px rgba(0,0,0,.7);
}
.home-hero .hero-title .l1, .home-hero .hero-title .l2 { display: block; }
.home-hero .hero-title .l2 { color: var(--red); }
.home-hero .hero-title .hot { color: var(--red); }
.home-hero .hero-title .brush { display: block; height: 9px; color: var(--red); margin-top: 3px; }
.hero-casa { margin-top: 12px; font-weight: 600; font-size: 12px; letter-spacing: .34em; text-transform: uppercase; color: #fff; }
.home-hero .hero-sub { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-weight: 700; font-size: 9.5px; letter-spacing: .16em; color: rgba(255,255,255,.9); white-space: nowrap; }
.home-hero .hero-sub i { width: 4px; height: 4px; border-radius: 50%; background: var(--red); flex: 0 0 auto; }
.btn-pedir {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 11px 26px; border-radius: 999px;
  background: var(--red); color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(230,49,34,.4); transition: transform .15s;
}
.btn-pedir b { font-weight: 900; font-size: 16px; line-height: 1; }
.btn-pedir:active { transform: scale(.97); }
.hero-dots { position: absolute; z-index: 3; left: 0; right: 0; bottom: 42px; display: flex; justify-content: center; gap: 7px; }
.hero-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.45); }
.hero-dots i.on { background: var(--red); }
.hero-script {
  position: absolute; z-index: 3; right: 16px; bottom: 52px; width: 92px; text-align: center;
  font-family: var(--font-hand); font-weight: 700; font-size: 16px; line-height: .95; color: #f3c98b;
  transform: rotate(-7deg); text-shadow: 0 1px 6px rgba(0,0,0,.7);
}

/* busca sobreposta à base do herói */
.home-search {
  position: relative; z-index: 4; display: flex; align-items: center; gap: 10px;
  margin: -18px 16px 0; height: 40px; padding: 0 14px; border-radius: 999px; background: #fff;
  color: var(--muted); font-weight: 600; font-size: 13px; box-shadow: 0 8px 20px rgba(20,10,5,.2);
}
.home-search svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--ink); }
.home-search span { flex: 1; }
.home-search .sl { color: var(--ink); }

/* pílula preta de status */
.status-pill {
  display: flex; align-items: center; gap: 6px; margin: 9px 16px 0; height: 32px; padding: 0 12px;
  border-radius: 999px; background: #100d0c; color: #fff; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; min-width: 0;
}
.status-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; flex: 0 0 auto; box-shadow: 0 0 0 3px rgba(34,197,94,.22); }
.status-pill b { font-weight: 800; }
.status-pill .ate { color: rgba(255,255,255,.82); margin-left: 2px; }
.status-pill #status-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.status-pill .sep { color: rgba(255,255,255,.28); margin: 0 5px; }
.status-pill svg { width: 17px; height: 17px; flex: 0 0 auto; }
.status-pill a, .status-pill .ver-area { display: inline-flex; align-items: center; gap: 3px; color: #fff; text-decoration: none; flex: 0 0 auto;
  background: none; border: none; padding: 0; font: inherit; cursor: pointer; }
.status-pill a b, .status-pill .ver-area b { font-size: 14px; line-height: 1; }

/* cartão do almoço com a foto entrando pela direita */
.home-page .hero-card.lunch {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; margin: 12px 14px 0; padding: 12px;
  min-height: 84px; border-radius: 16px; background: #fff; border: none; box-shadow: 0 8px 22px rgba(20,10,5,.1); overflow: hidden;
}
.home-page .hero-card.lunch .hc-ic { width: 54px; height: 54px; border-radius: 12px; background: var(--red); color: #fff; display: grid; place-items: center; flex: 0 0 auto; box-shadow: 0 6px 14px rgba(230,49,34,.35); }
.home-page .hero-card.lunch .hc-ic svg { width: 28px; height: 28px; }
.home-page .hero-card.lunch .hc-txt { position: relative; z-index: 1; min-width: 0; }
.home-page .hero-card.lunch .l1 { font-weight: 900; font-size: 16px; color: var(--ink); }
.home-page .hero-card.lunch .l2 { margin-top: 2px; font-weight: 600; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.home-page .hero-card.lunch .hc-foto { position: absolute; top: 0; right: 0; bottom: 0; width: 33%; z-index: 0; }
.home-page .hero-card.lunch .hc-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 62%); mask-image: linear-gradient(90deg, transparent 0%, #000 62%); }

/* títulos das seções, maiores como no mockup */
.home-page .section { padding: 22px 16px 0; }
.home-page .section-head { margin-bottom: 12px; align-items: baseline; }
.home-page .section-title { font-size: 24px; letter-spacing: -.02em; }
.home-page .section-link { font-size: 14px; }

/* seis categorias numa fila só */
.home-page .cats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.home-page .cat { min-width: 0; }
.home-page .cat-ic { max-width: none; width: 100%; border-radius: 14px; border: 1.5px solid #e6e1dc; background: #fff; box-shadow: 0 4px 12px rgba(20,10,5,.06); }
.home-page .cat.active .cat-ic { border-color: var(--red); background: #fff; box-shadow: 0 0 0 1px var(--red), 0 4px 12px rgba(230,49,34,.18); }
.home-page .cat-name { margin: 7px -8px 0; font-size: 9px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }

/* cards de "Mais pedidos": foto quadrada, coração escuro, botão vermelho cheio */
/* três por vez no celular, mas sem esticar: em tela maior o card mantém
   o tamanho e aparece mais um espiando, mostrando que a fila corre */
.home-page .cards-row { grid-auto-columns: min(calc((100% - 20px) / 3), 124px); gap: 10px; padding: 4px 0 10px; }
.home-page .hcard { border-radius: 14px; background: #fff; box-shadow: 0 6px 18px rgba(20,10,5,.1); overflow: hidden; scroll-snap-align: start; }
.home-page .hcard .hcard-img { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--light); }
.home-page .hcard .hcard-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-page .hcard[data-foto="clara"] .hcard-img { background: #fff; }
.home-page .hcard[data-foto="clara"] .hcard-img img { object-fit: contain; padding: 4px; background: #fff; }
.home-page .hcard .fav { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; background: rgba(15,10,8,.62); color: #fff; display: grid; place-items: center; border: none; }
.home-page .hcard .fav svg { width: 15px; height: 15px; }
.home-page .hcard .fav.on { color: var(--red); background: #fff; }
/* corpo em coluna: o rodapé (preço + botão) desce para a base e todos
   ficam alinhados, mesmo quando um nome ocupa duas linhas */
.home-page .hcard { display: flex; flex-direction: column; }
.home-page .hcard-body { display: flex; flex-direction: column; flex: 1; padding: 8px 8px 9px; }
.home-page .hcard-foot { display: flex; flex-direction: column; margin-top: auto; }
.home-page .hcard .pcard-name { margin: 0; font-size: 12px; font-weight: 900; line-height: 1.15; white-space: normal; overflow: visible; }
.home-page .hcard .pcard-desc { margin-top: 3px; font-size: 10px; line-height: 1.3; color: var(--muted); min-height: 26px; }
.home-page .hcard .pcard-price { margin-top: 6px; font-family: var(--font-body); font-weight: 900; font-size: 13.5px; color: var(--red); }
.home-page .hcard .pcard-price .from { font-size: 8.5px; color: var(--muted); font-weight: 700; display: block; }
.home-page .btn-add-red, .btn-add-red {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 7px; padding: 8px 8px; border-radius: 999px;
  background: var(--red); color: #fff; font-weight: 900; font-size: 9px; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap; box-shadow: 0 5px 12px rgba(230,49,34,.3); transition: transform .12s;
}
.home-page .btn-add-red b, .btn-add-red b { font-size: 12px; line-height: 1; }
.home-page .btn-add-red:active, .btn-add-red:active { transform: scale(.97); }

/* alturas do herói: celular estreito até o largo */
@media (max-width: 1099px) {
  .home-hero { height: 440px; }
  .home-hero .hero-body { padding: 96px 16px 0; max-width: 240px; }
  .home-hero .hero-title .l1 { font-size: 34px; }
  .home-hero .hero-title .l2 { font-size: 44px; margin-top: 2px; }
  .home-hero .hero-title .brush { width: 165px; }
}
@media (max-width: 360px) {
  .status-pill { font-size: 11.5px; gap: 6px; padding: 0 12px; }
  .status-pill svg { width: 18px; height: 18px; }
  .home-hero .hero-title .l1 { font-size: 30px; }
  .home-hero .hero-title .l2 { font-size: 39px; }
  .hero-kicker { width: 112px; font-size: 16px; }
  .home-page .cat-name { font-size: 8.5px; }
}
/* no computador o herói do mockup vira uma faixa larga, sem as frases soltas em cima da foto */
@media (min-width: 1100px) {
  .home-hero { height: 420px; }
  /* no computador a faixa é mais larga que a arte: aí sim ela é cortada
     em cima e embaixo, mantendo o miolo */
  .home-hero.com-arte { height: 560px; aspect-ratio: auto; }
  .home-hero .hero-bg { object-position: 50% 50%; }
  /* na tela grande a busca fica embaixo da arte, sem tapar o botão dela */
  .home-hero.com-arte + .hero-apron .home-search,
  .hero-apron .home-search { margin-top: 14px; }
  .hero-apron { padding-bottom: 18px; background: #0b0908; }
  .home-hero .hero-body { padding: 130px var(--gutter) 0; max-width: 560px; }
  .home-hero .hero-title .l1 { font-size: 56px; }
  .home-hero .hero-title .l2 { font-size: 72px; }
  .home-hero .hero-title .brush { width: 280px; height: 12px; }
  .hero-casa { font-size: 15px; }
  .home-hero .hero-sub { font-size: 12px; }
  .hero-kicker { top: 100px; right: calc(var(--gutter) + 40px); width: 180px; font-size: 26px; }
  .hero-script { right: calc(var(--gutter) + 40px); bottom: 50px; width: 130px; font-size: 22px; }
  .home-search { max-width: 640px; margin: -26px var(--gutter) 0; }
  .status-pill { display: inline-flex; margin: 16px var(--gutter) 0; }
  .home-page .hero-card.lunch { max-width: 640px; margin: 16px var(--gutter) 0; }
  .home-page .cats { grid-template-columns: repeat(6, 92px); gap: 16px; }
  .home-page .cat-name { font-size: 12px; }
  /* no computador a fila vira grade: mais colunas em vez de cards gigantes */
  .home-page .cards-row { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); grid-auto-columns: auto; gap: 16px; }
  .home-page .hcard .pcard-name { font-size: 15px; }
  .home-page .hcard .pcard-desc { font-size: 12px; }
  .home-page .hcard .pcard-price { font-size: 17px; }
  .home-page .btn-add-red { font-size: 12px; padding: 10px 14px; gap: 12px; }
}


/* ============================================================
   INÍCIO NO COMPUTADOR — versão do modelo
   Sem menu lateral fixo: cabeçalho por cima do herói (logo, links,
   endereço, status, conta e carrinho), título em texto sobre a arte
   limpa, barra branca com busca e avisos, seis categorias em faixa e
   cinco cards por linha com preço e botão lado a lado.
   ============================================================ */
.dk-nav, .dk-bar { display: none; }
/* a barra do computador é montada pelo app.js em todas as telas */
@media (min-width: 1100px) {
  .topbar { display: none; }
  .dk-nav {
    display: flex; align-items: flex-start; gap: 28px; position: absolute; z-index: 6; top: 0; left: 0; right: 0;
    padding: 10px var(--gutter) 0;
  }
  .dk-status.fechado i { background: var(--red); box-shadow: 0 0 0 3px rgba(230,49,34,.22); }
}

@media (min-width: 1100px) {
  /* a gaveta desliza por cima, como no celular */
  .drawer {
    position: fixed; top: 0; bottom: 0; height: auto; width: 300px; max-width: 80vw; border-right: none;
    transform: translateX(-105%); transition: transform .28s ease; box-shadow: 20px 0 60px rgba(0,0,0,.28);
  }
  body.drawer-open .drawer { transform: translateX(0); }

  /* cabeçalho por cima do herói */
    .dk-logo img { height: 108px; width: auto; display: block; filter: drop-shadow(0 4px 12px rgba(0,0,0,.6)); }
  .dk-links { display: flex; align-items: center; gap: clamp(22px, 2.4vw, 36px); margin: 26px 0 0 clamp(24px, 4vw, 60px); white-space: nowrap; }
  .dk-links a, .dk-links button {
    position: relative; color: #fff; font: inherit; font-weight: 700; font-size: 15px; background: none; border: none;
    padding: 0 0 8px; cursor: pointer; text-decoration: none; text-shadow: 0 1px 4px rgba(0,0,0,.5);
  }
  .dk-links a:hover, .dk-links button:hover { color: #ffd6d1; }
  .dk-links .on { color: var(--red); }
  .dk-links .on::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px; background: var(--red); }
  .dk-right { margin-left: auto; margin-top: 12px; display: flex; align-items: center; gap: 14px; }
  .dk-status {
    display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px; border-radius: 14px; white-space: nowrap;
    background: #0f0d0c; border: 1px solid rgba(255,255,255,.14); color: #fff;
  }
  .dk-status i { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.2); }
  .dk-status b { display: block; font-size: 13px; font-weight: 800; line-height: 1.15; }
  .dk-status small { display: block; font-size: 11px; opacity: .8; }
  .dk-icon {
    position: relative; z-index: 1; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.75);
    display: grid; place-items: center; color: #fff; background: rgba(0,0,0,.25); cursor: pointer; text-decoration: none;
  }
  .dk-icon svg { width: 22px; height: 22px; }
  .dk-icon .cart-badge { top: -5px; right: -5px; }

  /* herói: a arte larga enviada, inteira, na proporção dela. O título, as
     frases à mão e o botão já vêm desenhados; o topo escuro da arte é onde
     o cabeçalho se apoia. */
  /* a arte entra inteira; em tela muito larga ela para de crescer e o
     corte fica no topo e na base, longe do título e do botão */
  /* width: 100% é obrigatório aqui: com proporção e teto de altura juntos,
     o navegador encolhe a largura para manter a proporção e sobra faixa
     branca do lado. Assim a capa ocupa a tela toda e a foto é que corta.

     O teto acompanha a largura da tela (30vw + a altura do cabeçalho). Um
     teto fixo cortava demais do topo em tela muito larga e o título da arte
     acabava embaixo do cabeçalho. O título começa a 300/899 da altura da
     arte: esta conta deixa sempre a barra inteira acima dele. */
  .home-page .home-hero.com-arte {
    width: 100%; height: auto; aspect-ratio: 2172 / 899; max-height: calc(30vw + 140px);
  }
  .home-page .home-hero { height: clamp(420px, 29.3vw, 560px); aspect-ratio: auto; }
  .home-page .home-hero .hero-bg { object-position: 50% 42%; }
  /* o corte tira só do topo, que é a faixa escura: assim o botão desenhado
     na arte nunca fica cortado embaixo */
  .home-page .home-hero.com-arte .hero-bg { object-position: 50% 100%; }
  .home-page .home-hero .hero-shade {
    background:
      linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.3) 32%, rgba(0,0,0,0) 58%),
      linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0) 80%, rgba(0,0,0,.35) 100%);
  }
  /* com a arte, só um véu leve no topo para o cabeçalho aparecer */
  .home-page .home-hero.com-arte .hero-shade {
    background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 22%);
  }
  .home-page .home-hero .hero-link { display: none; }
  .home-page .home-hero.com-arte .hero-link { display: block; }
  /* o que a arte já traz desenhado não se repete em texto */
  .home-page .home-hero.com-arte .hero-body,
  .home-page .home-hero.com-arte .hero-kicker,
  .home-page .home-hero.com-arte .hero-dots { display: none; }
  .home-page .home-hero .hero-body { position: absolute; left: calc(var(--gutter) + 92px); top: 108px; padding: 0; max-width: 520px; }
  .home-page .home-hero .hero-title .l1 { font-size: 60px; }
  .home-page .home-hero .hero-title .l2 { font-size: 78px; margin-top: 0; }
  .home-page .home-hero .hero-title .brush { width: 370px; height: 14px; margin-top: 2px; }
  .home-page .hero-casa { margin-top: 8px; font-size: 22px; letter-spacing: .4em; }
  .home-page .home-hero .hero-sub { margin-top: 14px; font-size: 13px; letter-spacing: .22em; gap: 12px; }
  .home-page .home-hero .hero-sub i { width: 5px; height: 5px; }
  .home-page .btn-pedir { margin-top: 20px; height: 46px; padding: 0 40px; font-size: 15px; letter-spacing: .04em; }
  /* a frase à mão em texto é só para quando a arte não carrega */
  .home-page .hero-kicker {
    left: 45.5%; right: auto; top: 160px; width: 200px; font-size: 29px; transform: rotate(-8deg); text-align: left;
  }
  .home-page .hero-kicker svg { width: 150px; margin: 4px 0 0; }
  .home-page .hero-dots { left: 47.5%; right: auto; bottom: 70px; justify-content: flex-start; gap: 8px; }
  .home-page .hero-dots i { width: 9px; height: 9px; }
  .home-page .home-hero .hero-script { display: none; }

  /* o que é só do celular sai da tela */
  .home-page .hero-apron, .home-page .hero-card.lunch { display: none; }

  /* barra branca: busca à esquerda, avisos à direita */
  .home-page .dk-bar {
    display: flex; align-items: center; position: relative; z-index: 4; margin: -27px var(--gutter) 0; height: 54px;
    background: #fff; border-radius: 999px; box-shadow: 0 10px 30px rgba(20,10,5,.18); padding: 0 8px 0 26px;
  }
  .dk-search { flex: 1 1 36%; min-width: 0; display: flex; align-items: center; gap: 12px; height: 100%; color: var(--muted); font-weight: 600; font-size: 15px; text-decoration: none; }
  .dk-search svg { width: 22px; height: 22px; color: var(--ink); flex: 0 0 auto; }
  .dk-info { flex: 0 0 auto; display: flex; align-items: center; height: 100%; }
  .dk-item { display: flex; align-items: center; gap: 12px; height: 32px; padding: 0 clamp(14px, 1.6vw, 24px); border-left: 1px solid #e6e1dc; }
  .dk-item b { display: block; font-size: 14px; font-weight: 800; color: var(--ink); line-height: 1.15; white-space: nowrap; }
  .dk-item small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
  .dk-item svg { width: 26px; height: 26px; color: var(--ink); flex: 0 0 auto; }
  .dk-item .dot { width: 11px; height: 11px; border-radius: 50%; background: #22c55e; flex: 0 0 auto; }
  .dk-more { margin-left: 4px; width: 40px; height: 40px; display: grid; place-items: center; color: var(--ink); font-size: 30px; line-height: 1; text-decoration: none; }

  /* seções */
  .home-page .section { padding: 26px var(--gutter) 0; }
  .home-page .section-head { margin-bottom: 14px; }
  .home-page .section-title { font-size: 25px; }
  .home-page .section-link { font-size: 15px; }

  /* categorias em faixa: seis retângulos brancos, ícone no meio, nome embaixo */
  .home-page .cats { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px; max-width: none; }
  .home-page .cat-ic {
    width: 100%; max-width: none; aspect-ratio: auto; height: 100px; border-radius: 14px; overflow: hidden;
    background: #fff; border: 1.5px solid #e6e1dc; box-shadow: 0 4px 12px rgba(20,10,5,.05); display: grid; place-items: center;
  }
  .home-page .cat-ic img { width: 92px; height: 92px; object-fit: contain; }
  .home-page .cat.active .cat-ic { background: #fff1f0; border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
  .home-page .cat:hover .cat-ic { border-color: #d9d3cd; box-shadow: 0 8px 18px rgba(20,10,5,.12); }
  .home-page .cat-name { margin: 10px 0 0; font-size: 13px; letter-spacing: 0; white-space: nowrap; }

  /* cinco cards por linha, foto deitada, preço e botão lado a lado */
  .home-page .cards-row { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; padding-bottom: 12px; }
  .home-page .hcard { border-radius: 12px; }
  .home-page .hcard .hcard-img { aspect-ratio: 2.05 / 1; }
  .home-page .hcard[data-foto="clara"] .hcard-img img { padding: 2px; }
  .home-page .hcard .fav { top: 10px; right: 10px; width: 32px; height: 32px; }
  .home-page .hcard .fav svg { width: 18px; height: 18px; }
  .home-page .hcard-body { padding: 12px 14px 14px; }
  .home-page .hcard .pcard-name { font-size: 15px; }
  .home-page .hcard .pcard-desc { margin-top: 4px; font-size: 12px; min-height: 32px; }
  .home-page .hcard-foot { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; margin-top: 12px; }
  .home-page .hcard .pcard-price { margin: 0; font-size: 15px; white-space: nowrap; }
  /* sem preço: o aviso vira texto simples para caber ao lado do botão */
  .home-page .hcard .pcard-price .sob-consulta { background: none; padding: 0; font-size: 12px; font-weight: 700; }
  .home-page .hcard .btn-add-red { margin: 0; width: auto; max-width: 100%; padding: 9px 13px; font-size: 10.5px; gap: 7px; flex: 0 0 auto; }
  /* uma fileira só, como no modelo: o resto fica em 'Ver todos' */
  .home-page .cards-row .hcard:nth-child(n+6) { display: none; }
}
/* entre 1100 e 1300px cabem quatro cards com preço e botão lado a lado */
@media (min-width: 1100px) and (max-width: 1299px) {
  .home-page .cards-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .home-page .cards-row .hcard:nth-child(n+5) { display: none; }
}
/* na tela larga a barra branca é como no modelo: busca fixa à esquerda e
   os três avisos espalhados até a seta */
@media (min-width: 1300px) {
  .dk-search { flex: 0 0 44%; }
  .dk-info { flex: 1; justify-content: space-between; padding-right: 8px; }
  .dk-item { border-left: none; padding: 0; }
  .dk-item + .dk-item { border-left: 1px solid #e6e1dc; padding-left: 22px; }
  .dk-item:first-child { border-left: 1px solid #e6e1dc; padding-left: 26px; }
  .dk-more { margin-left: 0; }
}
/* nas telas largas continua em cinco: o card nunca fica estreito demais
   para o preço e o botão lado a lado */
@media (min-width: 1500px) {
  .home-page .cards-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}


/* ============================================================
   CARDÁPIO NO COMPUTADOR — coluna de categorias à esquerda,
   barra escura de filtros com "Ordenar por" e grade de cinco.
   ============================================================ */
.mp-side, .mp-head, .mp-sort, .chip-todos { display: none; }
.mp-layout { display: contents; }

@media (min-width: 1100px) {

  /* herói mais baixo: o título e a busca, sem as abas */
  /* na tela grande vale a foto maior, com o mesmo recorte do celular */
  .menu-page .menu-hero {
    height: 300px;
    background:
      linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.15) 40%, rgba(0,0,0,.55)),
      url('../img/picanha-brasa.webp?v=2') 66% center / cover no-repeat;
  }
  .menu-page .menu-hero .hero-body { padding: 104px var(--gutter) 0; }
  .menu-page .menu-title { font-size: 46px; }
  .menu-page .search { max-width: none; height: 58px; border-radius: 999px; margin-top: 18px; box-shadow: 0 10px 30px rgba(20,10,5,.25); }
  .menu-page .tabs { display: none; }

  /* duas colunas */
  .mp-layout {
    display: grid; grid-template-columns: 250px minmax(0, 1fr); align-items: start; gap: 26px;
    padding: 0 var(--gutter); margin-top: -18px; position: relative; z-index: 3;
  }
  .mp-main { min-width: 0; }
  .mp-main .chips, .mp-main .section, .mp-main .subcats { padding-left: 0; padding-right: 0; }
  .mp-main .combo { margin-left: 0; margin-right: 0; }

  /* coluna: cartão branco com as categorias */
  .mp-side { display: block; position: sticky; top: 18px; }
  .mp-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px 14px; box-shadow: 0 10px 30px rgba(20,10,5,.08); }
  .mp-side-title { font-weight: 900; font-size: 19px; color: var(--ink); padding: 0 8px 12px; }
  .mp-cat {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: none; border-radius: 12px;
    background: none; color: var(--ink); font: inherit; font-weight: 700; font-size: 14.5px; text-align: left; cursor: pointer;
    position: relative; transition: background .15s, color .15s;
  }
  .mp-cat:hover { background: var(--light); }
  .mp-cat.active { background: #fff1f0; color: var(--red); }
  .mp-cat.active::before { content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 4px; border-radius: 0 3px 3px 0; background: var(--red); }
  .mp-cat-ic { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; }
  .mp-cat-ic img { width: 100%; height: 100%; object-fit: contain; }
  .mp-ic-ph { width: 22px; height: 22px; border-radius: 7px; display: block; }
  .mp-ic-todas { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--light); color: var(--muted); }
  .mp-ic-todas svg { width: 16px; height: 16px; }
  .mp-cat.active .mp-ic-todas { background: #fff; color: var(--red); }
  .mp-head-ic .mp-ic-todas { width: 44px; height: 44px; border-radius: 12px; }
  .mp-head-ic .mp-ic-todas svg { width: 24px; height: 24px; }

  /* cartão escuro do fim da coluna */
  .mp-promo {
    display: block; margin-top: 16px; padding: 20px 18px 18px; border-radius: 18px; position: relative; overflow: hidden;
    background: #17110e url('../img/picanha-brasa.webp?v=2') center / cover no-repeat; color: #fff; text-decoration: none;
    box-shadow: 0 10px 30px rgba(20,10,5,.18);
  }
  .mp-promo::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,7,6,.78), rgba(10,7,6,.5)); }
  .mp-promo-txt { position: relative; font-family: var(--font-hand); font-weight: 700; font-size: 28px; line-height: 1; color: #f3c98b; }
  .mp-promo-btn {
    position: relative; display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 9px 16px;
    border-radius: 999px; border: 1.5px solid rgba(255,255,255,.85); font-weight: 800; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  }
  .mp-promo:hover .mp-promo-btn { background: var(--red); border-color: var(--red); }

  /* barra escura dos filtros */
  .menu-page .chips {
    display: flex; align-items: center; gap: 10px; background: #17120f; border-radius: 16px; padding: 12px 16px; margin-bottom: 18px;
    overflow: visible;
  }
  .chip-todos { display: inline-flex; }
  .menu-page .chip {
    min-height: 38px; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.06); color: #fff; font-size: 12.5px; font-weight: 700;
  }
  .menu-page .chip:hover { background: rgba(255,255,255,.14); }
  .menu-page .chip.active { background: var(--red); border-color: var(--red); color: #fff; }
  .menu-page .chip svg { color: currentColor; }
  .mp-sort { display: flex; align-items: center; gap: 10px; margin-left: auto; color: rgba(255,255,255,.75); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
  .mp-sort::before { content: ''; width: 1px; height: 26px; background: rgba(255,255,255,.18); margin-right: 4px; }
  .mp-sort select {
    height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.08); color: #fff; font: inherit; font-weight: 700; font-size: 12.5px; cursor: pointer;
  }
  .mp-sort select option { color: var(--ink); }

  /* título da seção */
  .mp-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
  .mp-head-ic { width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center; }
  .mp-head-ic img { width: 100%; height: 100%; object-fit: contain; }
  .mp-head-txt { min-width: 0; }
  .mp-head h2 { margin: 0; font-weight: 900; font-size: 30px; letter-spacing: -.02em; color: var(--ink); }
  .mp-head p { margin: 2px 0 0; font-size: 13.5px; color: var(--muted); }
  .mp-head-n { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }

  /* grade de cinco, com o botão vermelho cheio */
  .menu-page .grid-2 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
  .menu-page .section { padding-top: 0; }
  .menu-page .pcard { border-radius: 14px; box-shadow: 0 6px 18px rgba(20,10,5,.1); }
  .menu-page .pcard-img { aspect-ratio: 1.35 / 1; }
  .menu-page .pcard .fav { width: 34px; height: 34px; background: #fff; color: var(--ink); border: none; box-shadow: 0 3px 10px rgba(20,10,5,.2); }
  .menu-page .pcard .fav svg { width: 18px; height: 18px; }
  .menu-page .pcard .fav.on { color: var(--red); }
  .menu-page .pcard-body { padding: 12px 14px 14px; }
  .menu-page .pcard-name { font-size: 14.5px; }
  .menu-page .pcard-desc { font-size: 12px; }
  .menu-page .pcard-price { font-size: 17px; margin-top: 6px; }
  .menu-page .pcard .btn-add {
    display: flex; align-items: center; justify-content: center; gap: 10px; padding: 11px; border: none; border-radius: 999px;
    background: var(--red); color: #fff; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase;
    box-shadow: 0 6px 14px rgba(230,49,34,.3);
  }
  .menu-page .pcard .btn-add b { font-size: 15px; line-height: 1; }
  .menu-page .pcard .btn-add:hover { background: #cf2a1d; }
  /* no computador o card do cardápio tem um botão só, como no modelo */
  .menu-page .pcard-actions .btn-cart { display: none; }
}
@media (min-width: 1500px) { .menu-page .grid-2 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1700px) { .menu-page .grid-2 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }


/* ============================================================
   CONTATO — capa com a arte, quatro cartões, mapa, formulário
   que vai pelo WhatsApp, dúvidas frequentes e faixa final.
   ============================================================ */
.contact-page { background: var(--light); }
.ct-hero { position: relative; overflow: hidden; height: 300px; background: #0b0908; }
.ct-hero::after { display: none; }
.ct-hero .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; }
.ct-hero .hero-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(6,4,4,.92) 0%, rgba(6,4,4,.72) 42%, rgba(6,4,4,.25) 72%, rgba(6,4,4,.12) 100%),
    linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.45) 100%);
}
.ct-hero .topbar, .ct-hero .hero-body { position: relative; z-index: 3; }
.ct-hero .hero-body { padding: 16px 16px 0; }
.ct-title { margin: 0; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: .9; letter-spacing: .01em; text-shadow: 0 3px 14px rgba(0,0,0,.65); }
.ct-title .l1 { display: block; color: #fff; font-size: 38px; }
.ct-title .l2 { display: block; color: var(--red); font-size: 46px; }
.ct-sub { margin-top: 12px; color: #fff; font-weight: 600; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; line-height: 1.9; }
.ct-hero .hero-kicker { top: 96px; }
.ct-selo {
  position: absolute; z-index: 3; right: 14px; bottom: 18px; text-align: right; color: #fff;
  font-family: var(--font-display); font-weight: 400; font-size: 17px; line-height: 1.05; text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0,0,0,.75);
}
.ct-coracao { display: block; margin-top: 4px; color: var(--red); font-size: 15px; }

/* cartões */
/* no celular os quatro cartões ficam dois por linha: o ícone sobe para o
   topo e o texto encolhe um pouco, senão não caberia na coluna estreita */
.ct-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 16px; margin-top: -24px; position: relative; z-index: 4; }
.ct-card {
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start; background: #fff; border-radius: 16px; padding: 14px;
  box-shadow: 0 8px 24px rgba(20,10,5,.1); color: inherit; text-decoration: none;
}
/* plaquinha discreta com o ícone de traço: o círculo vermelho chapado com
   o desenho branco dentro deixava a página com cara de modelo pronto */
.ct-ic {
  width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center;
  background: #fdf1ef; border: 1px solid #f6d9d4; color: var(--red);
}
.ct-ic.verde { background: #eefaf2; border-color: #cdeedb; color: #12a150; }
.ct-ic svg { width: 21px; height: 21px; }
.ct-txt { min-width: 0; width: 100%; }
.ct-lbl { display: block; font-weight: 800; font-size: 12.5px; color: var(--muted); }
.ct-val { display: block; margin-top: 2px; font-weight: 900; font-size: 15px; line-height: 1.2; color: var(--ink); }
.ct-obs { display: block; margin-top: 4px; font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.ct-obs.azul { color: #2563eb; }
.ct-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; padding: 8px 12px; border-radius: 999px;
  border: 1.6px solid var(--red); color: var(--red); font-weight: 900; font-size: 10px; letter-spacing: .03em; text-transform: uppercase;
  white-space: nowrap; max-width: 100%;
}
.ct-btn:hover { background: var(--red); color: #fff; }
/* celular bem estreito: dois por linha espremeria o botão do WhatsApp para
   fora do cartão, então lá eles voltam a ficar um embaixo do outro */
@media (max-width: 369px) {
  .ct-cards { grid-template-columns: 1fr; gap: 12px; }
  .ct-card { flex-direction: row; gap: 12px; }
  .ct-ic { width: 44px; height: 44px; }
  .ct-ic svg { width: 22px; height: 22px; }
  .ct-val { font-size: 17px; }
  .ct-btn { font-size: 11px; padding: 8px 16px; }
}

/* mapa, formulário e dúvidas */
.ct-meio { display: grid; gap: 14px; padding: 4px 16px 16px; }
.ct-mapa {
  position: relative; display: block; min-height: 240px; border-radius: 16px; overflow: hidden;
  background: #2f2b28 url('../img/restaurante-interior-cel.webp') center / cover no-repeat;
  box-shadow: 0 8px 24px rgba(20,10,5,.12);
}
.ct-mapa::before { content: ''; position: absolute; inset: 0; background: rgba(18,14,12,.55); }
.ct-pin { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); width: 46px; height: 46px; color: var(--red); filter: drop-shadow(0 6px 14px rgba(0,0,0,.5)); }
.ct-pin svg { width: 100%; height: 100%; }
.ct-balao {
  position: absolute; left: 50%; top: 52%; transform: translateX(-50%); min-width: 190px; max-width: 88%;
  background: #17120f; color: #fff; border-radius: 12px; padding: 10px 14px; font-size: 12px; line-height: 1.45; text-align: center;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.ct-balao b { display: block; font-size: 13.5px; }
/* o mapa cobre a foto quando carrega */
.contact-page .ct-mapa { background-image: url('../img/restaurante-interior-cel.webp'); }
.ct-mapa iframe { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.ct-mapa-btn {
  position: absolute; z-index: 2; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px;
  background: var(--red); color: #fff; font-size: 11px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap; box-shadow: 0 8px 20px rgba(20,10,5,.35);
}
.ct-mapa-btn svg { width: 16px; height: 16px; }
.ct-mapa-btn b { font-size: 13px; }
.ct-mapa-btn:hover { background: #cf2a1d; }
.d-mapa { text-decoration: none; color: inherit; }
.d-mapa:hover span { color: var(--red); }
.ct-form, .ct-lado { background: #fff; border-radius: 16px; padding: 18px 16px; box-shadow: 0 8px 24px rgba(20,10,5,.1); }
.ct-form h2, .ct-lado h2 { margin: 0; font-weight: 900; font-size: 19px; color: var(--ink); }
.ct-form-sub { margin: 4px 0 14px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.ct-form label { display: block; margin-bottom: 12px; font-weight: 700; font-size: 12.5px; color: var(--ink); position: relative; }
.ct-form label i { color: var(--red); font-style: normal; }
.ct-form input, .ct-form textarea {
  display: block; width: 100%; margin-top: 6px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px;
  background: #fbfaf9; font: inherit; font-size: 14px; font-weight: 500; color: var(--ink);
}
.ct-form textarea { min-height: 110px; resize: vertical; }
.ct-form input:focus, .ct-form textarea:focus { outline: none; border-color: var(--red); background: #fff; }
.ct-linha { display: grid; gap: 0; }
.ct-conta { position: absolute; right: 8px; bottom: 8px; font-size: 11px; font-weight: 600; color: var(--muted); }
.ct-enviar {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 14px; border: none; border-radius: 999px;
  background: var(--red); color: #fff; font: inherit; font-weight: 900; font-size: 13px; letter-spacing: .05em; text-transform: uppercase;
  cursor: pointer; box-shadow: 0 8px 20px rgba(230,49,34,.32);
}
.ct-enviar svg { width: 18px; height: 18px; }
.ct-enviar:hover { background: #cf2a1d; }
.ct-aviso { margin: 10px 0 0; font-size: 12.5px; font-weight: 700; color: var(--red); }
.ct-faq { margin-top: 12px; display: grid; gap: 8px; }
.ct-item { border: 1.5px solid var(--line); border-radius: 12px; background: #fbfaf9; }
.ct-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; cursor: pointer;
  font-weight: 700; font-size: 13px; color: var(--ink); list-style: none;
}
.ct-item summary::-webkit-details-marker { display: none; }
.ct-seta { color: var(--muted); font-size: 15px; transition: transform .2s; }
.ct-item[open] { border-color: var(--red); background: #fff; }
.ct-item[open] .ct-seta { transform: rotate(180deg); color: var(--red); }
.ct-item p { margin: 0; padding: 0 14px 14px; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.ct-redes-t { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.ct-redes { display: flex; gap: 12px; margin-top: 12px; }
.ct-rede { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.ct-rede svg { width: 22px; height: 22px; }
.ct-rede.ig { background: linear-gradient(45deg, #f9ce34, #ee2a7b 45%, #6228d7); }
.ct-rede.wa { background: #22c55e; }

/* faixa final */
.ct-faixa {
  position: relative; display: grid; gap: 14px; margin: 4px 16px 20px; padding: 18px; border-radius: 16px; overflow: hidden;
  background: #17110e url('../img/picanha-brasa-cel.webp') right center / cover no-repeat; color: #fff;
}
.ct-faixa::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,7,6,.94), rgba(10,7,6,.78) 60%, rgba(10,7,6,.5)); }
.ct-faixa-it { position: relative; display: flex; align-items: center; gap: 12px; }
.ct-faixa-it svg { width: 34px; height: 34px; flex: 0 0 auto; color: var(--red); }
.ct-faixa-it b { display: block; font-weight: 900; font-size: 13px; line-height: 1.25; text-transform: uppercase; letter-spacing: .02em; }
.ct-faixa-it small { display: block; margin-top: 2px; font-size: 12px; color: rgba(255,255,255,.7); }
.ct-faixa-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; justify-self: start;
  padding: 12px 24px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 900; font-size: 12px;
  letter-spacing: .05em; text-transform: uppercase;
}
.ct-faixa-btn:hover { background: var(--red); color: #fff; }
.ct-faixa-hand { position: relative; font-family: var(--font-hand); font-weight: 700; font-size: 22px; line-height: 1; color: #f3c98b; }

@media (min-width: 1100px) {
  .contact-page .app { background: var(--light); }

  .ct-hero { height: 380px; }
  .ct-hero .hero-body { position: absolute; left: calc(var(--gutter) + 92px); top: 120px; padding: 0; max-width: 620px; }
  .ct-title .l1 { font-size: 58px; }
  .ct-title .l2 { font-size: 72px; }
  .ct-sub { margin-top: 16px; font-size: 14px; letter-spacing: .3em; }
  .ct-hero .hero-kicker { display: block; left: 60%; right: auto; top: 150px; width: 190px; font-size: 26px; text-align: left; }
  .ct-selo { right: var(--gutter); bottom: 60px; font-size: 30px; line-height: 1.06; }
  .ct-coracao { font-size: 22px; }

  .ct-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 0 var(--gutter); margin-top: -46px; }
  .ct-card { flex-direction: row; gap: 14px; padding: 20px; border-radius: 18px; }
  .ct-ic { width: 48px; height: 48px; }
  .ct-ic svg { width: 24px; height: 24px; }
  .ct-lbl { font-size: 14px; }
  .ct-val { font-size: 19px; }
  .ct-obs { font-size: 12.5px; }
  .ct-btn { font-size: 11px; padding: 8px 16px; }
  .ct-meio { grid-template-columns: 1fr 1.15fr 1fr; align-items: start; gap: 18px; padding: 20px var(--gutter) 0; }
  .ct-mapa { min-height: 340px; }
  .ct-form, .ct-lado { padding: 22px; border-radius: 18px; }
  .ct-linha { grid-template-columns: 1fr 1fr; gap: 14px; }
  .ct-faixa {
    grid-template-columns: auto auto 1fr auto; align-items: center; gap: 30px; margin: 22px var(--gutter) 30px; padding: 22px 28px;
  }
  .ct-faixa-it + .ct-faixa-it { padding-left: 30px; border-left: 1px solid rgba(255,255,255,.18); }
  .ct-faixa-btn { justify-self: start; }
  .ct-faixa-hand { justify-self: end; font-size: 26px; text-align: right; }
}


/* nas telas sem capa grande (carrinho, pedidos, produto) a barra do
   computador vira uma faixa escura normal, com a logo menor */
@media (min-width: 1100px) {
  .cart-page .dk-nav, .orders-page .dk-nav, .product-page .dk-nav {
    align-items: center; height: 88px; padding-top: 0;
  }
  .cart-page .dk-logo img, .orders-page .dk-logo img, .product-page .dk-logo img { height: 62px; }
  .cart-page .dk-links, .orders-page .dk-links, .product-page .dk-links,
  .cart-page .dk-right, .orders-page .dk-right, .product-page .dk-right { margin-top: 0; }
  .cart-page .cart-head, .orders-page .cart-head { height: 88px; }
  /* no produto a faixa é sólida: as fotos de fundo branco ficavam com uma
     mancha cinza quando a faixa era só um degradê */
  .product-page .dk-nav { background: #0f0a08; }
  .product-page .product-hero, .product-page .product-img { height: 460px; }
  .product-page .product-img { padding-top: 88px; box-sizing: border-box; }
  .product-page .topbar { display: none; }
}