/* ============================================================
   CONFRARIA DA CARNE — Página de Cardápio (QR / mobile-first)
   herda tokens de ../styles.css
   ============================================================ */
.menu-page{background:var(--char);min-height:100svh}
.menu-page .wrapm{max-width:760px;margin:0 auto;padding:0 18px}

/* subtle embers behind hero */
.mp-hero{position:relative;overflow:hidden;text-align:center;padding:26px 18px 30px;border-bottom:1px solid var(--line)}
.mp-hero-embers{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.7}
.mp-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% -10%,rgba(232,134,46,.16),transparent 55%);z-index:0;pointer-events:none}
.mp-hero-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.mp-back{position:absolute;left:0;top:2px;z-index:3;display:inline-flex;align-items:center;gap:6px;font-family:"Oswald";text-transform:uppercase;letter-spacing:.1em;font-size:.68rem;color:var(--cream-mute);border:1px solid var(--line);border-radius:30px;padding:.5em .8em;background:rgba(0,0,0,.25);transition:.25s}
.mp-back:hover{color:var(--cream);border-color:var(--line-strong)}
.mp-back svg{width:13px;height:13px}
.mp-logo{height:88px;width:auto;margin-bottom:6px;filter:drop-shadow(0 8px 24px rgba(0,0,0,.5))}
.mp-eyebrow{font-family:"Oswald";text-transform:uppercase;letter-spacing:.32em;font-size:.7rem;color:var(--ember-2);font-weight:600}
.mp-title{font-family:"Anton";text-transform:uppercase;font-size:clamp(2.6rem,12vw,3.6rem);line-height:.92;margin:6px 0 4px;letter-spacing:.01em}
.mp-title .fire{background:linear-gradient(180deg,#ffd27a,var(--ember) 55%,var(--red-soft));-webkit-background-clip:text;background-clip:text;color:transparent}
.mp-sub{font-family:"Oswald";text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;color:var(--cream-dim)}
.mp-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;margin-top:14px}
.mp-meta span{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:var(--cream-dim)}
.mp-meta svg{width:14px;height:14px;color:var(--ember-2)}
.mp-open{display:inline-flex;align-items:center;gap:7px;font-family:"Oswald";text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;color:var(--ember-2);border:1px solid rgba(232,134,46,.4);background:rgba(232,134,46,.08);border-radius:30px;padding:.45em .9em;margin-top:14px}
.mp-open .dot{width:7px;height:7px;border-radius:50%;background:var(--ember);box-shadow:0 0 0 0 rgba(232,134,46,.6);animation:mpPulse 2s infinite}
.mp-open.closed{color:var(--cream-mute);border-color:var(--line);background:rgba(0,0,0,.2)}
.mp-open.closed .dot{background:var(--cream-mute);animation:none}
@keyframes mpPulse{0%{box-shadow:0 0 0 0 rgba(232,134,46,.5)}70%{box-shadow:0 0 0 7px rgba(232,134,46,0)}100%{box-shadow:0 0 0 0 rgba(232,134,46,0)}}

/* sticky category nav (scroll-spy) */
.mp-nav{position:sticky;top:0;z-index:40;background:rgba(18,13,9,.92);backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--line)}
.mp-nav-scroll{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:11px 18px;max-width:760px;margin:0 auto;-webkit-overflow-scrolling:touch}
.mp-nav-scroll::-webkit-scrollbar{display:none}
.mp-chip{flex:none;font-family:"Oswald";text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;font-weight:500;color:var(--cream-dim);padding:.5em 1em;border:1px solid var(--line);border-radius:30px;background:transparent;cursor:pointer;white-space:nowrap;transition:.22s;scroll-snap-align:start}
.mp-chip:hover{color:var(--cream);border-color:var(--line-strong)}
.mp-chip.active{background:var(--ember);color:#1a1006;border-color:var(--ember);font-weight:600}

/* main */
.mp-main{padding:28px 0 60px}
.mp-section{scroll-margin-top:64px;margin-bottom:40px}
.mp-sec-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.mp-sec-head .ic{width:38px;height:38px;flex:none;border:1px solid var(--ember);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ember-2)}
.mp-sec-head .ic svg{width:20px;height:20px}
.mp-sec-head h2{font-family:"Oswald";text-transform:uppercase;letter-spacing:.02em;font-weight:600;font-size:1.7rem;line-height:1}
.mp-sec-head .gf{font-family:"Oswald";font-size:.58rem;letter-spacing:.12em;background:var(--red-deep);color:var(--cream);padding:.35em .7em;border-radius:30px;font-weight:600;align-self:center}
.mp-sec-note{font-family:"Oswald";text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;color:var(--ember-2);margin:-8px 0 14px;padding-left:50px}

