*{box-sizing:border-box}
body{margin:0;background:#fafafa;color:#141414;font-family:'Plus Jakarta Sans',system-ui,sans-serif;overflow-x:hidden}
::selection{background:#0d0d0d;color:#fff}
a{color:#0d0d0d}a:hover{color:#000}
@keyframes jg-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes jg-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes jg-loadfill{0%{clip-path:inset(0 100% 0 0);opacity:1}55%{clip-path:inset(0 0 0 0);opacity:1}78%{clip-path:inset(0 0 0 0);opacity:1}100%{clip-path:inset(0 0 0 0);opacity:0}}
@keyframes jg-loaddot{0%,100%{transform:scaleX(.2);opacity:.3}50%{transform:scaleX(1);opacity:1}}
@keyframes jg-floatB{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-11px) rotate(-7deg)}}
@keyframes jg-floatC{0%,100%{transform:translateY(-9px) rotate(5deg)}50%{transform:translateY(3px) rotate(7deg)}}
@keyframes jg-spin{to{transform:rotate(360deg)}}
@keyframes jg-pulse{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes jg-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
.jg-reveal{opacity:0}
.jg-reveal.jg-in{animation:jg-rise .85s cubic-bezier(.2,.7,.2,1) forwards}
.jg-ticker:hover .jg-ticktrack{animation-play-state:paused}
/* Corta a sobra horizontal da barra inclinada sem virar contêiner de rolagem.
   Navegador sem `clip` cai no fallback e perde as pontas do giro — pouca coisa
   perto de abrir rolagem lateral na página inteira. */
.jg-tickerclip{overflow:hidden}
@supports (overflow:clip){
    .jg-tickerclip{overflow-x:clip;overflow-y:visible}
}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#fafafa}
::-webkit-scrollbar-thumb{background:#d9d9d9;border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#0d0d0d}
.jg-glow{position:relative}
.jg-glow::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(200px circle at var(--lx,-700px) var(--ly,-700px),rgba(0,0,0,.06),rgba(0,0,0,.02) 50%,rgba(0,0,0,0) 75%);pointer-events:none;z-index:2}
.jg-glow::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:radial-gradient(210px circle at var(--lx,-700px) var(--ly,-700px),rgba(253,133,199,.95),rgba(253,133,199,.3) 45%,rgba(253,133,199,0) 72%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:3}
.jg-glowD::before{background:radial-gradient(220px circle at var(--lx,-700px) var(--ly,-700px),rgba(253,133,199,.12),rgba(253,133,199,.04) 50%,rgba(253,133,199,0) 75%)}
/* Contorno que segue o cursor: rosa da marca (#fd85c7) nos dois fundos — era
   preto no claro e branco no escuro. O brilho interno (::before) também é rosa
   no escuro; no claro segue o cinza quase invisível de antes. */
.jg-glowD::after{background:radial-gradient(220px circle at var(--lx,-700px) var(--ly,-700px),rgba(253,133,199,.95),rgba(253,133,199,.3) 45%,rgba(253,133,199,0) 72%)}
.jg-gline{position:relative;height:1px;background:rgba(255,255,255,.14)}
.jg-gline::after{content:"";position:absolute;left:0;right:0;top:-1px;height:3px;background:radial-gradient(170px circle at var(--lx,-700px) 50%,rgba(253,133,199,.95),rgba(253,133,199,.3) 45%,rgba(253,133,199,0) 72%)}
.jg-outline{-webkit-text-stroke:1.5px rgba(13,13,13,.9);color:transparent;transition:color .3s ease}
.jg-outline:hover{color:#0d0d0d}
input,select{font-family:'Plus Jakarta Sans',sans-serif}
input::placeholder{color:rgba(0,0,0,.35)}
@media (pointer:coarse){body{cursor:auto!important}}

/* O atributo `hidden` PRECISA de !important, e a razão é traiçoeira: ele é só um
   `display:none` da folha do navegador, e QUALQUER display declarado no style=
   do próprio elemento vence — inclusive o `display:flex` que o elemento precisa
   ter quando estiver visível.

   O site tem três peças nesse molde, todas nascendo escondidas e sendo abertas
   pelo JS: o bloco do protocolo na tela de sucesso dos formulários, e a linha
   "Aberto · peça até as 21h" do botão "Pertinho de você" na página do produto e
   na lista da categoria. Nenhuma delas escondia coisa alguma: apareciam VAZIAS —
   um rótulo "Seu protocolo" sem número, um ponto verde sem horário.

   Regra global porque o próximo `hidden` do projeto vai cair na mesma armadilha. */
[hidden]{display:none!important}

.jm-burger{display:none}
.jm-drop{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);padding-top:14px;opacity:0;visibility:hidden;transition:opacity .25s ease,transform .25s ease,visibility .25s;z-index:60}
.jm-dropwrap:hover .jm-drop,.jm-drop:hover{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.jm-droppanel{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:16px;box-shadow:0 30px 70px rgba(0,0,0,.16);padding:10px;min-width:216px;display:flex;flex-direction:column}
.jm-droppanel a{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:10px;font-size:13px;font-weight:600;color:#0d0d0d;text-decoration:none;letter-spacing:0;text-transform:none}
.jm-droppanel a{transition:background .25s ease,transform .28s cubic-bezier(.2,.7,.2,1)}
.jm-droppanel a:hover{background:rgba(0,0,0,.05);transform:translateX(3px)}
.jm-droppanel a i{font-size:16px;color:rgba(0,0,0,.55);transition:color .25s ease,transform .28s cubic-bezier(.2,.7,.2,1)}
/* O ícone é o que o olho encontra primeiro na lista — ele que ganha o destaque,
   e não mais um retângulo cinza. */
.jm-droppanel a:hover i{color:#0d0d0d;transform:scale(1.14)}
@media (prefers-reduced-motion:reduce){
    .jm-droppanel a:hover,.jm-droppanel a:hover i{transform:none}
}
@media (max-width:900px){
  nav{padding:12px 18px!important}
  .jm-navlinks{gap:12px!important}
  .jm-navlinks>div{display:none!important}
  .jm-navlinks>a.jg-navlink{display:none!important}
  .jm-burger{display:inline-flex!important}
  .jg-nav.jg-dark .jm-burger{background:#0d0d0d!important;color:#fff!important;border-color:rgba(255,255,255,.28)!important}
  /* Lateral e vertical separados de propósito. Como shorthand com !important,
     esta regra também zerava o respiro que a PRIMEIRA seção de cada página
     interna reserva para o menu fixo (~68px): o breadcrumb encostava no topo e
     era cortado, e o rodapé de 20px virava 72px, abrindo um vão enorme até o
     conteúdo. Agora o topo da primeira seção é assunto do .jm-top. */
  .jm-sec{padding-left:20px!important;padding-right:20px!important}
  .jm-sec:not(.jm-top){padding-top:72px!important;padding-bottom:72px!important}
  .jm-fsec{padding:0 20px 72px!important}
  .jm-hero{grid-template-columns:1fr!important;min-height:auto!important;padding:104px 20px 24px!important;gap:10px!important}
  .jm-heroimg{height:min(48vh,400px)!important;margin-top:10px}
  /* Cada um recolhido para o SEU lado. Um `left:0;right:0` só nos dois jogaria
     o da direita para a esquerda: com left, width e right definidos, o
     navegador ignora o right. */
  .jm-heroesq{left:0!important}
  .jm-herodir{right:0!important}
  .jm-prodgrid{grid-template-columns:1fr 1fr!important;gap:14px!important}
  .jm-kpis{grid-template-columns:1fr 1fr!important;gap:14px!important}
  .jm-cta2{grid-template-columns:1fr!important;gap:28px!important}
  .jm-unigrid{grid-template-columns:1fr!important;gap:30px!important}
  .jm-frangrid{grid-template-columns:1fr!important;gap:44px!important}
  .jm-frantext{font-size:110px!important;top:-14px!important}
  .jm-instagrid{grid-template-columns:repeat(2,1fr)!important;gap:12px!important}
  .jm-fidel{grid-template-columns:1fr!important;padding:34px!important;gap:24px!important}
  .jm-footgrid{grid-template-columns:1fr 1fr!important;gap:30px!important}
  /* A marca já ocupa a linha toda desde 1200px; aqui ela continua assim. */
  .jm-footgrid > :first-child{grid-column:1/-1}
}
@media (max-width:600px){
  .jm-hero h1{font-size:clamp(40px,12vw,54px)!important}
  .jm-ctas{flex-direction:column!important;align-items:stretch!important}
  .jm-ctas a{justify-content:center!important;padding:18px 26px!important}
  .jm-stats{gap:26px!important}
  .jm-tickcity{font-size:27px!important}
  .jm-prodgrid{grid-template-columns:1fr!important}
  .jm-form2{grid-template-columns:1fr!important}
  .jm-footgrid{grid-template-columns:1fr!important}
  .jm-heroimg{height:min(44vh,340px)!important}
  .jm-frantext{font-size:72px!important}
}

/* ==========================================================================
   RESPONSIVO DAS PÁGINAS INTERNAS
   O export cuidou da home; as páginas internas (categoria, produto, unidade,
   contato…) herdaram só o .jm-sec. Os blocos abaixo não tinham NENHUMA regra
   de largura e continuavam em duas colunas no celular.
   ========================================================================== */

/* Menu apertado antes de virar hambúrguer (900–1200px): logo + 5 itens + CTA
   não cabem lado a lado. A seta do botão é o primeiro corte — é ornamento, o
   rótulo já diz para onde o clique leva. */
@media (max-width:1200px){
  .jm-navlinks{gap:20px!important}
  .jg-navcta{padding:10px 17px!important;font-size:11.5px!important}
  .jg-navcta .jg-ctaarr{display:none!important}
  /* Rodapé: marca + CINCO colunas de links não cabem antes disso sem espremer
     cada uma a ponto de "Política de privacidade" quebrar em duas linhas. A
     marca passa a ocupar a faixa inteira e as colunas se dividem embaixo. */
  .jm-footgrid{grid-template-columns:repeat(3,1fr)!important}
  .jm-footgrid > :first-child{grid-column:1/-1;margin-bottom:10px}
}
/* No celular o CTA sai do topo: logo + hambúrguer + botão estouram a largura da
   tela. Nada se perde — o menu lateral abre com "Seja um franqueado" em
   destaque, e é para lá que o hambúrguer leva. */
@media (max-width:600px){
  .jg-navcta{display:none!important}
}

@media (max-width:900px){
  /* Primeira seção de cada página: livra o menu fixo. Só o TOPO — o rodapé é
     de cada página (0 em /produtos, 110px em /termos-de-uso) e continua sendo. */
  .jm-top{padding-top:104px!important}

  /* Breadcrumb: sem quebra, "Home › Categoria › Nome longo do produto"
     transbordava a tela em vez de descer para a segunda linha. */
  .jm-crumb{flex-wrap:wrap!important;row-gap:4px!important}

  /* Hero de produto, zigue-zague da categoria, contato, franquia, influencer. */
  .jm-phero{grid-template-columns:1fr!important;gap:26px!important;padding-left:20px!important;padding-right:20px!important}
  /* O zigue-zague alterna order:1/order:2 para espelhar as linhas. Empilhado
     isso vira "às vezes texto primeiro, às vezes imagem" — sem coluna para
     alternar, o espelho perde o sentido e só bagunça a leitura. */
  .jm-phero>*{order:0!important}
  .jm-pimg{height:min(46vh,360px)!important}

  /* Cartão preto: Mov Cult na home e "Onde encontrar" nas páginas de produto. */
  .jm-find{grid-template-columns:1fr!important;padding:34px 24px!important;gap:26px!important}

  .jm-uhero{grid-template-columns:1fr!important;gap:30px!important;padding-left:20px!important;padding-right:20px!important}
  .jm-nutri{grid-template-columns:1fr!important;gap:30px!important}
  .jm-nums{grid-template-columns:1fr 1fr!important}
}
@media (max-width:600px){
  .jm-find{padding:28px 20px!important;border-radius:20px!important}
  .jm-ing{grid-template-columns:1fr!important}
  .jm-nums{grid-template-columns:1fr!important}
  /* Nomes de produto são longos e o clamp mínimo (44px) estoura em tela
     estreita — o do h1 da categoria e o do produto são o mesmo. */
  .jm-phero h1,.jm-top h1{font-size:clamp(34px,9.5vw,48px)!important}
}

/* ------------------------------------------------- "PERTINHO DE VOCÊ"
   Lista de /produtos/<categoria>. Sem unidade conhecida, .jm-ctas-linha2 é
   display:contents — os dois botões participam da mesma linha flex de sempre e
   nada muda. Quando o JS reconhece a unidade e marca .jm-tem-uni, a caixa vira
   coluna: o pedido na loja da pessoa em cima, "Ver produto" e "Onde encontrar"
   embaixo, com "Onde encontrar" perdendo o preto (só uma chamada principal por
   bloco, e agora ela é outra). */
.jm-pertinho{display:none}
.jm-ctas-linha2{display:contents}
.jm-ctas.jm-tem-uni{flex-direction:column;align-items:flex-start}
.jm-ctas.jm-tem-uni .jm-pertinho{display:inline-flex;max-width:100%}
.jm-ctas.jm-tem-uni .jm-ctas-linha2{display:flex;gap:14px;flex-wrap:wrap}
.jm-ctas.jm-tem-uni .jm-cta-ver{order:1}
.jm-ctas.jm-tem-uni .jm-cta-onde{
    order:2;background:#fff!important;color:#0d0d0d!important;
    border:1px solid rgba(0,0,0,.18)!important;box-shadow:none!important;
}
@media (max-width:600px){
  .jm-ctas.jm-tem-uni,.jm-ctas.jm-tem-uni .jm-ctas-linha2{align-self:stretch;width:100%}
  .jm-ctas.jm-tem-uni .jm-ctas-linha2{flex-direction:column}
  .jm-pertinho{width:100%}
}

/* ----------------------------------------------- FAIXA DE PRODUTO CLICÁVEL
   Em /produtos/<categoria> a faixa inteira do produto abre o produto (quem
   navega é o JS, ver .jm-prodrow em juistreet.js). O cursor e o clarear do nome
   no hover são o que avisa que ali dá clique — sem eles a faixa parece texto.

   O zoom da foto fica de fora de propósito: a imagem já roda jg-float, e uma
   animação em transform vence qualquer transform de hover. */
.jm-prodrow{cursor:pointer}
.jm-prodrow .jm-prodnome{transition:opacity .3s cubic-bezier(.2,.7,.2,1)}
.jm-prodrow:hover .jm-prodnome{opacity:.62}

/* --------------------------------------------------------- CARTÃO DE CATEGORIA
   O cartão inteiro virou <a> (home e /produtos). A seta do "Ver categoria" anda
   no hover do cartão todo, não só do texto — é o cartão que é clicável. */
.jm-prodcard .jm-seta{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.jm-prodcard:hover .jm-seta{transform:translateX(5px)}
@media (prefers-reduced-motion:reduce){
  .jm-prodcard:hover .jm-seta{transform:none}
}

/* --------------------------------------------------------------- UNIDADES
   O cartão de unidade é "texto à esquerda / Pede aí à direita". Em tela
   estreita o botão tem white-space:nowrap e não cede, então era o endereço que
   se espremia numa coluna de poucos caracteres. Empilhado, cada parte fica com
   a largura inteira. A mesma marcação existe em index.php, unidades.php e em
   cartao() no juistreet.js — as três carregam estas classes. */
@media (max-width:900px){
  .jm-unipanel{padding:24px!important;min-height:0!important}
}
@media (max-width:600px){
  .jm-unibusca{flex-direction:column!important}
  .jm-unibusca [data-acao="geo"]{justify-content:center!important;padding:13px 18px!important}
  .jm-unicard{flex-direction:column!important;align-items:stretch!important;gap:13px!important}
  .jm-unicard-btn{justify-content:center!important}
  .jm-unipanel{padding:20px!important}
}

/* ------------------------------------------------------------------ SELOS
   O selo tem lado fixo em px (seloBadge), e quatro de 96px não cabem lado a
   lado num celular — quebravam 2+2 ou 3+1 conforme a largura. Aqui o lado passa
   a ser uma fração da linha, então são sempre QUATRO por linha, com o ícone
   central reduzido junto para manter a proporção. */
/* O <svg> do selo é inline por padrão, e o navegador reserva embaixo dele o vão
   do descendente da linha — uns 4px. Com o lado fixo em px isso não aparecia (a
   altura vinha do style); com altura automática, a caixa fica mais alta que
   larga e o ícone, que é centrado por translate, desce junto. */
.jm-selo svg{display:block}
@media (max-width:600px){
  .jm-selos{gap:10px!important}
  .jm-selos .jm-selo{width:calc((100% - 30px) / 4)!important;height:auto!important;aspect-ratio:1/1!important}
  .jm-selos .jm-selo i{font-size:15px!important}
}
@media (max-width:380px){
  .jm-selos{gap:7px!important}
  .jm-selos .jm-selo{width:calc((100% - 21px) / 4)!important}
  .jm-selos .jm-selo i{font-size:13px!important}
}
.jg-nav .jg-navdark{opacity:1;clip-path:polygon(0 0,0% 0,-9% 100%,0 100%);transition:clip-path .65s cubic-bezier(.7,0,.3,1)}
.jg-nav.jg-dark .jg-navdark{clip-path:polygon(0 0,109% 0,100% 100%,0 100%)}
.jg-nav .jg-navlight{transition:opacity .45s ease}
.jg-nav.jg-dark .jg-navlight{opacity:0}
.jg-navlink{transition:color .45s ease}
.jg-nav.jg-dark .jg-navlink{color:rgba(255,255,255,.75)!important}
.jg-navlink:hover{color:#000}
.jg-nav.jg-dark .jg-navlink:hover{color:#fff!important}
.jg-navcta{transition:background .45s ease,color .45s ease,box-shadow .45s ease}
.jg-nav.jg-dark .jg-navcta{background:#fff!important;color:#0d0d0d!important;box-shadow:0 10px 26px rgba(0,0,0,.5)!important}
.jg-logoblack,.jg-logowhite{transition:opacity .45s ease}
.jg-logowhite{opacity:0}
.jg-nav.jg-dark .jg-logoblack{opacity:0}
.jg-nav.jg-dark .jg-logowhite{opacity:1}
@property --jga{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes jg-ctarot{to{--jga:360deg}}
.jg-cta{position:relative}
.jg-cta::before{content:"";position:absolute;inset:-4px;border-radius:100px;background:conic-gradient(from var(--jga),rgba(253,133,199,0) 0%,rgba(253,133,199,.95) 10%,rgba(253,133,199,0) 22%);animation:jg-ctarot 2.8s linear infinite;z-index:-1}
/* O brilho que gira é rosa nos dois estados do menu (antes: preto no claro,
   branco no escuro), então não há mais regra própria para .jg-dark. */
.jg-ctalab{position:relative;display:block;overflow:hidden}
.jg-ctain{display:block;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.jg-ctadup{position:absolute;top:100%;left:0;width:100%}
.jg-cta:hover .jg-ctain,.jg-roll:hover .jg-ctain{transform:translateY(-100%)}
.jg-ctaarr{display:inline-flex;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.jg-cta:hover .jg-ctaarr,.jg-roll:hover .jg-ctaarr{transform:rotate(45deg)}
/* ------------------------------------------------- BOTÃO CARREGANDO
   jmBotaoCarregando() (juistreet.js) põe .jm-carregando no botão de envio:
   texto e ícone somem (visibility, para o botão manter a largura e não pular)
   e um anel gira no centro, na cor do texto do botão. */
@keyframes jm-gira{to{transform:rotate(360deg)}}
.jm-carregando{position:relative;cursor:progress!important}
.jm-carregando > *{visibility:hidden}
.jm-carregando::after{content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;
    border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;
    animation:jm-gira .7s linear infinite;visibility:visible}
@media (prefers-reduced-motion:reduce){ .jm-carregando::after{animation-duration:1.6s} }
/* ------------------------------------------------- ROSA DA MARCA NOS CTAs
   Botão preto continua preto; só o ícone ganha o rosa #fd85c7. O seletor lê o
   fundo do style inline porque os CTAs pretos estão espalhados por ~15 páginas
   sem classe comum. `>` de propósito: pega o ícone filho direto e deixa de fora
   ícones aninhados (ex.: a pílula branca dentro do cartão preto do mega-menu,
   onde rosa sobre branco some). No menu escuro o CTA do topo vira branco, então
   o ícone volta a herdar a cor do texto. */
:is(a,button)[style*="background:#0d0d0d"]>i{color:#fd85c7}
.jg-nav.jg-dark .jg-navcta>i{color:inherit}
/* CTA principal do hero: rosa em repouso, preto com texto e ícone brancos no
   hover. Fundo e cor saíram do style inline porque inline venceria o :hover. */
.jm-herocta{background:#fd85c7;color:#0d0d0d;box-shadow:0 14px 34px rgba(253,133,199,.45);
    transition:background .3s ease,color .3s ease,box-shadow .3s ease}
.jm-herocta:hover,.jm-herocta:focus-visible{background:#0d0d0d;color:#fff;box-shadow:0 14px 34px rgba(0,0,0,.28)}
/* Mesmo botão rosa em seção preta: no hover o preto sumiria no fundo, então
   ele vira branco com texto preto. */
.jm-herocta-escuro{box-shadow:0 14px 34px rgba(253,133,199,.25)}
.jm-herocta-escuro:hover,.jm-herocta-escuro:focus-visible{background:#fff;color:#0d0d0d;box-shadow:0 14px 34px rgba(0,0,0,.5)}
/* ------------------------------------------------- ZOOM NAS IMAGENS
   Os cartões da home saíram do export com style-hover="transform:scale(...)",
   um atributo que só o runtime do DesignCode lia — no navegador ele não faz
   absolutamente nada, e por isso nenhuma imagem nunca aproximou. A intenção
   estava no HTML desde sempre; o que faltava era CSS de verdade.

   Quem cresce é a IMAGEM: o corte é do pai, que já tem overflow:hidden.
   O transform não pode ir no cartão — ele é .jg-reveal, e a animação de
   entrada (jg-rise, com fill forwards) venceria qualquer regra de hover. */
.jm-zoomimg{transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.jm-zoom:hover .jm-zoomimg{transform:scale(1.07)}
/* Legenda sobre a foto (Instagram): sobe junto, para o texto não parecer solto
   enquanto a imagem se mexe atrás dele. */
.jm-zoomcap{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.jm-zoom:hover .jm-zoomcap{transform:translateY(-4px)}
/* A seta do "Ler matéria" anda igual à dos botões da home. */
.jm-seta{display:inline-block;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.jm-zoom:hover .jm-seta{transform:translateX(5px)}
/* Grade do Instagram: cartão só com a foto, sem legenda. No hover (ou foco
   pelo teclado) sobe um véu escuro com o logo do Instagram, avisando que o
   clique abre a postagem. Fica sempre invisível ao mouse (pointer-events),
   para o clique cair no <a>. */
.jm-instaover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.42);opacity:0;transition:opacity .35s ease;pointer-events:none}
.jm-instaover i{font-size:34px;color:#fff;transform:translateY(6px);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.jm-instacard:hover .jm-instaover,.jm-instacard:focus-visible .jm-instaover{opacity:1}
.jm-instacard:hover .jm-instaover i,.jm-instacard:focus-visible .jm-instaover i{transform:none}
.jm-instacard:focus-visible{outline:2px solid #0d0d0d;outline-offset:3px}
@media (prefers-reduced-motion:reduce){
    .jm-zoom:hover .jm-zoomimg,
    .jm-zoom:hover .jm-zoomcap,
    .jm-zoom:hover .jm-seta,
    .jm-instaover i{transform:none}
}

/* Rótulo visível só para leitor de tela: o campo tem placeholder, mas
   placeholder não é rótulo — sem isto o formulário perde acessibilidade
   (e pontos de SEO técnico). */
.jm-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------- SELO AO VIVO
   "Aberto agora" é a única informação da página que muda sozinha, e antes tinha
   exatamente o mesmo peso visual de "Fechado": mesma pílula, só trocando a cor
   de fundo. O ponto pulsando é a convenção de transmissão ao vivo — lê-se como
   "acontecendo agora" antes de a pessoa ler a frase.

   Monocromático de propósito: o site inteiro é #0d0d0d e #fff, e um verde aqui
   seria a única cor da página. O halo em volta da pílula dá o destaque que a cor
   daria.

   Fechado NÃO anima: piscar o que não está acontecendo é ruído. */
.jg-live{position:relative;animation:jg-livehalo 2.8s cubic-bezier(.4,0,.6,1) infinite}
.jg-livedot{position:relative;display:inline-block;flex:none;width:7px;height:7px;border-radius:50%;background:currentColor}
/* O anel é um segundo círculo que cresce e some — inset:0 + scale mantém ele
   centrado no ponto sem mexer no espaço que a pílula ocupa. */
.jg-livedot::after{content:"";position:absolute;inset:0;border-radius:50%;background:currentColor;animation:jg-livering 2.8s cubic-bezier(.4,0,.6,1) infinite}
@keyframes jg-livering{0%{opacity:.7;transform:scale(1)}70%,100%{opacity:0;transform:scale(3.2)}}
@keyframes jg-livehalo{0%{box-shadow:0 0 0 0 rgba(13,13,13,.28)}70%{box-shadow:0 0 0 9px rgba(13,13,13,0)}100%{box-shadow:0 0 0 0 rgba(13,13,13,0)}}
/* Quem pediu menos movimento no sistema fica com o ponto parado — a informação
   continua toda lá, sem a animação. */
@media (prefers-reduced-motion:reduce){
    .jg-live,.jg-livedot::after{animation:none}
}

/* ==========================================================================
   /SEJA-UM-FRANQUEADO — TOPO ENXUTO E FORMULÁRIO FLUTUANTE
   ========================================================================== */

/* O topo desta página perde a navegação e fica só com a logo e o idioma. É a
   página de conversão da marca: cada item do menu ali é uma saída para outro
   lugar do site, competindo com o único gesto que a página pede. A logo fica
   (é a volta para casa que todo site tem) e o idioma também — traduzir é ler a
   MESMA página, não sair dela.

   Some junto o botão "Seja um franqueado": estando nesta página, ele leva a
   pessoa para onde ela já está. */
.jm-pag-franquia .jm-navlinks > *:not(.jm-navlang){display:none!important}

/* O hambúrguer é a exceção, e só no celular: lá o seletor do topo não existe
   (ver a regra .jm-navlinks>div acima) e o idioma mora DENTRO do menu lateral.
   Escondê-lo aqui deixaria a tradução sem nenhum caminho até ela — o oposto do
   que esta página quer preservar. */
@media (max-width:900px){
  .jm-pag-franquia .jm-navlinks > .jm-burger{display:inline-flex!important}
}

/* ------------------------------------- FORMULÁRIO DA FRANQUIA, DESCOLADO
   O formulário do hero é a página inteira em uma peça, e sumia na primeira
   rolada — o resto da página argumenta para um lugar que não está mais na tela.
   Passados 60% do hero ele se descola e vira uma CHAMADA no topo; com o mouse
   em cima (ou o foco dentro) o formulário desce inteiro, ancorado nela.

   Dois pousos, e quem escolhe é o JS:
     • no desktop, a chamada entra DENTRO do menu, antes do seletor de idioma —
       .jm-fr-nonav. Ali ela é um item do flex e não precisa de coordenada
       nenhuma; o menu desta página está vazio, e o espaço é dela;
     • no celular o menu não tem essa folga, então a chamada fica presa logo
       abaixo dele, na largura da tela — .jm-fr-fixo, com top/left/width medidos.

   Nos dois, o que muda de forma é a MESMA peça: .jm-fr-solto tira do card a
   aparência de cartão, a pílula passa a ser o #jm-fr-mini e o #jm-fr-corpo vira
   um painel ancorado — o mesmo desenho dos mega-menus do site. */

#jm-fr-card{background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:22px;padding:36px;
    box-shadow:0 40px 90px rgba(0,0,0,.14)}

#jm-fr-mini{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0}
/* (o [hidden] global, no topo do arquivo, já cobre este caso) */
/* ---- O RODÍZIO DE RECADOS ----
   Todos os recados ocupam a MESMA célula de grid, empilhados. É isso que faz a
   caixa nascer com a largura e a altura do maior deles: sem esse truque, cada
   troca mudaria o tamanho da chamada e o botão ao lado pularia de posição a
   cada quatro segundos. Medir no JS daria o mesmo, mas com um valor em pixels
   que envelhece na primeira vez que alguém editar um texto no painel. */
#jm-fr-rot{display:grid;overflow:hidden;align-items:center}
#jm-fr-rot > .jm-fr-msg{
    grid-area:1/1;margin:0;display:flex;align-items:center;gap:11px;
    font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
    font-size:15px;line-height:1.2;letter-spacing:-.01em;color:#0d0d0d;white-space:nowrap;
    /* Fora de cena é EMBAIXO: todo recado entra subindo e sai por cima, que é o
       movimento de um letreiro. Sem isto, o que sai voltaria de onde veio. */
    opacity:0;transform:translateY(105%);pointer-events:none;
    transition:opacity .35s ease,transform .5s cubic-bezier(.2,.7,.2,1);
}
#jm-fr-rot > .jm-fr-msg.jm-fr-on{opacity:1;transform:translateY(0);pointer-events:auto}
#jm-fr-rot > .jm-fr-msg.jm-fr-saiu{opacity:0;transform:translateY(-105%)}

/* O vendedor: avatar redondo com o ponto de "online" e a frase ao lado. */
#jm-fr-rot .jm-fr-vend-txt{font-weight:700;font-size:14px;letter-spacing:0}
.jm-fr-ava{position:relative;flex:none;width:34px;height:34px;border-radius:50%;
    background:#ededed;display:inline-flex;align-items:center;justify-content:center;overflow:visible}
.jm-fr-ava img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.jm-fr-ava-ini{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:14px;color:rgba(0,0,0,.5)}
/* .jg-livedot já traz o anel que se abre (o mesmo do selo "aberto agora"); aqui
   só entram a cor e o lugar dele na borda do avatar. */
.jm-fr-ava-on{position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;
    color:#1db954;border:2px solid #fff;border-radius:50%;background:currentColor}
#jm-fr-mini-btn{flex:none;display:inline-flex;align-items:center;gap:9px;border:none;border-radius:100px;
    background:#0d0d0d;color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;
    font-size:13px;letter-spacing:.04em;padding:11px 20px;cursor:pointer;
    box-shadow:0 10px 24px rgba(0,0,0,.25)}
#jm-fr-mini-btn>i{color:#fd85c7}

/* ---- DESCOLADO: o card deixa de ser cartão e passa a ser só o contêiner ----
   Sem fundo próprio, os dois pseudos do .jg-glow (o brilho e a borda que seguem
   o cursor) desenhariam sobre o nada — saem junto. */
#jm-fr-card.jm-fr-solto{background:none;border:none;box-shadow:none;padding:0;border-radius:0;
    position:relative}
#jm-fr-card.jm-fr-solto::before,#jm-fr-card.jm-fr-solto::after{display:none}

/* A pílula. */
#jm-fr-card.jm-fr-solto #jm-fr-mini{
    position:relative;background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:100px;
    padding:7px 7px 7px 20px;box-shadow:0 14px 34px rgba(0,0,0,.16);
}

/* O pulso: um anel que nasce na borda da pílula e se abre até sumir — o mesmo
   vocabulário do selo "aberto agora" (.jg-live). A chamada entra na tela em
   silêncio, no meio de uma página que a pessoa está lendo; sem ele vira parte
   do cenário e ninguém descobre que aquilo abre.

   Só enquanto fechada: com o formulário aberto, ele já tem toda a atenção, e um
   anel pulsando em volta de campos sendo preenchidos seria ruído. */
#jm-fr-card.jm-fr-solto:not(.jm-fr-aberto) #jm-fr-mini::after{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    animation:jm-frpulso 2.9s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes jm-frpulso{
    0%       {box-shadow:0 0 0 0 rgba(13,13,13,.24)}
    62%,100% {box-shadow:0 0 0 15px rgba(13,13,13,0)}
}

/* O formulário vira painel ancorado na chamada — abre e fecha como os
   mega-menus, e não por altura: animar `height` de um formulário faz os campos
   se espremerem durante toda a transição. */
#jm-fr-card.jm-fr-solto #jm-fr-corpo{
    position:absolute;top:100%;right:0;margin-top:12px;width:min(430px,92vw);
    background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:22px;padding:26px;
    box-shadow:0 40px 90px rgba(0,0,0,.18);
    max-height:calc(100vh - 130px);overflow:auto;
    opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);
    transition:opacity .22s ease,transform .22s ease,visibility .22s;
}
/* A PONTE sobre o vão de 12px entre a chamada e o painel. Sem ela o ponteiro,
   ao descer, sai de cima dos dois e o painel fecha no meio do caminho.

   A ponte é do CARD, e tem a largura dele — não do painel. O painel é mais
   ESTREITO que a chamada (430px contra os ~520px da pílula) e está encostado à
   direita: descendo a partir do texto do recado, que fica à esquerda, o
   ponteiro caía justamente na faixa que uma ponte do tamanho do painel não
   cobre. Mesma ideia do [data-mega]::after dos mega-menus.

   O ::before do card é do .jg-glow (o brilho que segue o cursor) e fica
   desligado no modo solto — aqui ele volta, sem o gradiente, só como área.
   `bottom` do inset:0 de lá é ignorado porque top e height estão declarados.

   pointer-events:auto é o que faz a ponte existir para o mouse: o .jg-glow
   ::before é decorativo e traz pointer-events:none, e uma ponte que o ponteiro
   atravessa sem tocar não é ponte nenhuma — foi assim que ela nasceu inerte. */
#jm-fr-card.jm-fr-solto.jm-fr-aberto::before{
    display:block;content:"";position:absolute;left:0;right:0;top:100%;height:22px;
    background:none;border-radius:0;z-index:1;pointer-events:auto;
}
#jm-fr-card.jm-fr-solto.jm-fr-aberto #jm-fr-corpo{
    opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);
}

/* ---- Pouso 1: dentro do menu ---- */
/* Vence a regra que esvazia o topo desta página (o seletor lá é por classe;
   este é por id) — a chamada é justamente o que fica no lugar do que saiu. */
.jm-pag-franquia .jm-navlinks > #jm-fr-card{display:block!important}
#jm-fr-card.jm-fr-nonav{flex:none;z-index:2}
/* O menu mede 66px com a logo de 34px dentro: a chamada tem de caber nesses
   34px, senão ela empurra a barra inteira e o topo do site fica mais alto só
   nesta página. Daí o avatar de 30px e o botão em 30px de altura. */
#jm-fr-card.jm-fr-nonav #jm-fr-mini{padding:3px 3px 3px 16px;gap:13px;box-shadow:0 8px 20px rgba(0,0,0,.14)}
#jm-fr-card.jm-fr-nonav #jm-fr-mini-btn{padding:6px 15px;font-size:12px}
#jm-fr-card.jm-fr-nonav #jm-fr-rot > .jm-fr-msg{font-size:13.5px}
#jm-fr-card.jm-fr-nonav .jm-fr-ava{width:28px;height:28px}
#jm-fr-card.jm-fr-nonav .jm-fr-ava-ini{font-size:12.5px}
#jm-fr-card.jm-fr-nonav .jm-fr-vend-txt{font-size:13px}
/* Nas telas em que o menu já fica apertado (o mesmo ponto em que o site corta a
   seta do CTA), o recado encolhe mais um pouco em vez de sumir: é ele que diz
   do que se trata — sem ele sobraria um botão de WhatsApp sem assunto. */
@media (max-width:1150px){
  #jm-fr-card.jm-fr-nonav #jm-fr-mini{padding-left:12px;gap:10px}
  #jm-fr-card.jm-fr-nonav #jm-fr-rot > .jm-fr-msg{font-size:12.5px}
  #jm-fr-card.jm-fr-nonav .jm-fr-vend-txt{font-size:12px}
  #jm-fr-card.jm-fr-nonav #jm-fr-mini-btn{padding:7px 13px;font-size:11.5px}
}

/* ---- Pouso 2: preso abaixo do menu (celular) ---- */
/* top/left/width vêm do JS. z-index abaixo do menu (900): a chamada flutua
   sobre a página, nunca sobre a navegação. */
#jm-fr-card.jm-fr-fixo{position:fixed;z-index:880}
#jm-fr-card.jm-fr-fixo #jm-fr-corpo{right:auto;left:0;width:100%}

/* Estreito demais para recado e botão lado a lado: empilha em vez de espremer.
   O recado é metade da chamada — cortá-lo deixaria um botão solto no topo. */
@media (max-width:560px){
  #jm-fr-card.jm-fr-fixo #jm-fr-mini{flex-direction:column;align-items:stretch;gap:10px;
      border-radius:20px;padding:14px 16px}
  #jm-fr-card.jm-fr-fixo #jm-fr-rot{justify-items:start}
  #jm-fr-card.jm-fr-fixo #jm-fr-mini-btn{width:100%;justify-content:center}
  #jm-fr-card.jm-fr-solto #jm-fr-corpo{padding:20px}
}

@media (prefers-reduced-motion:reduce){
  #jm-fr-card.jm-fr-solto #jm-fr-corpo{transition:none}
  /* O pulso é o que mais se mexe nesta página: sai inteiro para quem pediu
     menos movimento. A chamada continua lá, parada. */
  #jm-fr-card.jm-fr-solto:not(.jm-fr-aberto) #jm-fr-mini::after{animation:none}
  /* Os recados continuam trocando — é informação, não enfeite —, mas sem o
     deslizamento: só a troca. */
  #jm-fr-rot > .jm-fr-msg{transition:opacity .2s ease;transform:none}
  #jm-fr-rot > .jm-fr-msg.jm-fr-saiu{transform:none}
}