:root {
    --bg:#141312; --bg2:#1A1817; --surface:#1D1A18; --line:rgba(245,237,233,.13);
    --text:#F5EDE9; --muted:#A79E98; --strong:#fff;
    --gold:#F7B500; --goldtext:#F7B500; --red:#E8132B; --onred:#fff;
    --m1:rgba(247,181,0,.26); --m2:rgba(232,19,43,.20); --m3:rgba(255,122,0,.14);
    --radius:18px; --shadow:0 30px 60px rgba(0,0,0,.55); --maxw:1140px;
  }
  * { box-sizing:border-box }
  body { margin:0; background:var(--bg); color:var(--text); font-size:17px; line-height:1.62;
    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased }
  a { color:inherit; text-decoration:none }
  h1,h2,h3 { margin:0; line-height:1.06; letter-spacing:-.034em; color:var(--strong); text-wrap:balance }
  p { margin:0 }
  :focus-visible { outline:2px solid var(--gold); outline-offset:3px }
  @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important}
    .rv{opacity:1!important;transform:none!important} }
  .wrap { max-width:var(--maxw); margin:0 auto; padding:0 24px }

  /* wordmark inline, alinhada à altura do texto */
  .lk { display:inline-block; height:.78em; vertical-align:-.04em; margin:0 .06em }
  .lk svg { height:100%; width:auto; display:block }

    padding:10px 18px; background:var(--bg2); border-bottom:1px solid var(--line); font-size:13px }
    background:var(--gold); color:#141312; padding:4px 9px; border-radius:99px }
    border:1px solid var(--line); padding:6px 13px; border-radius:99px; cursor:pointer }

  .mesh { position:relative; overflow:hidden }
  .mesh::before { content:""; position:absolute; inset:-25% -10% auto -10%; height:170%;
    background:
      radial-gradient(46% 40% at 18% 20%, var(--m1), transparent 62%),
      radial-gradient(44% 38% at 84% 18%, var(--m2), transparent 60%),
      radial-gradient(54% 44% at 58% 86%, var(--m3), transparent 66%);
    filter:blur(14px); pointer-events:none }
  .grain::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E") }
  .mesh > * { position:relative; z-index:1 }

  .head { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 0 }
  .head .brand svg { display:block; height:30px; width:auto }
  .nav { display:flex; gap:20px; align-items:center; font-size:14.5px; color:var(--muted) }
  @media (max-width:900px){ .nav a:not(.btn){display:none} }
  .btn { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 20px;
    border-radius:13px; font-weight:700; font-size:15px; border:1px solid transparent; cursor:pointer }
  .btn--primary{background:var(--red);color:var(--onred)} .btn--gold{background:var(--gold);color:#141312}
  .btn--ghost{border-color:var(--line);color:var(--text)} .btn--sm{min-height:40px;padding:0 16px;font-size:14px}
  .btn:hover{filter:brightness(1.07)}

  /* ---------- celular ---------- */
  .phone { --sc:.47917; position:relative; border:10px solid #2A2624; border-radius:36px; background:#0E0D0C;
    box-shadow:var(--shadow); overflow:hidden; aspect-ratio:9/18.5; width:250px }
  .phone--sm { --sc:.3625; width:190px; border-width:8px; border-radius:28px }
  .scr { position:absolute; inset:0; padding:18px 14px; display:flex; flex-direction:column; gap:9px;
    background:#0E0D0C; opacity:0; transform:translateY(10px); transition:opacity .45s, transform .45s }
  .scr.on { opacity:1; transform:none }
  .phone--static .scr { position:relative; opacity:1; transform:none; inset:auto }
  .st { font-size:12.5px; font-weight:800; color:#fff }
  .ss { font-size:9.5px; color:#8D8580 }
  .row { display:flex; align-items:center; gap:8px; background:#1A1817; border-radius:10px; padding:8px }
  .th { width:30px; height:30px; border-radius:7px; background:linear-gradient(135deg,#3A3330,#252120); flex:0 0 auto }
  .ln { height:6px; border-radius:3px; background:#322C29 }
  .pr { margin-left:auto; font-size:10px; font-weight:800; color:#F7B500 }
  .pill { align-self:flex-start; font-size:9.5px; font-weight:700; padding:4px 9px; border-radius:99px;
    background:rgba(247,181,0,.16); color:#F7B500 }
  .go { margin-top:auto; text-align:center; font-size:10.5px; font-weight:800; padding:9px; border-radius:9px;
    background:#E8132B; color:#fff }
  .qr { width:100px; height:100px; margin:12px auto 0; display:grid; grid-template-columns:repeat(9,1fr); gap:2px }
  .qr i{border-radius:1px} .qr i.on{background:#F5EDE9}
  .okw { margin:auto; text-align:center }
  .okc { width:54px; height:54px; border-radius:99px; background:rgba(53,192,122,.15); border:2px solid #35C07A;
    display:grid; place-items:center; margin:0 auto 10px; color:#35C07A; font-size:24px }

  /* ================= TELAS DO APP — ESCALA REAL =================
     Medidas extraídas do app RODANDO (localhost:9101) via getComputedStyle,
     e dos componentes em packages/ui/src/components. Nada é convertido à mão:
     o bloco .ap é construído com 480px de largura (a largura real do shell) e
     reduzido por transform:scale() para caber no aparelho. Tokens reais:
     --mix-promo #f7b500 · --mix-accent #e8132b · --mix-ink #1a1a1a
     --mix-ink-2 #717171 · --mix-ink-3 #9a9a9a · --mix-border #eeeeee
     --mix-star #f5a623 · --mix-surface #ffffff
     ============================================================== */
  .scr { padding:0; overflow:hidden; display:block }
  .ap { width:480px; height:1030px; transform:scale(var(--sc,.47917)); transform-origin:0 0;
    background:#fff; color:#1a1a1a; display:flex; flex-direction:column;
    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    font-size:15px; line-height:1.4 }
  /* .home__header — 480×52, padding 8px 16px, gap 12, gradiente medido */
  .ap__header { display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:8px 16px; background:linear-gradient(rgb(214,135,95) 0%, rgb(207,122,84) 100%); flex:0 0 auto }
  /* .home__loc — 124×35, #f7b500, texto #4d3200, 14px/700, padding 7px 12px, gap 6 */
  .ap__loc { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px;
    background:#f7b500; color:#4d3200; font-size:14px; font-weight:700; white-space:nowrap }
  .ap__tools { display:flex; align-items:center; gap:12px }
  .ap__bell { font-size:22px; line-height:1; color:#fff }
  .ap__logo { height:26px } .ap__logo svg { height:100%; width:auto; display:block }
  /* .home::before — wash #cf7a54 → transparente, 197px */
  .ap__wash { height:197px; margin-bottom:-197px; flex:0 0 auto; position:relative; z-index:0;
    background:linear-gradient(180deg,#cf7a54 0px,#cf7a54 12px,rgba(207,122,84,0) 100%) }
  .ap__body { flex:1 1 auto; overflow:hidden; position:relative; z-index:1; padding-top:14px;
    display:flex; flex-direction:column }
  /* MixMediaCarousel — padding 0 16px, viewport raio 14, min-height 172px,
     dots 44px de faixa, pip 6px #d4d4d4 (ativo alongado no acento) */
  .ap__promo { padding:0 16px; margin:4px 0 8px }
  .ap__promo-v { border-radius:14px; min-height:172px; background:#f5f5f5; overflow:hidden;
    position:relative; display:flex; flex-direction:column; justify-content:flex-end;
    padding:16px; color:#fff; background:radial-gradient(120% 120% at 72% 18%,#E8132B,#8E0D1A) }
  .ap__promo-t { font-size:20px; font-weight:800; line-height:1.15 }
  .ap__promo-s { font-size:13px; opacity:.9; margin-top:4px }
  .ap__promo-cta { align-self:flex-start; margin-top:12px; font-size:13px; font-weight:800;
    background:#f7b500; color:#4d3200; border-radius:999px; padding:8px 14px }
  .ap__dots { height:44px; display:flex; align-items:center; justify-content:center; gap:8px }
  .ap__dots i { width:6px; height:6px; border-radius:999px; background:#d4d4d4; display:block }
  .ap__dots i.on { width:18px; background:#e8132b }
  /* MixSectionHeader — padding 16px 16px 10px, título 19px/800, ação 13px/700 */
  .ap__sh { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 16px 10px }
  .ap__sh h4 { font-size:19px; font-weight:800; line-height:1.15; margin:0; color:#1a1a1a }
  .ap__sh b { font-size:13px; font-weight:700; color:#e8132b }
  /* MixHCarousel — gap 12, padding lateral 16 */
  .ap__hcar { display:flex; gap:12px; padding:0 16px }
  /* .mix-shl — 168px, raio 16, borda #eee, capa 84px, logo 40px raio 11 borda 3px em -16px,
     corpo 22px 12px 12px, nome 14/800, meta 12 #717171, estrela #f5a623 */
  .ap__shl { width:168px; flex:0 0 auto; border:1px solid #eee; border-radius:16px; overflow:hidden;
    background:#fff; text-align:left }
  .ap__shl-cover { position:relative; height:84px }
  .ap__shl-cover::after { content:''; position:absolute; inset:0;
    background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(0,0,0,.22)) }
  .ap__shl-logo { position:absolute; left:10px; bottom:-16px; z-index:1; width:40px; height:40px;
    border-radius:11px; border:3px solid #fff; background:#fff; display:grid; place-items:center;
    font-size:22px; line-height:1 }
  .ap__shl-body { padding:22px 12px 12px }
  .ap__shl-name { font-size:14px; font-weight:800; color:#1a1a1a; line-height:1.2;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
  .ap__shl-meta { font-size:12px; color:#717171; margin-top:3px }
  .ap__star { color:#f5a623 }
  .ap__empty { margin:0 16px; border:1px dashed #e0e0e0; border-radius:16px; padding:24px;
    text-align:center; font-size:13px; color:#717171; font-weight:600 }
  .ap__empty em { display:block; font-style:normal; font-size:28px; color:#e8132b; margin-bottom:4px; line-height:1 }
  /* .mix-storerow — gap 12, padding 13px 0, divisória #eee, logo 48px raio 14,
     nome 15/800, categoria 12 #9a9a9a, chevron #9a9a9a */
  .ap__rows { padding:0 16px }
  .ap__row { display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid #eee }
  .ap__row-logo { width:48px; height:48px; border-radius:14px; flex:0 0 auto; display:grid;
    place-items:center; font-size:24px; line-height:1 }
  .ap__row-info { flex:1; min-width:0; display:flex; flex-direction:column }
  .ap__row-name { font-size:15px; font-weight:800; color:#1a1a1a; line-height:1.2 }
  .ap__row-cat { font-size:12px; color:#9a9a9a; margin-top:2px }
  .ap__row-rate { font-size:12px; color:#717171; margin-top:2px }
  .ap__chev { color:#9a9a9a; font-size:20px }
  /* MixBottomNav — 480×72.5, borda #eee, item padding 8px 0 10px gap 3, ícone 24px,
     label 11px (700 ativo), FAB 54×54 raio 16 margin-top -20 sombra 0 6px 16px rgba(0,0,0,.18) */
  .ap__nav { display:flex; background:#fff; border-top:1px solid #eee; flex:0 0 auto }
  .ap__ni { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:8px 0 10px; color:#9a9a9a; font-size:11px; font-weight:500 }
  .ap__ni em { font-style:normal; font-size:24px; line-height:1 }
  .ap__ni--on { color:#e8132b } .ap__ni--on span { font-weight:700 }
  .ap__fab { width:54px; height:54px; margin-top:-20px; border-radius:16px; background:#e8132b;
    color:#fff; display:grid; place-items:center; box-shadow:0 6px 16px rgba(0,0,0,.18); font-size:26px }
  /* MixStoreHeader — capa min-height 220, padding 14px 16px 16px, véu 45/32/78%,
     ícone 40px, logo 92px borda 3px, nome 29/900, meta 14, favcta outline */
  .ap__shead { position:relative; min-height:220px; display:flex; flex-direction:column;
    padding:14px 16px 16px; background:linear-gradient(135deg,#8C4A22,#2A1109); flex:0 0 auto }
  .ap__shead::before { content:''; position:absolute; inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.32) 40%,rgba(0,0,0,.78) 100%) }
  .ap__shead > * { position:relative }
  .ap__shead-top { display:flex; align-items:center; justify-content:space-between }
  .ap__icon { width:40px; height:40px; border-radius:999px; background:rgba(20,20,20,.55);
    color:#fff; display:grid; place-items:center; font-size:20px }
  .ap__icon--cart { background:#e8132b }
  .ap__shead-info { margin-top:auto; text-align:center; color:#fff }
  .ap__shead-logo { width:92px; height:92px; border-radius:999px; border:3px solid rgba(255,255,255,.85);
    box-shadow:0 4px 14px rgba(0,0,0,.3); margin:0 auto 10px; display:grid; place-items:center;
    font-size:46px; background:#fff }
  .ap__shead-name { font-size:29px; font-weight:900; line-height:1.1; text-shadow:0 1px 6px rgba(0,0,0,.35) }
  .ap__shead-meta { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:6px; font-size:14px }
  .ap__shead-sep { opacity:.6 }
  .ap__favcta { display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-size:13px;
    font-weight:700; color:#f7b500; border:1px solid #f7b500; border-radius:999px; padding:8px 16px }
  .ap__tabs { display:flex; gap:14px; padding:10px 16px 0; font-size:13px; color:#717171;
    font-weight:700; border-bottom:1px solid #eee; white-space:nowrap; flex:0 0 auto }
  .ap__tabs b { color:#e8132b; border-bottom:2px solid #e8132b; padding-bottom:8px }
  .ap__hl { margin:12px 16px 0; border-radius:14px; padding:14px 16px;
    background:linear-gradient(135deg,#C6172C,#7E0D1C); color:#fff }
  .ap__hl b { font-size:15px; display:block } .ap__hl span { font-size:12px; opacity:.9 }
  /* MixProductCard — card 140, imagem raio 12, nome 14/700, desc 12 #9a9a9a,
     preço 16/800, antigo riscado, botão + 26px no acento */
  .ap__pcar { display:flex; gap:12px; padding:0 16px }
  .ap__pc { width:140px; flex:0 0 auto }
  .ap__pc-img { height:100px; border-radius:12px; background:linear-gradient(135deg,#A85C2A,#4A2413) }
  .ap__pc-name { font-size:14px; font-weight:700; color:#1a1a1a; margin-top:8px; line-height:1.25 }
  .ap__pc-desc { font-size:12px; color:#9a9a9a; line-height:1.3 }
  .ap__pc-old { font-size:12px; color:#9a9a9a; text-decoration:line-through; margin-top:4px }
  .ap__pc-foot { display:flex; align-items:center; margin-top:2px }
  .ap__pc-price { font-size:16px; font-weight:800; color:#1a1a1a }
  .ap__pc-plus { margin-left:auto; width:26px; height:26px; border-radius:999px; background:#e8132b;
    color:#fff; display:grid; place-items:center; font-size:18px; font-weight:800; line-height:1 }
  .ap__bag { display:flex; align-items:center; gap:12px; padding:12px 16px; border-top:1px solid #eee;
    background:#fff; flex:0 0 auto }
  .ap__bag b { font-size:14px; font-weight:800; display:block }
  .ap__bag span { font-size:12px; color:#9a9a9a }
  .ap__bagbtn { margin-left:auto; background:#e8132b; color:#fff; font-size:14px; font-weight:800;
    padding:12px 18px; border-radius:12px }
  .ap__person { display:flex; align-items:center; gap:12px; border:1px solid #eee; border-radius:14px;
    padding:12px 14px; margin:0 16px 8px }
  .ap__av { width:34px; height:34px; border-radius:999px; display:grid; place-items:center;
    font-size:15px; font-weight:800 }
  .ap__pv { margin-left:auto; font-size:16px; font-weight:800 }
  .ap__paid { margin-left:auto; font-size:12px; font-weight:800; color:#18a957 }
  .ap__cta { background:#e8132b; color:#fff; text-align:center; font-size:16px; font-weight:800;
    padding:14px; border-radius:14px; margin:auto 16px 16px }
  .ap__okc { width:80px; height:80px; border-radius:999px; background:rgba(24,169,87,.12);
    border:3px solid #18a957; display:grid; place-items:center; margin:0 auto 12px; color:#18a957; font-size:36px }
  .ap__ok-t { font-size:19px; font-weight:800; color:#1a1a1a } .ap__ok-s { font-size:13px; color:#717171 }
  .ap__status { margin:12px 16px 0; border-radius:14px; padding:12px 16px; background:#fff7e6; border:1px solid #f7b500 }
  .ap__status b { font-size:15px; display:block; color:#4d3200 }
  .ap__status span { font-size:12px; color:#8a6300 }

  /* ---- painéis replicados do código-fonte (KitchenPage/KitchenColumn/OrderCard, MixMetricCard) ---- */
  .panel { border-radius:14px; overflow:hidden }
  /* KDS: .kds-page #0f1115 · .kds-bar #14161b · borda #2a2e37 */
  .kds-page { background:#0f1115; padding:8px }
  .kds-bar { display:flex; align-items:center; gap:10px; background:#14161b; border:1px solid #2a2e37;
    border-radius:12px; padding:8px 14px; margin-bottom:10px; flex-wrap:wrap }
  .kds-bar__title { font-size:18px; font-weight:800; color:#fff }
  .kds-manual { background:rgba(46,144,250,.14); color:#7cc0ff; border:1px solid rgba(46,144,250,.4);
    border-radius:999px; font-size:11px; font-weight:700; padding:3px 10px }
  .kds-live { background:rgba(24,169,87,.14); color:#4bd486; border:1px solid rgba(24,169,87,.38);
    border-radius:999px; font-size:11px; font-weight:700; padding:3px 10px }
  .kds-sp { flex:1 1 auto }
  .metric { background:#16181d; border:1px solid #2a2e37; border-radius:10px; padding:5px 14px;
    text-align:center; min-width:78px }
  .metric__n { font-size:19px; font-weight:800; line-height:1; color:#fff }
  .metric__u { font-size:11px }
  .metric__l { font-size:10px; color:#9aa0ab; margin-top:2px }
  .kds-grid { display:grid; grid-template-columns:1.15fr 1fr 1fr; gap:10px }
  @media (max-width:820px){ .kds-grid{ grid-template-columns:1fr } }
  .kcol { background:#101217; border:1px solid #2a2e37; border-radius:12px; padding:10px;
    min-height:160px; display:flex; flex-direction:column }
  .kcol__head { display:flex; align-items:center; gap:8px; padding:2px 4px 10px; justify-content:space-between }
  .kcol__title { font-weight:800; font-size:13px; letter-spacing:.04em; text-transform:uppercase }
  .kcol--new .kcol__title { color:#2E90FA } .kcol--prep .kcol__title { color:#F79009 }
  .kcol--ready .kcol__title { color:#18A957 }
  .kcol__count { background:#1e2128; border-radius:999px; font-size:12px; font-weight:800;
    padding:2px 9px; color:#9aa0ab }
  .ocard { background:#16181d; border:1px solid #2a2e37; border-left:4px solid #2a2e37;
    border-radius:10px; padding:8px 10px; margin-bottom:8px }
  .ocard--green { border-left-color:#18A957 } .ocard--amber { border-left-color:#F79009 }
  .ocard--red { border-left-color:#D92D20 }
  .ocard__head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px }
  .ocard__title { font-weight:800; font-size:15px; color:#fff; display:flex; align-items:center; gap:6px }
  .ocard__num { font-size:11px; font-weight:800; color:#6b727e; font-variant-numeric:tabular-nums }
  .ocard__when { font-size:10px; color:#9aa0ab; white-space:nowrap }
  .ocard__sub { font-size:11px; color:#9aa0ab; margin-top:1px }
  .ocard__pill { display:inline-block; font-size:10px; font-weight:700; border-radius:999px;
    padding:1px 8px; margin:4px 0 1px }
  .pill--green { background:rgba(24,169,87,.16); color:#4bd486 }
  .pill--amber { background:rgba(247,144,9,.18); color:#ffb454 }
  .pill--red { background:rgba(217,45,32,.18); color:#ff6b78 }
  .ocard__line { display:flex; gap:7px; font-size:16px; color:#e7e9ee; margin:6px 0 2px; align-items:center }
  .ocard__line i { color:#6b727e; font-style:normal; font-size:13px }
  .ocard__line b { font-weight:800 }
  .kcol__empty { text-align:center; color:#565c66; font-size:12px; padding:18px 0 }
  /* Admin: MixMetricCard — #fff, borda #ececec, raio 14, valor 26px/800 */
  .adm { background:#F5F5F5; padding:16px }
  .adm__h { font-size:18px; font-weight:700; color:#1a1a1a }
  .adm__c { font-size:12px; color:#717171; margin-bottom:14px }
  .adm__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
  @media (max-width:820px){ .adm__grid{ grid-template-columns:repeat(2,1fr) } }
  .mmc { background:#fff; border:1px solid #ececec; border-radius:14px; padding:16px }
  .mmc__top { display:flex; align-items:center; justify-content:space-between }
  .mmc__label { font-size:12px; font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:#717171 }
  .mmc__icon { color:#bdbdbd; font-size:15px }
  .mmc__value { font-size:26px; font-weight:800; line-height:1.1; color:#1a1a1a; margin-top:8px }
  .mmc__foot { display:flex; align-items:center; gap:8px; margin-top:8px; min-height:20px }
  .mmc__trend { display:inline-flex; align-items:center; gap:2px; font-size:13px; font-weight:700 }
  .mmc__trend--up { color:#18A957 } .mmc__trend--down { color:#D92D20 }
  .mmc__cap { font-size:12px; color:#9e9e9e }

  /* Admin — "A loja agora": q-card flat bordered, q-list separator, chip de status */
  .adm__cols { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px }
  @media (max-width:820px){ .adm__cols{ grid-template-columns:1fr } }
  .qcard { background:#fff; border:1px solid rgba(0,0,0,.12); border-radius:4px; padding:16px }
  .qcard__h { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px }
  .qcard__t { font-size:16px; font-weight:700; color:#1a1a1a }
  .qchip { font-size:12px; font-weight:500; color:#fff; background:#18A957; border-radius:999px; padding:3px 10px }
  .qlist { display:grid }
  .qitem { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid rgba(0,0,0,.12);
    font-size:14px; color:#1a1a1a }
  .qitem:last-child { border-bottom:0 }
  .qitem i { font-style:normal; width:22px; text-align:center; font-size:16px }
  .qitem b { margin-left:auto; font-weight:700 }
  .qitem b em { font-style:normal; font-size:12px; color:#18A957; font-weight:600; margin-left:4px }

  /* ---- capturas reais das telas do MIX (produção, dados trocados por fictícios) ---- */
  .shot { display:block; width:100%; height:auto; border-radius:14px; border:1px solid var(--line);
    background:#0f0e0d }
  .shotfig { margin:30px 0 0 }
  .shotfig figcaption { font-size:13px; color:var(--muted); margin-top:10px }
  .navp { margin-top:30px; background:var(--surface); border:1px solid var(--line);
          border-radius:18px; padding:14px }
  .navp__bar { display:flex; gap:6px; overflow-x:auto; padding:0 0 12px; scrollbar-width:none }
  .navp__bar::-webkit-scrollbar { display:none }
  .navp__tab { flex:0 0 auto; border:1px solid var(--line); background:transparent;
               color:var(--muted); font:700 13px/1 inherit; letter-spacing:.01em;
               padding:9px 13px; border-radius:999px; cursor:pointer;
               transition:background .18s, color .18s, border-color .18s }
  .navp__tab:hover { color:var(--text) }
  .navp__tab[aria-selected="true"] { background:var(--red); border-color:var(--red); color:var(--onred) }
  .navp__stage { border-radius:12px }
  .navp__prog { height:2px; background:var(--line); border-radius:2px; overflow:hidden; margin-top:10px }
  .navp__prog i { display:block; height:100%; width:0; background:var(--gold); border-radius:2px }
  .navp__cap { margin-top:12px; min-height:66px; font-size:14.5px; color:var(--muted); line-height:1.55 }
  .navp__cap b { color:var(--text); font-weight:800 }
  .navp__note { font-size:12.5px; color:var(--muted); margin-top:10px; opacity:.85 }
  @media (max-width:640px){ .navp { padding:10px } .navp__cap { font-size:13.5px } }
  .navp__pane { display:none }
  .navp__pane.on { display:block; animation:ilfade .4s ease both }
  @keyframes ilfade { from { opacity:0; transform:translateY(6px) } to { opacity:1 } }
  @media (prefers-reduced-motion:reduce){ .navp__pane.on { animation:none } }
  /* ---- ilustrações de tela (HTML/CSS, dados fictícios) ---- */
  .il { background:var(--bg2); border:1px solid var(--line); border-radius:16px;
        overflow:hidden; font-size:13px; line-height:1.4; color:var(--text);
        font-variant-numeric:tabular-nums }
  .il__bar { display:flex; align-items:center; gap:10px; padding:11px 16px;
             border-bottom:1px solid var(--line); background:rgba(245,237,233,.03) }
  .il__dot { width:9px; height:9px; border-radius:50%; background:var(--red); flex:0 0 auto }
  .il__ttl { font-weight:800; letter-spacing:-.01em; font-size:13.5px }
  .il__sub { color:var(--muted); font-size:12px; margin-left:auto }
  .il__body { padding:16px }
  .il-lbl { color:var(--muted); font-size:10.5px; font-weight:800; letter-spacing:.09em;
            text-transform:uppercase }
  .il-up { color:#5FBF84; font-weight:800 } .il-dn { color:var(--red); font-weight:800 }

  .il-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:10px }
  .il-kpi { background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:11px 13px }
  .il-kpi b { display:block; font-size:21px; letter-spacing:-.035em; margin:5px 0 3px; color:var(--strong) }
  .il-kpi small { font-size:11.5px; color:var(--muted) }

  .il-2 { display:grid; grid-template-columns:1.55fr 1fr; gap:12px; margin-top:12px }
  .il-box { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:13px 14px }

  .il-chart { display:flex; align-items:flex-end; gap:7px; height:146px; margin-top:12px }
  .il-chart .c { flex:1; display:flex; flex-direction:column; justify-content:flex-end;
                 height:100%; gap:5px; position:relative }
  .il-chart .c i { display:block; background:var(--gold); border-radius:5px 5px 3px 3px; opacity:.72 }
  .il-chart .c em { font-style:normal; text-align:center; color:var(--muted); font-size:10px }
  .il-chart .c.on i { opacity:1 }
  .il-chart .c.on em { color:var(--text); font-weight:700 }
  .il-peak { position:absolute; left:50%; transform:translate(-50%,-100%); top:-4px; white-space:nowrap;
             background:var(--gold); color:#1A1207; font-weight:800; font-size:10.5px;
             padding:3px 8px; border-radius:7px }

  .il-list > div { display:flex; align-items:baseline; gap:8px; padding:8px 0;
                   border-bottom:1px solid var(--line) }
  .il-list > div:last-child { border-bottom:0 }
  .il-list span { color:var(--muted); font-size:12.5px }
  .il-list b { margin-left:auto; color:var(--strong); font-size:14px }

  .il-mesas { display:grid; grid-template-columns:repeat(4,1fr); gap:9px }
  .il-mesa { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:9px 10px }
  .il-mesa.busy { border-color:rgba(247,181,0,.42); background:rgba(247,181,0,.07) }
  .il-mesa u { display:block; text-decoration:none; font-weight:800; font-size:12.5px; color:var(--strong) }
  .il-mesa s { display:block; text-decoration:none; color:var(--muted); font-size:11px; margin-top:3px }
  .il-mesa.busy s { color:var(--gold) }

  .il-qr { display:grid; place-items:center; gap:9px; text-align:center }
  .il-qrimg { border-radius:9px; display:block }

  .il-ch { display:grid; grid-template-columns:repeat(3,1fr); gap:10px }
  .il-ch > div { background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:11px 12px }
  .il-ch > div.on { border-color:rgba(247,181,0,.45); background:rgba(247,181,0,.07) }
  .il-ch b { display:block; font-size:13px; color:var(--strong); margin:6px 0 2px }
  .il-ch span { color:var(--muted); font-size:11.5px }

  .il-msg { background:var(--surface); border:1px solid var(--line); border-radius:11px;
            padding:12px 13px; margin-top:12px }
  .il-msg .f { border:1px solid var(--line); border-radius:8px; padding:8px 10px; margin-top:8px;
               color:var(--text); font-size:12.5px; background:var(--bg2) }
  .il-send { display:inline-block; margin-top:10px; background:var(--red); color:var(--onred);
             font-weight:800; font-size:12px; padding:8px 14px; border-radius:9px }

  .il-note { display:flex; gap:9px; align-items:flex-start; background:var(--bg);
             border:1px solid var(--line); border-radius:12px; padding:11px 12px }
  .il-note .ic { width:26px; height:26px; border-radius:7px; background:var(--red); flex:0 0 auto }

  /* cozinha */
  .il-kds { display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
  .il-kcol { background:var(--surface); border:1px solid var(--line); border-radius:12px;
             padding:10px; min-height:326px }
  .il-khead { display:flex; justify-content:space-between; align-items:center; margin-bottom:9px }
  .il-card { background:var(--bg2); border:1px solid var(--line); border-left:3px solid var(--red);
             border-radius:9px; padding:9px 11px; margin-bottom:9px }
  .il-kcol.p .il-card { border-left-color:var(--gold) }
  .il-kcol.d .il-card { border-left-color:#5FBF84 }
  .il-card .t { display:flex; align-items:baseline; gap:8px }
  .il-card .t b { font-size:12.5px; color:var(--strong) }
  .il-card .t span { margin-left:auto; color:var(--muted); font-size:11px }
  .il-card p { color:var(--muted); font-size:11.5px; margin-top:5px }
  .il-ghost { position:relative; z-index:2; border-left-color:var(--gold) !important;
              box-shadow:0 10px 26px rgba(0,0,0,.5);
              animation:ilmove 8s cubic-bezier(.65,0,.35,1) infinite }
  @keyframes ilmove {
    0%      { transform:translateX(0); opacity:0 }
    5%,27%  { transform:translateX(0); opacity:1 }
    35%,57% { transform:translateX(calc(100% + 12px)); opacity:1 }
    65%,93% { transform:translateX(calc(200% + 24px)); opacity:1 }
    99%,100%{ transform:translateX(calc(200% + 24px)); opacity:0 }
  }

  /* cardápio no celular */
  .il-phone { width:288px; margin-inline:auto; background:var(--bg2); border:1px solid var(--line);
              border-radius:30px; padding:9px; box-shadow:var(--shadow) }
  .il-scr { background:var(--bg); border-radius:23px; overflow:hidden }
  .il-cover { height:86px; background:linear-gradient(135deg,#7A2318,#C4451F 55%,#F7B500);
              position:relative }
  .il-cover .nm { position:absolute; left:13px; bottom:9px; font-weight:800; font-size:15px;
                  color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.5) }
  .il-cover .st { position:absolute; left:13px; bottom:-6px; font-size:11px; color:#FFE9A8 }
  .il-chips { display:flex; gap:6px; padding:14px 13px 10px; overflow:hidden }
  .il-chips i { font-style:normal; font-size:11px; padding:5px 10px; border-radius:999px;
                border:1px solid var(--line); color:var(--muted); white-space:nowrap }
  .il-chips i.on { background:var(--red); border-color:var(--red); color:var(--onred); font-weight:700 }
  .il-item { display:flex; gap:10px; align-items:center; padding:10px 13px; border-top:1px solid var(--line) }
  .il-item .th { width:44px; height:44px; border-radius:9px; flex:0 0 auto;
                 background:linear-gradient(140deg,#3A2A20,#5A3A24) }
  .il-item .tx { min-width:0; flex:1 }
  .il-item .tx b { display:block; font-size:12.5px; color:var(--strong) }
  .il-item .tx span { display:block; color:var(--muted); font-size:10.5px; margin:2px 0 4px;
                      overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
  .il-item .pr { font-size:12.5px; font-weight:800; color:var(--text) }
  .il-item .old { color:var(--muted); text-decoration:line-through; font-weight:500; margin-right:5px }
  .il-item .add { width:26px; height:26px; border-radius:8px; background:var(--line);
                  color:var(--text); display:grid; place-items:center; font-weight:800; flex:0 0 auto }
  .il-item.promo { background:rgba(247,181,0,.07) }
  .il-item.promo .add { background:var(--red); color:var(--onred) }
  .il-tag { display:inline-block; background:var(--gold); color:#1A1207; font-weight:800;
            font-size:9px; letter-spacing:.05em; padding:2px 6px; border-radius:5px; margin-bottom:3px }
  .il-bag { display:flex; align-items:center; gap:10px; margin:12px 10px 10px; padding:11px 13px;
            background:var(--red); color:var(--onred); border-radius:12px; font-weight:800; font-size:12.5px }
  .il-bag span { margin-left:auto; font-weight:800 }

  .ilfig { margin:30px 0 0 }
  .ilfig figcaption { font-size:13px; color:var(--muted); margin-top:10px }

  @media (max-width:860px){
    .il-kpis { grid-template-columns:repeat(2,1fr) }
    .il-2 { grid-template-columns:1fr }
    .il-mesas { grid-template-columns:repeat(3,1fr) }
    .il-kds { grid-template-columns:1fr }
    .il-ghost { animation:none }
    .il-ch { grid-template-columns:1fr }
  }
  @media (prefers-reduced-motion:reduce){ .il-ghost { animation:none } }
  .shotgrid { display:grid; gap:18px; margin-top:30px }
  @media (min-width:820px){ .shotgrid--2 { grid-template-columns:1fr 1fr } }
  .shotcard { background:var(--surface); border:1px solid var(--line); border-radius:18px;
    padding:14px; overflow:hidden }
  .shotcard .shot { border:0; border-radius:10px }
  .shotcard h3 { font-size:16px; font-weight:800; margin:12px 4px 4px }
  .shotcard p { font-size:14px; color:var(--muted); margin:0 4px 6px }
  .shotwide { overflow-x:auto }
  .shotwide .shot { min-width:680px }
  .figcap { font-size:13px; color:var(--muted); margin-top:10px }

  .dots { display:flex; gap:6px; justify-content:center; margin-top:16px }
  .dots i { width:6px; height:6px; border-radius:99px; background:var(--line); transition:width .3s, background .3s }
  .dots i.on { background:var(--gold); width:18px }

  /* ---------- heróis por variação ---------- */
  .hero { display:none }
  :root[data-l="1"] #hero1, :root[data-l="2"] #hero2, :root[data-l="3"] #hero3 { display:block }

  /* V1 · Palco */
  .h1grid { display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center; padding:60px 0 70px }
  @media (max-width:900px){ .h1grid{grid-template-columns:1fr; gap:34px; padding:42px 0 46px} }
  .eyebrow { font-size:12px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--goldtext) }
  .h1grid h1 { font-size:clamp(32px,4.8vw,52px); font-weight:800; margin-top:18px }
  .lead { color:var(--muted); font-size:18px; max-width:48ch; margin-top:20px }
  .cta { display:flex; gap:12px; margin-top:26px; flex-wrap:wrap; align-items:center }
  .cta small { color:var(--muted); font-size:13.5px }
  .stage { position:relative; display:flex; flex-direction:column; align-items:center }
  .float { position:absolute; font-size:11.5px; font-weight:700; padding:8px 13px; border-radius:99px;
    background:rgba(29,26,24,.94); border:1px solid var(--line); white-space:nowrap; backdrop-filter:blur(6px);
    animation:bob 5s ease-in-out infinite }
  .float b { color:var(--gold) }
  .f1{ top:6%; left:-6%; animation-delay:0s } .f2{ top:34%; right:-10%; animation-delay:.7s }
  .f3{ bottom:22%; left:-12%; animation-delay:1.4s } .f4{ bottom:4%; right:-4%; animation-delay:2.1s }
  @media (max-width:900px){ .float{display:none} }
  @keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }

  /* V2 · Tríptico */
  .h2wrap { padding:56px 0 66px; text-align:center }
  .h2wrap h1 { font-size:clamp(32px,5.4vw,58px); font-weight:800; margin-top:18px }
  .h2wrap .lead { margin:20px auto 0 }
  .trip { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:44px; justify-items:center }
  @media (max-width:900px){ .trip{grid-template-columns:1fr; gap:34px} }
  .tripitem { display:flex; flex-direction:column; align-items:center; gap:14px }
  .tripitem .cap { text-align:center }
  .tripitem .cap b { display:block; font-size:15px; color:var(--strong) }
  .tripitem .cap span { font-size:13.5px; color:var(--muted) }
  .tripitem:nth-child(2) { transform:translateY(-22px) }
  @media (max-width:900px){ .tripitem:nth-child(2){transform:none} }

  /* V3 · Imersivo */
  .h3wrap { padding:70px 0 34px; text-align:center; max-width:820px; margin:0 auto }
  .h3wrap h1 { font-size:clamp(34px,6vw,64px); font-weight:800; margin-top:18px }
  .h3wrap .lead { margin:20px auto 0 }
  .tour { display:none; grid-template-columns:.85fr 1.15fr; gap:52px; padding:20px 0 60px; align-items:start }
  :root[data-l="3"] .tour { display:grid }
  @media (max-width:900px){ .tour{grid-template-columns:1fr; gap:26px} }
  .tour__sticky { position:sticky; top:78px; display:flex; justify-content:center }
  @media (max-width:900px){ .tour__sticky{position:static} }
  .tour__step { padding:64px 0; border-bottom:1px solid var(--line) }
  .tour__step:last-child { border-bottom:0 }
  .tour__step .n { font-size:12px; font-weight:800; letter-spacing:.18em; color:var(--goldtext); text-transform:uppercase }
  .tour__step h3 { font-size:clamp(24px,3.4vw,36px); font-weight:800; margin-top:12px }
  .tour__step p { color:var(--muted); margin-top:14px; max-width:44ch }
  .tour__step.act h3 { color:var(--gold) }

  /* ---------- seções ---------- */
  .sec { padding:64px 0; border-top:1px solid var(--line) }
  .sec--alt { background:var(--bg2) }
  .sec h2 { font-size:clamp(27px,3.8vw,42px); font-weight:800 }
  .sec .sub { color:var(--muted); margin-top:14px; max-width:62ch }
  .prose { max-width:64ch; display:grid; gap:15px; margin-top:20px; color:var(--muted) }
  .prose b { color:var(--text) }

  /* "como funciona" muda de forma por variação */
  .steps { display:grid; gap:16px; margin-top:30px }
  :root[data-l="1"] .steps { grid-template-columns:repeat(3,1fr) }
  :root[data-l="2"] .steps { grid-template-columns:1fr }
  :root[data-l="3"] .steps { grid-template-columns:repeat(3,1fr) }
  @media (max-width:820px){ .steps{grid-template-columns:1fr!important} }
  .step { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px }
  .stepn { display:inline-grid; place-items:center; width:32px; height:32px; border-radius:99px;
    background:var(--gold); color:#141312; font-weight:800; margin-bottom:12px }
  .step h3 { font-size:17px; font-weight:800; margin-bottom:7px }
  .step p { color:var(--muted); font-size:15px }
  /* na V2 os passos viram lista com número gigante */
  :root[data-l="2"] .step { display:grid; grid-template-columns:110px 1fr; gap:24px; align-items:center;
    background:transparent; border:0; border-top:1px solid var(--line); border-radius:0; padding:26px 0 }
  :root[data-l="2"] .stepn { width:auto; height:auto; background:none; color:var(--gold);
    font-size:64px; line-height:1; margin:0; letter-spacing:-.04em }
  @media (max-width:820px){ :root[data-l="2"] .step{grid-template-columns:1fr; gap:8px} }

  .hl2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px }
  @media (max-width:820px){ .hl2{grid-template-columns:1fr} }
  .hl { background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--gold);
    border-radius:var(--radius); padding:22px }
  .hl h3 { font-size:16px; font-weight:800; margin-bottom:6px }
  .hl p { color:var(--muted); font-size:15px }

  .bens { display:grid; gap:20px; margin-top:28px }
  @media (min-width:820px){ .bens{grid-template-columns:repeat(3,1fr)} }
  .ben h3 { font-size:18px; font-weight:800; margin-bottom:8px }
  .ben p { color:var(--muted); font-size:15.5px }

  .price { margin-top:38px; border-radius:26px; padding:44px 32px; text-align:center;
    border:1px solid var(--line); background:var(--surface) }
  .price h3 { font-size:clamp(23px,3.2vw,34px); font-weight:800 }
  .price p { color:var(--muted); margin-top:14px; max-width:54ch; margin-inline:auto }
  .price .dare { margin-top:22px; font-size:19px; font-weight:800; color:var(--goldtext) }

  /* recursos: grid na V1/V2, bento na V3 */
  .feats { display:grid; gap:14px; margin-top:30px }
  :root[data-l="1"] .feats, :root[data-l="2"] .feats { grid-template-columns:repeat(2,1fr) }
  :root[data-l="3"] .feats { grid-template-columns:repeat(6,1fr) }
  :root[data-l="3"] .feat:nth-child(1){ grid-column:span 3 } :root[data-l="3"] .feat:nth-child(2){ grid-column:span 3 }
  :root[data-l="3"] .feat:nth-child(3){ grid-column:span 2 } :root[data-l="3"] .feat:nth-child(4){ grid-column:span 2 }
  :root[data-l="3"] .feat:nth-child(5){ grid-column:span 2 } :root[data-l="3"] .feat:nth-child(6){ grid-column:span 4 }
  :root[data-l="3"] .feat:nth-child(7){ grid-column:span 2 } :root[data-l="3"] .feat:nth-child(8){ grid-column:span 6 }
  @media (max-width:820px){ .feats{grid-template-columns:1fr!important} .feat{grid-column:auto!important} }
  .feat { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px }
  .feat .k { font-size:10.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--goldtext) }
  .feat h3 { font-size:16px; font-weight:800; margin:6px 0 5px }
  .feat p { color:var(--muted); font-size:14.5px }

  .segs { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px }
  .seg { border:1px solid var(--line); background:var(--surface); border-radius:99px; padding:9px 16px;
    font-size:14.5px; font-weight:600; display:flex; align-items:center; gap:9px }

  .faq { max-width:840px; margin-top:24px }
  .qa { border-bottom:1px solid var(--line) }
  .qa summary { cursor:pointer; list-style:none; padding:19px 0; font-weight:700; font-size:16.5px; display:flex }
  .qa summary::-webkit-details-marker{display:none}
  .qa summary::after{content:"+";margin-left:auto;color:var(--goldtext);font-weight:800;font-size:20px}
  .qa[open] summary::after{content:"–"}
  .qa p { color:var(--muted); font-size:15.5px; padding-bottom:19px; max-width:70ch }

  .final { text-align:center; padding:80px 0 }
  .final h2 { font-size:clamp(29px,4.8vw,52px); font-weight:800 }
  .final p { color:var(--muted); margin-top:16px }

  .foot { border-top:1px solid var(--line); padding:36px 0 58px; display:flex; flex-wrap:wrap; gap:22px;
    justify-content:space-between; color:var(--muted); font-size:14px }
  .foot .sig svg{ width:84px; display:block; border-radius:21px }
  .foot__links{ display:grid; gap:8px }

  .page{display:none} .page.on{display:block}
  .doc{max-width:70ch; padding:50px 0 30px}
  .doc h1{font-size:clamp(28px,4vw,40px);font-weight:800}
  .doc h2{font-size:19px;font-weight:800;margin-top:36px;padding-top:22px;border-top:1px solid var(--line)}
  .doc h3{font-size:15px;font-weight:700;margin-top:20px;color:var(--goldtext)}
  .doc p{margin-top:12px;color:var(--muted);font-size:15.5px}
  .doc ul{margin-top:12px;padding-left:20px;color:var(--muted);font-size:15.5px;display:grid;gap:8px}
  .doc b{color:var(--text);font-weight:600}
  .doc .upd{color:var(--muted);font-size:14px;margin-top:12px}
  .note{margin-top:20px;padding:16px 18px;border-radius:16px;background:var(--surface);
    border:1px solid var(--line);border-left:3px solid var(--gold);font-size:14.5px;color:var(--muted)}
  .rv{opacity:0;transform:translateY(20px);transition:opacity .7s,transform .7s} .rv.in{opacity:1;transform:none}