/* destaque (photo) cards */
.mp-destaques{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.mp-dish{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--surface);min-height:190px;display:flex;flex-direction:column;justify-content:flex-end}
.mp-dish img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .6s var(--ease)}
.mp-dish:active img{transform:scale(1.04)}
.mp-dish::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,12,8,.05) 30%,rgba(18,12,8,.55) 60%,rgba(12,8,5,.93));z-index:1}
.mp-dish-body{position:relative;z-index:2;padding:14px}
.mp-dish .tag{display:inline-block;font-family:"Oswald";text-transform:uppercase;letter-spacing:.12em;font-size:.58rem;color:#1a1006;background:var(--ember-2);padding:.3em .6em;border-radius:20px;margin-bottom:7px;font-weight:600}
.mp-dish h3{font-family:"Oswald";text-transform:uppercase;letter-spacing:.02em;font-weight:600;font-size:1.18rem;line-height:1.05}
.mp-dish .d{font-size:.78rem;color:var(--cream-dim);margin-top:2px;line-height:1.35}
.mp-dish .pr{font-family:"Oswald";font-weight:600;color:var(--ember-2);font-size:1.05rem;margin-top:7px}

/* simple list card */
.mp-card{background:linear-gradient(170deg,var(--surface),var(--char-3));border:1px solid var(--line);border-radius:12px;padding:8px 18px}
.mp-row{display:flex;align-items:baseline;gap:10px;padding:14px 0;border-bottom:1px solid rgba(244,235,221,.07)}
.mp-row:last-child{border-bottom:0}
.mp-row .nm{font-weight:500;color:var(--cream);font-size:1rem}
.mp-row .nm small{display:block;color:var(--cream-mute);font-size:.8rem;font-weight:400;margin-top:1px}
.mp-row .dots{flex:1;border-bottom:1px dotted rgba(244,235,221,.22);transform:translateY(-4px);min-width:14px}
.mp-row .pr{font-family:"Oswald";font-weight:600;color:var(--ember-2);font-size:1.05rem;white-space:nowrap}
.mp-row.sig .nm{color:#fff}
.mp-row.sig .pr{color:var(--red)}
.mp-star{color:var(--red);font-size:.72em;margin-left:5px;vertical-align:middle}
.mp-twoprice{font-family:"Oswald";font-weight:600;color:var(--ember-2);font-size:.96rem;white-space:nowrap}
.mp-twoprice .sep{color:var(--cream-mute);font-weight:400;margin:0 5px}

/* price table (cuts) */
.mp-table{background:linear-gradient(170deg,var(--surface),var(--char-3));border:1px solid var(--line);border-radius:12px;padding:6px 18px 12px;overflow:hidden}
.mp-thead{display:grid;gap:8px;font-family:"Oswald";text-transform:uppercase;letter-spacing:.06em;font-size:.64rem;color:var(--cream-mute);padding:12px 0 8px;border-bottom:1px solid var(--line)}
.mp-trow{display:grid;gap:8px;padding:13px 0;border-bottom:1px solid rgba(244,235,221,.07);align-items:center}
.mp-trow:last-child{border-bottom:0}
.mp-thead .c,.mp-trow .c{text-align:right;font-family:"Oswald";font-weight:600;color:var(--ember-2)}
.mp-thead .c{color:var(--cream-mute);font-weight:600}
.mp-trow .nm{font-weight:500;color:var(--cream)}
.cols2{grid-template-columns:1fr 60px 60px}
.cols3{grid-template-columns:1fr 52px 52px 52px}
.mp-trow.sig .nm{color:#fff}
.mp-trow.sig .c{color:var(--red)}
.mp-accomp{margin-top:14px;padding:14px 16px;background:rgba(0,0,0,.24);border:1px solid var(--line);border-radius:10px}
.mp-accomp .t{font-family:"Oswald";text-transform:uppercase;letter-spacing:.14em;font-size:.68rem;color:var(--ember-2);margin-bottom:6px}
.mp-accomp p{color:var(--cream-dim);font-size:.84rem;line-height:1.55;text-wrap:pretty}

/* section banner image */
.mp-banner{position:relative;height:120px;border-radius:12px;overflow:hidden;margin-bottom:14px;border:1px solid var(--line)}
.mp-banner img{width:100%;height:100%;object-fit:cover}
.mp-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,8,5,.82),rgba(12,8,5,.25))}
.mp-banner .cap{position:absolute;left:16px;bottom:12px;z-index:2;font-family:"Oswald";text-transform:uppercase;letter-spacing:.04em;font-weight:600;font-size:1.05rem;color:#fff}

/* footer CTA */
.mp-foot{text-align:center;padding:34px 18px 120px;border-top:1px solid var(--line);position:relative}
.mp-foot h3{font-family:"Oswald";text-transform:uppercase;letter-spacing:.02em;font-size:1.5rem;font-weight:600}
.mp-foot p{color:var(--cream-dim);font-size:.92rem;margin:8px auto 18px;max-width:42ch}
.mp-foot .addr{font-size:.84rem;color:var(--cream-mute);margin-top:18px;line-height:1.6}
.mp-foot .addr a{color:var(--ember-2)}
.mp-note{text-align:center;color:var(--cream-mute);font-size:.8rem;font-style:italic;margin-top:22px}

/* reuse .btn from styles.css; small helpers */
.mp-actions{display:flex;flex-direction:column;gap:10px;max-width:340px;margin:0 auto}
.mp-actions .btn{width:100%;justify-content:center}

/* desktop niceties */
@media(min-width:680px){
  .mp-logo{height:104px}
  .mp-destaques{grid-template-columns:repeat(4,1fr)}
  .mp-dish{min-height:230px}
  .cols2{grid-template-columns:1fr 80px 80px}
  .cols3{grid-template-columns:1fr 70px 70px 70px}
}

/* ---- mobile polish ---- */
.mp-chip,.mp-back,.mp-dish,.mp-foot .btn{-webkit-tap-highlight-color:transparent}
/* notch / safe areas */
.mp-nav-scroll{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
.menu-page .fab{bottom:max(16px,env(safe-area-inset-bottom))}
.mp-foot{padding-bottom:max(120px,calc(96px + env(safe-area-inset-bottom)))}

/* very small phones */
@media(max-width:360px){
  .mp-destaques{gap:10px}
  .mp-dish{min-height:172px}
  .mp-dish h3{font-size:1.06rem}
  .cols3{grid-template-columns:1fr 46px 46px 46px}
  .mp-sec-head h2{font-size:1.5rem}
  .mp-row .nm,.mp-trow .nm{font-size:.95rem}
}