/* =====================================================================
   K-BaB · MOVIMENTO — sistema compartilhado (frente A, rodada de movimento, 02/11/2026)
   ---------------------------------------------------------------------
   Vocabulário único do site: a barraca (포장마차) à noite respira.
   - TOKENS (--mv-*): use estes nomes em todo o site (curvas, durações, molas).
   - Tudo o que esconde ou mexe fica dentro de @media (prefers-reduced-motion: no-preference).
     O que ESCONDE para depois revelar só vale com <html class="mv">, posta por
     /assets/transicoes.js (no <head>) e por /assets/movimento.js. Sem JavaScript, ou se ele
     falhar, nada fica escondido (e há rede de segurança de 3 s).
   - Anima só transform, opacity e filter leve. Nada de layout.
   - API para as outras frentes (opcional): window.KBMV, ver /assets/movimento.js.
     data-mv="sobe|tinta|balcao|pulo|comanda|pendura|polaroid|liga|rola" num elemento +
     KBMV.observa(el) → entra em cena quando aparece na tela, com stagger automático.
   - GLOBAL (todas as páginas): cordão de lâmpadas (body > .fio), cabeçalho (.topo), rodapé
     (.rodape), aviso de privacidade (.kbp-barra) e seletor de delivery (#kb-delivery).
     O resto só vale dentro de <main data-mv-pagina> (páginas do restaurante, frente A) e na .lona.
   ===================================================================== */
:root {
  /* durações */
  --mv-dur-1: .16s;   /* micro: hover, toque */
  --mv-dur-2: .32s;   /* pequenas entradas, quique de botão */
  --mv-dur-3: .56s;   /* revelações */
  --mv-dur-4: .9s;    /* grandes momentos: cortina, abertura */
  /* curvas */
  --mv-ease-sai: cubic-bezier(.4, 0, 1, 1);
  --mv-ease-entra: cubic-bezier(.16, .84, .24, 1);
  --mv-ease-mola: cubic-bezier(.34, 1.56, .64, 1);
  --mv-ease-suave: cubic-bezier(.45, 0, .2, 1);
  /* mola "de verdade" (amortecida, um quique). Navegador sem linear(): cai na curva padrão do elemento */
  --mv-ease-pouso: linear(0, .02 1.5%, .09 3.5%, .36 9%, .69 15%, .93 21%, 1.05 26.5%, 1.09 31%, 1.07 36%, 1.02 42.5%, .99 50%, .985 56%, 1 70%, 1);
  --mv-stagger: 70ms;
  /* distâncias e ângulos */
  --mv-dist: 22px;
  --mv-balanco: 5deg;
}

/* ---------- utilitário: cartão inteiro clicável (padrão do site, 02/11/2026) ----------
   O cartão (.kb-cartao-todo) tem UM elemento interativo (.kb-cartao-alvo, com o nome acessível);
   a área de toque cobre o cartão todo. Funciona sem JavaScript. Foco visível no cartão inteiro. */
