/* D-443 (CAR-01) — cardápio da mesa. CSS por CÓPIA do protótipo aprovado
   `docs/prototipos/car01_cardapio_v1.html` (D-114 §3): os seletores e os
   números são os do bloco <style> dele, com substituição MECÂNICA de tokens
   (--azul → --m-azul, --papel → --m-creme, --tinta → --m-texto, --tinta-2 →
   --m-suave, --linha → --m-linha). Diff revisável, nada "reescrito no espírito".

   O que NÃO veio junto (D-199a — copia-se a tela, joga-se fora o palco):
   a barra `.proto`, o seletor de hora e o marcador `.fict` (o ◌ só significa
   algo ao lado da legenda que mora naquela barra). Sem palco, sem moldura de
   aparelho, sem fundo de mesa de trabalho.

   Some daqui o `--m-ouro`: não existe dourado no manual da marca. O filete
   dourado virou a LINHA COM PONTO (`.filete i` + `.filete b`), que é o elemento
   gráfico do manual. */

/* ---------- tipografia da casa (hospedada; nunca servidor de terceiro) ------
   D-443 §4 — as substitutas abertas da decisão do João: **Jost** no lugar da
   Futura e **Bodoni Moda** no lugar da Alisheia, as duas em SIL Open Font
   (`OFL-Jost.txt` e `OFL-BodoniModa.txt` ao lado dos arquivos).

   Dois pesos por família, WOFF2, recortadas para o latim com acentos, e
   `font-display: swap` — o texto aparece antes de a fonte chegar. Página de QR
   se lê no 4G do salão: 47,8 KB de fonte no total (teto do card: 100 KB).

   Arquivos PRÓPRIOS (`-latin`), nunca os `jost-<peso>.woff2` do shell: a régua
   das placas do buffet mede com HarfBuzz o ARQUIVO exato (apps/buffet/placa.py),
   e recortar aqueles mudaria a cobertura de glifos da impressão. E a declaração
   mora nesta folha, não num `<link>` para `vendor/fonts/fonts.css`: aquele traz
   junto Archivo e JetBrains Mono, 125 KB que esta página não usa. */
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;
  src:url("../vendor/fonts/jost-400-latin.01e2ca06669b.woff2") format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:600;font-display:swap;
  src:url("../vendor/fonts/jost-600-latin.d33644d2bd88.woff2") format('woff2')}
/* Bodoni Moda é variável em dois eixos (opsz 6–96, wght 400–900). Instanciada em
   `opsz: 11` — o corte de TEXTO, que é o padrão do desenho: no corte de display
   os filetes somem num nome de prato de 16 px. */
@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:500;font-display:swap;
  src:url("../vendor/fonts/bodoni-moda-500.d69bae15c62d.woff2") format('woff2')}
@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:600;font-display:swap;
  src:url("../vendor/fonts/bodoni-moda-600.f59d9f012d11.woff2") format('woff2')}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
/* UI-04 L3 — o fundo mora no html (propaga ao canvas). No celular a coluna
   ocupa tudo e este creme não aparece; no desktop é o respiro ao redor dela,
   que é o que a tela já tinha antes deste card. */
html{background:#EDE7D9}
body{
  background:var(--m-creme);color:var(--m-texto);font:16px/1.45 var(--m-sans);
  display:flex;flex-direction:column;overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;cursor:pointer;color:inherit}
:focus-visible{outline:3px solid var(--m-azul);outline-offset:2px}
[hidden]{display:none !important}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;scroll-behavior:auto !important}
}

/* ---------- a coluna (sem moldura) ---------- */
.aparelho{
  flex:1;min-height:0;width:100%;max-width:520px;margin:0 auto;
  background:var(--m-creme);display:flex;flex-direction:column;
}

/* ===== o cabeçalho ROLA (D-448 §3) =====
   Assinatura, linha com ponto, estado e abas de serviço saem da tela quando o
   cliente desce; só as abas de SEÇÃO ficam. Voltando ao topo, tudo reaparece
   sozinho — nada é escondido e mostrado por direção de rolagem, que é o truque
   que sempre briga com o dedo. `margin` negativa porque o padding lateral agora
   é do rolador. */
.topo{background:var(--m-branco);border-bottom:1px solid var(--m-linha);
      margin:0 -20px;padding:14px 20px 0}
.agora{text-align:center;font-size:12.5px;color:var(--m-suave);margin:9px 0 0}
.agora b{color:var(--m-azul);font-weight:600}

.servicos{display:flex;gap:6px;margin:12px 0 0}
.servicos a{flex:1;border:1px solid var(--m-linha);background:var(--m-branco);border-radius:10px;
            padding:8px 4px 7px;line-height:1.2;text-align:center;text-decoration:none;
            display:block;min-height:44px}
