/* =========================================================
   MATEANDO IN FLORIPA — TEMA DA FESTA

   Carrega DEPOIS de estilo.css e sobrescreve o visual. Para voltar ao
   visual anterior basta apagar a linha <link> deste arquivo nos dois
   HTMLs: o festa.js percebe (marcador --tema-festa abaixo) e desliga
   abertura, céu, ondas e efeitos, sem erro.

   PALETA ÚNICA — cores tiradas do logotipo (public/logotipo-identidadevisual.jpeg)
   Cada cor tem um PAPEL fixo e uma proporção, em todo o site:

     AZUL (55–60%)   marinho #01315E · azul médio #024176 · azul-céu #1697B8
                     fundos, estrutura, títulos, degradês de céu e mar.
     CREME (~20%)    #FEFBEB · cartões, fitas, molduras, texto sobre azul.
     VERDE (~10%)    #067D30 (verde-erva) · destaque principal: botão
                     primário, adicionar à sacola, WhatsApp, rótulos de seção,
                     barras e marcadores; #7CC78A (verde-claro) sobre azul.
     VERMELHO (~6%)  #C22711 · destaque secundário: hover dos botões, selos.
     DOURADO (~3%)   #B8944A · o dourado de antes: estrelas das avaliações,
                     pílula do idioma, detalhes do logo.
     AMARELO (~1%)   #FDD508 · só luz: estrelas do céu, brilho da ponte e do
                     farol, contorno de foco sobre fundo azul.

   COMBINAÇÕES (as mesmas em todo o site)
     rótulo de seção texto verde em caixa alta + fio em onda que se desenha
     card            creme, borda fina; a sombra deslocada (verde) fica SÓ nos
                     cards de avaliação
     botão primário  verde com texto creme
     botão secundário creme com contorno marinho; hover vermelho
     títulos         creme sobre azul · marinho sobre creme
     seções          alternam marinho → céu (degradê) → creme-azulado; nenhuma
                     em vermelho, verde ou amarelo chapado.

   CONTRASTE (WCAG, medido)
     creme / verde 5,2:1 · verde-claro / marinho-fundo 8,6:1 · verde-texto / creme 6,6:1
     dourado / marinho-fundo 6,0:1 · creme / marinho 12,6:1 · creme / marinho-fundo 15,9:1
     branco / vermelho 5,9:1 · creme / céu-fundo #0C6A95 5,8:1
     vermelho / creme 5,6:1 · tinta-2 / creme 7,5:1 · branco / verde 5,3:1

   MOVIMENTO: só transform e opacity; tudo pausa fora da tela; quem pede
   menos movimento recebe a versão parada (bloco no fim do arquivo).
   ========================================================= */

:root{
  --tema-festa:1;                      /* marcador: o festa.js lê para saber se o tema está ligado */

  /* azuis */
  --mar-fundo:#011F3F;                 /* marinho profundo: céu da noite, rodapé */
  --mar:#01315E;                       /* marinho do logo */
  --mar-2:#024176;                     /* azul médio */
  --ceu-fundo:#0C6A95;                 /* azul-céu escuro (aguenta texto creme) */
  --ceu:#1697B8;                       /* azul-céu do logo (ondas, brilhos; nunca fundo de texto) */
  --ceu-claro:#6AC9DB;
  /* creme */
  --creme:#FEFBEB;
  --creme-2:#ECE2CC;
  --creme-azul:#EAF1F6;
  /* acentos */
  --amarelo:#FDD508;
  --amarelo-2:#E9C300;
  --vermelho:#C22711;
  --vermelho-2:#A31E0C;                /* vermelho para texto pequeno sobre creme (6,9:1) */
  --verde:#067D30;                     /* verde-erva: botão primário, WhatsApp */
  --verde-hover:#056528;
  --verde-texto:#05692A;               /* texto verde sobre creme */
  --verde-claro:#7CC78A;               /* verde sobre fundo azul */
  --verde-vivo:#3FA05A;                /* sombra deslocada dos cards de avaliação */
  --dourado:#B8944A;                   /* o dourado de antes */

  /* nomes antigos do estilo.css, apontando para a paleta nova */
  --marinho-fundo:var(--mar-fundo);
  --marinho-2:#012B53;
  --marinho:var(--mar);
  --marinho-hover:var(--mar-2);
  --branco:#FFFFFF;
  --cinza:var(--creme-azul);
  --cinza-2:#DCE7EF;
  --ouro:var(--dourado);
  --ouro-estrela:var(--dourado);
  --ouro-texto:var(--vermelho-2);
  --tinta:#0B1B33;
  --tinta-2:#3F5470;
  --borda:rgba(1,49,94,.2);
  --borda-2:rgba(1,49,94,.42);
  --sombra:0 1px 2px rgba(1,31,63,.06), 0 12px 30px -14px rgba(1,31,63,.28);
  --sombra-alta:0 2px 4px rgba(1,31,63,.08), 0 22px 44px -18px rgba(1,31,63,.4);
  --r-sm:10px; --r:14px; --r-lg:18px;

  --contorno:2px solid var(--mar);
  --desloca:6px;                       /* distância da sombra deslocada (só avaliações) */
}