.kb-cartao-todo { position: relative; cursor: pointer; }
.kb-cartao-todo .kb-cartao-alvo:not(.btn) { text-decoration: none; color: inherit; }
.kb-cartao-todo .kb-cartao-alvo::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.kb-cartao-todo .kb-cartao-alvo:focus-visible { outline: none; }
.kb-cartao-todo .kb-cartao-alvo:not(.btn):focus-visible { box-shadow: none; }
.kb-cartao-todo .btn.kb-cartao-alvo:focus-visible { box-shadow: 0 3px 0 var(--noite, #14203A); }
/* o alvo nunca ganha transform enquanto o cartão é apontado (transform mudaria a área de toque) */
.kb-cartao-todo:has(.kb-cartao-alvo:focus-visible) { outline: 3px solid var(--lampada, #FFC94A); outline-offset: 4px; box-shadow: 0 0 0 7px var(--noite, #14203A); }
[data-mv-vapor] { position: relative; }

/* =====================================================================
   1. CORDÃO DE LÂMPADAS VIVO (body > .fio, .chimaek, .fecho)
   O movimento.js desenha cada lâmpada (.mv-lamp) sobre o fio; o fundo original (fio + lâmpadas
   em SVG) fica só com o fio. Sem JS ou com movimento reduzido: o desenho estático de sempre.
   Fase contínua entre páginas (o atraso vem do relógio): na troca de página nada "pula".
   ===================================================================== */
.mv-fio-vivo { position: relative; }
html.mv .mv-fio-vivo {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='30'%3E%3Cpath d='M0 3Q80 25 160 3' fill='none' stroke='%23566690' stroke-width='1.6'/%3E%3C/svg%3E") !important;
}
.mv-lampadas { position: absolute; left: 0; top: 0; width: 100%; height: 40px; pointer-events: none; overflow: hidden; z-index: 0;
  transform-origin: 0 11px; }   /* o "vento" é um skewX nesta camada inteira (uma só transformação) */
.mv-fio-vivo > :not(.mv-lampadas):not(.mv-cena) { position: relative; z-index: 1; }
/* 3 grupos de lâmpadas (uma em cada três). Cada grupo balança com um skewX a partir da altura do fio:
   cada lâmpada "pendula" no próprio bocal, e são só 3 animações por cordão (barato até no celular). */
.mv-grupo, .mv-halos { position: absolute; inset: 0; transform-origin: 0 11px; }
.mv-lamp { position: absolute; width: 16px; height: 18px; }
.mv-lamp::after { content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle 4.5px at 8px 7px, #FFF8E0 0, #FFE18C 38%, #FFC94A 76%, rgba(255, 201, 74, 0) 100%),
    linear-gradient(#566690, #566690) 6.3px 0 / 3.4px 4.2px no-repeat; }
.mv-halo { position: absolute; width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 201, 74, .6) 0, rgba(255, 201, 74, .2) 40%, rgba(255, 201, 74, 0) 68%); }
@media (prefers-reduced-motion: no-preference) {
  html.mv .mv-grupo { animation: mv-balanca 3.1s var(--mv-ease-suave) infinite alternate; }
  html.mv .mv-grupo.mv-g2 { animation-duration: 3.9s; animation-name: mv-balanca-b; }
  html.mv .mv-grupo.mv-g3 { animation-duration: 2.6s; }
  html.mv .mv-g2 .mv-halos { animation: mv-brilho 2.8s ease-in-out infinite alternate; }   /* um grupo respira; os outros ficam firmes (leve no celular) */
  html.mv .mv-lamp.mv-pisca, html.mv .mv-halo.mv-pisca { animation: mv-pisca var(--tp, 9s) linear var(--dp, 0s) infinite; }
  html.mv .mv-parado :is(.mv-grupo, .mv-halos, .mv-pisca), html.mv .mv-parado .mv-vapor i,
  html.mv.mv-oculto :is(.mv-grupo, .mv-halos, .mv-pisca, .mv-vapor i) { animation-play-state: paused !important; }
}
/* sem JavaScript (403, 500, JS desligado): as lâmpadas pelo menos respiram (brilho), só CSS */
@media (prefers-reduced-motion: no-preference) {
  html:not(.mv) body > .fio { position: relative; isolation: isolate; }
  html:not(.mv) body > .fio > * { position: relative; z-index: 1; }
  html:not(.mv) body > .fio::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30px; z-index: 0; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='30'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23FFC94A' stop-opacity='.75'/%3E%3Cstop offset='1' stop-color='%23FFC94A' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='32' cy='16.5' r='13' fill='url(%23g)'/%3E%3Ccircle cx='80' cy='20.5' r='13' fill='url(%23g)'/%3E%3Ccircle cx='128' cy='16.5' r='13' fill='url(%23g)'/%3E%3C/svg%3E") repeat-x 0 0;
    animation: mv-brilho-fio 2.8s ease-in-out infinite alternate; }
}
@keyframes mv-brilho-fio { from { opacity: .45; } to { opacity: 1; } }
@keyframes mv-balanca { from { transform: skewX(-6deg); } to { transform: skewX(6deg); } }
@keyframes mv-balanca-b { from { transform: skewX(8deg); } to { transform: skewX(-4deg); } }
@keyframes mv-brilho { from { opacity: .45; } to { opacity: 1; } }
/* filamento frouxo: 2 piscadas em ~0,5 s a cada 8–12 s (nunca mais de 3 por segundo) */
@keyframes mv-pisca { 0%, 93% { opacity: 1; } 94% { opacity: .28; } 95.5% { opacity: 1; } 97% { opacity: .45; } 98.5%, 100% { opacity: 1; } }

/* =====================================================================
   2. ENTRADA EM CENA (revelações com stagger)
   O movimento.js marca data-mv="<tipo>" e, quando o elemento aparece, põe .mv-dentro (anima)
   e, no fim, .mv-feito (tira a animação: hover e foco voltam a mandar no transform).
   --mv-i = posição no stagger; --mv-atraso = atraso extra (ex.: cortina da transição).
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html.mv [data-mv]:not(.mv-dentro) { opacity: 0; }
  html.mv [data-mv="tinta"]:not(.mv-dentro) { opacity: 1; }          /* no título, quem entra são as palavras */
  html.mv [data-mv="tinta"]:not(.mv-dentro) kb-p { opacity: 0; }
  html.mv [data-mv="tinta"].mv-rascunho:not(.mv-dentro) kb-p { opacity: .14; }
  html.mv [data-mv].mv-dentro {
    animation-duration: var(--mv-dur-3);
    animation-timing-function: var(--mv-ease-entra);
    animation-timing-function: var(--mv-ease-pouso);
    animation-fill-mode: both;
    animation-delay: calc(var(--mv-i, 0) * var(--mv-stagger) + var(--mv-atraso, 0ms));
  }
  html.mv [data-mv="sobe"].mv-dentro { animation-name: mv-sobe; animation-timing-function: var(--mv-ease-entra); }
  html.mv [data-mv="balcao"].mv-dentro { animation-name: mv-balcao; animation-duration: .8s; }
  html.mv [data-mv="pulo"].mv-dentro { animation-name: mv-pulo; animation-duration: .62s; animation-timing-function: var(--mv-ease-suave); transform-origin: 50% 100%; }
  html.mv [data-mv="comanda"].mv-dentro { animation-name: mv-comanda; animation-duration: .95s; animation-timing-function: var(--mv-ease-suave); transform-origin: 50% 0; }
  html.mv [data-mv="pendura"].mv-dentro { animation-name: mv-pendura; animation-duration: 1.15s; animation-timing-function: var(--mv-ease-suave); transform-origin: 10px 50%; }
  html.mv [data-mv="polaroid"].mv-dentro { animation-name: mv-polaroid; animation-duration: 1.4s; animation-timing-function: var(--mv-ease-entra); transform-origin: 50% 0; }
  html.mv [data-mv="liga"].mv-dentro { animation-name: mv-liga; animation-duration: .7s; animation-timing-function: linear; }
  html.mv [data-mv="rola"].mv-dentro { animation-name: mv-rola; animation-duration: 1s; }
  html.mv [data-mv="tinta"].mv-dentro { animation: none; }
  html.mv [data-mv="tinta"].mv-dentro kb-p {
    animation: mv-tinta .66s var(--mv-ease-entra) both;
    animation-timing-function: var(--mv-ease-pouso);
    animation-delay: calc(var(--mv-atraso, 0ms) + var(--mv-i, 0) * var(--mv-stagger) + var(--mv-j, 0) * 52ms);
  }
  html.mv [data-mv="tinta"].mv-rascunho.mv-dentro kb-p { animation-name: mv-tinta-r; }
  html.mv [data-mv].mv-feito, html.mv [data-mv="tinta"].mv-feito kb-p { animation: none !important; }
  /* entradas que deslizam de lado não alargam a página (clip não cria rolagem: sticky continua funcionando) */
  html.mv main[data-mv-pagina] > :is(section, div) { overflow-x: clip; }
  /* rede de segurança: se o movimento.js não ficar pronto em 3 s, tudo aparece */
  html.mv:not(.mv-pronto) [data-mv]:not(.mv-dentro), html.mv:not(.mv-pronto) [data-mv] kb-p { animation: mv-aparece .3s 3s both; }
}
kb-p { display: inline-block; white-space: nowrap; }
kb-p.kb-p-ko { position: relative; }
kb-p > kb-j { position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none; color: var(--mv-cor-ko, inherit); }
kb-p.kb-p-montando { color: transparent !important; }
kb-n { display: inline-block; font-variant-numeric: tabular-nums; }

@keyframes mv-aparece { to { opacity: 1; transform: none; } }
@keyframes mv-sobe { from { opacity: 0; transform: translateY(var(--mv-dist)); } to { opacity: 1; transform: none; } }
/* o prato "chega ao balcão": desliza da direita, passa um tiquinho e assenta */
@keyframes mv-balcao { from { opacity: 0; transform: translateX(72px) rotate(3.5deg); } 30% { opacity: 1; } to { opacity: 1; transform: none; } }
/* o banquinho pula para o lugar (e amassa um pouco ao pousar) */
@keyframes mv-pulo {
  0% { opacity: 0; transform: translateY(26px) scale(.86, 1.1); }
  42% { opacity: 1; transform: translateY(-11px) scale(.97, 1.04); }
  66% { transform: translateY(0) scale(1.08, .9); }
  82% { transform: translateY(-2px) scale(.98, 1.02); }
  100% { opacity: 1; transform: none; }
}
/* a comanda é pendurada no trilho: desce e balança presa pelo alto */
@keyframes mv-comanda {
  0% { opacity: 0; transform: translateY(-34px) rotate(-3.4deg); }
  38% { opacity: 1; transform: translateY(3px) rotate(1.6deg); }
  60% { transform: translateY(0) rotate(-.9deg); }
  80% { transform: rotate(.35deg); }
  100% { opacity: 1; transform: none; }
}
/* a etiqueta de preço balança presa pelo furo */
@keyframes mv-pendura {
  0% { opacity: 0; transform: rotate(-42deg); }
  22% { opacity: 1; transform: rotate(20deg); }
  44% { transform: rotate(-10deg); }
  64% { transform: rotate(5deg); }
  82% { transform: rotate(-2deg); }
  100% { opacity: 1; transform: none; }
}
/* a polaroide cai na mesa e a foto "revela" */
@keyframes mv-polaroid {
  0% { opacity: 0; transform: translateY(-18px) rotate(-5deg); filter: saturate(0) brightness(1.45) contrast(.7); }
  22% { opacity: 1; transform: translateY(2px) rotate(1deg); filter: saturate(0) brightness(1.4) contrast(.75); }
  40% { transform: none; }
  100% { opacity: 1; transform: none; filter: none; }
}
/* lâmpada acendendo: duas falhadas e firma (2 piscadas em 0,7 s) */
@keyframes mv-liga { 0% { opacity: .15; } 18% { opacity: 1; } 30% { opacity: .35; } 52% { opacity: 1; } 100% { opacity: 1; } }
/* o disco do logo rola até o lugar */
@keyframes mv-rola { from { opacity: 0; transform: translateX(-90px) rotate(-220deg); } 35% { opacity: 1; } to { opacity: 1; transform: none; } }
/* palavra "escrita": entra com tinta, de leve inclinada */
@keyframes mv-tinta {
  from { opacity: 0; transform: translateY(.34em) rotate(-5deg); }
  55% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
/* título da abertura: a tinta passa por cima do rascunho */
@keyframes mv-tinta-r {
  from { opacity: .14; transform: translateY(.12em) rotate(-3deg); }
  to { opacity: 1; transform: none; }
}

/* =====================================================================
   3. ABERTURA (primeira tela de cada página) — só CSS, começa na 1ª pintura, não espera o JS.
   Fotos e títulos NÃO começam invisíveis (o LCP não piora): a foto só desliza; o título começa
   "rascunhado" (opacity .14) e a tinta vem com o movimento.js. Com a cortina da transição,
   tudo espera ela subir (--mv-atraso-cena, posto por /assets/transicoes.js).
   ===================================================================== */
html.kbvt-chegando { --mv-atraso-cena: .4s; }
@media (prefers-reduced-motion: no-preference) {
  html.mv main[data-mv-pagina] :is(.hero, .pag-hero, .reserva-hero, .doc-hero, .erro) h1:not(.mv-escrito) { opacity: .14; }
  html.mv:not(.mv-pronto) main[data-mv-pagina] :is(.hero, .pag-hero, .reserva-hero, .doc-hero, .erro) h1 { animation: mv-aparece .4s 1.6s both; }
  html.mv main[data-mv-pagina] :is(.hero, .pag-hero, .reserva-hero, .doc-hero, .erro) :is(.hero-local, .sobretitulo, .lead, .status, .endereco, .doc-data, .nota-google, .aviso-salao) {
    animation: mv-sobe var(--mv-dur-3) var(--mv-ease-entra) both;
    animation-delay: calc(var(--mv-atraso-cena, 0s) + var(--mv-c, .3s));
  }
  html.mv main[data-mv-pagina] :is(.hero, .pag-hero, .reserva-hero, .doc-hero, .erro) :is(.hero-local, .sobretitulo) { --mv-c: 0s; }
  html.mv main[data-mv-pagina] :is(.hero, .pag-hero, .reserva-hero, .doc-hero, .erro) .lead { --mv-c: .38s; }
  html.mv main[data-mv-pagina] :is(.hero, .pag-hero, .reserva-hero, .doc-hero, .erro) :is(.status, .endereco, .doc-data) { --mv-c: .5s; }
  html.mv main[data-mv-pagina] :is(.hero, .pag-hero, .reserva-hero, .doc-hero, .erro) :is(.nota-google, .aviso-salao) { --mv-c: .9s; }
  /* a lâmpada do "aberto agora" acende */
  html.mv main[data-mv-pagina] :is(.hero, .pag-hero) .status .lamp { animation: mv-liga .7s linear both; animation-delay: calc(var(--mv-atraso-cena, 0s) + .85s); }
  /* botões da abertura: banquinhos que pulam, um depois do outro */
  html.mv main[data-mv-pagina] :is(.hero-acoes, .pag-hero .acoes, .erro-acoes) > * {
    animation: mv-pulo .62s var(--mv-ease-suave) both; transform-origin: 50% 100%;
    animation-delay: calc(var(--mv-atraso-cena, 0s) + .62s + var(--mv-n, 0) * 90ms);
  }
  html.mv main[data-mv-pagina] :is(.hero-acoes, .pag-hero .acoes, .erro-acoes) > :nth-child(2) { --mv-n: 1; }
  html.mv main[data-mv-pagina] :is(.hero-acoes, .pag-hero .acoes, .erro-acoes) > :nth-child(3) { --mv-n: 2; }
  html.mv main[data-mv-pagina] :is(.hero-acoes, .pag-hero .acoes, .erro-acoes) > :nth-child(4) { --mv-n: 3; }
  /* fotos da abertura: os pratos chegam ao balcão (sem começar invisíveis) */
  html.mv main[data-mv-pagina] :is(.mosaico, .pag-hero) .foto {
    animation: mv-chega 1s var(--mv-ease-entra) both;
    animation-timing-function: var(--mv-ease-pouso);
    animation-delay: calc(var(--mv-atraso-cena, 0s) + var(--mv-n, 0) * 130ms);
  }
  html.mv main[data-mv-pagina] .mosaico .foto:nth-child(2) { --mv-n: 1; }
  html.mv main[data-mv-pagina] .mosaico .foto:nth-child(3) { --mv-n: 2; }
  html.mv main[data-mv-pagina] :is(.mosaico, .pag-hero) .etiqueta {
    animation: mv-sobe .5s var(--mv-ease-entra) both; --mv-dist: 14px;
    animation-delay: calc(var(--mv-atraso-cena, 0s) + .55s + var(--mv-n, 0) * 130ms);
  }
  html.mv main[data-mv-pagina] :is(.mosaico, .pag-hero) .etiqueta .preco {
    animation: mv-pendura 1.15s var(--mv-ease-suave) both; transform-origin: 10px 50%;
    animation-delay: calc(var(--mv-atraso-cena, 0s) + .72s + var(--mv-n, 0) * 130ms);
  }
  /* comanda da Primeira vez e resumo das páginas legais: pendurados pelo alto */
  html.mv main[data-mv-pagina] :is(.pv-hero .pv-comanda, .doc-hero .comanda, .visite-hero .horario) {
    animation: mv-comanda .95s var(--mv-ease-suave) both; transform-origin: 50% 0;
    animation-delay: calc(var(--mv-atraso-cena, 0s) + .25s);
  }
}
@keyframes mv-chega { from { transform: translateX(56px) rotate(2.4deg) scale(.97); } to { transform: none; } }

/* =====================================================================
   4. VAPOR subindo dos pratos quentes ([data-mv-vapor]: o JS cria 3 fiapos; pausa fora da tela)
   ===================================================================== */
.mv-vapor { position: absolute; left: 24%; right: 24%; top: 2%; height: 48%; pointer-events: none; z-index: 1; display: none; }
.mv-vapor i { position: absolute; bottom: 0; width: 36%; height: 100%; opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 140'%3E%3Cfilter id='b' x='-50%25' y='-20%25' width='200%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='4.5'/%3E%3C/filter%3E%3Cpath d='M30 136C14 118 44 100 30 80S16 44 32 26 36 8 30 2' fill='none' stroke='%23fff' stroke-width='10' stroke-linecap='round' filter='url(%23b)'/%3E%3C/svg%3E") center / contain no-repeat; }
.mv-vapor i:nth-child(1) { left: 12%; }
.mv-vapor i:nth-child(2) { left: 52%; }
@media (prefers-reduced-motion: no-preference) {
  html.mv .mv-vapor { display: block; }
  html.mv .mv-vapor i { animation: mv-vapor 4.2s var(--mv-ease-suave) infinite; }
  html.mv .mv-vapor i:nth-child(2) { animation-delay: -2.2s; animation-duration: 4.8s; }
}
@keyframes mv-vapor {
  0% { opacity: 0; transform: translateY(40%) scale(.7, .8); }
  30% { opacity: .55; }
  60% { opacity: .34; transform: translateY(-8%) scale(1.05, 1) rotate(4deg); }
  100% { opacity: 0; transform: translateY(-46%) scale(1.35, 1.1) rotate(-6deg); }
}

/* =====================================================================
   5. LONA que ondula com o vento (.lona da 404, 403 e 500; a cortina da transição usa o mesmo
   desenho). Dobras = faixas de luz e sombra que correm devagar (só transform). Sem JS.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .lona::after { content: ""; position: absolute; top: 0; bottom: 0; left: -50%; width: 200%; pointer-events: none; z-index: 0;
    background: repeating-linear-gradient(90deg, rgba(120, 40, 0, 0) 0, rgba(120, 40, 0, .1) 8%, rgba(120, 40, 0, 0) 15%, rgba(255, 236, 200, .1) 21%, rgba(120, 40, 0, 0) 25%);
    animation: mv-dobras 7s linear infinite; }
  .lona .bilhete { animation: mv-bilhete 3.4s var(--mv-ease-suave) infinite alternate; transform-origin: 50% 0; }
  .lona .numero { animation: mv-numero 1.1s var(--mv-ease-suave) .15s both; }
}
@keyframes mv-dobras { from { transform: translateX(0); } to { transform: translateX(25%); } }
@keyframes mv-bilhete { from { transform: rotate(-3.6deg) skewX(.8deg); } to { transform: rotate(-1.2deg) skewX(-.8deg); } }
@keyframes mv-numero { 0% { transform: translateY(-70px) scale(.92); } 45% { transform: translateY(6px) scale(1.03, .95); } 70% { transform: translateY(-3px); } 100% { transform: none; } }

/* =====================================================================
   6. CENA NOTURNA em camadas (céu, prédios, barracas) com parallax, nas faixas escuras
   (.fecho, .chimaek). Desenho decorativo (aria-hidden), atrás do texto.
   Com scroll-driven animations: só CSS. Sem suporte: o movimento.js move (só enquanto rola).
   ===================================================================== */
.mv-cena { display: none; }
@media (prefers-reduced-motion: no-preference) {
  html.mv .mv-com-cena { position: relative; overflow: clip; }
  html.mv .mv-cena { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: min(70%, 240px); pointer-events: none; z-index: 0; }
  html.mv .mv-cena > i { position: absolute; left: -3%; right: -3%; bottom: 0; background-repeat: repeat-x; background-position: 0 100%; }
  html.mv .mv-ceu { top: -55%; bottom: auto !important; height: 80%; background-position: 0 0 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='120'%3E%3Cg fill='%23DCE3F0'%3E%3Ccircle cx='18' cy='22' r='1.1' opacity='.5'/%3E%3Ccircle cx='76' cy='64' r='.9' opacity='.35'/%3E%3Ccircle cx='121' cy='14' r='1.3' opacity='.55'/%3E%3Ccircle cx='170' cy='48' r='.8' opacity='.4'/%3E%3Ccircle cx='214' cy='90' r='1' opacity='.3'/%3E%3Ccircle cx='240' cy='30' r='.9' opacity='.45'/%3E%3Ccircle cx='44' cy='100' r='.8' opacity='.28'/%3E%3C/g%3E%3C/svg%3E"); }
  html.mv .mv-predios { height: 150px; opacity: .85;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='150'%3E%3Cg fill='%231B2A4A'%3E%3Crect x='0' y='58' width='54' height='92'/%3E%3Crect x='60' y='22' width='40' height='128'/%3E%3Crect x='76' y='8' width='3' height='14'/%3E%3Crect x='106' y='70' width='62' height='80'/%3E%3Crect x='174' y='38' width='46' height='112'/%3E%3Crect x='226' y='84' width='58' height='66'/%3E%3Crect x='290' y='14' width='36' height='136'/%3E%3Crect x='306' y='0' width='2.5' height='14'/%3E%3Crect x='332' y='62' width='70' height='88'/%3E%3Crect x='408' y='44' width='44' height='106'/%3E%3Crect x='458' y='76' width='62' height='74'/%3E%3C/g%3E%3Cg fill='%23FFC94A'%3E%3Crect x='68' y='40' width='5' height='6' opacity='.45'/%3E%3Crect x='86' y='62' width='5' height='6' opacity='.3'/%3E%3Crect x='184' y='56' width='5' height='6' opacity='.4'/%3E%3Crect x='204' y='90' width='5' height='6' opacity='.28'/%3E%3Crect x='298' y='34' width='4' height='6' opacity='.42'/%3E%3Crect x='312' y='74' width='4' height='6' opacity='.28'/%3E%3Crect x='420' y='60' width='5' height='6' opacity='.36'/%3E%3Crect x='16' y='76' width='5' height='6' opacity='.28'/%3E%3Crect x='350' y='80' width='5' height='6' opacity='.34'/%3E%3C/g%3E%3C/svg%3E"); }
  html.mv .mv-barracas { height: 58px; opacity: .8;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='58'%3E%3Cg fill='%230F1830'%3E%3Crect x='20' y='26' width='92' height='32'/%3E%3Crect x='196' y='30' width='84' height='28'/%3E%3C/g%3E%3Cg fill='%23A9430B'%3E%3Cpath d='M10 28 26 8h80l16 20z'/%3E%3Cpath d='M186 31 200 12h76l14 19z'/%3E%3Ccircle cx='16' cy='28' r='6'/%3E%3Ccircle cx='28' cy='28' r='6'/%3E%3Ccircle cx='40' cy='28' r='6'/%3E%3Ccircle cx='52' cy='28' r='6'/%3E%3Ccircle cx='64' cy='28' r='6'/%3E%3Ccircle cx='76' cy='28' r='6'/%3E%3Ccircle cx='88' cy='28' r='6'/%3E%3Ccircle cx='100' cy='28' r='6'/%3E%3Ccircle cx='112' cy='28' r='6'/%3E%3Ccircle cx='192' cy='31' r='5.5'/%3E%3Ccircle cx='203' cy='31' r='5.5'/%3E%3Ccircle cx='214' cy='31' r='5.5'/%3E%3Ccircle cx='225' cy='31' r='5.5'/%3E%3Ccircle cx='236' cy='31' r='5.5'/%3E%3Ccircle cx='247' cy='31' r='5.5'/%3E%3Ccircle cx='258' cy='31' r='5.5'/%3E%3Ccircle cx='269' cy='31' r='5.5'/%3E%3Ccircle cx='280' cy='31' r='5.5'/%3E%3C/g%3E%3Cg fill='%23FFC94A'%3E%3Ccircle cx='44' cy='42' r='2.2' opacity='.8'/%3E%3Ccircle cx='66' cy='42' r='2.2' opacity='.8'/%3E%3Ccircle cx='88' cy='42' r='2.2' opacity='.8'/%3E%3Ccircle cx='222' cy='44' r='2' opacity='.7'/%3E%3Ccircle cx='250' cy='44' r='2' opacity='.7'/%3E%3C/g%3E%3C/svg%3E"); }
  @supports (animation-timeline: view()) {
    html.mv .mv-cena > i { animation: mv-paralaxe linear both; animation-timeline: view(); animation-range: cover; }
  }
  html.mv .mv-ceu { --de: -30px; --ate: 40px; }
  html.mv .mv-predios { --de: 30px; --ate: -18px; }
  html.mv .mv-barracas { --de: 46px; --ate: -30px; }
}
@keyframes mv-paralaxe { from { transform: translateY(var(--de, 0)); } to { transform: translateY(var(--ate, 0)); } }

/* =====================================================================
   7. MICROINTERAÇÕES (cabeçalho, rodapé, aviso, delivery e <main data-mv-pagina>)
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  /* menu: sublinhado que corre */
  html.mv .topo .nav ul a { position: relative; transition: background-color var(--mv-dur-1); }
  html.mv .topo .nav ul a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--laranja, #EE6A1F);
    transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--mv-dur-2) var(--mv-ease-entra); }
  html.mv .topo .nav ul a:hover::after { transform: scaleX(1); }
  html.mv .topo .nav ul a[aria-current]::after { display: none; }
  /* logo: o disco gira um pouco e volta */
  html.mv .topo .logo:hover .logo-disco { animation: mv-disco .7s var(--mv-ease-suave); }
  /* links com seta: sublinhado que corre + seta que avança */
  html.mv main[data-mv-pagina] .link-seta { position: relative; }
  html.mv main[data-mv-pagina] .link-seta::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--mv-dur-2) var(--mv-ease-entra); }
  html.mv main[data-mv-pagina] .link-seta:hover::after { transform: scaleX(1); }
  html.mv main[data-mv-pagina] .link-seta svg { transition: transform var(--mv-dur-2) var(--mv-ease-mola); }
  html.mv main[data-mv-pagina] .link-seta:hover svg { transform: translateX(4px); }
  /* rodapé: o link desliza um tiquinho e o sublinhado acende */
  html.mv .rodape :is(.rodape-in, .miudo) a { text-decoration-color: rgba(255, 255, 255, .45); transition: text-decoration-color var(--mv-dur-1), color var(--mv-dur-1); }
  html.mv .rodape :is(.rodape-in, .miudo) a:hover { text-decoration-color: var(--lampada, #FFC94A); }
  html.mv .rodape li > a { transition: transform var(--mv-dur-2) var(--mv-ease-mola); }
  html.mv .rodape li > a:hover { transform: translateX(3px); }
  /* ícones que reagem quando o botão é apontado */
  html.mv :is(.topo, main[data-mv-pagina], .kbd-pop) :is(.btn, .canal, .kbd-op):hover svg:has(use[href="#i-whats"]) { animation: mv-toca .6s var(--mv-ease-suave); }
  html.mv :is(.topo, main[data-mv-pagina], .kbd-pop) :is(.btn, .canal, .kbd-op):hover svg:has(use[href="#i-sacola"]) { animation: mv-sacola .55s var(--mv-ease-suave); }
  html.mv :is(.topo, main[data-mv-pagina]) :is(.btn, .canal):hover svg:has(use[href="#i-seta"]) { animation: mv-seta .6s var(--mv-ease-suave); }
  html.mv main[data-mv-pagina] :is(.btn, .canal):hover svg:has(use[href="#i-mapa"], use[href="#i-casa"]) { animation: mv-pino .6s var(--mv-ease-suave); }
  html.mv main[data-mv-pagina] :is(.btn, .canal):hover svg:has(use[href="#i-livro"], use[href="#i-controle"], use[href="#i-tel"], use[href="#i-insta"], use[href="#i-lista"]) { animation: mv-mexe .5s var(--mv-ease-suave); }
  html.mv .topo .busca-btn:hover svg { animation: mv-lupa .6s var(--mv-ease-suave); }
  /* cartão inteiro clicável: apontar o cartão = apontar o botão/link dele */
  html.mv main[data-mv-pagina] .kb-cartao-todo:hover .btn.kb-cartao-alvo { box-shadow: 0 4px 0 var(--noite, #14203A); filter: brightness(1.06); }
  html.mv main[data-mv-pagina] .kb-cartao-todo:hover .link-seta.kb-cartao-alvo::after { transform: scaleX(1); }
  html.mv main[data-mv-pagina] .kb-cartao-todo:hover .kb-cartao-alvo svg:has(use[href="#i-seta"]) { animation: mv-seta .6s var(--mv-ease-suave); }
  html.mv main[data-mv-pagina] .prato.kb-cartao-todo:hover h3 a { text-decoration: underline; text-decoration-color: var(--laranja, #EE6A1F); text-decoration-thickness: 3px; text-underline-offset: 4px; }
  /* cartões: a bolinha do ícone pula quando o cartão é apontado */
  html.mv main[data-mv-pagina] :is(.cartao, .canal, .pv-fato, .linha > li, .servicos li):hover :is(.ic-bola, .ic) { animation: mv-pulinho .5s var(--mv-ease-suave); }
}
@media (prefers-reduced-motion: no-preference) {
  /* botão que afunda (CSS de cada página) e QUICA ao soltar (o movimento.js põe .mv-quica) */
  html.mv .mv-quica { animation: mv-quica var(--mv-dur-2) var(--mv-ease-suave); }
  /* cartão inteiro clicável: afunda no toque */
  html.mv main[data-mv-pagina] .kb-cartao-todo { transition: transform var(--mv-dur-2) var(--mv-ease-mola); }
  html.mv main[data-mv-pagina] .kb-cartao-todo:active { transform: translateY(2px) scale(.985); transition-duration: .08s; }
  /* menu do celular: abre de cima, itens em sequência */
  html.mv .topo .nav ul.aberto { animation: mv-menu var(--mv-dur-2) var(--mv-ease-entra) both; transform-origin: calc(100% - 30px) 0; }
  html.mv .topo .nav ul.aberto > li { animation: mv-sobe .34s var(--mv-ease-entra) both; --mv-dist: 10px; }
  html.mv .topo .nav ul.aberto > li:nth-child(2) { animation-delay: 30ms; }
  html.mv .topo .nav ul.aberto > li:nth-child(3) { animation-delay: 60ms; }
  html.mv .topo .nav ul.aberto > li:nth-child(4) { animation-delay: 90ms; }
  html.mv .topo .nav ul.aberto > li:nth-child(5) { animation-delay: 120ms; }
  html.mv .topo .nav ul.aberto > li:nth-child(6) { animation-delay: 150ms; }
  html.mv .topo .nav ul.aberto > li:nth-child(7) { animation-delay: 180ms; }
  /* seletor de delivery: as opções pulam para o lugar */
  html.mv .kbd-pop:is(:popover-open, .kbd-aberto) .kbd-lista > li { animation: mv-pulo .55s var(--mv-ease-suave) both; transform-origin: 50% 100%; animation-delay: 60ms; }
  html.mv .kbd-pop:is(:popover-open, .kbd-aberto) .kbd-lista > li:nth-child(2) { animation-delay: 140ms; }
  /* aviso de privacidade: sobe com mola (meio segundo depois da página); sai descendo */
  html.mv .kbp-barra { animation: mv-aviso .7s var(--mv-ease-entra) .5s both; animation-timing-function: var(--mv-ease-pouso); }
  html.mv .mv-aviso-fantasma { animation: mv-aviso-sai .36s var(--mv-ease-sai) both !important; pointer-events: none; }
  /* reservas: chips "estalam" quando escolhidos; o número de pessoas rola */
  html.mv main[data-mv-pagina] :is(.r-chip, .r-op):has(input:checked) { animation: mv-estalo .34s var(--mv-ease-mola); }
  html.mv main[data-mv-pagina] .mv-rola-cima { animation: mv-num-cima .3s var(--mv-ease-entra); }
  html.mv main[data-mv-pagina] .mv-rola-baixo { animation: mv-num-baixo .3s var(--mv-ease-entra); }
  /* Primeira vez: a lâmpada do passo acende com falhadas (a própria página tira .pv-apagado) */
  html.mv main[data-mv-pagina] .pv-passo:not(.pv-apagado) .pv-lamp { animation: mv-liga .7s linear both; }
}
@keyframes mv-quica { 0% { transform: translateY(2px) scale(.97); } 45% { transform: translateY(-3px) scale(1.02); } 75% { transform: translateY(1px); } 100% { transform: translateY(0); } }
@keyframes mv-disco { 0% { transform: none; } 35% { transform: rotate(-14deg); } 70% { transform: rotate(6deg); } 100% { transform: none; } }
@keyframes mv-toca { 0%, 100% { transform: none; } 15% { transform: rotate(-14deg); } 30% { transform: rotate(12deg); } 45% { transform: rotate(-9deg); } 60% { transform: rotate(6deg); } 75% { transform: rotate(-3deg); } }
@keyframes mv-sacola { 0%, 100% { transform: none; } 35% { transform: translateY(-4px) scale(1.05, .95); } 65% { transform: translateY(1px) scale(.97, 1.03); } }
@keyframes mv-seta { 0%, 100% { transform: none; } 40% { transform: translateX(5px); } 70% { transform: translateX(-1px); } }
@keyframes mv-pino { 0%, 100% { transform: none; } 35% { transform: translateY(-5px); } 65% { transform: translateY(1px) scale(1.08, .9); } }
@keyframes mv-mexe { 0%, 100% { transform: none; } 30% { transform: rotate(-9deg) scale(1.06); } 65% { transform: rotate(6deg); } }
@keyframes mv-lupa { 0%, 100% { transform: none; } 40% { transform: rotate(-16deg) scale(1.08); } 70% { transform: rotate(5deg); } }
@keyframes mv-pulinho { 0%, 100% { transform: none; } 40% { transform: translateY(-6px) scale(.96, 1.05); } 70% { transform: translateY(0) scale(1.06, .94); } }
@keyframes mv-menu { from { opacity: 0; transform: translateY(-8px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes mv-aviso { from { transform: translateY(110%); } to { transform: none; } }
@keyframes mv-aviso-sai { from { transform: none; } to { transform: translateY(110%); } }
@keyframes mv-estalo { 0% { transform: scale(.94); } 55% { transform: scale(1.05); } 100% { transform: none; } }
@keyframes mv-num-cima { from { transform: translateY(55%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mv-num-baixo { from { transform: translateY(-55%); opacity: 0; } to { transform: none; opacity: 1; } }

/* =====================================================================
   8. PROGRESSO DE LEITURA (páginas longas): um cordão de lampadinhas na base do cabeçalho
   que acende conforme a leitura avança. Decorativo (aria-hidden). Responde direto à rolagem.
   ===================================================================== */
.mv-progresso { position: absolute; left: 0; right: 0; bottom: -4px; height: 7px; overflow: hidden; pointer-events: none; z-index: 2; }
.mv-progresso-luz { position: absolute; inset: 0; overflow: hidden; transform: translateX(-100%); }
.mv-progresso-luz > i { position: absolute; inset: 0; transform: translateX(100%);
  background:
    radial-gradient(circle 2.6px at 7px 3.5px, #FFF3C4 0, #FFC94A 70%, rgba(255, 201, 74, 0) 100%) 0 0 / 14px 7px repeat-x,
    linear-gradient(90deg, rgba(238, 106, 31, .2), #EE6A1F) 0 3px / 100% 1.5px no-repeat; }
@supports (animation-timeline: scroll()) {
  .mv-progresso.mv-css .mv-progresso-luz { animation: mv-prog-a linear both; animation-timeline: scroll(root); }
  .mv-progresso.mv-css .mv-progresso-luz > i { animation: mv-prog-b linear both; animation-timeline: scroll(root); }
}
@keyframes mv-prog-a { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes mv-prog-b { from { transform: translateX(100%); } to { transform: translateX(0); } }

/* =====================================================================
   9. RODAPÉ E IDIOMA: alvos de toque de 44 px (auditoria M15) — vale em todas as páginas
   ===================================================================== */
.rodape li > a { min-height: 44px; }
.kbi-idiomas a { position: relative; }
.kbi-idiomas a::before { content: ""; position: absolute; inset: -6px -3px; }   /* área de toque 44 px, sem mudar o desenho */
.rodape .rodape-abre { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; margin: 0; padding: 0;
  border: 0; border-bottom: 1px solid rgba(255, 255, 255, .18); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.rodape .rodape-abre::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat;
  transition: transform var(--mv-dur-2) var(--mv-ease-mola); }
.rodape .rodape-abre[aria-expanded="true"]::after { transform: rotate(45deg); background-color: rgba(255, 201, 74, .25); }
.rodape .rodape-abre:focus-visible { outline: 3px solid var(--lampada, #FFC94A); outline-offset: 3px; border-radius: 6px; }
.rodape .mv-sanfona ul { margin-top: 8px; }
@media (prefers-reduced-motion: no-preference) { html.mv .rodape .mv-sanfona ul:not([hidden]) { animation: mv-sobe .3s var(--mv-ease-entra) both; --mv-dist: -8px; } }

/* ---------- impressão: sem enfeites ---------- */
@media print {
  .mv-lampadas, .mv-vapor, .mv-cena, .mv-progresso { display: none !important; } .lona::after { display: none; }
  /* o que ainda não entrou em cena sai impresso normalmente */
  html.mv [data-mv], html.mv [data-mv] kb-p, html.mv main[data-mv-pagina] h1 { opacity: 1 !important; transform: none !important; animation: none !important; filter: none !important; }
}

/* ===== Cabeçalho no celular e tablet (≤ 1180 px): o botão do menu (hambúrguer) fica no canto
   superior direito, depois da busca e do "Reservar" — pedido do dono, 02/11/2026. Vale para
   todas as páginas com o cabeçalho padrão (.topo .nav). A lista do menu já abre alinhada à direita. */
@media (max-width:1180px){
  .topo .nav .menu-btn{order:99}
}
/* ===== fim do ajuste do menu ===== */