:root {
  /* Cores tiradas do toldo, da madeira e da placa da barraca */
  --toldo-verde: #2c6b3f;
  --verde-fundo: #163a24;
  --verde-escuro: #0f2a1a;
  --toldo-creme: #f2e7cf;
  --papel: #fbf6ea;
  --madeira: #b4622a;
  --madeira-escura: #2b1a0e;
  --placa-vermelho: #c3262c;
  --placa-amarelo: #efc02f;
  --tinta: #1d1a16;
  --tinta-suave: #5d554a;

  --fonte-titulo: "Young Serif", Georgia, serif;
  --fonte-texto: "Figtree", system-ui, sans-serif;

  --topo-h: 4.5rem;

  /* Largura do palco 16:9 que cobre a tela. As camadas da cena e do POV dividem essa medida. */
  --palco-w: max(100vw, 177.78svh);
  --palco-h: calc(var(--palco-w) * 9 / 16);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--topo-h); }
body {
  margin: 0;
  background: var(--verde-escuro);
  color: var(--toldo-creme);
  font-family: var(--fonte-texto);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 400; line-height: 1.1; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--placa-amarelo); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }

.pular-conteudo {
  position: fixed; left: 1rem; top: -4rem; z-index: 50;
  padding: .75rem 1.1rem;
  background: var(--placa-amarelo); color: var(--madeira-escura);
  font-weight: 700; border-radius: 8px;
}
.pular-conteudo:focus { top: 1rem; }