html{ background:var(--creme); scrollbar-gutter:stable; }
/* Lenis (rolagem suave): regras do lenis.css 1.3 */
html.lenis,html.lenis body{ height:auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped{ overflow:clip; }
.lenis [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-smooth iframe{ pointer-events:none; }
body{ background:var(--creme); }

/* ---------- transição entre páginas (View Transitions entre documentos).
   Navegador sem suporte ignora este bloco em silêncio. ---------- */
@view-transition{ navigation:auto; }
#topbar{ view-transition-name:cabecalho; }
::view-transition-old(root){ animation:vt-sai .26s ease both; }
::view-transition-new(root){ animation:vt-entra .45s var(--e-saida) both; }
@keyframes vt-sai{ to{ opacity:0; transform:translateY(-8px); } }
@keyframes vt-entra{ from{ opacity:0; transform:translateY(14px); } }

/* =========================================================
   TIPOGRAFIA E FITA DE RÓTULO
   ========================================================= */
h1,h2,h3,h4{ color:var(--mar); }
.rotulo{ color:var(--vermelho-2); }

/* rótulo de seção: caixa alta em verde, com um fio em onda (o mar das
   divisórias) que se desenha da esquerda quando o título entra na tela */
.secao-topo .rotulo,.duo-txt .rotulo,.loja-intro .rotulo,.pagina-cabeca .rotulo,.avaliacoes .rotulo{
  gap:.8rem; padding:0; background:none; border:0;
  font-size:.78rem; font-weight:500; letter-spacing:.24em; color:var(--verde-texto);
}
.secao-topo .rotulo::before,.duo-txt .rotulo::before,.loja-intro .rotulo::before,.pagina-cabeca .rotulo::before,.avaliacoes .rotulo::before,
.secao-topo.centro .rotulo::after{
  content:""; display:block; flex:none; width:44px; height:8px; opacity:1;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 8'%3E%3Cpath d='M1 4q5.25-4.5 10.5 0t10.5 0 10.5 0 10.5 0' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 8'%3E%3Cpath d='M1 4q5.25-4.5 10.5 0t10.5 0 10.5 0 10.5 0' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  transform-origin:0 50%; transition:transform 1s var(--e-saida) .25s;
}
.secao-topo.centro .rotulo::after{ transform-origin:100% 50%; }
.js .rotulo.reveal::before,.js .rotulo.reveal::after{ transform:scaleX(0); }
.js .rotulo.reveal.visivel::before,.js .rotulo.reveal.visivel::after{ transform:none; }
/* sobre azul */
.categorias .rotulo,.avaliacoes .rotulo,.pagina-cabeca .rotulo{ color:var(--verde-claro); }

/* =========================================================
   MOVIMENTO BASE — revelações com jeitos diferentes por seção
   Usam as propriedades translate/scale (não transform), para que o
   efeito de inclinação e o hover dos cards continuem livres.
   ========================================================= */
.js .reveal{
  opacity:0; transform:none; translate:0 26px;
  transition:opacity .8s var(--e-saida), translate .8s var(--e-saida), scale .8s var(--e-saida), clip-path 1s var(--e-saida), transform .3s var(--e-saida);
  transition-delay:calc(var(--d,0) * 90ms), calc(var(--d,0) * 90ms), calc(var(--d,0) * 90ms), calc(var(--d,0) * 90ms), 0s;
}
.js .reveal.visivel{ opacity:1; translate:none; scale:none; }
.js .reveal[data-rev="lado"]{ translate:-52px 0; }
.js .reveal[data-rev="lado-d"]{ translate:52px 0; }
.js .reveal[data-rev="escala"]{ translate:none; scale:.9; }
.js .reveal.visivel,.js .reveal[data-rev].visivel{ opacity:1; translate:none; scale:none; }
/* máscara: o título se abre da esquerda para a direita */
.js .reveal[data-rev="mascara"]{
  translate:none; opacity:1;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 40%,transparent 60%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 40%,transparent 60%,transparent 100%);
  -webkit-mask-size:250% 100%; mask-size:250% 100%;
  -webkit-mask-position:100% 0; mask-position:100% 0; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  transition:-webkit-mask-position 1.1s var(--e-saida), mask-position 1.1s var(--e-saida);
  transition-delay:calc(var(--d,0) * 90ms);
}
.js .reveal[data-rev="mascara"].visivel{ -webkit-mask-position:0 0; mask-position:0 0; }

/* produtos e "em breve": entrada em cascata, também por translate/scale */
.js .item{
  opacity:0; transform:none; translate:0 22px;
  transition:opacity .6s var(--e-saida) calc(var(--i,0) * 55ms), translate .6s var(--e-saida) calc(var(--i,0) * 55ms),
             scale .2s ease, transform .25s var(--e-saida);
}
.js .item.dentro{ opacity:1; translate:none; }
.js .item.saindo{ opacity:0; transform:none; scale:.97; transition-duration:.18s; transition-delay:0s; }

/* =========================================================
   BOTÕES
   ========================================================= */
.btn{ border-width:2px; border-radius:var(--r-sm); }
.btn:hover{ transform:translate(-2px,-2px); }
.btn:active{ transform:translate(1px,1px) scale(.98); }
.btn-primario{
  background:var(--verde); color:var(--creme); border-color:var(--mar);
  box-shadow:4px 4px 0 var(--mar);
}
.btn-primario:hover{ background:var(--verde-hover); box-shadow:4px 4px 0 var(--mar); }
.btn-linha,.btn-branco{
  background:var(--creme); color:var(--mar); border-color:var(--mar);
  box-shadow:4px 4px 0 rgba(1,49,94,.28);
}
.btn-linha:hover,.btn-branco:hover{ background:var(--vermelho); color:var(--creme); border-color:var(--vermelho-2); box-shadow:4px 4px 0 var(--vermelho-2); }
.btn-verde,.btn-wa{ border-color:#04561F; box-shadow:4px 4px 0 #04561F; }
/* dourado: o mesmo do seletor de idioma no cabeçalho, com texto branco */
.btn-ouro{
  background:var(--dourado); color:#fff; border-color:var(--dourado);
  text-shadow:0 1px 2px rgba(80,55,10,.45);
  box-shadow:0 12px 26px -14px rgba(1,31,63,.75);
}
.btn-ouro:hover{ background:#C8A55C; border-color:#C8A55C; box-shadow:0 16px 30px -14px rgba(1,31,63,.8); }
/* azul-escuro: o mesmo fundo do cabeçalho */
.btn-marinho{
  background:var(--mar-fundo); color:var(--creme); border-color:var(--mar-fundo);
  box-shadow:0 12px 26px -14px rgba(1,31,63,.75);
}
.btn-marinho:hover{ background:var(--mar-2); border-color:var(--mar-2); }
/* sobre a foto escura do hero o azul ganha um contorno claro para não sumir */
.hero .btn-marinho{ border-color:rgba(254,251,235,.4); }
.hero .btn-marinho:hover{ border-color:rgba(254,251,235,.7); }
.btn-verde:hover,.btn-wa:hover{ box-shadow:4px 4px 0 #04561F; }

/* =========================================================
   CABEÇALHO E MENU
   ========================================================= */
#topbar{ background:var(--mar-fundo); }
.progresso{ background:linear-gradient(90deg, var(--verde), var(--verde-claro)); }
/* balanço do selo: um só, ao passar o mouse (não gira sem parar) */
.brand:hover .brand-selo{ transform:none; animation:balanca .9s ease-in-out; transform-origin:50% 12%; }
@keyframes balanca{
  0%{ transform:rotate(0); } 22%{ transform:rotate(-9deg); } 50%{ transform:rotate(7deg); }
  74%{ transform:rotate(-3deg); } 100%{ transform:rotate(0); }
}
.brand-selo{ box-shadow:0 0 0 2px rgba(253,213,8,.0), 0 6px 16px -6px rgba(0,0,0,.6); }

.sidebar,.cart{ background:var(--creme); }
.sidebar-links a{ background:var(--creme); border:var(--contorno); }
.sidebar-links a:hover{ background:var(--creme-azul); border-color:var(--mar); }
.sb-ic{ background:var(--verde); color:var(--creme); }
.sidebar-links a:hover .sb-ic{ background:var(--mar); color:var(--verde-claro); }
.sb-chip{ border:2px solid var(--mar); background:var(--creme); }
.sb-chip:hover{ background:var(--vermelho); border-color:var(--vermelho-2); color:var(--creme); }
.sb-chip.chip-erva{ display:inline-flex; align-items:center; gap:.45rem; padding-left:.4rem; }
.mini-bandeira{ display:inline-block; width:22px; height:22px; flex:none; }
.mini-bandeira .selo-bandeira{ --sb:22px; }
.sidebar-rodape{ background:var(--creme-azul); }
.sb-topo::after{ background:linear-gradient(90deg, var(--verde-claro), transparent 80%); }
.st-ponto{ background:#7F8EA3; }

/* =========================================================
   SELO DE BANDEIRA — um pano ao vento, discreto
   ========================================================= */
.selo-bandeira{
  --sb:52px;
  position:relative; display:block; flex:none;
  width:var(--sb); height:var(--sb); border-radius:50%; overflow:hidden;
  box-shadow:0 0 0 2px var(--creme), 0 0 0 4px var(--mar);
}
.selo-bandeira svg{ display:block; width:116%; height:116%; margin:-8%; transform-origin:0 50%; animation:pano 3.8s ease-in-out infinite; }
.selo-bandeira::after{
  content:""; position:absolute; inset:-10% -70%;
  background:linear-gradient(100deg, transparent 40%, rgba(255,255,255,.38) 50%, transparent 60%);
  transform:translateX(-45%); animation:pano-luz 3.8s ease-in-out infinite alternate;
}
@keyframes pano{
  0%,100%{ transform:skewY(0) scaleX(1); } 25%{ transform:skewY(-4.5deg) scaleX(.965); }
  50%{ transform:skewY(0) scaleX(1.03); } 75%{ transform:skewY(4.5deg) scaleX(.965); }
}
@keyframes pano-luz{ to{ transform:translateX(45%); } }

/* =========================================================
   ONDAS — o mar entre as seções (duas camadas, bem lentas)
   O festa.js desenha as duas camadas em SVG dentro de cada .onda.
   ========================================================= */
.onda{
  --de:var(--mar-fundo); --para:var(--creme);
  position:relative; height:clamp(46px,6.8vw,92px); overflow:hidden; line-height:0;
  background:var(--de);
}
.onda[data-de="mar"]{ --de:var(--mar-fundo); }       .onda[data-para="mar"]{ --para:var(--mar-fundo); }
.onda[data-de="mar2"]{ --de:var(--mar-2); }          .onda[data-para="mar2"]{ --para:var(--mar-2); }
.onda[data-de="ceufundo"]{ --de:var(--ceu-fundo); }  .onda[data-para="ceufundo"]{ --para:var(--ceu-fundo); }
.onda[data-de="creme"]{ --de:var(--creme); }         .onda[data-para="creme"]{ --para:var(--creme); }
.onda[data-de="azul"]{ --de:var(--creme-azul); }     .onda[data-para="azul"]{ --para:var(--creme-azul); }
.onda svg{ position:absolute; left:0; bottom:-1px; width:200%; height:100%; display:block; }
.onda .o-tras{ fill:var(--ceu); opacity:.55; animation:mar 54s linear infinite; }
.onda .o-frente{ fill:var(--para); animation:mar 34s linear infinite reverse; }
@keyframes mar{ to{ transform:translateX(-50%); } }

/* =========================================================
   CÉU ESTRELADO — estrelas que cintilam em tempos diferentes
   e, raramente, uma estrela cadente (gerados pelo festa.js)
   ========================================================= */
.ceu{
  position:absolute; inset:-40px 0; z-index:0; overflow:hidden; pointer-events:none;
  translate:0 var(--par,0px);
}
.ceu i{
  position:absolute; left:var(--x); top:var(--y);
  width:var(--s,2px); height:var(--s,2px); border-radius:50%;
  background:var(--creme); opacity:.18;
  animation:cintila var(--d,4s) ease-in-out var(--a,0s) infinite;
}
.ceu i.ama{ background:var(--amarelo); box-shadow:0 0 7px 1px rgba(253,213,8,.55); }
@keyframes cintila{ 0%,100%{ opacity:.12; transform:scale(.75); } 50%{ opacity:.95; transform:scale(1.55); } }
.cadente{
  position:absolute; left:var(--x); top:var(--y); width:170px; height:2px; border-radius:2px;
  filter:drop-shadow(0 0 4px rgba(254,251,235,.7));
  background:linear-gradient(90deg, transparent, rgba(254,251,235,.9) 75%, #fff);
  opacity:0; transform-origin:100% 50%;
  animation:cai 1.5s ease-out forwards;
}
@keyframes cai{
  0%{ opacity:0; transform:translate3d(0,0,0) rotate(28deg); }
  14%{ opacity:1; }
  100%{ opacity:0; transform:translate3d(340px,180px,0) rotate(28deg); }
}
/* seções pausadas (fora da tela): nada se mexe, nada gasta bateria */
.pausada *,.pausada *::before,.pausada *::after{ animation-play-state:paused !important; }

/* =========================================================
   HERO — a cena ganha vida por camadas
   ========================================================= */
/* pontos de luz da foto: valores de reserva; o festa.js recalcula em px
   (lista LUZES) conforme o corte da imagem em cada tela */
.hero-img{ --ponte-x:21%; --ponte-y:49%; --farol-x:45%; --farol-y:45%; }
.hero{
  position:relative; isolation:isolate; overflow:hidden; color:var(--creme);
  min-height:clamp(560px, calc(100svh - var(--topo)), 920px);
  display:flex; align-items:flex-end;
  padding:0;
  background:linear-gradient(180deg, #0A5A8A 0%, var(--mar-2) 34%, var(--mar-fundo) 100%);
}
.hero-cena{ position:absolute; inset:0; z-index:-1; overflow:hidden; }
.hero-img{
  position:absolute; inset:-1.5%;
  translate:calc(var(--mx,0) * -14px) calc(var(--my,0) * -9px);
  animation:kenburns 36s ease-in-out infinite alternate;
}
/* zoom lento e curto (até 4%): mais que isso amolece a imagem */
@keyframes kenburns{ from{ transform:scale(1); } to{ transform:scale(1.04) translate3d(-.6%,-.4%,0); } }
.hero-img img{ width:100%; height:100%; object-fit:cover; object-position:center 40%; }
.js .hero-img img,.js .abertura-cena .hero-img img{ opacity:0; transition:opacity 1.4s ease; }
.js .hero-img img.carregada{ opacity:1; }
.sem-imagem .hero-img img{ display:none; }
.sem-imagem .hero-brilho{ display:none; }
.hero-brilho{
  position:absolute; left:var(--ponte-x); top:var(--ponte-y);
  width:min(40vw,560px); aspect-ratio:3/1; translate:-50% -50%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,226,140,.42), rgba(253,213,8,.1) 55%, transparent 75%);
  mix-blend-mode:screen; opacity:.3; animation:brilha 5.6s ease-in-out infinite;
  pointer-events:none;
}
/* o farol pisca no mesmo compasso do feixe (7 s, clarão quando o feixe aponta para nós) */
.hero-brilho.farol{
  left:var(--farol-x); top:var(--farol-y);
  width:min(11vw,150px); aspect-ratio:1;
  background:radial-gradient(closest-side, rgba(255,246,205,.95), rgba(255,226,140,.3) 45%, transparent 72%);
  animation:farol-pisca 7s linear infinite;
}
@keyframes farol-pisca{
  0%,50%,100%{ opacity:.35; transform:scale(.8); } 25%,75%{ opacity:1; transform:scale(1.25); }
  12%,38%,62%,88%{ opacity:.5; transform:scale(.9); }
}
/* feixe do farol: uma cunha de luz que gira em volta do eixo vertical */
.farol-feixe{
  position:absolute; left:var(--farol-x); top:var(--farol-y);
  width:min(34vw,480px); height:min(3.2vw,46px); translate:0 -50%;
  transform-origin:0 50%;
  background:linear-gradient(90deg, rgba(255,246,205,.8), rgba(255,236,170,.28) 45%, transparent);
  clip-path:polygon(0 44%, 100% 0, 100% 100%, 0 56%);
  mix-blend-mode:screen; pointer-events:none;
  animation:feixe 7s linear infinite;
}
@keyframes feixe{
  0%{ transform:scaleX(1); opacity:.55; } 25%{ transform:scaleX(.02); opacity:.9; }
  50%{ transform:scaleX(-1); opacity:.55; } 75%{ transform:scaleX(.02); opacity:.9; } 100%{ transform:scaleX(1); opacity:.55; }
}
.sem-imagem .farol-feixe{ display:none; }
@keyframes brilha{ 0%,100%{ opacity:.18; transform:scale(.94); } 50%{ opacity:.5; transform:scale(1.06); } }
.hero-veu{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(1,31,63,.5) 0%, rgba(1,31,63,.04) 28%, rgba(1,31,63,.42) 60%, var(--mar-fundo) 100%);
}
/* com a foto: o lado do texto escurece um pouco mais (contraste do título) */
/* com a foto: o lado do texto fica numa sombra azul calma, para a cena
   não disputar atenção com o título; a direita (loja e personagens) fica viva */
.com-imagem .hero-veu{
  background:
    linear-gradient(90deg, rgba(1,31,63,.9) 0%, rgba(1,31,63,.78) 26%, rgba(1,31,63,.38) 46%, rgba(1,31,63,0) 64%),
    linear-gradient(180deg, rgba(1,31,63,.3) 0%, transparent 20%, transparent 70%, var(--mar-fundo) 100%);
}
/* as estrelas vivas ficam só no céu da foto (o telhado da loja fica à direita) */
.hero.com-imagem .ceu,.abertura.com-imagem .ceu{ right:40%; }
.hero{ align-items:center; }
.hero-conteudo{ position:relative; z-index:1; padding-top:4rem; padding-bottom:5rem; }
.hero-conteudo > *{ max-width:560px; }
/* linha de cima: dourado, com o fio em onda dos rótulos de seção */
.hero-frase{
  display:flex; align-items:center; gap:.8rem; margin:0 0 1.1rem;
  color:#D2B06A; font-size:.8rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase;
  animation:hero-entra .9s .1s var(--e-saida) both;
}
.hero-frase::before{
  content:""; flex:none; width:44px; height:8px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 8'%3E%3Cpath d='M1 4q5.25-4.5 10.5 0t10.5 0 10.5 0 10.5 0' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 8'%3E%3Cpath d='M1 4q5.25-4.5 10.5 0t10.5 0 10.5 0 10.5 0' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.hero-titulo{
  margin:0; color:var(--creme);
  font-size:clamp(2.8rem,5.4vw,4.6rem); font-weight:500; line-height:1; letter-spacing:-.03em;
  text-shadow:0 4px 30px rgba(1,31,63,.5);
}
.hero-titulo .linha{ display:block; overflow:hidden; padding:.03em 0 .1em; }
.hero-titulo .linha > span{ display:block; animation:linha-sobe 1.15s .2s var(--e-saida) both; }
.hero-titulo .linha:nth-child(2) > span{ animation-delay:.34s; }
@keyframes linha-sobe{ from{ transform:translate3d(0,112%,0); } to{ transform:none; } }
.hero-apoio{
  margin:1.1rem 0 2rem; color:rgba(254,251,235,.86);
  font-size:clamp(1.02rem,1.5vw,1.2rem); font-weight:300; line-height:1.55;
  animation:hero-entra 1s .6s var(--e-saida) both;
}
.hero-botoes{ display:flex; flex-wrap:wrap; gap:.8rem 1rem; animation:hero-entra 1s .75s var(--e-saida) both; }
.hero-botoes .btn{ min-width:190px; justify-content:center; }
@keyframes hero-entra{ from{ opacity:0; transform:translate3d(0,18px,0); } to{ opacity:1; transform:none; } }
/* enquanto a abertura cobre a tela, o hero espera; ao abrir, entra */
html.abertura-ativa:not(.abertura-abrindo) .hero *{ animation-play-state:paused !important; }

/* =========================================================
   ABERTURA — vídeo em tela cheia antes do site
   ========================================================= */
.abertura{
  display:none; position:fixed; inset:0; z-index:9999;
  background:var(--mar-fundo); color:var(--creme);
  touch-action:none; overscroll-behavior:contain; overflow:hidden;
}
html.abertura-ativa .abertura{ display:block; }
html.abertura-ativa,html.abertura-ativa body{ overflow:hidden; }
.abertura-palco{ position:absolute; inset:0; }
.abertura-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .7s ease; }
.abertura.tocando .abertura-video{ opacity:1; }
.abertura-final{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 40%;
  opacity:0; transform:scale(1.05); pointer-events:none;
  transition:opacity .55s ease .08s, transform 2.4s var(--e-saida);
}
/* troca de cena escondida: a imagem entra desfocada e vai focando, o vídeo
   desfoca por baixo, tudo dentro do clarão que sai do logo */
.abertura.final .abertura-final{ opacity:1; transform:none; animation:foca .9s ease-out both; }
.abertura.final .abertura-video{ filter:blur(10px); transition:opacity .7s ease, filter .35s ease; }
@keyframes foca{ from{ filter:blur(14px) brightness(1.35); } to{ filter:none; } }
.abertura-clarao{
  position:absolute; left:50%; top:50%; width:max(140vw,140vh); aspect-ratio:1; translate:-50% -50%;
  border-radius:50%; pointer-events:none; opacity:0; transform:scale(.15);
  background:radial-gradient(closest-side, rgba(255,250,228,.95) 0%, rgba(255,232,160,.55) 22%, rgba(253,213,8,.16) 45%, transparent 70%);
  mix-blend-mode:screen;
}
.abertura.final .abertura-clarao{ animation:clarao 1.15s cubic-bezier(.2,.7,.3,1) both; }
@keyframes clarao{ 0%{ opacity:0; transform:scale(.15); } 22%{ opacity:1; transform:scale(.55); } 100%{ opacity:0; transform:scale(1.15); } }
.abertura.saindo .abertura-final{ opacity:0 !important; transition:opacity calc(var(--saida,1s) * .4) ease calc(var(--saida,1s) * .5); }
.abertura-cena{
  position:absolute; inset:0; overflow:hidden; opacity:0; transition:opacity .7s ease;
  background:linear-gradient(180deg, #0A5A8A 0%, var(--mar-2) 34%, var(--mar-fundo) 100%);
}
.abertura.cena .abertura-cena{ opacity:1; }
.abertura:not(.cena) .abertura-cena *{ animation-play-state:paused !important; }
.abertura-cena .ceu{ inset:-40px 0 38% 0; }
.abertura-logo{ position:absolute; inset:0; display:grid; place-items:center; opacity:0; pointer-events:none; transition:opacity .7s ease; }
.abertura-logo{ --selo:clamp(150px,24vmin,250px); }
.abertura-logo::before{             /* véu: deixa a cena do vídeo visível em volta */
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 50%, rgba(1,31,63,.18), rgba(1,31,63,.72) 75%);
}
.abertura-logo::after{
  content:""; position:absolute; left:50%; top:50%; width:min(78vmin,620px); aspect-ratio:1; translate:-50% -50%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(253,213,8,.6), rgba(253,213,8,.14) 55%, transparent 75%);
  opacity:0; transform:scale(.4);
}
.abertura.logo .abertura-logo{ opacity:1; }
.abertura.logo .abertura-logo::after{ animation:logo-brilho 1.3s ease-out both; }
.abertura-selo{
  position:relative; z-index:1; display:block;
  width:var(--selo); aspect-ratio:1; border-radius:50%; overflow:hidden;
  background:var(--mar-fundo);
  box-shadow:0 0 0 4px var(--creme), 0 28px 70px -22px rgba(0,0,0,.85);
  opacity:0; transform:scale(.45);
}
.abertura-selo img{ width:100%; height:100%; object-fit:cover; transform:translateY(.9%) scale(1.06); }
.abertura.logo .abertura-selo{ animation:logo-entra 1.2s cubic-bezier(.2,.85,.25,1) both; }
@keyframes logo-entra{ 0%{ transform:scale(.45); opacity:0; } 55%{ transform:scale(1.07); opacity:1; } 100%{ transform:scale(1); opacity:1; } }
@keyframes logo-brilho{ 0%{ opacity:0; transform:scale(.4); } 55%{ opacity:.95; transform:scale(1.15); } 100%{ opacity:.6; transform:scale(1.05); } }
/* reflexo que passa pelo selo depois do carimbo */
.abertura-selo::after{
  content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  transform:translateX(-120%);
}
.abertura.logo .abertura-selo::after{ animation:reflexo 1s .8s ease-in-out both; }
@keyframes reflexo{ to{ transform:translateX(120%); } }
/* dois anéis que se espalham como onda no carimbo */
.abertura-anel{
  position:absolute; left:50%; top:50%; width:var(--selo); aspect-ratio:1; translate:-50% -50%;
  border:2px solid rgba(254,251,235,.85); border-radius:50%; opacity:0; pointer-events:none;
}
.abertura.logo .abertura-anel{ animation:anel 1.6s .4s cubic-bezier(.2,.7,.3,1) both; }
.abertura.logo .abertura-anel.a2{ animation-delay:.62s; border-color:rgba(124,199,138,.85); }
@keyframes anel{ 0%{ opacity:.9; transform:scale(1); } 100%{ opacity:0; transform:scale(2.7); } }
/* frase que sobe por baixo de uma máscara */
.abertura-frase{
  position:absolute; left:0; right:0; top:calc(50% + var(--selo) / 2 + 26px);
  display:block; overflow:hidden; text-align:center; padding:.1em 1rem .2em;
}
.abertura-frase span{
  display:inline-block; color:var(--creme);
  font-size:clamp(.95rem,1.7vw,1.35rem); font-weight:400; letter-spacing:.22em; text-transform:uppercase;
  text-shadow:0 2px 18px rgba(1,31,63,.8);
  transform:translate3d(0,115%,0);
}
.abertura.logo .abertura-frase span{ animation:frase-sobe .8s .7s var(--e-saida) both; }
@keyframes frase-sobe{ to{ transform:none; } }
/* barra fina de progresso do vídeo */
.abertura-barra{
  position:absolute; left:0; right:0; bottom:0; z-index:2; height:3px;
  background:rgba(254,251,235,.14); opacity:0; transition:opacity .5s ease;
}
.abertura-barra i{ display:block; height:100%; background:var(--verde-claro); transform:scaleX(0); transform-origin:0 50%; }
.abertura.tocando .abertura-barra{ opacity:1; }
/* saída: o véu, o vídeo e os textos somem; o selo voa (festa.js) até o cabeçalho */
.abertura.saindo{ background:transparent; pointer-events:none; transition:background-color var(--saida,1s) ease; }
.abertura.saindo :is(.abertura-video,.abertura-cena,.abertura-barra,.abertura-pular,.abertura-frase,.abertura-anel){
  opacity:0 !important; transition:opacity calc(var(--saida,1s) * .8) ease;
}
.abertura.saindo .abertura-logo::before{ opacity:0; transition:opacity var(--saida,1s) ease; }
/* o vídeo só some depois de encaixado sobre a foto do hero (mesma imagem): troca invisível */
.abertura.saindo .abertura-video{ transition:opacity calc(var(--saida,1s) * .4) ease calc(var(--saida,1s) * .5); }
.abertura.saindo .abertura-logo::after{ animation:brilho-sai calc(var(--saida,1s) * .6) ease forwards; }
@keyframes brilho-sai{ from{ opacity:.6; transform:scale(1.05); } to{ opacity:0; transform:scale(.5); } }
html.logo-voando #topbar .brand-selo{ opacity:0; }
/* seletor de idioma: letra branca sobre a pílula dourada */
.idioma .idioma-op[aria-pressed="true"]{ color:#fff; text-shadow:0 1px 2px rgba(80,55,10,.45); }
.abertura-pular{
  position:absolute; z-index:3; padding:.7rem 1.25rem; border-radius:99px;
  border:2px solid var(--creme); background:rgba(1,31,63,.55); color:var(--creme);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  font-size:.8rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
  transition:background .2s, color .2s;
}
.abertura-pular{ top:max(16px, env(safe-area-inset-top)); right:16px; }
.abertura-pular:hover{ background:var(--creme); color:var(--mar); }
.abertura-pular:focus-visible{ outline:3px solid var(--amarelo); outline-offset:3px; }
.abertura.some{ opacity:0; transition:opacity .55s ease; }

/* =========================================================
   SEÇÕES — ritmo azul → céu → creme
   ========================================================= */
.secao{ background:var(--creme); }
.secao-cinza{ background:var(--creme-azul); }
.secao.local{ background:var(--creme-azul); }
.destaques{ background:var(--creme); padding:2.4rem 0 3.2rem; }
.marquee{ background:var(--mar-fundo); }

/* destaques */
.destaque-ic{ background:var(--verde); color:var(--creme); box-shadow:none; border:0; }
.destaque-txt{ min-width:0; }
.destaque-txt b{ color:var(--mar); }
.destaque-txt span{ color:var(--tinta-2); font-weight:400; }

/* ---------- cards: creme com borda fina. A sombra deslocada fica
   reservada aos cards de avaliação (o único lugar onde ela aparece) ---------- */
.destaque,.contato,.horario{ background:var(--creme); border:1px solid var(--borda-2); border-radius:var(--r-lg); box-shadow:none; }
.destaque{ transition:transform .3s var(--e-saida), border-color .2s ease, box-shadow .3s ease; }
.destaque:hover,.contato:hover{ transform:translateY(-3px); border-color:var(--mar); box-shadow:var(--sombra); }
.contato svg{ color:var(--verde); }
.aval-card{ position:relative; isolation:isolate; background:none; border:2px solid transparent; border-radius:var(--r-lg); }
.aval-card::before{
  content:""; position:absolute; inset:-2px; z-index:-2;
  background:var(--verde-vivo); border-radius:var(--r-lg);
  transform:translate(var(--desloca),var(--desloca));
  transition:transform .3s var(--e-saida);
}
.aval-card:hover::before{ transform:translate(calc(var(--desloca) + 3px),calc(var(--desloca) + 3px)); }
/* o rosto do card (creme + contorno marinho) fica acima do bloco deslocado */
.aval-card::after{
  content:""; position:absolute; inset:-2px; z-index:-1; pointer-events:none;
  background:var(--creme); border:var(--contorno); border-radius:var(--r-lg);
}
.horario > div{ border-top:1px solid var(--borda); }

/* ---------- categorias (home) ---------- */
.categorias{ background:linear-gradient(180deg, var(--mar-2) 0%, var(--ceu-fundo) 100%); }
.categorias .secao-topo h2{ color:var(--creme); }
.categorias .secao-topo p{ color:rgba(254,251,235,.9); }
.fileira-trilho{ padding:12px 4px 30px; margin:-12px -4px -30px; scroll-padding-inline:4px; }
.cat-card{ border-radius:var(--r-lg); overflow:visible; border:0; background:none; transition:opacity .8s var(--e-saida), translate .8s var(--e-saida), scale .8s var(--e-saida), transform .2s ease-out; transform-style:preserve-3d; }
.cat-card:hover{ box-shadow:none; border-color:transparent; }
.cat-card > *{ transition:none; }
.cat-card,.js .cat-card.reveal{ transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); }
.cat-inner{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:var(--creme); border:0; border-radius:var(--r-lg); overflow:hidden;
  box-shadow:0 18px 36px -22px rgba(1,31,63,.75);
}
.cat-foto{ position:relative; display:block; aspect-ratio:4/3; background:var(--mar-2); overflow:hidden; }
.cat-foto::before{            /* brilho na cor da categoria, só no hover */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 70% at 50% 110%, var(--cor,transparent), transparent 70%);
  opacity:0; transition:opacity .4s ease;
}
.cat-card:hover .cat-foto::before,.cat-card:focus-visible .cat-foto::before{ opacity:.75; }
.cat-foto::after{             /* faixa fina na cor da categoria */
  content:""; position:absolute; left:0; right:0; bottom:0; height:6px; z-index:2;
  background:var(--cor,transparent);
}
.cat-foto img{ position:relative; }
.cat-vaga{
  position:absolute; inset:0; display:grid; place-items:center; padding:0 1rem;
  color:var(--creme);
  background:
    repeating-linear-gradient(135deg, rgba(254,251,235,.055) 0 2px, transparent 2px 15px),
    radial-gradient(90% 80% at 15% 0%, rgba(22,151,184,.5), transparent 60%),
    linear-gradient(165deg, var(--mar-2), var(--mar) 75%);
}
.cat-vaga-nome{ font-size:clamp(1.35rem,2.4vw,1.9rem); font-weight:500; line-height:1.12; letter-spacing:-.015em; text-align:center; text-wrap:balance; }
.cat-foto .selo-bandeira{ position:absolute; top:12px; right:12px; z-index:3; --sb:54px; }
.cat-luz{
  position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; transition:opacity .3s ease;
  background:radial-gradient(240px circle at var(--lx,50%) var(--ly,0%), rgba(255,255,255,.34), transparent 62%);
}
.cat-card:hover .cat-luz{ opacity:1; }
.cat-card:hover .cat-foto img{ transform:scale(1.06); }
.cat-card.visivel .cat-vaga .ic *,.cat-card:hover .cat-vaga .ic *{ animation:none; }
.cat-corpo{ background:var(--creme); }
.cat-nome{ color:var(--mar); }
.cat-linha{ color:var(--tinta-2); }
.cat-nome.so-leitor{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.cat-nome.so-leitor + .cat-linha{ grid-row:1/3; align-self:center; font-size:.95rem; color:var(--mar); }
.cat-seta{ border:2px solid var(--mar); color:var(--mar); }
.cat-card:hover .cat-seta{ background:var(--verde); border-color:var(--verde); color:var(--creme); }
.fileira-seta{ background:var(--creme); border:2px solid var(--mar); color:var(--mar); }
.fileira-seta:hover{ background:var(--verde); border-color:var(--verde); color:var(--creme); }


/* ---------- avaliações ---------- */
.avaliacoes{ background:var(--mar-fundo); }
.aval-fundo{ background-image:radial-gradient(rgba(254,251,235,.06) 1px, transparent 1px); }
.aval-brilho.b1{ background:radial-gradient(circle, rgba(63,160,90,.16), transparent 65%); }
.aval-brilho.b2{ background:radial-gradient(circle, rgba(22,151,184,.32), transparent 65%); }
.aval-nota{ color:var(--creme); }
.aval-nota{
  display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1rem; margin-top:.8rem;
  font-size:clamp(1.35rem,2.5vw,1.95rem); font-weight:400; color:var(--creme);
}
.aval-nota b{ font-weight:500; font-variant-numeric:tabular-nums; }
.aval-nota .numero-estrelas{
  display:inline-flex; gap:.18rem; padding:.3rem .8rem; border-radius:99px;
  background:rgba(254,251,235,.08); border:1px solid rgba(184,148,74,.45);
  font-size:.82em; line-height:1;
}
.numero-estrelas i,.aval-estrelas i{ color:rgba(254,251,235,.22); display:inline-block; font-style:normal; transition:color .4s ease; transition-delay:calc(var(--k,0) * 170ms + 250ms); }
.numero-estrelas i:nth-child(1),.aval-estrelas i:nth-child(1){ --k:0; } .numero-estrelas i:nth-child(2),.aval-estrelas i:nth-child(2){ --k:1; }
.numero-estrelas i:nth-child(3),.aval-estrelas i:nth-child(3){ --k:2; } .numero-estrelas i:nth-child(4),.aval-estrelas i:nth-child(4){ --k:3; }
.numero-estrelas i:nth-child(5),.aval-estrelas i:nth-child(5){ --k:4; }
.estrelas-on .numero-estrelas i,.estrelas-on .aval-estrelas i{ color:var(--dourado); animation:estrela-pop .6s calc(var(--k,0) * 170ms + 250ms) var(--e-saida) both; }
@keyframes estrela-pop{ 0%{ transform:scale(.3); } 55%{ transform:scale(1.45); } 100%{ transform:scale(1); } }
.aval-estrelas{ display:inline-flex; gap:.12rem; width:fit-content; padding:.28rem .65rem; background:var(--mar); border-radius:99px; font-size:.95rem; letter-spacing:0; }
.aval-card{
  animation:flutua var(--fd,6s) ease-in-out var(--fa,0s) infinite alternate;
}
.aval-card:nth-child(3n+1){ --fd:5.6s; --fy:-8px; --fa:-1s; }
.aval-card:nth-child(3n+2){ --fd:7.2s; --fy:6px; --fa:-3s; }
.aval-card:nth-child(3n){ --fd:6.3s; --fy:-5px; --fa:-2s; }
@keyframes flutua{ from{ transform:translateY(0); } to{ transform:translateY(var(--fy,-6px)); } }
.aval-card:hover{ transform:none; animation-play-state:paused; }
.aval-texto{ color:var(--tinta); }
.aval-inicial{ background:var(--mar); color:var(--creme); }
.aval-nome b{ color:var(--mar); }
.aval-nome span{ color:var(--tinta-2); }
.aval-fita{ padding:.9rem 0 1.4rem; gap:1.6rem; }

/* ---------- nossa loja / onde estamos ---------- */
.loja-secao{ background:var(--creme); padding-top:clamp(3rem,6vw,4.5rem); padding-bottom:1.2rem; }
/* a loja abre o bloco em duas faixas: título + texto lado a lado e, embaixo,
   os três pontos com o botão; a galeria vem logo em seguida */
.loja-intro{ display:grid; gap:1.2rem 4rem; align-items:start; }
.loja-intro-titulo h2{ margin:.7rem 0 0; font-size:clamp(2rem,4vw,3.1rem); line-height:1.08; letter-spacing:-.025em; }
.loja-intro-txt p{ margin:0; font-size:1.05rem; line-height:1.65; }
.loja-faixa{
  display:grid; gap:1.2rem 2rem; align-items:center;
  margin-top:clamp(1.4rem,3vw,2.2rem); padding-top:clamp(1.2rem,2.4vw,1.6rem); border-top:1px solid var(--borda);
}
.loja-faixa .loja-pontos{ margin:0; display:grid; gap:.7rem 1.6rem; }
.loja-faixa .btn{ justify-self:start; }
@media (min-width:900px){
  .loja-intro{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .loja-intro-txt{ padding-top:2.1rem; }       /* alinha o texto com o título, não com o rótulo */
  .loja-faixa{ grid-column:1 / -1; grid-template-columns:minmax(0,1fr) auto; }
  .loja-faixa .loja-pontos{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
.loja-check{ background:var(--verde); color:var(--creme); box-shadow:none; border:0; }
.mapa-moldura{ border:1px solid var(--borda-2); border-radius:var(--r-lg); box-shadow:var(--sombra); }
.status-loja.aberto{ color:var(--verde); }

/* =========================================================
   GALERIA HORIZONTAL
   ========================================================= */
.galeria{ position:relative; background:var(--creme); color:var(--mar); }
.galeria-palco{ position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center; gap:clamp(1.2rem,3vh,2.4rem); padding:clamp(2.6rem,6vh,4rem) 0; }
.galeria-palco{ background:var(--creme); }
/* a galeria emenda na loja: sem o vão grande antes de "Por dentro da loja" */
.galeria.fixa .galeria-palco{ justify-content:flex-start; }
.galeria-topo{ position:relative; z-index:1; display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; }
.galeria-sub{ margin:0; font-size:.78rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--tinta-2); }
.galeria-marca{ min-width:min(240px,42%); text-align:right; }
.galeria-contador{ font-size:1.3rem; font-weight:300; color:var(--tinta-2); font-variant-numeric:tabular-nums; }
.galeria-contador b{ font-weight:500; color:var(--mar); font-size:1.7rem; }
.galeria-barra{ display:block; height:3px; margin-top:.6rem; border-radius:3px; background:var(--borda); overflow:hidden; }
.galeria-barra i{ display:block; height:100%; background:var(--verde); transform:scaleX(0); transform-origin:0 50%; }
.galeria-janela{ position:relative; z-index:1; overflow:hidden; outline-offset:-3px; }
.galeria-trilha{
  list-style:none; margin:0; display:flex; align-items:flex-start; width:max-content;
  padding:1.2rem clamp(1.2rem,7vw,6rem) 2rem; gap:clamp(1.8rem,4vw,4rem);
}
.galeria-item{ flex:none; width:clamp(230px,32vw,460px); }
.galeria-quadro{
  position:relative; margin:0; padding:0; background:none; border:0;
  transform:scale(.95); transform-origin:50% 100%;
  transition:transform .7s var(--e-saida);
}
.galeria-item.ativa .galeria-quadro{ transform:none; }
.galeria-foto{ position:relative; display:block; aspect-ratio:4/5; overflow:hidden; border-radius:var(--r-lg); background:var(--mar-2); box-shadow:0 22px 44px -26px rgba(1,31,63,.6); }
.galeria-foto img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:translate3d(var(--par,0px),0,0) scale(1.22);
}
.galeria-ph{
  position:absolute; inset:0; display:grid; place-items:center; padding:1rem; text-align:center;
  color:var(--creme); font-size:.8rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  background:
    repeating-linear-gradient(135deg, rgba(254,251,235,.055) 0 2px, transparent 2px 15px),
    linear-gradient(165deg, var(--mar-2), var(--mar) 75%);
}
.galeria-legenda{ display:block; overflow:hidden; margin-top:.85rem; padding:.1rem 0 .35rem; }
.galeria-legenda span{ display:block; transform:translate3d(0,120%,0); transition:transform .8s var(--e-saida) .15s; color:var(--mar); font-size:.98rem; font-weight:500; letter-spacing:.05em; }
.galeria-item.ativa .galeria-legenda span{ transform:none; }
/* modo desktop: a seção fica fixa e a rolagem vertical anda a trilha */
.galeria.fixa .galeria-palco{ position:sticky; top:68px; height:calc(100svh - 68px); padding-top:clamp(1.4rem,3vh,2.4rem); padding-bottom:clamp(1.2rem,3vh,2rem); }
.galeria.fixa .galeria-trilha{ will-change:transform; }
.galeria.fixa .galeria-item{ width:min(32vw, calc((100svh - 68px - 15rem) * .8)); min-width:210px; }
/* celular, toque e movimento reduzido: faixa com rolagem lateral e encaixe */
.galeria:not(.fixa) .galeria-janela{ overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; }
.galeria:not(.fixa) .galeria-janela::-webkit-scrollbar{ display:none; }
.galeria:not(.fixa) .galeria-item{ scroll-snap-align:center; }
.galeria:not(.fixa) .galeria-trilha{ scroll-padding:0 1.2rem; }

/* =========================================================
   RODAPÉ
   ========================================================= */
.rodape{ background:var(--mar-fundo); }
.rodape::before{ background:linear-gradient(90deg, transparent, var(--verde-claro), transparent); opacity:.6; }
.rodape > .wrap{ position:relative; z-index:1; }
.rodape .wordmark small{ color:var(--dourado); }
.foot-grid h4{ color:var(--verde-claro); }
.foot-grid ul a::after{ background:var(--verde-claro); }
.socials a:hover{ background:var(--verde); color:var(--creme); }
.rodape.tem-ponte{
  background-color:var(--mar-fundo);
  background-image:linear-gradient(180deg, rgba(1,31,63,.9) 0%, rgba(1,31,63,.7) 40%, rgba(1,31,63,.92) 100%), var(--rodape-img);
  background-size:cover; background-position:center bottom;
}
.rodape.tem-ponte .ponte-horizonte{ display:none; }

/* WhatsApp flutuante segue sendo o único grande bloco verde */
.wa-flutuante{ box-shadow:0 12px 28px -10px rgba(6,125,48,.8), 0 0 0 3px var(--creme), 0 0 0 5px var(--mar); }

/* =========================================================
   CATÁLOGO
   ========================================================= */
.pagina-cabeca{
  position:relative; overflow:hidden; isolation:isolate; border-bottom:0;
  background:linear-gradient(180deg, var(--mar-2) 0%, var(--mar-fundo) 100%);
  --ponte:var(--creme);
}
.pagina-cabeca::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:6px; z-index:2;
  background:var(--cor-cat,transparent); transition:background-color .5s ease;
}
.cab-deco{ background-image:radial-gradient(rgba(254,251,235,.1) 1px, transparent 1px); z-index:0; }
.cab-ponte{ opacity:.1; }
.cab-conteudo{ z-index:2; }
.pagina-cabeca h1{ color:var(--creme); }
.pagina-cabeca p{ color:rgba(254,251,235,.92); }
.pagina-cabeca p b{ color:var(--verde-claro); }
.migalhas a,.migalhas span{ color:rgba(254,251,235,.85); }
.migalhas a:hover{ color:var(--verde-claro); }
.migalhas b{ color:var(--verde-claro); }
.cab-titulo{ display:flex; flex-wrap:wrap; align-items:center; gap:.7rem 1.4rem; margin:.8rem 0 .7rem; }
.cab-titulo h1{ margin:0; }
.cab-categoria{
  position:relative; display:inline-flex; align-items:center; gap:.65rem;
  padding:.45rem 1.1rem .45rem .5rem; margin-right:14px;
  background:var(--creme); color:var(--mar); border:2px solid var(--mar); border-right:0;
  border-left:7px solid var(--cor-cat,var(--mar));
  font-size:.82rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  animation:hero-entra .6s var(--e-saida) both;
}
.cab-categoria::after{
  content:""; position:absolute; right:-14px; top:-2px; bottom:-2px; width:14px;
  background:var(--vermelho); clip-path:polygon(0 0,100% 0,62% 50%,100% 100%,0 100%);
}
.cab-categoria[hidden]{ display:none; }
.cab-categoria .selo-bandeira{ --sb:30px; }
.secao.vitrine{ padding-top:2.6rem; background:var(--creme-azul); }

.filtros{ padding:8px 14px 18px; margin-left:-14px; margin-right:-14px; }
.filtro{
  background:var(--creme); border:var(--contorno); border-radius:var(--r-lg); color:var(--mar);
  position:relative; transform:none;
}
.filtro::after{
  content:""; position:absolute; left:10px; right:10px; bottom:6px; height:4px; border-radius:4px;
  background:var(--cor,transparent); opacity:.85; transform:scaleX(.35); transform-origin:50% 50%;
  transition:transform .4s var(--e-saida);
}
.filtro:hover::after{ transform:scaleX(1); }
.filtro-ic{ background:var(--creme-azul); }
.filtro-ic.tem-bandeira{ background:none; width:54px; height:54px; display:grid; place-items:center; }
.filtro-ic .selo-bandeira{ --sb:44px; }
.filtro:hover{ transform:translateY(-3px); border-color:var(--mar); box-shadow:var(--sombra); }
.filtro[aria-selected="true"]{ background:var(--mar); border-color:var(--mar); color:var(--creme); box-shadow:var(--sombra); }
.filtro[aria-selected="true"] .filtro-ic{ background:rgba(254,251,235,.12); color:var(--creme); }
.filtro[aria-selected="true"] .filtro-ic.tem-bandeira{ background:none; }
.filtro[aria-selected="true"] .conta-cat{ color:rgba(254,251,235,.85); }
.filtro[aria-selected="true"]::after{ transform:scaleX(1); height:5px; box-shadow:0 0 14px var(--cor,transparent); opacity:1; }
.filtro .conta-cat{ color:var(--tinta-2); }

.vitrine-barra{ border-bottom:2px solid var(--borda-2); }
.pf-rot{ color:var(--vermelho-2); }
.pf-campo,.pf-ordem select{ border:2px solid var(--mar); background-color:var(--creme); }
.pf-campo:focus-within,.pf-ordem select:focus-visible{ box-shadow:0 0 0 3px rgba(6,125,48,.45); }

/* produtos: card limpo (borda fina, sobe no hover) e o botão verde de antes */
.card{ background:var(--creme); }
.card-foto{ background:var(--mar-2); }
.card-cat{ color:var(--vermelho-2); }
.card-nome{ color:var(--mar); }
.card-preco b{ color:var(--mar); }
.card-preco.vazio b{ color:rgba(1,49,94,.72); }
.vaga{ background:var(--creme); border:1.5px dashed var(--borda-2); border-radius:var(--r-lg); }
.vaga-ic{ background:var(--creme-azul); }
.vaga span{ color:var(--tinta-2); }
.vaga .em-breve{ color:var(--vermelho-2); border-color:var(--vermelho-2); }
.grade-vazia{ background:var(--creme); border:2px dashed var(--mar); }
.item.realce .card{ animation:realce 2.6s var(--e-saida); }
@keyframes realce{
  0%{ box-shadow:0 0 0 0 rgba(6,125,48,0); }
  15%,60%{ box-shadow:0 0 0 4px var(--verde), 0 22px 44px -20px rgba(1,31,63,.6); }
  100%{ box-shadow:0 0 0 4px rgba(6,125,48,0); }
}

/* mascote: personagem que entra deslizando pela lateral (só se a imagem existir) */
.mascote{
  position:fixed; bottom:0; z-index:90; width:clamp(104px,15vw,210px); pointer-events:none;
  opacity:0; transition:transform .95s var(--e-saida), opacity .5s ease;
}
.mascote img{ display:block; width:100%; height:auto; filter:drop-shadow(0 8px 16px rgba(1,31,63,.5)); }
/* os três apresentadores entram pela esquerda e apontam para os produtos */
.mascote-ar,.mascote-br,.mascote-uy{ left:0; transform:translateX(-115%); }
.mascote.entrou{ opacity:1; transform:none; }
/* personagem que apresenta a categoria: um pouco maior, respira enquanto fala */
.mascote.com-fala{ width:clamp(150px,14vw,230px); }
.mascote-fig{ transform-origin:50% 100%; }
.mascote.entrou .mascote-fig{ animation:respira 3.6s ease-in-out 1s infinite; }
@keyframes respira{ 0%,100%{ transform:none; } 50%{ transform:translateY(-3px) scale(1.012); } }
/* balão de fala: sai da mão levantada do personagem */
.mascote-balao{
  position:absolute; left:84%; bottom:64%; z-index:1;
  width:min(330px, calc(100vw - 230px)); padding:1rem 1.15rem 1.05rem;
  background:var(--creme); color:var(--tinta);
  border:1px solid var(--borda-2); border-radius:18px 18px 18px 6px;
  box-shadow:var(--sombra-alta);
  pointer-events:auto;
  opacity:0; transform:scale(.55); transform-origin:0 100%; visibility:hidden;
  transition:opacity .3s ease, transform .55s cubic-bezier(.3,1.45,.5,1), visibility 0s .55s;
}
.mascote-balao::before{               /* rabinho apontando para a mão */
  content:""; position:absolute; left:-9px; bottom:12px; width:18px; height:18px;
  background:var(--creme); border-left:1px solid var(--borda-2); border-bottom:1px solid var(--borda-2);
  transform:rotate(45deg) skew(8deg,8deg); border-radius:0 0 0 4px;
}
.mascote.falando .mascote-balao{ opacity:1; transform:none; visibility:visible; transition-delay:0s; }
.mb-topo{ display:flex; align-items:center; gap:.55rem; margin-bottom:.5rem; }
.mb-topo .selo-bandeira{ --sb:26px; box-shadow:0 0 0 2px var(--creme), 0 0 0 3px var(--borda-2); }
.mb-topo b{ font-size:.72rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--verde-texto); }
.mb-texto{ margin:0 0 .85rem; min-height:4.4em; max-width:none; font-size:.95rem; line-height:1.5; color:var(--tinta); }
.mb-digita::after{                    /* cursor enquanto digita */
  content:""; display:inline-block; width:2px; height:1em; margin-left:2px; vertical-align:-.12em;
  background:var(--verde); animation:cursor .8s steps(1) infinite;
}
.falou .mb-digita::after{ display:none; }
@keyframes cursor{ 50%{ opacity:0; } }
.mb-ok{
  display:inline-flex; align-items:center; padding:.5rem 1.05rem; border-radius:var(--r-sm);
  border:0; background:var(--verde); color:var(--creme); font:inherit; font-size:.85rem; font-weight:500; cursor:pointer;
  opacity:0; transform:translateY(6px); transition:opacity .35s ease, transform .35s var(--e-saida), background .2s ease;
}
.falou .mb-ok{ opacity:1; transform:none; }
.mb-ok:hover{ background:var(--verde-hover); }
.mb-ok:focus-visible{ outline:3px solid var(--mar); outline-offset:3px; }
@media (max-width:768px){
  .mascote.com-fala{ width:108px; }
  .mascote-balao{ left:70%; bottom:58%; width:calc(100vw - 100px); padding:.85rem .95rem .9rem; }
  .mb-texto{ font-size:.9rem; min-height:0; }
}

/* miniatura que voa até a sacola */
.voa{
  position:fixed; z-index:400; margin:0; pointer-events:none; overflow:hidden;
  border:2px solid var(--creme); border-radius:12px; box-shadow:0 10px 24px -10px rgba(1,31,63,.6); background:var(--creme);
}
.voa img{ width:100%; height:100%; object-fit:cover; }

/* =========================================================
   PEDIDO, FOTO AMPLIADA, AVISO — mesma paleta
   ========================================================= */
.cart .painel-topo{ background:var(--mar-fundo); }
.cart .painel-topo .rotulo{ color:var(--dourado); }
.cart-form-titulo{ color:var(--vermelho-2); }
.ci-cat{ color:var(--vermelho-2); }
.campo-rot i.opcional{ color:var(--tinta-2); }
.opcao input:checked + .opcao-caixa{ background:var(--mar); border-color:var(--mar); color:var(--creme); }
.toast{ background:var(--mar-fundo); border:2px solid var(--verde-claro); }
.cart-count{ background:var(--vermelho); box-shadow:0 0 0 2px var(--mar-fundo); }
/* preço "Sob consulta" (peça ainda sem valor) e total estimado da sacola */
.card-preco.sob-consulta b{ font-size:1rem; letter-spacing:.01em; color:var(--tinta-2); }
.lb-acao .card-preco.sob-consulta b{ font-size:1.15rem; }
.ci-preco{ margin-left:auto; font-size:.92rem; font-weight:500; color:var(--mar); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ci-preco.sob-consulta{ font-weight:400; color:var(--tinta-2); }
.cart-total{ display:grid; gap:.2rem; margin-top:.4rem; padding:.85rem 0 .2rem; border-top:1px solid var(--borda-2); }
.ct-linha{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; color:var(--tinta); }
.ct-linha b{ font-size:1.1rem; font-weight:500; color:var(--mar); font-variant-numeric:tabular-nums; }
.ct-aviso{ font-size:.85rem; color:var(--tinta-2); text-align:right; }

/* =========================================================
   LARGURAS
   ========================================================= */
@media (max-width:719px){
  .hero{ min-height:clamp(520px, calc(100svh - var(--topo) - 60px), 760px); }
  /* o estilo.css zera o padding de ".hero .wrap" no celular: aqui ele volta, com folga para o WhatsApp flutuante */
  .hero .wrap.hero-conteudo{ padding:5rem 1.25rem 6.4rem; }
  .hero-botoes .btn{ flex:1 1 100%; }
  /* no celular a foto mostra a loja e os personagens (lado direito da cena) */
  /* celular: o hero usa hero-mobile.webp, o último quadro do vídeo do celular
     (retrato, mesma cena e mesmo enquadramento): a passagem do vídeo para o
     hero não tem pulo. Farol e ponte não aparecem nesse quadro. */
  .hero-img img,.abertura-final{ object-position:center center; }
  .hero-brilho,.farol-feixe{ display:none; }
  .hero{ align-items:flex-end; }
  .hero-frase{ font-size:.66rem; letter-spacing:.14em; gap:.6rem; }
  .hero-frase::before{ width:30px; }
  .hero-botoes .btn{ min-width:0; }
  .com-imagem .hero-veu{ background:linear-gradient(180deg, rgba(1,31,63,.3) 0%, transparent 22%, rgba(1,31,63,.55) 48%, rgba(1,31,63,.9) 72%, var(--mar-fundo) 100%); }
  .hero.com-imagem .ceu,.abertura.com-imagem .ceu{ display:none; }
  .abertura-frase span{ font-size:.8rem; letter-spacing:.16em; }
  .destaques{ padding:1.6rem 0 2.2rem; }
  .galeria-topo{ align-items:center; }
  .galeria-marca{ min-width:38%; }
  .galeria-item{ width:min(74vw,320px); }
  .fileira-trilho{ grid-auto-columns:78%; }
}
@media (min-width:720px) and (max-width:1023px){
  .destaques-trilho{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.2rem; }
}
@media (min-width:1024px){
  .destaques-trilho{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .filtros{ grid-template-columns:repeat(6,minmax(0,1fr)); }
}
@media (min-width:1180px){
  .filtros{ grid-template-columns:repeat(11,minmax(0,1fr)); }
  .filtro-nome{ font-size:.8rem; }
}
@media (hover:none){
  .cat-card{ transform:none; }
}

/* =========================================================
   ACESSIBILIDADE
   ========================================================= */
main:focus{ outline:none; }
:focus-visible{ outline:3px solid var(--mar); outline-offset:3px; }
#topbar :focus-visible,.rodape :focus-visible,.avaliacoes :focus-visible,.sb-topo :focus-visible,
.hero :focus-visible,.pagina-cabeca :focus-visible,.categorias :focus-visible,.marquee :focus-visible{ outline-color:var(--amarelo); }
.btn:focus-visible{ outline-offset:5px; }

/* =========================================================
   REFINAMENTO (nov/2026): hero sem texto sobre a imagem, catálogo e home
   compactos no celular, moldura da galeria, idioma no cabeçalho do celular
   ========================================================= */

/* ---------- HERO NO CELULAR: imagem em cima, texto embaixo em azul liso
   (sem letra sobre a cena). No computador o hero continua em tela cheia. ---------- */
.hero .btn-primario{ border-color:var(--verde); box-shadow:0 12px 26px -14px rgba(0,0,0,.7); }
.hero .btn-primario:hover{ border-color:var(--verde-hover); }
@media (max-width:719px){
  .hero{ display:block; min-height:0; background:var(--mar-fundo); }
  .hero-cena{ position:relative; inset:auto; z-index:0; height:clamp(280px,44svh,400px); overflow:hidden; }
  .hero-img img{ object-position:center 60%; }
  .hero .ceu{ inset:-40px 0 30% 0; right:0; }
  .hero.com-imagem .ceu,.abertura.com-imagem .ceu{ display:none; }
  .hero-veu,.com-imagem .hero-veu{
    background:linear-gradient(180deg, rgba(1,31,63,.3) 0%, transparent 20%, transparent 66%, var(--mar-fundo) 100%);
  }
  .hero-conteudo,.hero .wrap.hero-conteudo{
    position:relative; z-index:1; background:var(--mar-fundo); margin-top:-1px;
    padding:1.1rem 1.25rem 2.2rem; display:grid; gap:.7rem; align-items:end;
    grid-template-columns:minmax(0,1fr);
  }
  .hero-conteudo > *{ max-width:none; }
  .hero-frase{ margin:0; font-size:.62rem; letter-spacing:.12em; }
  .hero-titulo{ font-size:clamp(2rem,9.4vw,2.6rem); text-shadow:none; }
  .hero-apoio{ margin:0; font-size:.98rem; }
  .hero-botoes{ gap:.6rem; }
  .hero-botoes .btn{ flex:1 1 100%; min-width:0; padding:.85rem 1rem; }
}

/* ---------- HERO NO CELULAR, DEPOIS DA ABERTURA: foto horizontal inteira ----------
   A foto retrato do fim do vídeo faz o fundido para a horizontal (a mesma do
   computador), sem zoom e sem recorte: a caixa passa a ter a proporção da foto. */
.hero-pano-img{ display:none; }
@media (max-width:719px){
  .hero-cena{ transition:height 1.1s cubic-bezier(.45,0,.2,1); }
  .hero-pano-img{
    display:block; position:absolute; left:0; top:0; width:100%; height:100%;
    object-fit:cover; object-position:center; opacity:0; transition:opacity 1.1s ease;
  }
  html.hero-pano .hero-cena{ height:calc(100vw * 937 / 1678); }
  html.hero-pano .hero-pano-img{ opacity:1; }
  html.hero-pano .hero-img,html.hero-pano .ceu{ display:none; }     /* some de vez: nada de animação escondida gastando bateria */
  html.hero-pano .hero-veu,html.hero-pano.com-imagem .hero-veu{ background:linear-gradient(180deg, transparent 70%, var(--mar-fundo) 100%); }
  /* sem abertura (navegando dentro do site): já nasce assim, sem animação */
  html.hero-pano-seco .hero-cena,html.hero-pano-seco .hero-pano-img,html.hero-pano-seco .hero-img{ transition:none; }
}

/* ---------- GALERIA NO CELULAR: a mesma rolagem horizontal fixa do computador ---------- */
@media (max-width:719px){
  .galeria.fixa .galeria-palco{ top:62px; height:calc(100svh - 62px); padding-top:1.1rem; padding-bottom:1rem; gap:1.4rem; justify-content:center; }
  .galeria.fixa .galeria-item{ width:min(78vw, calc((100svh - 62px - 12rem) * .8)); min-width:0; }
  .galeria.fixa .galeria-janela{ padding:0 1.1rem; }
}

/* ---------- CABEÇALHO NO CELULAR: idioma ao lado da sacola ---------- */
@media (max-width:719px){
  /* a busca recolhe/volta mudando a altura do cabeçalho: sem isto o navegador
     "corrige" a rolagem sozinho e a página treme */
  html,body{ overflow-anchor:none; }
  #topbar .nav{ grid-template-columns:minmax(0,1fr) auto; }
  #topbar .nav-dir{ display:flex; align-items:center; gap:.2rem; grid-area:marca-acoes; grid-column:2; grid-row:1; justify-self:end; }
  #topbar .nav-dir .nav-acoes{ margin-right:-.5rem; }
  #topbar .idioma{ display:inline-flex; padding:2px; gap:0; }
  #topbar .idioma-op{ min-width:30px; width:30px; height:28px; padding:0; justify-content:center; font-size:0; }
  #topbar .idioma-op .bandeira{ width:18px; height:18px; }
  #topbar .idioma-op span{ display:none; }
  #topbar .wordmark b{ font-size:.94rem; }
  #topbar .brand-selo{ width:42px; height:42px; }
  /* sugestões da busca: o cabeçalho cortava a lista (overflow:hidden);
     com a busca visível ele deixa a lista aparecer por cima da página */
  /* a barra de busca fica SEMPRE à vista e parada (cabeçalho com altura fixa);
     o overflow fica visível para a lista de sugestões aparecer por cima da página */
  #topbar .nav,#topbar .busca{ overflow:visible; }
  #topbar .nav{ transition:none; }
  #topbar.compacto .nav{ grid-template-rows:var(--topo) 52px; padding-bottom:.6rem; min-height:0; }
  #topbar.compacto .busca{ opacity:1; }
  #topbar.compacto{ box-shadow:0 10px 30px -18px rgba(0,0,0,.6); }
  .busca-painel{ top:calc(100% + 6px); max-height:none; }
  .busca-lista{ max-height:min(62svh, calc(100svh - 190px)); }
  .bs-item{ grid-template-columns:44px minmax(0,1fr) auto; gap:.65rem; }
  .bs-foto{ width:44px; height:44px; }
}

/* ---------- CABEÇALHO DA PÁGINA DO CATÁLOGO: enxuto no celular (os filtros sobem) ---------- */
@media (max-width:719px){
  .pagina-cabeca{ padding-top:.4rem; padding-bottom:0; }
  .pagina-cabeca h1{ margin:.35rem 0 .4rem; font-size:1.7rem; }
  .pagina-cabeca p:not(.migalhas){ display:none; }
  .cab-titulo{ margin:.4rem 0 .6rem; gap:.5rem 1rem; }
  .pagina-cabeca .onda,.pagina-cabeca + .onda{ margin-top:0; }
}

/* ---------- FILTROS DE CATEGORIA: compactos, em pílulas ---------- */
.filtros,.filtros:not(.x){
  display:flex; flex-wrap:wrap; gap:.5rem; grid-template-columns:none;
  margin:0 0 1.1rem; padding:2px 0 4px; overflow:visible;
}
.filtro{
  flex-direction:row; align-items:center; gap:.5rem; width:auto;
  padding:.3rem .85rem .3rem .3rem; border-radius:999px; text-align:left; scroll-snap-align:none;
}
.filtro::after{ display:none; }
.filtro-ic,.filtro-ic.tem-bandeira{ width:30px; height:30px; flex:none; background:var(--creme-azul); }
.filtro-ic .ic,.filtro-ic svg.ic{ width:18px; height:18px; }
.filtro-ic .selo-bandeira{ --sb:30px; box-shadow:none; }
.filtro-nome{ font-size:.86rem; font-weight:500; white-space:nowrap; }
.filtro .conta-cat{ font-size:.72rem; padding:.08rem .45rem; border-radius:99px; background:var(--creme-azul); color:var(--tinta-2); }
.filtro:hover{ transform:none; box-shadow:var(--sombra); }
.filtro[aria-selected="true"]{ box-shadow:inset 0 -3px 0 var(--cor,var(--verde)), var(--sombra); }
.filtro[aria-selected="true"] .conta-cat{ background:rgba(254,251,235,.16); color:var(--creme); }
@media (max-width:719px){
  .filtros,.filtros:not(.x){
    flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none;
    margin:0 -1.25rem 1rem; padding:2px 1.25rem 6px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 64px),transparent);
            mask-image:linear-gradient(90deg,#000 calc(100% - 64px),transparent);
  }
  .filtros.fim{ -webkit-mask-image:none; mask-image:none; }
  .filtros::-webkit-scrollbar{ display:none; }
  .filtro{ flex:none; scroll-snap-align:start; }
}

/* ---------- BARRA DE PREÇO: pequena ---------- */
.vitrine-barra{ margin-bottom:1rem; padding-bottom:.8rem; gap:.5rem 1rem; font-size:.88rem; }
.pf-campo,.pf-ordem select{ height:36px; border-radius:8px; }
.pf-campo{ padding:0 .6rem; }
.pf-campo input{ width:3.8rem; font-size:.92rem; }
.pf-ordem select{ font-size:.9rem; padding:0 2rem 0 .7rem; }
.pf-limpar{ height:36px; font-size:.85rem; }
@media (max-width:719px){
  .vitrine-barra{ gap:.45rem; }
  .preco-filtro{ width:100%; gap:.35rem; flex-wrap:nowrap; }
  .pf-rot{ display:none; }
  .pf-campo{ flex:.8 1 0; min-width:0; padding:0 .45rem; height:34px; }
  .pf-campo input{ width:100%; min-width:0; font-size:.88rem; }
  .pf-ate{ font-size:.8rem; }
  .pf-ordem{ flex:1.5 1 0; min-width:0; }
  .pf-ordem select{ width:100%; height:34px; font-size:.8rem; padding:0 1.6rem 0 .55rem; background-position:right .5rem center; background-size:13px; }
  .pf-limpar{ height:34px; padding:0 .2rem; font-size:.8rem; }
}

/* ---------- GRADE DE PRODUTOS NO CELULAR: 2 por linha, card enxuto ---------- */
@media (max-width:719px){
  .grade{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
  .card-corpo{ padding:.55rem .65rem .65rem; gap:.2rem; }
  .card-cat{ font-size:.58rem; letter-spacing:.12em; }
  .card-nome{
    font-size:.82rem; line-height:1.28; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  }
  .card-pe{ margin-top:.3rem; padding-top:.5rem; gap:.4rem; flex-wrap:wrap; align-items:center; }
  .card-preco small{ display:none; }
  .card-preco b{ font-size:.98rem; }
  .card-preco.sob-consulta b{ font-size:.82rem; }
  .qtd-ctrl{ padding:2px; margin-left:auto; box-shadow:none; }
  .qtd-btn{ height:32px; min-width:32px; }
  .qtd-ctrl:not(.ativo) .qtd-menos,.qtd-ctrl:not(.ativo) .qtd-num{ width:0; min-width:0; }
  .qtd-ctrl:not(.ativo){ gap:0; }
  .qtd-ctrl:not(.ativo) .qtd-mais{ width:36px; min-width:36px; padding:0; }
  .qtd-ctrl:not(.ativo) .qtd-rot{ display:none; }
  .qtd-ctrl.ativo .qtd-menos{ width:32px; min-width:32px; }
  .qtd-ctrl.ativo .qtd-num{ width:22px; height:32px; font-size:.9rem; }
}

/* ---------- CATEGORIAS NA HOME: sem rolagem lateral escondida ---------- */
.fileira-trilho{
  display:grid; grid-auto-flow:row; grid-auto-columns:auto; overflow:visible; scroll-snap-type:none;
  grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; padding:6px 0 26px; margin:-6px 0 -26px;
}
.fileira-seta,.fileira-ant,.fileira-prox{ display:none !important; }
.cat-foto{ aspect-ratio:1/1; }
.cat-foto img{ width:100%; height:100%; object-fit:cover; }
.cat-corpo{ padding:.8rem .95rem .9rem; }
.cat-nome{ font-size:1rem; }
.cat-linha{ font-size:.82rem; }
.cat-seta{ width:32px; height:32px; }
@media (max-width:1023px){ .fileira-trilho{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; } }
@media (max-width:719px){
  /* celular: uma lista de linhas — miniatura, nome, quantidade e seta.
     Tudo visível de uma vez, sem faixa que rola para o lado. */
  .fileira-trilho{ grid-template-columns:minmax(0,1fr); gap:.55rem; padding:2px 0 8px; margin:0; }
  .cat-card,.js .cat-card.reveal{ transform:none; }
  .cat-inner{ flex-direction:row; align-items:stretch; height:auto; }
  .cat-foto{ width:82px; flex:none; aspect-ratio:1/1; border-radius:0; }
  .cat-foto::after{ height:4px; }
  .cat-foto .selo-bandeira{ --sb:26px; top:6px; right:6px; box-shadow:0 0 0 2px var(--creme); }
  .cat-corpo{ flex:1; min-width:0; padding:.6rem .9rem; align-content:center; }
  .cat-nome{ font-size:1rem; }
  .cat-seta{ width:30px; height:30px; }
}

/* ---------- DESTAQUES (entrega, produtos, atendimento): grade 2x2 no celular ---------- */
@media (max-width:719px){
  .destaques-trilho{
    grid-auto-flow:row; grid-auto-columns:auto; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem;
    overflow:visible; scroll-snap-type:none; margin:0; padding:0;
  }
  .destaque{ flex-direction:column; align-items:flex-start; gap:.45rem; padding:.8rem .85rem; }
  .destaque-ic{ width:34px; height:34px; }
  .destaque-ic svg{ width:18px; height:18px; }
  .destaque-txt b{ font-size:.86rem; line-height:1.25; }
  .destaque-txt span{ font-size:.76rem; line-height:1.35; }
}

/* ---------- GALERIA: moldura azul-marinho com filete creme; legenda sempre inteira,
   dentro da moldura (nada de texto cortado) ---------- */
.galeria-quadro{
  padding:9px 9px 0; background:var(--mar); border:0; border-radius:10px;
  box-shadow:0 1px 2px rgba(1,31,63,.2), 0 26px 40px -24px rgba(1,31,63,.75);
}
.galeria-foto{ border-radius:3px; box-shadow:0 0 0 1px rgba(254,251,235,.55); }
.galeria-legenda{ display:block; overflow:visible; margin:0; padding:.75rem .4rem .85rem; text-align:center; }
.galeria-legenda span{
  display:block; transform:none !important; transition:none; color:var(--creme);
  font-size:.86rem; font-weight:500; letter-spacing:.09em; text-transform:uppercase; line-height:1.3; white-space:normal;
}

/* ---------- cuia anunciada só pela cuia: pulseira vendida à parte ---------- */
.card-aviso{
  align-self:flex-start; margin-top:.15rem; padding:.12rem .5rem; border-radius:99px;
  font-size:.66rem; font-weight:500; letter-spacing:.04em; line-height:1.3;
  background:rgba(184,148,74,.18); color:#6E5420; border:1px solid rgba(184,148,74,.5);
}
.lb-aviso{
  margin:.2rem 0 .9rem; padding:.7rem .9rem; border-radius:10px;
  background:#FFF6DA; border:1px solid #D8B65A; border-left-width:5px; color:#4A3A12;
  font-size:.92rem; line-height:1.45;
}
.lb-aviso b,.lb-info .lb-aviso b{ display:block; margin-bottom:.1rem; font-size:.98rem !important; line-height:1.3; letter-spacing:0; color:#3B2D08; font-weight:500; }
.lb-aviso[hidden]{ display:none; }
@media (max-width:719px){ .card-aviso{ font-size:.6rem; padding:.1rem .42rem; } }

/* ---------- CATEGORIAS (home): fundo com identidade, não só azul liso ----------
   degradê marinho→céu + trama de losangos (a "guarda pampa" do poncho gaúcho),
   brilho dourado no canto (sem linha/fita no topo) */
.categorias{
  position:relative; overflow:hidden;
  background:
    radial-gradient(60% 55% at 92% 8%, rgba(216,182,90,.20), transparent 70%),
    radial-gradient(55% 60% at 6% 96%, rgba(106,201,219,.22), transparent 70%),
    linear-gradient(180deg, var(--mar-2) 0%, var(--ceu-fundo) 100%);
}
.categorias::before{                 /* trama de losangos */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.9;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23FEFBEB' stroke-opacity='.09' stroke-width='1.2'%3E%3Cpath d='M22 2 42 22 22 42 2 22Z'/%3E%3Cpath d='M22 13 31 22 22 31 13 22Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:44px 44px;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 55%, #000 100%);
          mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 55%, #000 100%);
}
.categorias > .wrap{ position:relative; z-index:1; }

/* ---------- categorias reservadas ("em breve") ---------- */
.cat-card-breve .cat-foto{ background:var(--creme-azul); }
.cat-breve{
  display:grid; place-items:center; width:100%; height:100%;
  background:
    repeating-linear-gradient(135deg, rgba(1,49,94,.05) 0 2px, transparent 2px 14px),
    linear-gradient(165deg, var(--creme) 0%, var(--creme-azul) 100%);
}
.cat-breve-ic{
  width:68px; height:68px; display:grid; place-items:center; border-radius:50%;
  background:#fff; color:var(--mar); box-shadow:0 8px 20px -10px rgba(1,31,63,.5), 0 0 0 4px rgba(1,49,94,.08);
}
.cat-breve-ic .ic,.cat-breve-ic svg{ width:34px; height:34px; }
.cat-breve .ic *{ animation:none !important; }
.cat-linha.breve{ color:var(--verde-texto); font-weight:500; letter-spacing:.04em; }
.conta-cat.breve{ font-size:.64rem !important; letter-spacing:.06em; text-transform:uppercase; background:rgba(184,148,74,.22) !important; color:#6E5420 !important; }
@media (max-width:719px){
  .cat-breve-ic{ width:46px; height:46px; box-shadow:0 0 0 3px rgba(1,49,94,.08); }
  .cat-breve-ic .ic,.cat-breve-ic svg{ width:24px; height:24px; }
}

/* =========================================================
   QUEM PEDE MENOS MOVIMENTO: versão parada equivalente
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  @view-transition{ navigation:none; }
  .js .reveal,.js .reveal[data-rev]{ opacity:1 !important; translate:none !important; scale:none !important; -webkit-mask:none !important; mask:none !important; }
  .js .item{ opacity:1 !important; translate:none !important; scale:none !important; }
  .hero-img,.hero-brilho,.farol-feixe,.ceu i,.cadente,.onda svg,.selo-bandeira svg,.selo-bandeira::after,.aval-card,.brand:hover .brand-selo{ animation:none !important; }
  .cadente{ display:none; }
  .ceu i{ opacity:.55; }
  .hero-brilho{ opacity:.45; }
  .hero-titulo .linha > span,.hero-frase,.hero-apoio,.hero-botoes{ animation:none !important; transform:none !important; opacity:1 !important; }
  .js .hero-img img{ opacity:1; transition:none; }
  .cat-card,.galeria-quadro{ transform:none !important; }
  .numero-estrelas i,.aval-estrelas i{ color:var(--dourado); animation:none !important; }
  .rotulo::before,.rotulo::after{ transform:none !important; }
  .galeria-legenda span{ transform:none !important; }
  .galeria-foto img{ transform:scale(1.04) !important; }
  .mascote{ transition:none; }
  .mascote-fig,.mb-digita::after{ animation:none !important; }
  .mascote-balao,.mb-ok{ transition:none; }
  .mascote-ar,.mascote-br,.mascote-uy{ transform:none !important; }
  .abertura-selo,.abertura.logo .abertura-selo{ animation:none; opacity:1; transform:none; }
  .abertura.logo .abertura-logo::after{ animation:none; opacity:.55; transform:none; }
  .farol-feixe{ display:none; }
  .abertura-anel,.abertura-selo::after,.abertura-clarao{ display:none; }
  .abertura.final .abertura-final{ animation:none; }
  .abertura.logo .abertura-frase span{ animation:none; transform:none; }
}

/* =========================================================
   VITRINE ORGANIZADA: cabeçalho de grupo (tipo / marca) entre os produtos
   ========================================================= */
.grupo-titulo{
  grid-column:1 / -1; display:flex; align-items:center; gap:.7rem; margin:1.3rem 0 .1rem;
  font-size:.8rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--mar);
}
.grupo-titulo:first-child{ margin-top:0; }
.gt-cat{ color:var(--verde-texto,#0B6A31); }
.gt-cat::after{ content:"·"; margin-left:.7rem; color:var(--dourado); }
.gt-nome{ font-size:1.02rem; font-weight:500; letter-spacing:.06em; }
.gt-linha{ flex:1 1 auto; height:1px; background:linear-gradient(90deg, rgba(1,49,94,.28), transparent); min-width:20px; }
.grupo-titulo.nova-cat{ margin-top:2.2rem; }
@media (max-width:719px){
  .grupo-titulo{ margin:1rem 0 .05rem; gap:.5rem; flex-wrap:wrap; font-size:.7rem; }
  .gt-nome{ font-size:.92rem; }
  .gt-cat::after{ margin-left:.5rem; }
  .grupo-titulo.nova-cat{ margin-top:1.6rem; }
}

/* ---------- CABEÇALHO FIXO: nada muda de tamanho ao rolar (computador e celular) ---------- */
#topbar.compacto .nav{ min-height:var(--topo); }
#topbar.compacto .brand-selo{ width:52px; height:52px; }
@media (max-width:719px){ #topbar.compacto .brand-selo{ width:42px; height:42px; } }

/* ---------- "Sob consulta": link para perguntar o valor no WhatsApp ---------- */
.card-preco.sob-consulta{ display:grid; gap:.15rem; }
.consulta-wa{
  justify-self:start; display:inline-flex; align-items:center; gap:.3rem; padding:.18rem .55rem; border-radius:99px;
  background:var(--verde); color:#fff; font-size:.72rem; font-weight:500; letter-spacing:.02em; text-decoration:none; white-space:nowrap;
}
.consulta-wa:hover{ background:var(--verde-hover, #0B6A31); }
.lb-acao .consulta-wa{ font-size:.82rem; padding:.3rem .8rem; }

/* ---------- detalhe com mais de uma foto (kits: desmontado + montado) ---------- */
.lb-foto{ position:relative; }
.lb-minis{ display:flex; gap:.5rem; justify-content:center; padding:.55rem; background:var(--branco, #fff); border-top:1px solid var(--borda); }
.lb-minis[hidden]{ display:none; }
.lb-mini{ width:56px; height:56px; padding:0; border-radius:10px; overflow:hidden; border:2px solid transparent; background:var(--creme); cursor:pointer; opacity:.7; transition:opacity .2s, border-color .2s; }
.lb-mini img{ width:100%; height:100%; object-fit:cover; max-height:none; }
.lb-mini.ativa,.lb-mini:hover{ opacity:1; border-color:var(--mar); }

/* ---------- AVALIAÇÕES no celular: cards menores e esteira mais ágil ---------- */
@media (max-width:719px){
  .aval-fita{ gap:.8rem; padding:.6rem 0 1rem; animation-duration:34s; }
  .aval-card{ width:min(66vw,250px); padding:1rem 1.05rem; gap:.55rem; }
  .aval-texto{ font-size:.84rem; line-height:1.5; }
  .aval-estrelas{ font-size:.78rem; padding:.2rem .5rem; }
  .aval-inicial{ width:30px; height:30px; font-size:.8rem; }
  .aval-nome b{ font-size:.82rem; }
  .aval-nome span{ font-size:.72rem; }
  .aval-topo{ margin-bottom:1.2rem; }
}

/* ---------- AVALIAÇÕES controláveis com o dedo: a esteira vira rolagem horizontal
   (o JS faz andar sozinha); a animação CSS só vale se o JS não carregar ---------- */
.aval-esteira.aval-js{ overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; -webkit-overflow-scrolling:touch; touch-action:pan-x pan-y; cursor:grab; }
.aval-esteira.aval-js::-webkit-scrollbar{ display:none; }
.aval-esteira.aval-js .aval-fita{ animation:none !important; }

/* ---------- GALERIA fixa: sem "encolhe/cresce" ao trocar a foto ativa. Ao rolar para
   cima e para baixo em seguida, a foto ativa alternava e as molduras pulavam ---------- */
.galeria.fixa .galeria-quadro,.galeria.fixa .galeria-item.ativa .galeria-quadro{ transform:none; transition:none; }
.galeria.fixa .galeria-legenda span{ transition:none; }