.servicos .rot{display:block;font-size:12.5px;font-weight:600;color:var(--m-texto)}
.servicos .hr{display:block;font-size:10.5px;color:var(--m-suave);margin-top:2px}
.servicos a[aria-current="true"]{background:var(--m-vinho);border-color:var(--m-vinho)}
.servicos a[aria-current="true"] .rot,
.servicos a[aria-current="true"] .hr{color:var(--m-branco)}
.servicos a[aria-current="true"] .hr{opacity:.85}

/* a única coisa que fica grudada. `--m-abas` é a altura dela, e é o mesmo número
   que o `scroll-margin-top` das seções usa — senão tocar em "Primi" leva o
   título para debaixo das abas, que foi o achado do João. O JS mede a altura
   real na hora do toque; este valor é a rede para o caminho sem JS. */
.sessoes{position:sticky;top:0;z-index:3;
         display:flex;gap:16px;overflow-x:auto;padding:12px 0 10px;margin:0 -20px;
         padding-left:20px;padding-right:20px;scrollbar-width:none;
         background:var(--m-branco);border-bottom:1px solid var(--m-linha)}
.sessoes::-webkit-scrollbar{display:none}
.sessoes a{flex:none;width:60px;text-decoration:none;text-align:center}
.sessoes .disco{width:44px;height:44px;margin:0 auto 5px;border-radius:50%;
                border:1px solid var(--m-linha);background:var(--m-branco);display:flex;
                align-items:center;justify-content:center;color:var(--m-azul)}
.sessoes .disco svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;
                    stroke-linecap:round;stroke-linejoin:round}
.sessoes .rot{display:block;font-size:10.5px;line-height:1.2;color:var(--m-suave)}
.sessoes a[aria-current="true"] .disco{background:var(--m-azul);border-color:var(--m-azul);color:var(--m-branco)}
.sessoes a[aria-current="true"] .rot{color:var(--m-azul);font-weight:600}

/* ===== o rolador: agora leva o cabeçalho, o cardápio e o rodapé ===== */
.rolagem{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;
         scroll-behavior:smooth;padding:0 20px 0;--m-abas:84px}

/* vitrine */
.vitrine{padding:18px 0 4px}
.vitrine h2{font:600 12px/1 var(--m-sans);letter-spacing:.16em;color:var(--m-vinho);margin:0 0 10px}
.faixa{display:flex;gap:12px;overflow-x:auto;margin:0 -20px;padding:0 20px 6px;scrollbar-width:none}
.faixa::-webkit-scrollbar{display:none}
.cartao{flex:none;width:184px;background:var(--m-branco);border:1px solid var(--m-linha);
        border-radius:12px;overflow:hidden;text-align:left;padding:0}
/* `.capa` (e não `.cartao img`): é o seletor que o G-VIS do D-429 usa para
   provar que a foto chegou do volume — `img.mini, img.capa`. */