/* Botões: o vermelho e o amarelo da placa */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  padding: .8em 1.5em;
  background: var(--placa-vermelho);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px var(--placa-amarelo), 0 6px 0 #7d151a;
  transition: transform .15s ease, box-shadow .15s ease;
}
.botao:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--placa-amarelo), 0 8px 0 #7d151a; }
.botao:active { transform: translateY(4px); box-shadow: inset 0 0 0 2px var(--placa-amarelo), 0 2px 0 #7d151a; }
.botao-pequeno { padding: .55em 1.1em; font-size: .95rem; box-shadow: inset 0 0 0 2px var(--placa-amarelo), 0 4px 0 #7d151a; }
.botao-grande { font-size: 1.15rem; padding: 1em 2em; }
.botao-linha {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .6em .4em;
  font-weight: 700; color: inherit;
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px;
}

/* ---------- Topo ---------- */
.topo {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: var(--topo-h);
  padding: .5rem clamp(1rem, 4vw, 2.5rem);
  background: linear-gradient(rgba(10, 30, 18, .55), rgba(10, 30, 18, 0));
  transition: background-color .3s ease;
}
.topo.com-fundo { background: rgba(15, 42, 26, .95); }
.topo-marca {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--fonte-titulo);
  font-size: 1.35rem;
  white-space: nowrap;
  text-decoration: none;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
}
.topo-nav ul { display: flex; gap: clamp(.25rem, 1.2vw, 1rem); list-style: none; margin: 0; padding: 0; }
.topo-nav a {
  position: relative;
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 .6rem;
  color: #fff; text-decoration: none; font-weight: 600; white-space: nowrap;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.topo-nav a::after {
  content: ""; position: absolute; left: .6rem; right: .6rem; bottom: 6px; height: 3px;
  background: var(--placa-amarelo); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.topo-nav a:hover::after { transform: scaleX(.5); }
.topo-nav a[aria-current="true"]::after { transform: scaleX(1); }

/* No computador a linha da marca se desfaz: marca à esquerda, navegação, botão do pedido à direita */
.topo-linha { display: contents; }
.topo-nav { order: 1; margin-left: auto; }
.topo-pedido {
  order: 2;
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px;
  padding: 0 .55rem 0 1rem;
  border: 2px solid var(--placa-amarelo); border-radius: 999px;
  background: rgba(15, 42, 26, .7); color: #fff;
  font: 700 .95rem var(--fonte-texto); white-space: nowrap;
}
.topo-pedido:hover { background: var(--verde-escuro); }
.topo-pedido-qtd {
  display: inline-grid; place-items: center;
  min-width: 1.9rem; height: 1.9rem; padding: 0 .4rem;
  border-radius: 999px;
  background: var(--placa-amarelo); color: var(--madeira-escura);
  font-variant-numeric: tabular-nums;
}
.topo-pedido.pulsa .topo-pedido-qtd { animation: pulsa .4s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pulsa { 40% { scale: 1.25; } }

/* Celular e tablet: marca e pedido numa linha, a navegação numa faixa que rola de lado com os nomes inteiros */
@media (max-width: 960px) {
  :root { --topo-h: 6.75rem; }
  .topo { flex-direction: column; align-items: stretch; gap: 0; padding: .25rem 0 .25rem; }
  .topo-linha { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .25rem 1rem 0; }
  .topo-nav { margin-left: 0; }
  .topo-marca { font-size: 1.2rem; }
  .topo-pedido { font-size: .9rem; }
  .topo-nav { overflow-x: auto; scrollbar-width: none; -webkit-mask: linear-gradient(90deg, #000 85%, transparent); mask: linear-gradient(90deg, #000 85%, transparent); }
  .topo-nav::-webkit-scrollbar { display: none; }
  .topo-nav ul { padding: 0 2.5rem 0 .4rem; gap: 0; width: max-content; }

  /* Com JS: a faixa vira um menu aberto pelo botão, em lista, sem 6 links espremidos */
  :root.menu-pronto { --topo-h: 4rem; }
  .menu-pronto .topo-nav { display: none; }
  .menu-pronto .topo-nav.aberta {
    display: block; overflow: visible; -webkit-mask: none; mask: none;
    margin: .25rem .75rem .5rem; padding: .5rem;
    background: rgba(15, 42, 26, .97); border-radius: 14px;
    box-shadow: 0 16px 32px rgba(0, 0, 0, .35);
  }
  .menu-pronto .topo-nav.aberta ul { flex-direction: column; width: auto; padding: 0; }
  .menu-pronto .topo-nav.aberta a { width: 100%; min-height: 48px; padding: 0 1rem; font-size: 1.05rem; }
  .menu-pronto .topo-nav.aberta a::after { left: 1rem; right: auto; width: 2rem; }
  .topo-acoes { display: flex; gap: .5rem; }
}
/* O botão Menu só existe no celular/tablet */
.topo-menu { display: none; min-height: 44px; min-width: 44px; }
@media (max-width: 960px) {
  .topo-menu:not([hidden]) {
    appearance: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: .5rem;
    min-height: 44px; min-width: 44px; padding: 0 .9rem;
    border: 2px solid rgba(255, 255, 255, .6); border-radius: 999px;
    background: rgba(15, 42, 26, .7); color: #fff;
    font: 700 .95rem var(--fonte-texto);
  }
  .topo-linha .topo-marca { margin-right: auto; }
}
.topo-menu-barras, .topo-menu-barras::before, .topo-menu-barras::after {
  display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}
.topo-menu-barras { position: relative; }
.topo-menu-barras::before, .topo-menu-barras::after { content: ""; position: absolute; left: 0; }
.topo-menu-barras::before { top: -6px; }
.topo-menu-barras::after { top: 6px; }
.topo-menu[aria-expanded="true"] .topo-menu-barras { background: transparent; }
.topo-menu[aria-expanded="true"] .topo-menu-barras::before { transform: translateY(6px) rotate(45deg); }
.topo-menu[aria-expanded="true"] .topo-menu-barras::after { transform: translateY(-6px) rotate(-45deg); }
.topo-pedido-icone { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.topo-pedido-icone circle { fill: currentColor; stroke: none; }
/* Telas estreitas (320px): ficam ícone + contador e as barras; os nomes seguem para o leitor de tela */
@media (max-width: 420px) {
  .topo-pedido-rotulo, .topo-menu-rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .topo-pedido { padding-left: .75rem; }
  .topo-linha { gap: .5rem; }
}

/* ---------- Hero ---------- */
.hero { position: relative; }
.hero-quadro {
  position: relative;
  height: 100svh;
  min-height: 34rem;
  overflow: hidden;
  /* O céu da cena (não mais o verde): a paisagem aparece desde o primeiro quadro */
  background: linear-gradient(180deg, #4f9ad6, #84bfe5 60%);
}

.palco {
  position: absolute;
  width: var(--palco-w);
  height: var(--palco-h);
  left: calc(50% - var(--palco-w) / 2);
  top: calc(50% - var(--palco-h) / 2);
}
.palco > img, .palco > div { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Céu acima da ilustração, na cor da borda de cima dela (#84bfe5), para a câmera começar olhando para cima */
.cena { position: absolute; inset: 0; background: linear-gradient(180deg, #4f9ad6, #84bfe5 60%); }
.cena-fundo, .cena-barraca { transform-origin: 50% 50%; }
.cena-fundo { -webkit-mask: linear-gradient(transparent, #000 4%); mask: linear-gradient(transparent, #000 4%); }
/* Luz de fim de manhã por cima da cena; some quando a câmera chega perto */
.cena-luz {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 246, 222, .38), rgba(255, 246, 222, 0) 45%, rgba(15, 42, 26, 0) 70%, rgba(15, 42, 26, .35));
}

.pov { position: absolute; inset: 0; display: none; }
.pov-fundo {
  position: absolute; inset: -4%; width: 108%; height: 108%; max-width: none;
  object-fit: cover;
}
.pov-poste-esq { clip-path: inset(0 50% 0 0); }
/* As frutas cobrem o palco inteiro: sem isto, a camada fica por cima do mascote e engole o mouse e o toque nele */
.pov-produtos { pointer-events: none; }
.pov-poste-dir { clip-path: inset(0 0 0 50%); }
/* Recorta o mascote na borda do balcão, para ele subir de trás dele. Só embaixo: em cima e dos lados
   a margem é negativa, para o chapéu poder passar do palco (no celular o palco é baixo) */
.pov-mascote-recorte { clip-path: inset(-200% -50% 26% -50%); }

/* A placa pintada na frente do balcão. Usa as mesmas medidas do palco para cair em cima da madeira. */
.placa {
  position: absolute;
  left: 50%;
  /* Em tela mais larga que 16:9 o palco passa da altura e o botão caía para fora do hero: a placa sobe até caber */
  top: min(calc(50% - var(--palco-h) / 2 + var(--palco-h) * .79), calc(100% - 9.5rem));
  transform: translateX(-50%);
  width: min(92vw, calc(var(--palco-w) * .62));
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
  text-align: center;
  color: var(--toldo-creme);
  text-shadow: 0 2px 0 rgba(60, 28, 8, .55);
}
.placa-titulo { font-family: var(--fonte-titulo); font-size: clamp(1.7rem, calc(var(--palco-w) * .028), 3.2rem); line-height: 1.1; }
/* Sombra quente atrás do texto para ele ler bem sobre a madeira clara */
.placa::before {
  content: "";
  position: absolute; inset: -18% -8%; z-index: -1;
  background: radial-gradient(closest-side, rgba(43, 26, 14, .72), rgba(43, 26, 14, .45) 60%, transparent);
}

/* A logo original da marca mora na camada da barraca, em cima da placa pintada (mesma arte, ~3% maior
   para cobrir a borda). Âncora medida na barraca original 3840×2160 — igual a ANCORA_PLACA em js/logo-voo.js.
   Sem JS ou com movimento reduzido ela já está encaixada; com a câmera ligada o JS a faz voar até aqui. */
.cena-barraca { --placa-x: 49.26%; --placa-y: 30.4%; --placa-w: 17.1%; }
.logo-placa {
  position: absolute;
  left: calc(var(--placa-x) - var(--placa-w) / 2); top: var(--placa-y);
  width: var(--placa-w); aspect-ratio: 1;
  margin-top: calc(var(--placa-w) / -2); /* % da largura: metade do quadrado */
  transform-origin: 50% 50%;
}
.abertura-titulo { margin: 0; width: 100%; height: 100%; font-size: 1rem; line-height: 1; color: var(--toldo-creme); }
.abertura-logo {
  display: block; width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 .6vw .9vw rgba(30, 18, 6, .35));
}
/* Giro 3D do voo: 24 quadros renderizados no Blender (eixo vertical), lado a lado em img/logo-giro.webp.
   O quadro 0 é a mesma frente da img. O JS só liga a classe depois que a folha carrega. */
.logo-placa.giro-3d .abertura-titulo {
  background: url(../img/logo-giro.webp) calc(var(--quadro, 0) * 100% / 23) 0 / 2400% 100% no-repeat;
  filter: drop-shadow(0 .6vw .9vw rgba(30, 18, 6, .35));
}
.logo-placa.giro-3d .abertura-logo { opacity: 0; }

/* Texto e botões da abertura: um cartão claro pequeno sobre o cenário, embaixo (a logo fica no céu) */
.abertura {
  position: absolute; inset: 0;
  display: grid; place-items: end center;
  padding: calc(var(--topo-h) + .5rem) 1rem 5.25rem;
  text-align: center;
  pointer-events: none;
}
.abertura-conteudo {
  position: relative; pointer-events: auto;
  width: min(30rem, 100%);
  padding: 1rem 1.25rem 1.2rem;
  background: rgba(251, 246, 234, .88);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(15, 42, 26, .28);
  color: var(--tinta);
}
.abertura-texto { margin: 0 auto; max-width: 34ch; font-size: clamp(1rem, 2.2vw, 1.15rem); font-weight: 600; color: var(--tinta); }
.abertura-acoes { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .75rem 1.5rem; margin-top: 1rem; }
.botao-linha-claro { color: var(--verde-escuro); }

.hero-dica {
  position: absolute; left: 0; right: 0; bottom: 1.5rem;
  display: none; justify-content: center;
  pointer-events: none;
}
.hero-dica span {
  padding: .55em 1.1em;
  background: rgba(15, 42, 26, .82);
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  color: #fff;
}
.hero-dica span::after {
  content: "";
  display: inline-block;
  width: .45em; height: .45em;
  margin-left: .6em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-.2em) rotate(45deg);
  animation: dica 1.6s ease-in-out infinite;
}
@keyframes dica { 50% { transform: translateY(.05em) rotate(45deg); } }

.hero-pular {
  position: absolute; right: clamp(1rem, 3vw, 2rem); bottom: 1.25rem;
  display: none; align-items: center; min-height: 44px;
  padding: 0 1rem;
  background: rgba(251, 246, 234, .92); color: var(--verde-escuro);
  border-radius: 999px; font-weight: 700; font-size: .9rem; text-decoration: none;
}

/* Miniatura da cena distante: a barraca é a versão limpa (sem o mascote pintado), então o sprite
   entra por cima sem máscara e sem mão duplicada. Liga (.mascote-novo, posto pelo JS) quando carrega.
   Posição em frações da camada da barraca — conferir no navegador. */
.cena-barraca { --mini-x: 48.6%; --mini-balcao: 64.8%; }
.cena-barraca-img, .cena-mascote { position: absolute; inset: 0; width: 100%; height: 100%; }
.cena-mascote { display: none; clip-path: inset(0 0 calc(100% - var(--mini-balcao)) 0); }
.cena-mascote img {
  position: absolute; left: var(--mini-x); bottom: 28%;
  height: 23%; width: auto; max-width: none;
  translate: -50% 0;
}
.mascote-novo .cena-mascote { display: block; }

/* Sem a abertura: o hero tem a altura da tela, então a câmera nasce no quadro final (o balcão). Atrás dele, a
   feira (img/feira-*, nítida); a cena da abertura, a barraca pintada e a logo dela saem (a logo segue lida como título) */
.animado .hero-quadro { position: sticky; top: 0; }
.animado .cena-fundo, .animado .cena-barraca-img, .animado .cena-mascote { visibility: hidden; }
.animado .cena { background: none; }
.animado .logo-placa { opacity: 0; }
.animado .logo-placa { will-change: transform; }
.animado .pov { display: block; opacity: 0; }
.animado .cena-fundo { transform: translate(0, 37%) scale(1.3); will-change: transform; }
.animado .cena-barraca { transform: translate(0, 75%) scale(1.3); will-change: transform; }
/* Quanto o balcão do POV entra mais alto, para cruzar com o balcão da cena aberta (no retrato, mais) */
.hero { --pov-chegada: -8svh; }
.animado .palco-pov { transform: translateY(var(--pov-chegada)) scale(.85); }
/* Enquanto o palco está erguido, a frente do balcão continua até a base da tela (sem vão embaixo dele) */
.animado .palco-pov::after {
  content: ""; position: absolute; left: 0; right: 0; top: 99.5%; height: 45svh;
  /* frestas das tábuas no mesmo passo da ilustração (8,95% da largura), escurecendo perto da câmera */
  background:
    linear-gradient(90deg, rgba(48, 20, 4, .5) 0 3px, transparent 3px) calc(var(--palco-w) * .009) 0 / calc(var(--palco-w) * .0895) 100%,
    linear-gradient(rgb(160, 82, 31), rgb(92, 43, 13) 70%);
}
.animado .pov-mascote { transform: translateY(72%); }
.animado .placa { opacity: 0; }

/* Telas baixas (celular pequeno, notebook com zoom): logo e texto mais compactos para caber acima do indicador */
@media (max-height: 640px) {
  .abertura { padding-bottom: 4rem; }
  .abertura-conteudo { padding: .75rem 1rem .9rem; }
  .abertura-texto { font-size: .95rem; }
  .abertura-acoes { margin-top: .7rem; }
  .hero-dica { bottom: .75rem; }
  .hero-dica span { font-size: .85rem; }
}
.animado .pov-mascote-recorte { clip-path: inset(-200% -50% 31.5% -50%); }

/* O mascote de boas-vindas atrás do balcão: corpo inteiro, a parte de baixo escondida pela madeira */
.pov-mascote { position: absolute; inset: 0; }
.mascote-pov { position: absolute; left: 50%; bottom: 6%; height: 66%; aspect-ratio: 2 / 3; translate: -50% 0; }

/* Rig de atendimento (render 3D). O JS põe .rig-pronto no hero e as medidas do rig
   (--rig-ar, --rig-maos, posição das órbitas e dos gestos) a partir de js/mascote-rig.js.
   O render traz um balcão invisível: --rig-maos é a borda de trás dele, que cai na borda de trás do
   balcão da ilustração (68,2% do palco). O corpo some atrás dela; as mãos e a sombra ficam sobre o tampo.
   Largura pela tela, não pelo palco: no desktop o chapéu fica em ~36% da largura; no celular, ~78%.
   A imagem sobra dos dois lados do corpo (a mão que acena e a sacola cabem nela), por isso é larga:
   o chapéu ocupa ~2/3 dela. */
.rig-pronto .mascote-pov { display: none; }
.mascote-rig {
  --rig-w: clamp(24rem, 54vw, 62rem);
  --inclina: 0deg; --respira: 1;
  position: absolute; left: 50%;
  width: var(--rig-w); aspect-ratio: var(--rig-ar, .75);
  bottom: calc(31.8% - var(--rig-w) / var(--rig-ar, .75) * (1 - var(--rig-maos, .9)));
  translate: -50% 0;
}
.mascote-rig[hidden] { display: none; }
.rig-toque {
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0; border: 0; background: none; cursor: pointer; border-radius: 24px;
  /* Respira e pende a partir do balcão: as mãos ficam no eixo e não escorregam no tampo */
  transform-origin: 50% calc(var(--rig-maos, .9) * 100%);
  transform: rotate(var(--inclina)) scale(1, var(--respira));
}
.rig-base { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* Gesto em quadros: a folha cobre só o retângulo que o braço percorre (--g-x/y/w/h, do RIG), com os
   quadros lado a lado; --g-q é o quadro (0 = o primeiro). Enquanto ele gesticula, a base abre um buraco um
   fio menor que o retângulo (--g-buraco), para não sobrar o braço parado por baixo nem aparecer emenda.
   A folha é a <img> já decodificada (não background), para o buraco nunca abrir antes dela pintar. */
.rig-gesto {
  position: absolute; left: var(--g-x); top: var(--g-y); width: var(--g-w); height: var(--g-h);
  overflow: hidden;
  visibility: hidden;
}
.rig-gesto img {
  position: absolute; top: 0; left: calc(var(--g-q, 0) * -100%);
  width: calc(var(--g-n) * 100%); height: 100%; max-width: none;
}
.rig-gesticulando .rig-gesto { visibility: visible; }
.rig-gesticulando .rig-base { clip-path: var(--g-buraco); }
/* Órbita: elipse do branco do olho. A íris anda dentro dela; a pálpebra desce por cima. */
.rig-olho {
  position: absolute; overflow: hidden; border-radius: 50%;
  rotate: var(--rig-angulo, 0deg); /* cabeça inclinada na arte (RIG.angulo): órbita e pálpebras acompanham */
  --ix: 0; --iy: 0;
}
/* O branco do olho (no 2D, recortado no formato da arte, menor que o olho com o traço das pálpebras) */
.rig-branco { position: absolute; inset: 0; }
.rig-iris {
  position: absolute; width: var(--rig-iris, 60%); aspect-ratio: 1; height: auto; max-width: none;
  left: calc(50% + var(--ix) * 100%); top: calc(50% + var(--iy) * 100%);
  translate: -50% -50%;
}
/* Por cima da íris: curvatura do globo, a sombra que a pálpebra de cima faz no olho (a íris é uma tigela
   rasa: a metade de cima fica mais escura) e o brilho, que fica parado enquanto a íris anda (é reflexo da
   luz, não da íris). Fica abaixo das pálpebras (mesmo z-index, vem antes). */
.rig-olho::before {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(ellipse 13% 11% at 35% 33%, rgba(255, 255, 255, .95) 60%, transparent 100%),
    radial-gradient(circle at 63% 66%, rgba(255, 255, 255, .7) 0 3.5%, transparent 5%),
    linear-gradient(rgba(70, 36, 18, .16), rgba(70, 36, 18, .05) 28%, transparent 44%),
    radial-gradient(ellipse at 50% 42%, transparent 62%, rgba(80, 44, 26, .16) 100%);
}
/* Na íris, andando com ela: a luz que atravessa a córnea junta no lado oposto ao brilho, embaixo, só no
   anel da íris (a pupila continua preta) */
.rig-olho::after {
  content: ""; position: absolute; z-index: 1; pointer-events: none; border-radius: 50%;
  width: var(--rig-iris, 60%); aspect-ratio: 1;
  left: calc(50% + var(--ix) * 100%); top: calc(50% + var(--iy) * 100%); translate: -50% -50%;
  background: radial-gradient(circle closest-side, transparent 44%, rgba(255, 206, 140, .5) 70%, transparent 94%);
  -webkit-mask-image: linear-gradient(160deg, transparent 48%, #000 86%);
  mask-image: linear-gradient(160deg, transparent 48%, #000 86%);
  mix-blend-mode: screen;
}
/* 2D (RIG.brilho = false): a íris da arte já traz o brilho e o sombreado dela */
.rig-sem-brilho .rig-olho::before, .rig-sem-brilho .rig-olho::after { content: none; }
/* Pálpebras e boca: SVG desenhado a cada quadro (rosto() e palpebrasDoOlho()/bocaDoRosto() em
   js/mascote-rig.js). A órbita recorta as pálpebras; a de cima traz o cílio e a sombra no globo. */
.rig-palpebras { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; }
/* Pele das pálpebras: a sombra de cima da órbita (--rig-palpebra) clareando até a bochecha (--rig-bochecha),
   para o olho fechado não virar um disco de uma cor só */
.pele-cima { stop-color: var(--rig-palpebra, #c3a18c); }
.pele-baixo { stop-color: var(--rig-bochecha, #d4ae98); }
.pal-sup, .pal-inf { fill: url(#rig-pele-olho); }
.pal-sombra { fill: none; stroke: rgba(74, 38, 18, .15); stroke-width: 11; }
.pal-cilio { fill: none; stroke: #3a2016; stroke-width: 5.5; stroke-linecap: round; }
.pal-vinco { fill: none; stroke: rgba(112, 62, 42, .5); stroke-width: 2; }
.rig-boca { position: absolute; overflow: visible; pointer-events: none; rotate: var(--rig-angulo, 0deg); }
.boca-fundo { fill: var(--rig-boca-fundo, #5c1d1c); }
.boca-lingua { fill: #e07c74; }
.boca-dentes { fill: #fbf3ea; }
.boca-traco { fill: none; stroke: var(--rig-boca-traco, #8e3d31); stroke-linejoin: round; stroke-linecap: round; }
/* 2D: a boca e os olhos fechados com a cara da arte, quadros de uma folha cruzados pela opacidade (o JS põe a folha) */
.rig-bocas, .rig-fechado { position: absolute; pointer-events: none; }
.rig-bocas i { position: absolute; inset: 0; }
.rig-bocas i, .rig-fechado { background-repeat: no-repeat; opacity: 0; }
@media (max-aspect-ratio: 1/1) {
  /* 84% da tela: maior que isso, no celular as luvas batem na cesta e no caixote das pontas do balcão */
  .mascote-rig { --rig-w: clamp(17rem, 84vw, 40rem); }
}

/* Retrato (celular): palco mais estreito, encostado embaixo, e a placa sobe para o espaço livre */
@media (max-aspect-ratio: 1/1) {
  .hero { --pov-chegada: -27svh; }
  .palco-pov {
    --palco-w: 165vw;
    --palco-h: calc(165vw * 9 / 16);
    top: auto; bottom: 0;
  }
  .placa {
    top: calc(var(--topo-h) + 1.5rem);
    left: 1rem; transform: none;
    width: calc(100vw - 2rem);
    align-items: flex-start;
    text-align: left;
  }
  .placa::before { inset: -20% -10%; }
}

/* ---------- Entrega: logo depois do hero, creme sobre o verde ---------- */
.sobretitulo {
  font: 700 .85rem var(--fonte-texto); letter-spacing: .12em; text-transform: uppercase;
  color: var(--placa-vermelho);
  margin-bottom: .6rem;
}
.apresentacao {
  display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  align-items: center; gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(4rem, 8vw, 6.5rem) max(clamp(1rem, 4vw, 2.5rem), calc((100vw - 70rem) / 2));
  background: var(--verde-fundo); color: var(--toldo-creme);
}
.apresentacao-marca { width: 100%; max-width: 22rem; justify-self: center; }
.apresentacao-logo { display: block; width: 100%; height: auto; }
/* A sombra do balcão do hero cai no topo da seção */
.apresentacao::before {
  content: ""; position: absolute; inset: 0 0 auto; height: clamp(2.5rem, 6vw, 5rem);
  background: linear-gradient(rgba(5, 16, 9, .5), rgba(5, 16, 9, 0)); pointer-events: none;
}
/* Moldura de produtos em volta da seção (js/apresentacao-moldura.js monta as <img>): fileiras bem juntas em cima
   e embaixo e colunas nos lados, parte cortada pela borda; os de trás mais escuros. Com animação, cada item surge
   da sua borda para o meio logo depois que a moto passa por ele (--d); sem, ficam parados no lugar. */
.apresentacao { padding-top: clamp(5.5rem, 10vw, 8rem); padding-bottom: clamp(6.5rem, 12vw, 10rem); }
.apresentacao-moldura { position: absolute; inset: 0; pointer-events: none; }
.moldura-item { position: absolute; max-width: none; height: auto; translate: -50% -50%; rotate: var(--g); }
.moldura-item.vira { transform: scaleX(-1); }
.moldura-item.frente { filter: drop-shadow(0 .35rem .45rem rgba(0, 0, 0, .4)); }
.moldura-item.fundo { filter: brightness(.78) saturate(.9); }
.moldura-item.cima { --dy: -140%; }
.moldura-item.baixo { --dy: 140%; }
.moldura-item.esq { --dx: -140%; }
.moldura-item.dir { --dx: 140%; }
.animado .moldura-item {
  opacity: 0; translate: calc(-50% + var(--dx, 0%)) calc(-50% + var(--dy, 0%));
  transition: opacity .5s ease, translate .9s cubic-bezier(.16, 1, .3, 1);
}
.animado .apresentacao.chegou .moldura-item { opacity: 1; translate: -50% -50%; transition-delay: var(--d); }
.animado .apresentacao-moldura.sem-transicao .moldura-item { transition: none; }
/* A moto atravessa a faixa da direita para a esquerda (ela anda para a esquerda na arte) quando a seção chega na
   tela (.chegou, posta pelo JS); logo e mensagem entram quando ela já passou do meio. Sem animação, só o conteúdo. */
.apresentacao { position: relative; overflow: hidden; }
.apresentacao-moto { display: none; }
.animado .apresentacao-moto {
  display: block; position: absolute; z-index: 2; left: 100%; bottom: 6%;
  width: auto; height: min(78%, 22rem); pointer-events: none; will-change: transform;
}
.animado .apresentacao.chegou .apresentacao-moto { animation: moto-passa 3.4s cubic-bezier(.37, 0, .63, 1) forwards; }
/* Um trecho só, em transform (o compositor anda sem refazer layout): entra e sai sem trancos */
@keyframes moto-passa {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-100vw - 100% - 4rem), 0, 0); }
}
.animado .apresentacao-logo, .animado .apresentacao-texto { opacity: 0; translate: 0 18px; transition: opacity .7s ease, translate .7s cubic-bezier(.2, .7, .2, 1); }
.animado .apresentacao.chegou .apresentacao-logo { opacity: 1; translate: 0 0; transition-delay: 1.9s; }
.animado .apresentacao.chegou .apresentacao-texto { opacity: 1; translate: 0 0; transition-delay: 2.15s; }
.apresentacao .sobretitulo { color: var(--placa-amarelo); }
.apresentacao h2 { font-size: clamp(2.3rem, 5.5vw, 4.2rem); line-height: 1.05; color: var(--papel); }
.apresentacao-abre { margin-top: 1.1rem; font-size: clamp(1.15rem, 2.2vw, 1.4rem); font-weight: 600; }
.apresentacao-texto p:not(.sobretitulo) { max-width: 38rem; }
.apresentacao-texto p + p { margin-top: .9rem; color: rgba(242, 231, 207, .82); }
@media (max-width: 760px) {
  .apresentacao { grid-template-columns: 1fr; text-align: center; }
  .apresentacao-marca { max-width: 13rem; }
  .apresentacao-texto p:not(.sobretitulo) { margin-inline: auto; }
}

/* Emendas entre as seções: cada uma sobe numa curva suave da sua cor por cima do fim da anterior (o catálogo já
   tem o toldo recortado). Com animação, o conteúdo sobe e aparece uma vez quando a seção entra na tela (.revela é
   posta pelo JS, e .chegou quando a seção aparece; sem JS nada fica escondido). */
.entrega, .localizacao, .quem-somos, .instagram, .rodape { position: relative; }
.entrega::before, .localizacao::before, .quem-somos::before, .instagram::before, .rodape::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: clamp(1.25rem, 3.5vw, 3rem);
  background: inherit; border-radius: 50% 50% 0 0 / 100% 100% 0 0; pointer-events: none;
}
.animado .revela > * { opacity: 0; translate: 0 2rem; transition: opacity .8s ease, translate .9s cubic-bezier(.2, .7, .2, 1); }
.animado .revela.chegou > * { opacity: 1; translate: 0 0; }
.animado .revela.chegou > :nth-child(2) { transition-delay: .15s; }

.entrega {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  align-items: center; gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(4.5rem, 9vw, 7.5rem) max(clamp(1rem, 4vw, 2.5rem), calc((100vw - 76rem) / 2));
  background: var(--papel); color: var(--tinta);
}
.entrega h2 { font-size: clamp(2.6rem, 6.5vw, 5rem); color: var(--verde-escuro); }
.entrega-abre { margin-top: 1rem; max-width: 34rem; font-size: clamp(1.15rem, 2.2vw, 1.4rem); font-weight: 600; color: var(--tinta); }
.entrega-passos {
  list-style: none; counter-reset: passo;
  margin: 2.25rem 0 0; padding: 0;
  max-width: 40rem;
  border-top: 2px solid var(--verde-escuro);
}
.entrega-passos li {
  counter-increment: passo;
  display: grid; grid-template-columns: 3rem 1fr; column-gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(44, 107, 63, .25);
  color: var(--tinta-suave);
}
.entrega-passos li::before {
  content: counter(passo);
  grid-row: 1 / 99;
  font-family: var(--fonte-titulo); font-size: 2.25rem; line-height: 1;
  color: var(--placa-vermelho);
}
.entrega-passos strong { color: var(--verde-escuro); }
.entrega-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2.25rem; }
.entrega-acoes .botao-linha { color: var(--verde-escuro); }
.entrega-acoes .whatsapp-pendente { color: var(--tinta-suave); }
.entrega-conferir {
  appearance: none; cursor: pointer;
  min-height: 44px; border: 0; background: none;
  font: 700 1.05rem var(--fonte-texto);
}
.entrega-qtd { margin-left: .35rem; font-weight: 600; color: var(--tinta-suave); }
.entrega-figura {
  position: relative; margin: 0;
  aspect-ratio: 4 / 5;
  display: grid; place-items: end center;
  border-radius: 50% 50% 12px 12px / 38% 38% 12px 12px;
  background: radial-gradient(circle at 50% 40%, #3b7a4e, var(--toldo-verde) 45%, var(--verde-fundo));
  overflow: hidden;
}
.entrega-figura img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 860px) {
  .entrega { grid-template-columns: 1fr; }
  .entrega-figura { width: min(18rem, 70%); justify-self: center; }
}

/* ---------- Catálogo ---------- */
.catalogo {
  position: relative;
  background: var(--verde-fundo);
  color: var(--toldo-creme);
  padding: clamp(7rem, 12vw, 9rem) clamp(1rem, 4vw, 2.5rem) clamp(4rem, 8vw, 6rem);
}
/* O toldo listrado com a barra recortada em ondas, igual ao da barraca */
.toldo {
  --listra: 56px;
  position: absolute; inset: 0 0 auto 0;
  height: calc(var(--listra) * 1.5);
  background: repeating-linear-gradient(90deg, var(--toldo-creme) 0 var(--listra), var(--toldo-verde) var(--listra) calc(var(--listra) * 2));
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% var(--listra) no-repeat,
    radial-gradient(circle calc(var(--listra) / 2) at calc(var(--listra) / 2) var(--listra), #000 97%, transparent) 0 0 / var(--listra) 100% repeat-x;
          mask:
    linear-gradient(#000 0 0) top / 100% var(--listra) no-repeat,
    radial-gradient(circle calc(var(--listra) / 2) at calc(var(--listra) / 2) var(--listra), #000 97%, transparent) 0 0 / var(--listra) 100% repeat-x;
  filter: drop-shadow(0 6px 0 rgba(0,0,0,.25));
}
.catalogo-conteudo { max-width: 76rem; margin: 0 auto; }
.catalogo-cabeca { max-width: 44rem; }
.catalogo-cabeca h2 { font-size: clamp(2.25rem, 5vw, 3.75rem); color: #fff; }
.catalogo-cabeca p { margin-top: .75rem; font-size: 1.15rem; color: #d9e4d6; }
.catalogo-cabeca .aviso-fotos { font-size: .95rem; color: #b9cbb6; }

.catalogo-controles {
  display: grid; gap: 1rem;
  margin: 2.25rem 0 1.25rem;
}
.busca { display: flex; align-items: center; gap: .75rem; max-width: 32rem; }
.busca-rotulo { font-weight: 700; color: #fff; }
.busca input {
  flex: 1; min-width: 0; min-height: 48px;
  padding: .7em 1.1em;
  border: 2px solid rgba(242, 231, 207, .45);
  border-radius: 999px;
  background: rgba(0,0,0,.2);
  color: #fff;
  font: 500 1rem var(--fonte-texto);
}
.busca input::placeholder { color: rgba(242, 231, 207, .7); }
.busca input:focus-visible { outline: 3px solid var(--placa-amarelo); outline-offset: 2px; border-color: var(--placa-amarelo); }

.filtros { display: flex; flex-wrap: wrap; gap: .5rem; }
.filtro {
  appearance: none; cursor: pointer;
  min-height: 44px;
  padding: .45em 1.05em;
  border: 2px solid rgba(242, 231, 207, .4);
  background: transparent;
  color: var(--toldo-creme);
  font: 600 .95rem var(--fonte-texto);
  border-radius: 999px;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.filtro:hover { border-color: var(--toldo-creme); }
.filtro[aria-pressed="true"] { background: var(--toldo-creme); border-color: var(--toldo-creme); color: var(--verde-escuro); }
.filtro-qtd { opacity: .7; font-weight: 500; margin-left: .35em; }
.catalogo-contagem { font-size: .95rem; color: #b9cbb6; }

/* A lista: folha do bloco de pedidos, em papel */
.catalogo-lista {
  background: var(--papel);
  color: var(--tinta);
  border-radius: 8px;
  padding: clamp(1rem, 3vw, 2rem);
  box-shadow: 0 1px 0 #d8ccb0, 0 3px 0 #efe6d2, 0 5px 0 #d8ccb0, 0 24px 48px rgba(0,0,0,.35);
}
.cat-secao + .cat-secao { margin-top: 2.25rem; }
.cat-secao-titulo {
  display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--verde-escuro);
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--verde-escuro);
}
.cat-secao-qtd { font-family: var(--fonte-texto); font-size: .9rem; font-weight: 600; color: var(--tinta-suave); }
.cat-lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
  column-gap: 2.5rem;
}
.produto, .produto-familia {
  display: grid;
  grid-template-columns: 84px 1fr auto auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 1rem;
  min-height: 104px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(44, 107, 63, .2);
}
.produto-thumb {
  grid-row: 1 / 3;
  width: 84px; height: 84px;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(44, 30, 10, .18);
}
/* Mais pedidos: uma faixa de cartões acima da busca, rolando de lado no celular */
.mais-pedidos { margin: 0 0 2rem; }
.mais-pedidos-titulo { font: 700 .85rem var(--fonte-texto); letter-spacing: .12em; text-transform: uppercase; color: var(--placa-amarelo); margin-bottom: .75rem; }
.mais-pedidos-lista {
  list-style: none; margin: 0; padding: 0 0 .5rem; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(9.5rem, 1fr);
  gap: .9rem; overflow-x: auto; scroll-snap-type: x mandatory;
}
.mais-pedidos-lista li { scroll-snap-align: start; }
.mais-pedido {
  position: relative; display: grid; justify-items: center; gap: .5rem; width: 100%; padding: 1rem .75rem;
  border: 1px solid rgba(44, 107, 63, .2); border-radius: 16px; background: #fff; cursor: pointer;
  font: 700 1rem var(--fonte-texto); color: var(--tinta); text-align: center;
  transition: transform .15s ease, box-shadow .15s ease;
}
.mais-pedido:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(44, 30, 10, .12); }
.mais-pedido .produto-thumb { grid-row: auto; width: 96px; height: 96px; }
.mais-pedido-pos { position: absolute; top: .5rem; left: .6rem; font-size: .8rem; color: var(--toldo-verde); }

/* Família com variações (Alface, Banana…): a linha abre a lista das variações, recuada */
.produto-grupo { grid-column: 1 / -1; }
.produto-grupo > details { border-bottom: 1px solid rgba(44, 107, 63, .2); }
.produto-familia { cursor: pointer; list-style: none; border-bottom: 0; }
.produto-familia::-webkit-details-marker { display: none; }
.produto-familia .produto-nome { grid-row: 1; align-self: end; }
.produto-variacoes { grid-column: 2; grid-row: 2; align-self: start; font-size: .9rem; font-weight: 600; color: var(--tinta-suave); }
.produto-familia::after {
  content: ""; grid-column: 4; grid-row: 1 / 3; width: .7rem; height: .7rem; margin-right: .6rem;
  border: solid var(--toldo-verde); border-width: 0 3px 3px 0; rotate: 45deg; translate: 0 -25%;
  transition: rotate .2s ease;
}
details[open] > .produto-familia::after { rotate: 225deg; translate: 0 25%; }
.produto-familia:hover .produto-nome { color: var(--toldo-verde); }
.cat-variacoes {
  list-style: none; margin: 0 0 .9rem; padding: .25rem 1rem;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); column-gap: 2.5rem;
  background: rgba(44, 107, 63, .06); border-radius: 14px;
}
.cat-variacoes .produto:last-child { border-bottom: 0; }
.produto-thumb-icone { display: grid; place-items: center; }
.produto-thumb-icone svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.produto-thumb-verduras { background: #dcead3; color: #2c6b3f; }
.produto-thumb-frutas { background: #f7e1bd; color: #b23a1e; }
.produto-thumb-legumes { background: #f3d6bd; color: #9a4614; }
.produto-thumb-especiarias { background: #eadccb; color: #6b3f1f; }
.produto-thumb-geral { background: #ece4d2; color: var(--tinta-suave); }
.produto-nome { grid-column: 2; grid-row: 1 / 3; font-weight: 700; font-size: 1.2rem; line-height: 1.25; }
.produto:has(.selo-peso) .produto-nome { grid-row: 1; align-self: end; }
.produto .selo-peso { grid-column: 2; grid-row: 2; justify-self: start; align-self: start; margin-top: .25rem; }
.produto-un {
  grid-column: 3; grid-row: 1 / 3;
  min-width: 2.6rem; padding: .2em .5em;
  text-align: center; text-decoration: none;
  font-size: .85rem; font-weight: 700; color: var(--verde-escuro);
  background: rgba(44, 107, 63, .12); border-radius: 6px;
  cursor: help;
}
.selo-peso {
  display: inline-block;
  padding: .3em .75em;
  line-height: 1.4;
  font-size: .75rem;
  font-weight: 700;
  color: var(--madeira-escura);
  background: var(--placa-amarelo);
  border-radius: 999px;
}
.catalogo-vazio {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 1rem; padding: 1.25rem 1.5rem;
  background: var(--papel); color: var(--tinta); border-radius: 8px;
}
.catalogo-vazio p { max-width: 46ch; }

/* Adicionar ao pedido e − quantidade +. Sem JS o pedido não existe, então não aparecem. */
.produto-acao { grid-column: 4; grid-row: 1 / 3; display: none; }
.pedido-pronto .produto-acao { display: block; }
.produto-add {
  appearance: none; cursor: pointer;
  min-height: 44px; padding: 0 1rem;
  border: 2px solid var(--toldo-verde); border-radius: 999px;
  background: transparent; color: var(--toldo-verde);
  font: 700 .9rem var(--fonte-texto);
  transition: background-color .15s ease, color .15s ease;
}
.produto-add::before { content: "+ "; }
.produto-add-un { margin-left: .2rem; font-weight: 600; font-size: .8rem; opacity: .8; }
.produto-add:hover { background: var(--toldo-verde); color: #fff; }
.qtd {
  display: inline-flex; align-items: center;
  border: 2px solid var(--toldo-verde); border-radius: 999px;
  background: #fff;
}
.qtd-botao {
  appearance: none; cursor: pointer;
  min-width: 44px; min-height: 44px;
  border: 0; border-radius: 999px;
  background: transparent; color: var(--toldo-verde);
  font: 700 1.25rem/1 var(--fonte-texto);
}
.qtd-botao:hover { background: rgba(44, 107, 63, .12); }
.qtd-valor {
  width: 3.2rem; min-height: 40px;
  border: 0; border-radius: 6px;
  background: transparent; color: var(--tinta);
  font: 700 1rem var(--fonte-texto); text-align: center;
  font-variant-numeric: tabular-nums;
}
.qtd-valor[aria-invalid="true"] { outline: 2px solid var(--placa-vermelho); }
.produto:has(.qtd) { background: linear-gradient(90deg, rgba(239, 192, 47, .16), transparent 70%); }
.catalogo-lista.trocando { animation: trocar .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes trocar { from { opacity: .3; transform: translateY(6px); } }

.legenda {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  margin: 1.75rem 0 0;
  font-size: .95rem;
  color: #d9e4d6;
}
.legenda div { display: flex; gap: .45em; align-items: baseline; }
.legenda dt { font-weight: 700; color: #fff; }
.legenda dd { margin: 0; }

@media (max-width: 480px) {
  .produto, .produto-familia { grid-template-columns: 68px 1fr auto; column-gap: .75rem; min-height: 88px; }
  .produto-familia::after { grid-column: 3; }
  .cat-variacoes { padding: .25rem .75rem; }
  /* No celular o botão do pedido desce para uma linha própria, embaixo do nome */
  .produto-acao { grid-column: 2 / -1; grid-row: 3; margin-top: .4rem; }
  .produto-thumb { width: 68px; height: 68px; border-radius: 12px; }
  .produto-thumb-icone svg { width: 26px; height: 26px; }
  .busca { flex-direction: column; align-items: stretch; gap: .4rem; }
}

/* ---------- Localização ---------- */
.localizacao {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  padding: clamp(4rem, 9vw, 7rem) max(clamp(1rem, 4vw, 2.5rem), calc((100vw - 76rem) / 2));
  background: var(--papel);
  color: var(--tinta);
}
.localizacao h2 { font-size: clamp(2.25rem, 5vw, 3.75rem); color: var(--verde-escuro); }
.localizacao-texto > p { margin-top: .9rem; max-width: 40rem; font-size: 1.1rem; color: var(--tinta-suave); }
.semana { list-style: none; margin: 2rem 0 0; padding: 0; border-top: 2px solid var(--verde-escuro); }
.dia {
  display: grid; grid-template-columns: 7.5rem 1fr; column-gap: 1rem; row-gap: .1rem;
  padding: .85rem .75rem;
  border-bottom: 1px solid rgba(44, 107, 63, .25);
  border-radius: 4px;
  transition: background-color .2s ease;
}
.dia-nome { grid-row: 1 / 3; font-family: var(--fonte-titulo); font-size: 1.25rem; color: var(--verde-escuro); }
.dia-status { font-weight: 700; }
.dia-local { color: var(--tinta-suave); font-size: .95rem; }
.dia-local-pendente { font-style: italic; }
.dia-mapa { grid-column: 2; font-weight: 700; color: var(--toldo-verde); }
.dia-sem-feira .dia-nome, .dia-sem-feira .dia-status { color: #8a8174; font-weight: 500; }
.dia-sem-feira .dia-status { align-self: center; grid-row: 1 / 3; }
.dia.dia-ativo { background: rgba(239, 192, 47, .22); }
.dia-hoje .dia-nome::after {
  content: "hoje"; display: block; width: max-content; margin-top: .3rem;
  padding: .25em .7em; border-radius: 999px;
  font: 700 .7rem var(--fonte-texto); letter-spacing: .04em; text-transform: uppercase;
  background: var(--toldo-verde); color: #fff;
}
.localizacao-nota { margin-top: 1rem; font-size: .9rem; color: var(--tinta-suave); }

.localizacao-painel { display: flex; flex-direction: column; gap: 1.25rem; align-self: start; position: sticky; top: calc(var(--topo-h) + 1.5rem); }
.dias { display: grid; grid-template-columns: repeat(7, minmax(44px, 1fr)); gap: .4rem; }
.dia-botao {
  appearance: none; cursor: pointer;
  min-height: 48px; padding: 0 .25rem;
  border: 2px solid rgba(15, 42, 26, .25); border-radius: 10px;
  background: transparent; color: var(--verde-escuro);
  font: 700 .95rem var(--fonte-texto);
}
.dia-botao.sem-feira { color: #8a8174; border-style: dashed; }
.dia-botao:hover { border-color: var(--verde-escuro); }
.dia-botao[aria-pressed="true"] { background: var(--verde-escuro); border-color: var(--verde-escuro); color: #fff; }
.dia-detalhe-nome { font-family: var(--fonte-titulo); font-size: 1.75rem; color: var(--verde-escuro); }
.dia-detalhe-status { font-weight: 700; margin-top: .2rem; }
.dia-detalhe-local { color: var(--tinta-suave); }

/* Espaço do mapa: as ondas do calçadão no lugar do mapa, até os endereços serem confirmados */
.mapa {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: .6rem;
  aspect-ratio: 4 / 3;
  padding: 1.5rem;
  border-radius: 10px;
  background: #f1e9d6;
  color: var(--tinta);
  border: 2px solid rgba(15, 42, 26, .15);
}
.mapa-ondas {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='48' viewBox='0 0 160 48'%3E%3Cpath d='M0 24c20-16 60-16 80 0s60 16 80 0' fill='none' stroke='%231d1a16' stroke-opacity='.75' stroke-width='9'/%3E%3C/svg%3E");
  background-size: 160px 48px;
  opacity: .14;
}
.mapa > :not(.mapa-ondas) { position: relative; }
.mapa-selo {
  padding: .45em 1em; border-radius: 999px;
  background: var(--placa-amarelo); color: var(--madeira-escura);
  font-weight: 700; font-size: .9rem;
}
.mapa-texto { max-width: 30ch; font-weight: 600; background: var(--papel); padding: .5rem .75rem; border-radius: 6px; }

/* ---------- Mascote animado (POV e Localização) ----------
   O JS escreve --gira, --inclina, --flutua e --sombra a partir de js/mascote-pose.js. */
.mascote { --gira: 0deg; --inclina: 0deg; --flutua: 0px; --sombra: 1; }
.mascote-toque {
  display: block; width: 100%; height: 100%;
  min-width: 44px; min-height: 44px;
  padding: 0; border: 0; border-radius: 12px;
  background: none; cursor: pointer;
  perspective: 700px;
}
.mascote-img {
  display: block; width: 100%; height: 100%;
  object-fit: contain; object-position: 50% 100%;
  transform-origin: 50% 85%;
  transform: translateY(var(--flutua)) rotateY(var(--gira)) rotate(var(--inclina));
}
.mascote-sombra {
  position: absolute; left: 20%; right: 20%; bottom: -3%; height: 8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(15, 42, 26, .38), transparent);
  scale: var(--sombra) 1; opacity: var(--sombra);
}
.mascote.acena .mascote-img { animation: acena .55s cubic-bezier(.2, .8, .2, 1); } /* sobe e pousa desacelerando, sem quicar */
@keyframes acena { 40% { translate: 0 -5%; animation-timing-function: cubic-bezier(.4, 0, .2, 1); } } /* sai do alto devagar */

/* Na Localização ele fica em pé no canto do mapa, segurando o mapa ilustrativo */
.mascote-explorador {
  position: relative; z-index: 1;
  align-self: flex-end;
  width: clamp(8rem, 38%, 12.5rem); aspect-ratio: 3 / 4;
  margin: calc(clamp(8rem, 38%, 12.5rem) * -1.05) .75rem 0 0;
}

@media (max-width: 860px) {
  .localizacao { grid-template-columns: 1fr; }
  .localizacao-painel { position: static; }
}
@media (max-width: 520px) {
  .mascote-explorador { align-self: center; margin: 0; }
}
@media (max-width: 420px) {
  .dias { grid-template-columns: repeat(4, 1fr); }
  .dia { grid-template-columns: 6rem 1fr; }
}

/* ---------- Quem somos ---------- */
.quem-somos {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(4rem, 9vw, 7rem) max(clamp(1rem, 4vw, 2.5rem), calc((100vw - 76rem) / 2));
  background: var(--verde-escuro);
}
.quem-somos-figura {
  position: relative; margin: 0;
}
/* O time recortado, com a placa, direto sobre o verde da seção */
.quem-somos-figura img { display: block; width: 100%; height: auto; filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .4)); }
.quem-somos h2 { font-size: clamp(2.25rem, 5vw, 3.75rem); color: #fff; }
.quem-somos-abre { margin-top: 1rem; font-family: var(--fonte-titulo); font-size: clamp(1.35rem, 2.6vw, 1.85rem); line-height: 1.25; color: var(--placa-amarelo); }
.quem-somos-texto p:not(.quem-somos-abre) { margin-top: 1rem; max-width: 38rem; color: #d9e4d6; font-size: 1.1rem; }

@media (max-width: 860px) {
  .quem-somos { grid-template-columns: 1fr; }
}

/* Estado de reserva quando o número não estiver configurado (fica na Entrega, sobre creme) */
.whatsapp-pendente, .instagram-pendente {
  max-width: 38rem;
  padding: 1rem 1.25rem;
  border: 2px dashed currentColor; border-radius: 10px;
}

/* ---------- Instagram ---------- */
.instagram {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(4rem, 9vw, 7rem) max(clamp(1rem, 4vw, 2.5rem), calc((100vw - 76rem) / 2));
  background: var(--madeira-escura);
}
.instagram .sobretitulo { color: var(--placa-amarelo); }
.instagram h2 { font-size: clamp(2.25rem, 5vw, 3.75rem); color: #fff; }
.instagram-texto > p:not(.sobretitulo) { margin: 1rem 0 1.75rem; max-width: 34rem; font-size: 1.15rem; color: #e3d3bd; }
.instagram-pendente { color: #f1e3cc; }
.instagram-mural { margin: 0; }
.instagram-mural-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.5rem, 1.5vw, 1rem); }
.instagram-mural-grade img {
  width: 100%; height: auto; aspect-ratio: 1;
  object-fit: cover;
  border: 6px solid var(--papel); border-radius: 6px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
  rotate: -2deg;
}
.instagram-mural-grade img:nth-child(even) { rotate: 2.5deg; translate: 0 .6rem; }
/* O mascote ocupa a primeira coluna inteira, como capa do mural */
.instagram-mural-grade .instagram-mural-mascote {
  grid-row: span 2; height: 100%; aspect-ratio: auto;
  object-fit: contain; object-position: 50% 100%;
  background: radial-gradient(circle at 50% 35%, #3b7a4e, var(--verde-escuro));
}
.instagram-usuario { margin-top: .5rem; color: #e3d3bd; font-weight: 600; }
.instagram-mural figcaption { margin-top: 1.25rem; font-size: .9rem; color: #bfae95; }

@media (max-width: 860px) {
  .instagram { grid-template-columns: 1fr; }
}

/* ---------- Pedido: dock, aviso e painel ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.pedido-dock {
  position: fixed; z-index: 25;
  left: 50%; bottom: max(1rem, env(safe-area-inset-bottom));
  translate: -50% 0;
  display: flex; align-items: center; gap: 1rem;
  width: max-content; max-width: calc(100vw - 1.5rem);
  padding: .5rem .5rem .5rem 1.25rem;
  background: var(--papel); color: var(--tinta);
  border-radius: 999px;
  box-shadow: 0 0 0 2px var(--toldo-verde), 0 14px 32px rgba(0, 0, 0, .4);
  transition: translate .3s cubic-bezier(.2, .8, .2, 1), opacity .3s ease;
}
.pedido-dock.fora { translate: -50% calc(100% + 2rem); opacity: 0; pointer-events: none; }
.pedido-dock-resumo { font-size: .95rem; }
.pedido-dock-qtd { color: var(--verde-escuro); }
.pedido-dock .botao { box-shadow: inset 0 0 0 2px var(--placa-amarelo), 0 3px 0 #7d151a; }
/* O dock não cobre o fim da página */
body.com-dock { padding-bottom: 6rem; }

.pedido-aviso {
  position: fixed; z-index: 26;
  left: 50%; bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 4.5rem);
  translate: -50% .5rem;
  max-width: calc(100vw - 2rem);
  padding: .55em 1.1em;
  background: var(--verde-escuro); color: #fff;
  border-radius: 999px; font-weight: 600; font-size: .95rem;
  display: flex; align-items: center; gap: .75rem;
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity .2s ease, translate .2s ease, visibility 0s .2s;
}
.pedido-aviso.visivel { opacity: 1; translate: -50% 0; visibility: visible; pointer-events: auto; transition-delay: 0s; }
/* Com o painel aberto o aviso mora dentro dele (o resto da página fica inerte) */
.pedido-painel .pedido-aviso { position: absolute; top: 4.75rem; bottom: auto; width: max-content; }
.pedido-desfazer {
  appearance: none; cursor: pointer;
  min-height: 44px; padding: 0 .9rem;
  border: 2px solid var(--placa-amarelo); border-radius: 999px;
  background: transparent; color: var(--placa-amarelo);
  font: 700 .9rem var(--fonte-texto);
}
.pedido-copiar {
  appearance: none; cursor: pointer; justify-self: center;
  min-height: 44px; border: 0; background: none; color: var(--verde-escuro);
  font: 700 1rem var(--fonte-texto);
}
.pedido-whatsapp-status { font-size: .9rem; color: var(--tinta-suave); }
.pedido-whatsapp-status:empty { display: none; }
.pedido-copia { width: 100%; min-height: 8rem; padding: .75rem; border: 2px solid var(--toldo-verde); border-radius: 8px; font: .9rem/1.4 var(--fonte-texto); resize: vertical; }

.pedido-painel {
  /* Painel lateral à direita no computador; folha de baixo no celular */
  width: min(30rem, 100vw); max-width: 100vw;
  height: 100dvh; max-height: 100dvh;
  margin: 0 0 0 auto; padding: 0;
  border: 0;
  background: var(--papel); color: var(--tinta);
  box-shadow: -20px 0 48px rgba(0, 0, 0, .35);
}
.pedido-painel[open] { display: flex; flex-direction: column; }
.pedido-painel::backdrop { background: rgba(10, 30, 18, .55); }
.pedido-cabeca {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1rem 1rem 1.5rem;
  border-bottom: 2px solid var(--verde-escuro);
}
.pedido-cabeca h2 { font-size: 1.85rem; color: var(--verde-escuro); }
.pedido-fechar {
  appearance: none; cursor: pointer;
  min-width: 44px; min-height: 44px;
  border: 2px solid rgba(15, 42, 26, .25); border-radius: 999px;
  background: transparent; color: var(--verde-escuro);
  font: 400 1.6rem/1 var(--fonte-texto);
}
.pedido-fechar:hover { border-color: var(--verde-escuro); }
.pedido-resumo { padding: .75rem 1.5rem 0; color: var(--tinta-suave); font-weight: 600; }
.pedido-resumo:empty { display: none; }
.pedido-lista { flex: 1; overflow-y: auto; overscroll-behavior: contain; list-style: none; margin: 0; padding: .25rem 1.5rem; }
.pedido-linha {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .35rem 1rem;
  padding: .75rem 0;
  border-bottom: 1px solid rgba(44, 107, 63, .2);
}
.pedido-linha-nome { font-weight: 700; line-height: 1.25; }
.pedido-linha-un { display: block; font-weight: 500; font-size: .85rem; color: var(--tinta-suave); }
.pedido-linha .qtd { grid-row: 1 / 3; grid-column: 2; }
.pedido-remover {
  appearance: none; cursor: pointer; justify-self: start;
  min-height: 44px; padding: 0;
  border: 0; background: none;
  color: var(--placa-vermelho); font: 600 .9rem var(--fonte-texto);
  text-decoration: underline; text-underline-offset: 3px;
}
.pedido-vazio { flex: 1; padding: 2rem 1.5rem; display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.pedido-vazio strong { font-family: var(--fonte-titulo); font-weight: 400; font-size: 1.4rem; color: var(--verde-escuro); }
.pedido-rodape {
  display: grid; gap: .75rem;
  padding: 1rem 1.5rem max(1.25rem, env(safe-area-inset-bottom));
  border-top: 2px solid rgba(15, 42, 26, .15);
  background: #f4ecd9;
}
.pedido-nota, .pedido-depois { font-size: .9rem; color: var(--tinta-suave); }
.pedido-enviar { width: 100%; background: #1f7a43; box-shadow: inset 0 0 0 2px #a8e0b5, 0 6px 0 #0f4524; }
.pedido-enviar:hover { box-shadow: inset 0 0 0 2px #a8e0b5, 0 8px 0 #0f4524; }
.pedido-enviar:active { box-shadow: inset 0 0 0 2px #a8e0b5, 0 2px 0 #0f4524; }
.pedido-limpar {
  appearance: none; cursor: pointer; justify-self: center;
  min-height: 44px; padding: 0 1rem;
  border: 0; background: none; color: var(--tinta-suave);
  font: 600 .9rem var(--fonte-texto); text-decoration: underline; text-underline-offset: 3px;
}

@media (max-width: 560px) {
  .pedido-painel {
    width: 100vw; height: auto; max-height: 92dvh;
    margin: auto 0 0;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -20px 48px rgba(0, 0, 0, .35);
  }
  .pedido-dock { width: calc(100vw - 1.5rem); justify-content: space-between; }
}

/* ---------- Rodapé ---------- */
.rodape {
  padding: 3rem 1rem 4rem;
  text-align: center;
  background: #000;
}
.rodape-barraca { width: min(46rem, 100%); height: auto; margin: 0 auto -2rem; }
.rodape-lema { font-family: var(--fonte-titulo); font-size: clamp(1.6rem, 4vw, 2.5rem); color: #fff; }
.rodape-desde { margin-top: .4rem; color: #bfb39f; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-dica span::after, .catalogo-lista.trocando, .mascote.acena .mascote-img { animation: none; }
  .botao, .filtro, .dia, .topo-nav a::after, .produto-add, .pedido-dock, .pedido-aviso, .topo-menu-barras, .topo-menu-barras::before, .topo-menu-barras::after { transition: none; }
  .topo-pedido.pulsa .topo-pedido-qtd { animation: none; }
}