.cartao .capa{display:block;width:100%;height:118px;object-fit:cover;background:var(--m-vazio)}
.cartao .txt{padding:9px 11px 11px;display:block}
.cartao .nm{font:600 14px/1.25 var(--m-serif);color:var(--m-azul);display:block}
.cartao .ds{font-size:11.5px;color:var(--m-suave);margin-top:3px;line-height:1.35;display:block;
            display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cartao .pr{font:600 13px/1 var(--m-sans);color:var(--m-vinho);margin-top:7px;display:block}

/* seções */
.secao{padding-top:24px;scroll-margin-top:calc(var(--m-abas) + 8px)}
.secao h2.sec{display:flex;align-items:center;gap:10px;margin:0 0 4px;
              font:600 22px/1.15 var(--m-serif);color:var(--m-azul);letter-spacing:.01em}
.secao h2.sec i{flex:1;height:1px;background:var(--m-azul);opacity:.28}
.secao h2.sec b{flex:none;width:5px;height:5px;border-radius:50%;background:var(--m-vinho)}
.aviso-sessao{font-size:12px;color:var(--m-vinho);margin:2px 0 0}

.item{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;
      background:none;border:0;border-bottom:1px solid var(--m-linha);padding:13px 0}
.item:last-child{border-bottom:0}
.item .mini{flex:none;width:52px;height:52px;border-radius:8px;object-fit:cover;background:var(--m-vazio)}
.item .corpo{flex:1;min-width:0}
.item .nm{font:500 16px/1.3 var(--m-serif);color:var(--m-texto);display:block}
.item .ds{font-size:12.5px;color:var(--m-suave);margin-top:3px;line-height:1.4;display:block}
.item .pr{flex:none;font:500 15px/1.3 var(--m-sans);color:var(--m-texto);white-space:nowrap;padding-top:1px}
.item .pr.sem{color:var(--m-suave)}
/* D-460 — o par de preços. Separador por CÓPIA do protótipo (D-114 §3): é o
   caractere "|" em tom suave, não um filete de CSS. A primeira versão desenhava
   os dois — o caractere DENTRO de um bloco com fundo — e o G-VIS mostrou a
   marca dobrada. `aria-hidden` porque o leitor de tela recebe o `aria-label`
   por extenso (D7).
   `white-space: nowrap` no `.pr`: o par nunca quebra em duas linhas. */
.item .pr{white-space:nowrap}
.item .pr .sep{color:var(--m-suave);font-weight:400;font-style:normal;margin:0 2px}
/* D-496 §1 — a lista sem a moeda: o tamanho maior fica no preto e no corpo do
   `.pr` (15 px); os demais saem em cinza e menores, para `138 | 91` não se ler
   como um número só. Por CÓPIA do protótipo `qr01_preco_tamanhos_v1.html`
   (D-114 §3): lá o menor é 17 px num preço de 19 px (`.preco .b`) e a cor é
   `--tinta-2` — na escala desta folha (preço 15 px) dá 13,5 px, e `--tinta-2`
   é `--m-suave` pela substituição mecânica de tokens do D-443. A moeda mora na
   linha de serviço da sessão (`.aviso-sessao`), não aqui. Sem cor nova (R2). */
.item .pr .menor{font-size:13.5px;color:var(--m-suave)}
.rotulos-secao{font:500 11px/1.2 var(--m-sans);letter-spacing:.06em;color:var(--m-suave);
               margin:2px 0 0;text-transform:uppercase}
.rotulos-item{display:block;font:500 10.5px/1.2 var(--m-sans);letter-spacing:.06em;
              color:var(--m-suave);text-align:right;margin-top:3px;white-space:nowrap}

/* rodapé no FIM da rolagem (D-448 §2) — era fixo, e no celular a faixa comia
   altura útil o tempo todo. `env(safe-area-inset-bottom)`: o protótipo roda no
   desktop e não tem entalhe; o aparelho real tem, e sem isto a última linha some
   sob o indicador. */
.rodape{margin:26px -20px 0;background:var(--m-branco);border-top:1px solid var(--m-linha);
        padding:12px 20px calc(16px + env(safe-area-inset-bottom, 0px));
        font-size:11.5px;color:var(--m-suave);line-height:1.45}
.rodape b{color:var(--m-texto)}

/* a casa sem cardápio publicado — estado, não erro */
.vazio{padding:40px 22px;text-align:center;font:18px/1.5 var(--m-serif);color:var(--m-suave)}

/* folha do item */
/* o véu é a própria tinta da casa a 42% — `opacity` no lugar de um rgba()
   literal: mesma cor, sem cor nova no arquivo (ratchet R2 do ui_guard). */
.veu{position:fixed;inset:0;background:var(--m-texto);opacity:.42;z-index:8}
.folha{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:min(520px,100%);
       max-height:88vh;background:var(--m-branco);z-index:9;border-radius:16px 16px 0 0;
       display:flex;flex-direction:column;overflow:hidden}
.folha img{display:block;width:100%;height:236px;object-fit:cover;background:var(--m-vazio)}
.folha .corpo{padding:18px 20px calc(24px + env(safe-area-inset-bottom, 0px));overflow:auto}
.folha h3{margin:0;font:600 23px/1.2 var(--m-serif);color:var(--m-azul)}
.folha .sec-do-item{font-size:11px;letter-spacing:.14em;color:var(--m-vinho);margin:0 0 6px;font-weight:600}
.folha .ds{margin:9px 0 0;font-size:14px;color:var(--m-suave);line-height:1.5}
.folha .pr{margin:14px 0 0;font:600 20px/1 var(--m-sans);color:var(--m-texto)}
/* D-496 §2 — o card do sabor com todos os tamanhos: o rótulo do cadastro em
   caixa alta suave (a mesma régua da legenda `.rotulos-secao`), a moeda e o
   número no peso do preço. Cada tamanho é um bloco que não quebra por dentro;
   com três, a linha quebra ENTRE tamanhos. */
.folha .pr .tam{display:inline-block;white-space:nowrap;line-height:1.5}
.folha .pr .rot{font:500 11px/1 var(--m-sans);letter-spacing:.06em;text-transform:uppercase;
                color:var(--m-suave);margin-right:5px}
.folha .pr .sep{color:var(--m-suave);font-weight:400;font-style:normal;margin:0 9px}
.folha .fechar{position:absolute;right:12px;top:12px;width:34px;height:34px;border-radius:50%;
               border:0;background:var(--m-branco);font-size:19px;line-height:1;color:var(--m-texto)}

@media (max-width:520px){
  .aparelho{max-width:100%}
  .secao h2.sec{font-size:20px}
}

/* =====================================================================
   D-526 (CAR-03 v1) — o cardápio em TELAS GRANDES: tablet e computador.

   Contrato: `docs/prototipos/car03_cardapio_telas_v1.html` (33/33 na smoke),
   aprovado pelo João em 23/09/2026. Por CÓPIA dos dois blocos @media dele
   (D-114 §3), com substituição MECÂNICA:

   · seletores — .cab/.cab__in → .topo · .trilho__in/.trilho__faixa → .trilho/
     .sessoes · .trilho__seta → .seta · .corpo → .miolo (`.corpo` já é o corpo
     do item e da folha) · .vitrine__grade → .faixa · .destaque → .cartao ·
     .destaque .foto → .cartao .capa · .destaque__nome/__desc → .cartao .nm/.ds ·
     .secao__cab h2 → .secao h2.sec · .item .miniatura → .item .mini ·
     .item__nome/__desc → .item .nm/.ds · .folha__foto → .folha img ·
     .folha__texto → .folha .corpo · .folha__nome → .folha h3 · .logo →
     .topo .assinatura svg · .lateral .marca → .lateral .marcador (aqui "marca"
     é a da casa, a do `marca.css`).
   · tokens — os do D-443 (--azul → --m-azul, --vinho → --m-vinho, --branco →
     --m-branco, --tinta → --m-texto, --tinta-2 → --m-suave, --serif/--sans →
     --m-serif/--m-sans) e os dois novos do CAR-03: --fio e --fio-forte →
     --m-linha, o filete que a página já usa. A sombra do protótipo é cor
     literal com transparência; aqui sai da tinta da casa por `color-mix` — sem
     cor nova no arquivo (ratchet R2 do ui_guard), como o véu do D-443.

   O CELULAR NÃO MUDA (C1). O celular do protótipo é reconstrução de uma
   captura de tela; abaixo de 640 px vale a página de hoje. Por isso só os
   blocos @media entram, e onde o protótipo não mexe numa largura continua o
   valor de hoje (o título da seção fica em 22 px no tablet: o bloco de 640 do
   protótipo não o toca). As três regras de base logo abaixo não mudam nada
   que já existia: escondem no celular os elementos NOVOS, como o protótipo os
   declara (C1: `.lateral{display:none}`, `.trilho__seta{display:none}`). O
   `display: contents` é o mesmo "não existe" para a caixa que embrulha a faixa
   de hoje — sem caixa, a faixa continua grudando no rolador como antes.
   ===================================================================== */
.trilho{display:contents}
.lateral,.seta{display:none}

/* ===== tablet e janela estreita: 640 px ou mais (C2) ===== */
@media (min-width:640px){
  /* o rolador ocupa a janela e as faixas brancas vão de ponta a ponta; quem
     limita a largura é o miolo (720 px). Sem o padding lateral do rolador, as
     margens negativas do celular voltam a zero. O `scroll-padding` leva o foco
     de teclado para baixo da faixa grudada. */
  .aparelho{max-width:none}
  .rolagem{padding-left:0;padding-right:0;scroll-padding-top:calc(var(--m-abas) + 8px)}
  .topo{margin:0;padding-top:28px;padding-bottom:18px}
  .servicos{max-width:600px;margin-left:auto;margin-right:auto}
  /* a faixa: 720 px no meio, como o `.trilho__in` (708 de conteúdo + 6 + 6) */
  .trilho{display:flex;align-items:center;position:sticky;top:0;z-index:3;
          padding:0 max(6px,calc(50% - 354px));
          background:var(--m-branco);border-bottom:1px solid var(--m-linha)}
  .sessoes{position:static;flex:1;min-width:0;margin:0;padding-left:8px;padding-right:8px;
           background:none;border-bottom:0}
  .seta{display:flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;
        border-radius:50%;border:1px solid var(--m-linha);color:var(--m-azul);
        background:var(--m-branco);font-size:20px;line-height:1;padding:0}
  .seta:disabled{opacity:.3;cursor:default}
  .miolo{max-width:720px;margin:0 auto;padding:0 24px 56px}
  .faixa{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;overflow:visible;
         margin:0;padding:0}
  .cartao{flex:none;width:auto}
  .cartao .capa{aspect-ratio:3/2;height:auto}
  /* largura de leitura: no celular a coluna já é mais estreita que isto */
  .item .ds{max-width:62ch}
  /* o rodapé alinha com a coluna (o do protótipo é outro texto, centrado) */
  .rodape{margin:0;padding-left:max(20px,calc(50% - 336px));padding-right:max(20px,calc(50% - 336px))}
  .folha{top:0;left:0;right:0;bottom:0;margin:auto;height:fit-content;width:min(620px,92vw);
         border-radius:16px;transform:none;
         box-shadow:0 18px 50px color-mix(in srgb,var(--m-texto) 28%,transparent)}
  .folha .ds{max-width:60ch}
}
/* a janela sobe com um leve movimento — só sem pedido de movimento reduzido,
   e só a partir de 640 px: a folha do celular de hoje não anima */
@media (min-width:640px) and (prefers-reduced-motion:no-preference){
  .folha{animation:sobe .22s ease-out}
}
@keyframes sobe{from{transform:translateY(28px);opacity:.5}}

/* ===== computador: 1024 px ou mais (C3 e C4) ===== */
@media (min-width:1024px){
  .rolagem{scroll-padding-top:24px}
  .topo{padding-top:34px;padding-bottom:26px}
  /* o logotipo do protótipo é substituto e vai de 172 a 188 px (+9%); o da
     casa cresce na mesma proporção: 132 → 144 px */
  .topo .assinatura svg{width:144px}
  .trilho{display:none}
  .miolo{max-width:1200px;display:grid;grid-template-columns:210px minmax(0,1fr);column-gap:64px;
         padding:44px 48px 80px}
  .conteudo{min-width:0}
  .lateral{display:block;position:sticky;top:28px;align-self:start;max-height:calc(100vh - 56px);
           overflow:auto}
  /* Bodoni 400 no protótipo; a página carrega 500 e 600 (dois pesos, §0.6) —
     o 400 cairia no 500, então se escreve o que a tela desenha */
  .lateral__servico{margin:0;font:500 26px/1.15 var(--m-serif);color:var(--m-azul)}
  .lateral__hora{margin:2px 0 16px;color:var(--m-suave);font-size:15px}
  .lateral ul{list-style:none;margin:0;padding:12px 0 0;border-top:1px solid var(--m-linha)}
  .lateral a{display:flex;align-items:center;gap:10px;padding:7px 0;text-decoration:none;
             color:var(--m-suave)}
  .lateral .ic{width:20px;height:20px;flex:none;color:var(--m-azul);fill:none;stroke:currentColor;
               stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
  /* a marca de onde a pessoa está: a linha com ponto do manual da marca */
  .lateral .marcador{position:relative;flex:none;width:16px;height:1px}
  .lateral a[aria-current="true"]{color:var(--m-azul);font-weight:600}
  .lateral a[aria-current="true"] .marcador{background:var(--m-azul)}
  .lateral a[aria-current="true"] .marcador::after{content:"";position:absolute;right:-3px;top:-2.5px;
                                                   width:6px;height:6px;border-radius:50%;
                                                   background:var(--m-vinho)}
  .lateral a:hover{color:var(--m-azul)}
  .vitrine{padding-top:2px}
  .faixa{gap:24px}
  .cartao .nm{font-size:20px}
  .cartao .ds{font-size:14px}
  .secao{padding-top:52px;scroll-margin-top:24px}
  .secao h2.sec{font-size:32px}
  .itens{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}
  .item{padding:18px 0}
  /* em duas colunas todo prato leva o filete, como no protótipo: sem isto a
     última linha sairia com um filete à esquerda e nenhum à direita */
  .item:last-child{border-bottom:1px solid var(--m-linha)}
  .item .mini{width:72px;height:72px}
  .item .nm{font-size:19px}
  .item .ds{font-size:15px}
  .item:hover .nm{color:var(--m-azul)}
  .rodape{padding-left:max(48px,calc(50% - 552px));padding-right:max(48px,calc(50% - 552px))}
  /* a janela com a foto ao lado do texto; texto longo rola na coluna dele
     (`minmax(0,1fr)` segura a linha na altura máxima da janela) */
  .folha{width:min(880px,92vw);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
         grid-template-rows:minmax(0,1fr);overflow:hidden;max-height:min(88vh,560px)}
  .folha--sem-foto{grid-template-columns:minmax(0,1fr);width:min(560px,92vw)}
  .folha img{height:100%;min-height:380px}
  .folha .corpo{padding:44px 40px 36px;overflow:auto}
  .folha h3{font-size:32px}
}