/* v1.56 — movimento guiado pela rolagem; v1.57 — as primeiras cenas (seção 9).
   As regras que valem para tudo estão em inc/movimento.php; o resumo:
   sem animação o site já está completo (todo quadro-chave parte de um estado
   legível), e "reduzir movimento" do aparelho manda mais que qualquer efeito. */

/* A chave única. Com "reduzir movimento" ligado, o NOME de toda animação daqui
   vira "none": a animação não existe, e não sobra estado nenhum.
   Por que o nome e não a linha do tempo (animation-timeline:none), que foi a
   primeira ideia: sem linha do tempo o navegador mantém a animação "rodando"
   parada no primeiro quadro, e o preenchimento `backwards` a deixa nele — cartões
   a 30% de opacidade e 56px fora do lugar, título acinzentado — justamente para
   quem pediu menos movimento. Só a suíte v156 pegou isso.
   O dono que pediu ?movimento=ver (data-mnt-mov="ver") não entra nesta regra e
   vê o efeito. */
@media (prefers-reduced-motion: reduce){
  html[data-mnt-mov="1"]{--mnt-off:none;}
}

/* Como cada regra de animação é escrita (não "simplificar"):
   `animation:<quadro> linear <fill>;animation-name:var(--mnt-off,<quadro>);` — o NOME do
   quadro-chave vai no atalho E de novo na linha seguinte (é ela que a chave
   --mnt-off troca por "none"). Com o atalho sem nome, `animation:linear backwards`, tudo
   funciona no navegador, mas o lightningcss lê "atalho sem nome" como `animation:none` e
   joga fora o `linear` e o `backwards`: os cartões ficariam visíveis até o instante de
   entrar e então pulariam. Medido com dez minificadores (kit/ferramentas/minificadores). */

/* Propriedade registrada: o estado sem animação do título que acende é ele
   inteiro aceso (120%). Fica fora dos blocos condicionais de propósito. */
@property --mnt-luz{syntax:"<percentage>";inherits:false;initial-value:120%;}

@supports (animation-timeline: view()){

/* --------------------------------------------------------------------------
   Medidas do quadro. A seção começa como um cartão a 94% da largura — uns 3% de
   cada lado, o que dá cerca de 40px num notebook e 12px num celular, sem número
   fixo que comesse a coluna de texto em tela pequena — e cresce até ocupar tudo.
   ------------------------------------------------------------------------ */
html[data-mnt-mov] .mnt{
  --quadro-s:.94;
  --mov-raio:clamp(20px,3.4vw,44px);
}

/* --------------------------------------------------------------------------
   1. A tela troca de cena entre as seções.
   Só as seções de tom próprio (cinza-claro, escura, rodapé): abrir um quadro
   branco sobre fundo branco não se vê, e movimento que ninguém enxerga é ruído.
   Abre ao entrar; fecha ao sair.

   COMO É FEITO — e por que não é clip-path. A primeira versão recortava a
   seção com clip-path animado. Ficou bonito e pesou: o recorte anima na thread
   principal e obriga a rasterizar de novo a seção INTEIRA (texto, cartões,
   degradês) a cada quadro — na medição, com a CPU 4× mais lenta, o trabalho de
   rasterização dobrou e o p95 de tempo por quadro foi de 33 ms para 67 ms.
   Agora a seção não é recortada: um quadro vazado por cima dela pinta o
   entorno na cor da página e deixa a seção aparecer por uma janela de cantos
   redondos. O que anima é só o scale dessa janela — a GPU faz sozinha, sem
   rasterizar nada de novo. O visual é o mesmo (a seção parece um cartão que
   abre) e o custo, o de mover uma imagem.

   Dois detalhes que custaram medição:
   - O quadro NÃO cobre a seção inteira. Só o pedaço que aparece durante a
     animação (até 75% da altura da tela; colado no topo na abertura e na base
     no fechamento). Um quadro do tamanho da seção, com a sombra de 100vmax que
     a primeira tentativa usou, dava uma camada de 4000×3700px e era a causa
     dos quadros lentos que sobraram. Com o pedaço, o recuo de cima e o de baixo
     também deixam de depender da altura da seção: são iguais em todas.
   - Em repouso o quadro tem scale 0, isto é, não pinta nada. Não há opacity
     nem visibility animando (as duas pesaram na medição): ele só existe dentro
     da faixa da animação e, fora dela, o valor de base (0) o apaga. Quadro
     curto com o valor de repouso "grande" deixaria uma faixa de cor da página
     cortando a seção no meio assim que o pedaço subisse na tela.

   A cor do entorno é var(--branco), a mesma do fundo do .mnt: é o que o
   recorte revelava. Em tema escuro a variável já é escura e o quadro acompanha.
   overflow:clip (e não hidden) para a sombra do quadro não vazar para as
   seções vizinhas sem virar contêiner de rolagem — o sticky de dentro continua
   colando. O canto que não interessa (o de baixo na abertura, o de cima no
   fechamento) está sempre fora da tela, porque o quadro tem no mínimo a altura
   do que aparece.
   ------------------------------------------------------------------------ */
@keyframes mnt-mov-quadro-abre{
  from{scale:var(--quadro-s);}
  to{scale:1.07;}
}
@keyframes mnt-mov-quadro-fecha{
  from{scale:1.07;}
  to{scale:var(--quadro-s);}
}
html[data-mnt-mov] .mnt .secao-clara,
html[data-mnt-mov] .mnt .secao.escuro,
html[data-mnt-mov] .mnt .rodape{
  view-timeline:--mnt-sec block;
  position:relative;isolation:isolate;overflow:clip;
}
html[data-mnt-mov] .mnt .secao-clara::before,
html[data-mnt-mov] .mnt .secao-clara::after,
html[data-mnt-mov] .mnt .secao.escuro::before,
html[data-mnt-mov] .mnt .secao.escuro::after,
html[data-mnt-mov] .mnt .rodape::before{
  content:"";position:absolute;left:0;right:0;z-index:3;pointer-events:none;
  height:min(75svh,100%);
  border-radius:var(--mov-raio);
  box-shadow:0 0 0 8vmax var(--branco,#fff);
  scale:0;
}
/* a abertura: colada no topo, encolhe em direção à base dela */
html[data-mnt-mov] .mnt .secao-clara::before,
html[data-mnt-mov] .mnt .secao.escuro::before,
html[data-mnt-mov] .mnt .rodape::before{
  top:0;transform-origin:50% 100%;
  animation:mnt-mov-quadro-abre linear backwards;animation-name:var(--mnt-off,mnt-mov-quadro-abre);
  animation-timeline:--mnt-sec;
  animation-range:entry 0% entry 60%;
}
/* o fechamento: colado na base, encolhe em direção ao topo dele (o rodapé,
   última cena, não fecha) */
html[data-mnt-mov] .mnt .secao-clara::after,
html[data-mnt-mov] .mnt .secao.escuro::after{
  bottom:0;transform-origin:50% 0;
  animation:mnt-mov-quadro-fecha linear;animation-name:var(--mnt-off,mnt-mov-quadro-fecha);
  animation-timeline:--mnt-sec;
  animation-range:exit 40% exit 100%;
}

/* --------------------------------------------------------------------------
   2. A abertura recua enquanto a próxima seção sobe.
   O conteúdo (não o fundo) encolhe e some devagar; o fundo com os brilhos
   fica, e é ele que a seção seguinte cobre.
   ------------------------------------------------------------------------ */
/* v1.57: o recuo era de 6vh e o dono não viu movimento nenhum nas primeiras telas. Agora o
   conteúdo afunda 22vh enquanto a seção sai (anda a ~60% da velocidade da rolagem), então
   quem sobe por cima — desde a 1.72, a caixa de Serviços (seção 3) — passa por ele. */
@keyframes mnt-mov-recua{
  from{translate:0 0;scale:1;opacity:1;}
  to{translate:0 var(--recua-y,22vh);scale:.93;opacity:.32;}
}
html[data-mnt-mov] .mnt .abertura{view-timeline:--mnt-hero block;}
html[data-mnt-mov] .mnt .abertura > .env{
  animation:mnt-mov-recua linear both;animation-name:var(--mnt-off,mnt-mov-recua);
  animation-timeline:--mnt-hero;
  animation-range:exit 0% exit 100%;
}

/* --------------------------------------------------------------------------
   3. A caixa de Serviços sobe como folha (1.72).
   Até a 1.71 eram cinco cartões que chegavam tortos e se organizavam na grade,
   e a faixa do chave na mão subindo por baixo deles. A 1.72 trocou os cartões
   por abas numa caixa só: o que entra agora é a caixa inteira, subindo por cima
   da abertura — a "folha que sobe por cima da de baixo", ideia dele.
   Sem opacidade de propósito (lição da 1.70): a régua escura do pé da caixa tem
   texto branco, e desbotar o escuro derrubava o contraste para 2,7:1.
   O desenho de dentro tem movimento próprio (seção 10), por tempo, ao abrir a aba.
   ------------------------------------------------------------------------ */
@keyframes mnt-mov-sobe{
  from{translate:0 var(--mov-y,28px);}
}
html[data-mnt-mov] .mnt .mntx-abas{
  animation:mnt-mov-sobe linear backwards;animation-name:var(--mnt-off,mnt-mov-sobe);
  animation-timeline:view();
  animation-range:entry 0% entry 60%;
  --mov-y:56px;
}
@media (max-width:759px){
  html[data-mnt-mov] .mnt .mntx-abas{--mov-y:32px;}
}

/* A trava do bloco de contenção saiu na 1.69 junto com o painel.
   Ela existia porque o <details> aberto virava painel `position:fixed` e
   qualquer translate no cartão o aprisionava dentro dele. Sem painel, não há
   filho fixo para aprisionar — e sem <details> não existe mais estado [open].
   Se um dia voltar a haver camada sobreposta nascendo de dentro do cartão,
   a trava volta junto: animação no pai é bloco de contenção, zero inclusive. */
/* --------------------------------------------------------------------------
   4. A frase que acende enquanto se lê.
   Um texto só (a frase do chave na mão — desde a 1.72, a da régua embaixo das
   abas de Serviços). Um degradê vertical mais escuro
   embaixo do que em cima percorre o título: cada linha vai do tom apagado ao
   pleno. O tom apagado NUNCA sai do contraste de texto grande (>= 3:1) — é 62%
   da cor, e não um cinza qualquer. O estado sem animação é o título pleno
   (a propriedade registrada começa em 120%).
   ------------------------------------------------------------------------ */
@media screen and (forced-colors: none){
  @supports ((background-clip: text) or (-webkit-background-clip: text)) and (color: color-mix(in srgb, red 50%, blue)){
    @keyframes mnt-mov-acende{
      from{--mnt-luz:-30%;}
      to{--mnt-luz:120%;}
    }
    html[data-mnt-mov] .mnt .regua .regua-frase{
      background-image:linear-gradient(180deg,
        currentColor 0,
        currentColor calc(var(--mnt-luz) - 18%),
        color-mix(in srgb,currentColor 62%,transparent) calc(var(--mnt-luz) + 18%),
        color-mix(in srgb,currentColor 62%,transparent) 100%);
      -webkit-background-clip:text;background-clip:text;
      -webkit-text-fill-color:transparent;
      animation:mnt-mov-acende linear both;animation-name:var(--mnt-off,mnt-mov-acende);
      animation-timeline:view();
      animation-range:entry 20% cover 46%;
    }
  }
}

/* --------------------------------------------------------------------------
   5. Como trabalhamos: as etapas acendem uma a uma e o fio se desenha.
   Duas versões da MESMA coisa:
   - solta (padrão, e a única no celular): cada etapa acende quando chega à
     parte de cima da tela;
   - presa ([data-mnt-pin], que o site-movimento.js só liga onde é seguro): a
     seção segura a tela por 85% da altura dela enquanto o fio corre e as
     etapas acendem na ordem. `overflow:clip` e não `hidden`: hidden faria da
     seção o contêiner de rolagem e o sticky do filho não colaria em nada.
   O estado sem movimento é tudo aceso (opacidade 1, fio inteiro).
   ------------------------------------------------------------------------ */
@keyframes mnt-mov-etapa{
  from{opacity:.4;scale:.96;translate:0px 22px;}
  to{opacity:1;scale:1;translate:0px 0px;}
}
@keyframes mnt-mov-fio{
  from{scale:0 1;}
  to{scale:1 1;}
}
@keyframes mnt-mov-no{
  from{background:rgba(255,255,255,.18);box-shadow:0 0 0 0 rgba(111,214,248,0);}
  to{background:var(--ciano);box-shadow:0 0 0 6px rgba(111,214,248,.16);}
}
/* Duas linhas do tempo na mesma seção (a do quadro e a do método): view-timeline
   aceita uma lista. Declarar só a segunda apagaria a primeira — a regra que
   escreve o nome é a de maior especificidade — e o quadro não abriria aqui. */
html[data-mnt-mov] .mnt .escuro:has(.etapas){view-timeline:--mnt-sec block,--mnt-trab block;--pin-dist:85svh;}
html[data-mnt-mov] .mnt .escuro .etapas{position:relative;}
html[data-mnt-mov] .mnt .escuro .etapa{
  animation:mnt-mov-etapa linear both;animation-name:var(--mnt-off,mnt-mov-etapa);
  animation-timeline:view();
  animation-range:entry 10% entry 70%;
}
html[data-mnt-mov] .mnt .escuro .etapa:nth-child(2){animation-range:entry 16% entry 76%;}
html[data-mnt-mov] .mnt .escuro .etapa:nth-child(3){animation-range:entry 22% entry 82%;}
html[data-mnt-mov] .mnt .escuro .etapa:nth-child(4){animation-range:entry 28% entry 88%;}

/* a versão presa. O sticky só anda dentro da caixa de CONTEÚDO do pai — o
   padding não conta —, então o espaço em que a tela fica presa precisa ser
   conteúdo de verdade: um bloco vazio no fim da seção, com a altura da pausa.
   O bloco é posto pelo site-movimento.js junto com o data-mnt-pin (os dois
   pseudo-elementos da seção já são os quadros das seções). */
.mnt .escuro > .mnt-mov-espaco{display:none;}
html[data-mnt-mov] .mnt .escuro[data-mnt-pin] > .mnt-mov-espaco{
  display:block;height:var(--pin-dist);pointer-events:none;
}
html[data-mnt-mov] .mnt .escuro[data-mnt-pin] > .env{
  position:sticky;top:clamp(84px,12svh,132px);
}
/* o fio: uma trilha fina acima dos cartões e o preenchimento que corre */
html[data-mnt-mov] .mnt .escuro[data-mnt-pin] .etapas::before,
html[data-mnt-mov] .mnt .escuro[data-mnt-pin] .etapas::after{
  content:"";position:absolute;left:0;right:0;top:-24px;height:2px;border-radius:2px;
  pointer-events:none;
}
html[data-mnt-mov] .mnt .escuro[data-mnt-pin] .etapas::before{background:rgba(255,255,255,.14);}
html[data-mnt-mov] .mnt .escuro[data-mnt-pin] .etapas::after{
  background:linear-gradient(90deg,var(--ciano),#fff);transform-origin:0 50%;
  animation:mnt-mov-fio linear both;animation-name:var(--mnt-off,mnt-mov-fio);
  animation-timeline:--mnt-trab;
  animation-range:contain 0px contain calc(var(--pin-dist) * .78);
}
html[data-mnt-mov] .mnt .escuro[data-mnt-pin] .etapa{
  animation-timeline:--mnt-trab;
  animation-range:contain calc(var(--pin-dist) * .02) contain calc(var(--pin-dist) * .17);
}
html[data-mnt-mov] .mnt .escuro[data-mnt-pin] .etapa:nth-child(2){animation-range:contain calc(var(--pin-dist) * .2) contain calc(var(--pin-dist) * .35);}
html[data-mnt-mov] .mnt .escuro[data-mnt-pin] .etapa:nth-child(3){animation-range:contain calc(var(--pin-dist) * .4) contain calc(var(--pin-dist) * .55);}
html[data-mnt-mov] .mnt .escuro[data-mnt-pin] .etapa:nth-child(4){animation-range:contain calc(var(--pin-dist) * .6) contain calc(var(--pin-dist) * .75);}
/* o nó de cada etapa, na trilha */
html[data-mnt-mov] .mnt .escuro[data-mnt-pin] .etapa::before{
  content:"";position:absolute;left:22px;top:-30px;width:12px;height:12px;border-radius:50%;
  background:rgba(255,255,255,.18);
  animation:mnt-mov-no linear both;animation-name:var(--mnt-off,mnt-mov-no);
  animation-timeline:--mnt-trab;
  animation-range:inherit;
}

/* --------------------------------------------------------------------------
   6. Projetos: a faixa se monta e a imagem assenta.
   Os cartões moram numa fita que rola de lado (overflow-x:auto), e uma fita
   assim corta os dois eixos. Por isso: (1) a linha do tempo é a da FAIXA
   inteira (.proj-palco, que não rola), e não a de cada cartão — o view() de um
   cartão apontaria para a fita; (2) nada anda para o lado, e o que desce
   (26px) cabe no respiro de 34px que a fita já reserva embaixo para a sombra.
   Só o estado inicial é declarado (`backwards`): no fim o cartão volta ao que
   o CSS do site diz que ele é, sem ficar preso em nenhum quadro-chave.
   -------------------------------------------------------------------------- */
/* v1.64 — projetos é ABRIR e DESTACAR: o cartão SOBE e assenta com um leve
   destaque, a captura dentro dele ABRE (recua do zoom, como a página carregando)
   e só então o SELO de situação é carimbado. Nada anda para o lado aqui: os
   cartões moram numa fita que rola de lado, e deslocá-los aumentaria a rolagem. */
@keyframes mnt-mov-cartao{
  from{opacity:.3;scale:.93;translate:0px 40px;}
  74%{scale:1.014;}
}
@keyframes mnt-mov-foto{
  from{scale:1.24;translate:0% -6%;}
}
html[data-mnt-mov] .mnt .proj-palco{view-timeline:--mnt-proj block;}
html[data-mnt-mov] .mnt .proj-palco .projeto{
  animation:mnt-mov-cartao linear backwards;animation-name:var(--mnt-off,mnt-mov-cartao);
  animation-timeline:--mnt-proj;
  animation-range:entry 0% entry 62%;
}
html[data-mnt-mov] .mnt .proj-palco .projeto:nth-child(2){animation-range:entry 8% entry 70%;}
html[data-mnt-mov] .mnt .proj-palco .projeto:nth-child(3){animation-range:entry 16% entry 78%;}
html[data-mnt-mov] .mnt .proj-palco .projeto:nth-child(4){animation-range:entry 24% entry 86%;}
/* O selo de situação ("Projeto entregue") saiu do cartão na 1.69, a pedido do
   dono: ele só publica projeto entregue, então o selo dizia o óbvio em todos.
   O quadro-chave do carimbo e as quatro faixas de tempo saíram junto — CSS que
   não veste mais nada continua sendo peso baixado em toda visita. */
/* A imagem assenta depois que o cartão se firma: começa de perto e recua. O
   cartão tem overflow:hidden, então o que passa da borda não aparece. */
html[data-mnt-mov] .mnt .proj-palco .projeto .trilho img{
  animation:mnt-mov-foto linear backwards;animation-name:var(--mnt-off,mnt-mov-foto);
  animation-timeline:--mnt-proj;
  animation-range:entry 6% entry 100%;
}
/* A foto ampliada passa da borda do .trilho (a galeria do cartão) e o .trilho é
   overflow-x:auto: o eixo que o CSS do site não diz vira "auto" também, e a caixa
   ganha 2 a 8px de rolagem VERTICAL. Com o ponteiro sobre a foto, o toque da roda do
   mouse rola essa caixa em vez da página — a página "emperra" um toque por foto que
   entra. Achado medindo a rolagem por roda (a asserção de pixels não via), não pelo
   código. overflow-y:hidden tira a caixa da cadeia de rolagem; o que a foto deixa
   além da borda já era cortado por ela, então nada muda na tela. */
html[data-mnt-mov] .mnt .proj-palco .projeto .trilho{overflow-y:hidden;}

/* --------------------------------------------------------------------------
   9. As primeiras cenas da 1.57 (a folha, as etapas do chave na mão, o cartão
   "Quem atendemos" e a onda dos ramos) SAÍRAM entre a 1.70 e a 1.72. O que as
   primeiras telas têm hoje: a abertura que recua (seção 2), a caixa de Serviços
   que sobe por cima dela (seção 3), a frase da régua que acende (seção 4) e os
   desenhos das abas, por tempo (seção 10). Regra da casa: CSS que não veste
   nada é peso em toda visita, e por isso nada delas ficou aqui.
   ------------------------------------------------------------------------ */

/* --------------------------------------------------------------------------
   11. Uma transição por seção (v1.63). Cada uma tem UMA ideia e nenhuma é igual
   à outra, como ele pediu. Todas em transform/opacity, piso de opacidade .3
   (nada nasce escondido), gate --mnt-off (reduzir movimento as apaga), e nada
   anda para o lado além do que a borda da seção já contém — para não abrir
   rolagem lateral no celular. Fora do @supports elas não existem e a seção fica
   completa e parada.
   ------------------------------------------------------------------------ */

/* 11.1 Orçamento (as seis perguntas): o convite e o seletor sobem, e as perguntas
   do tipo escolhido surgem uma a uma — a entrevista começando. Só o grupo ativo
   (não [hidden]) anima; trocar o tipo não reanima (a rolagem já passou). */
@keyframes mnt-mov-brief{ from{opacity:.3;translate:0 30px;} }
html[data-mnt-mov] .mnt #briefing .briefe-2col{view-timeline:--mnt-brief block;}
html[data-mnt-mov] .mnt #briefing .cabeca,
html[data-mnt-mov] .mnt #briefing .briefe-tipo{
  animation:mnt-mov-brief linear backwards;animation-name:var(--mnt-off,mnt-mov-brief);
  animation-timeline:--mnt-brief;animation-range:entry 2% entry 44%;
}
html[data-mnt-mov] .mnt #briefing .briefe-tipo{animation-range:entry 10% entry 50%;}
html[data-mnt-mov] .mnt #briefing .briefe-grupo:not([hidden]) > .briefe-campo{
  animation:mnt-mov-brief linear backwards;animation-name:var(--mnt-off,mnt-mov-brief);
  animation-timeline:--mnt-brief;animation-range:entry 16% entry 56%;
}
html[data-mnt-mov] .mnt #briefing .briefe-grupo:not([hidden]) > .briefe-campo:nth-child(2){animation-range:entry 22% entry 62%;}
html[data-mnt-mov] .mnt #briefing .briefe-grupo:not([hidden]) > .briefe-campo:nth-child(3){animation-range:entry 28% entry 68%;}
html[data-mnt-mov] .mnt #briefing .briefe-grupo:not([hidden]) > .briefe-campo:nth-child(n+4){animation-range:entry 34% entry 74%;}

/* 11.2 Perguntas: a busca "abre" na horizontal (cresce do meio) e as perguntas
   entram numa cascata curta, uma após a outra — a lista aparecendo. */
@keyframes mnt-mov-busca{ from{opacity:.3;scale:.9 1;} }
@keyframes mnt-mov-faq-q{ from{opacity:.3;translate:0 20px;} }
html[data-mnt-mov] .mnt #perguntas .mntx.faq{view-timeline:--mnt-faq block;}
html[data-mnt-mov] .mnt #perguntas .faq-busca{
  animation:mnt-mov-busca linear backwards;animation-name:var(--mnt-off,mnt-mov-busca);
  animation-timeline:--mnt-faq;animation-range:entry 0% entry 42%;
}
html[data-mnt-mov] .mnt #perguntas .faq-lista > .faq-q{
  animation:mnt-mov-faq-q linear backwards;animation-name:var(--mnt-off,mnt-mov-faq-q);
  animation-timeline:--mnt-faq;animation-range:entry 10% entry 56%;
}
html[data-mnt-mov] .mnt #perguntas .faq-lista > .faq-q:nth-child(2){animation-range:entry 16% entry 62%;}
html[data-mnt-mov] .mnt #perguntas .faq-lista > .faq-q:nth-child(3){animation-range:entry 22% entry 68%;}
html[data-mnt-mov] .mnt #perguntas .faq-lista > .faq-q:nth-child(4){animation-range:entry 28% entry 74%;}
html[data-mnt-mov] .mnt #perguntas .faq-lista > .faq-q:nth-child(n+5){animation-range:entry 34% entry 80%;}

/* 11.3 Contato — a seção é JUNTAR, e o movimento diz isso (v1.64): as duas
   metades do cartão VÊM DAS LATERAIS E SE ENCONTRAM no meio (o convite pela
   esquerda, o formulário pela direita, ao mesmo tempo). Aí o FORMULÁRIO SE
   PREENCHE campo a campo e um brilho cruza o botão Enviar, uma vez. É a cena que
   diz "aproxime-se: preencha e a gente conversa".
   O `overflow:clip` no cartão é o que segura o deslocamento lateral: as metades
   entram POR DENTRO da borda do cartão e a página nunca ganha rolagem de lado
   (clip, e não hidden, para não criar contêiner de rolagem). */
@keyframes mnt-mov-cont-esq{ from{opacity:.3;translate:-62px 0;} }
@keyframes mnt-mov-cont-dir{ from{opacity:.3;translate:62px 0;} }
@keyframes mnt-mov-cont-item{ from{opacity:.3;translate:0 16px;} }
@keyframes mnt-mov-cont-brilho{ from{translate:-140% 0;} to{translate:320% 0;} }
html[data-mnt-mov] .mnt #contato .contato-cartao{view-timeline:--mnt-cont block;overflow:clip;}
html[data-mnt-mov] .mnt #contato .contato-esq{
  animation:mnt-mov-cont-esq linear backwards;animation-name:var(--mnt-off,mnt-mov-cont-esq);
  animation-timeline:--mnt-cont;animation-range:entry 4% entry 50%;
}
html[data-mnt-mov] .mnt #contato .contato-form{
  animation:mnt-mov-cont-dir linear backwards;animation-name:var(--mnt-off,mnt-mov-cont-dir);
  animation-timeline:--mnt-cont;animation-range:entry 4% entry 50%;
}
html[data-mnt-mov] .mnt #contato .contato-canais > .canal,
html[data-mnt-mov] .mnt #contato .contato-form .mnt-campo{
  animation:mnt-mov-cont-item linear backwards;animation-name:var(--mnt-off,mnt-mov-cont-item);
  animation-timeline:--mnt-cont;animation-range:entry 22% entry 60%;
}
html[data-mnt-mov] .mnt #contato .contato-form .mnt-campo:nth-child(2){animation-range:entry 28% entry 66%;}
html[data-mnt-mov] .mnt #contato .contato-form .mnt-campo:nth-child(3){animation-range:entry 34% entry 72%;}
html[data-mnt-mov] .mnt #contato .contato-form .mnt-campo:nth-child(n+4){animation-range:entry 40% entry 78%;}
html[data-mnt-mov] .mnt #contato .mnt-form-btn{position:relative;overflow:hidden;isolation:isolate;}
html[data-mnt-mov] .mnt #contato .mnt-form-btn::after{
  content:"";position:absolute;top:-14%;bottom:-14%;left:0;width:42%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0,rgba(255,255,255,.4) 50%,rgba(255,255,255,0) 100%);
  translate:-140% 0;
  animation:mnt-mov-cont-brilho linear backwards;animation-name:var(--mnt-off,mnt-mov-cont-brilho);
  animation-timeline:--mnt-cont;animation-range:entry 62% entry 86%;
}

/* 11.4 Rodapé: o fecho calmo — as colunas sobem de leve, em cascata curta. Nada
   de espetáculo no fim; só assenta. */
@keyframes mnt-mov-rod{ from{opacity:.3;translate:0 22px;} }
html[data-mnt-mov] .mnt .rodape .rodape-in{view-timeline:--mnt-rod block;}
html[data-mnt-mov] .mnt .rodape .rodape-in > *{
  animation:mnt-mov-rod linear backwards;animation-name:var(--mnt-off,mnt-mov-rod);
  animation-timeline:--mnt-rod;animation-range:entry 0% entry 56%;
}
html[data-mnt-mov] .mnt .rodape .rodape-in > *:nth-child(2){animation-range:entry 8% entry 64%;}
html[data-mnt-mov] .mnt .rodape .rodape-in > *:nth-child(3){animation-range:entry 14% entry 70%;}
html[data-mnt-mov] .mnt .rodape .rodape-in > *:nth-child(n+4){animation-range:entry 20% entry 76%;}

} /* @supports animation-timeline */

/* --------------------------------------------------------------------------
   10. A abertura na chegada (v1.57).
   O título e o parágrafo NÃO se mexem: são a primeira coisa que se lê (e o que o
   navegador mede como "maior pintura"); atrasar o texto para fazê-lo entrar seria
   pagar caro por um efeito que o visitante nem precisa. O que se mexe é o que
   vem depois do texto, na ordem em que o olho desce até a ação:
     1. os dois botões chegam (o cheio um instante antes);
     2. as três promessas aparecem, e cada visto se marca na sua vez — é uma lista
        de conferência sendo cumprida, que é justamente o que elas dizem;
     3. um único brilho cruza o botão principal. Uma vez, 1,2s depois de a página
        abrir, e nunca mais: o suficiente para o olho parar nele.
   Tempo, e não rolagem: acontece com a página parada, quando a pessoa ainda não
   mexeu em nada. Nada nasce escondido por mais de meio segundo, e o estado de
   repouso (sem animação) é a página completa. Fora do @supports porque não
   depende de linha do tempo de rolagem.
   ------------------------------------------------------------------------ */
@keyframes mnt-mov-entra{
  from{translate:0 var(--ent-y,16px);scale:var(--ent-s,1);opacity:0;}
}
@keyframes mnt-mov-visto{
  from{scale:0;}
  62%{scale:1.24;}
}
@keyframes mnt-mov-brilho{
  from{translate:-150% 0;}
  to{translate:360% 0;}
}
html[data-mnt-mov] .mnt .abertura .acoes .btn{
  animation:mnt-mov-entra .62s cubic-bezier(.2,.8,.2,1) backwards;animation-name:var(--mnt-off,mnt-mov-entra);
  animation-delay:.14s;--ent-y:18px;--ent-s:.94;
}
html[data-mnt-mov] .mnt .abertura .acoes .btn:first-child{animation-delay:.06s;}
html[data-mnt-mov] .mnt .abertura .selo{
  animation:mnt-mov-entra .56s cubic-bezier(.2,.8,.2,1) backwards;animation-name:var(--mnt-off,mnt-mov-entra);
  animation-delay:.3s;--ent-y:12px;
}
html[data-mnt-mov] .mnt .abertura .selo:nth-child(2){animation-delay:.4s;}
html[data-mnt-mov] .mnt .abertura .selo:nth-child(n+3){animation-delay:.5s;}
html[data-mnt-mov] .mnt .abertura .selo i{
  animation:mnt-mov-visto .46s cubic-bezier(.25,.9,.3,1) backwards;animation-name:var(--mnt-off,mnt-mov-visto);
  animation-delay:.64s;
}
html[data-mnt-mov] .mnt .abertura .selo:nth-child(2) i{animation-delay:.8s;}
html[data-mnt-mov] .mnt .abertura .selo:nth-child(n+3) i{animation-delay:.96s;}
/* v1.62 — a imagem em destaque chega POR ÚLTIMO, com a ação: o brilho acende, a
   janela sobe e o celular vem logo atrás. Mesmo quadro-chave da chegada
   (mnt-mov-entra) e mesmo gate de nome (--mnt-off): com "reduzir movimento" ou
   sem linha do tempo, o aparelho já está no lugar. O título e o parágrafo
   seguem parados — o LCP não espera por isto. */
html[data-mnt-mov] .mnt .abertura .av-brilho{
  animation:mnt-mov-entra .9s ease backwards;animation-name:var(--mnt-off,mnt-mov-entra);
  animation-delay:.28s;--ent-y:0px;--ent-s:1;
}
/* v1.64 — o hero é APRESENTAR: a janela CORRE DE LADO (entra pela direita, como
   quem vira a tela para você) e o celular SOBE E ENCAIXA nela. O título e o
   parágrafo seguem parados — a maior pintura (LCP) não espera efeito, e a v157
   reprova se algum dia animarem. A .abertura tem overflow:hidden, então o
   deslocamento lateral fica contido: não abre rolagem de lado. */
@keyframes mnt-mov-entra-lado{
  from{translate:var(--ent-x,60px) var(--ent-y,0px);scale:var(--ent-s,1);opacity:0;}
}
html[data-mnt-mov] .mnt .abertura .disp-janela{
  /* percurso longo e desaceleração menos dianteira: é o que faz a entrada LER como
     "correu de lado" em vez de só aparecer deslocada por um instante. */
  animation:mnt-mov-entra-lado .95s cubic-bezier(.22,.66,.26,1) backwards;animation-name:var(--mnt-off,mnt-mov-entra-lado);
  animation-delay:.30s;--ent-x:132px;--ent-y:10px;--ent-s:.985;
}
html[data-mnt-mov] .mnt .abertura .disp-fone{
  animation:mnt-mov-entra-lado .85s cubic-bezier(.22,.66,.26,1) backwards;animation-name:var(--mnt-off,mnt-mov-entra-lado);
  animation-delay:.64s;--ent-x:-30px;--ent-y:74px;--ent-s:.94;
}
/* v1.63, a pedido dele: o celular "navega" sozinho — a tela desce pela captura e
   volta, num laço calmo. É object-position (não object-fit novo), então vale para
   qualquer imagem: uma captura de uma tela só não tem para onde descer e fica
   parada; uma captura alta (a de fábrica da Celebrar, por exemplo) passeia pelo
   site. Fica à mostra a tela de cima enquanto o celular entra (segura no topo nos
   primeiros 8%), e "reduzir movimento" para tudo (gate --mnt-off). */
@keyframes mnt-mov-fone-rola{
  0%,8%{object-position:50% 0%;}
  48%,58%{object-position:50% 100%;}
  100%{object-position:50% 0%;}
}
html[data-mnt-mov] .mnt .abertura .disp-fone .df-shot{
  animation:mnt-mov-fone-rola 18s ease-in-out infinite both;animation-name:var(--mnt-off,mnt-mov-fone-rola);
}
/* o brilho: uma faixa de luz que atravessa o botão cheio. O botão ganha overflow:hidden
   (o anel de foco e a sombra ficam por fora do corte) e a faixa nasce fora dele. */
html[data-mnt-mov] .mnt .abertura .acoes .btn-cheio{position:relative;overflow:hidden;isolation:isolate;}
html[data-mnt-mov] .mnt .abertura .acoes .btn-cheio::after{
  content:"";position:absolute;top:-12%;bottom:-12%;left:0;width:40%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0,rgba(255,255,255,.4) 50%,rgba(255,255,255,0) 100%);
  translate:-150% 0;
  animation:mnt-mov-brilho 1s cubic-bezier(.35,.55,.3,1) backwards;animation-name:var(--mnt-off,mnt-mov-brilho);
  animation-delay:1.2s;
}

/* --------------------------------------------------------------------------
   7. O cartão vira a janela (View Transition; a parte de JavaScript está no
   site-movimento.js e no abre()/fecha() do site.js).
   Fora do @supports de propósito: são pseudo-elementos que o navegador que não
   conhece simplesmente ignora, e cada regra fica sozinha para que um seletor
   desconhecido não derrube as outras.
   -------------------------------------------------------------------------- */
html[data-mnt-mov]::view-transition-group(mnt-proj){
  animation-duration:.52s;
  animation-timing-function:cubic-bezier(.2,.85,.2,1);
  border-radius:var(--raio-g,20px);
  overflow:clip;
}
/* Cartão e janela têm proporções diferentes: preencher a caixa que cresce e
   cortar (cover) evita a imagem esticada no meio do caminho. */
html[data-mnt-mov]::view-transition-old(mnt-proj),
html[data-mnt-mov]::view-transition-new(mnt-proj){
  width:100%;height:100%;object-fit:cover;object-position:50% 0;
  mix-blend-mode:normal;
}
/* O lado novo aparece POR CIMA do velho, e o velho fica inteiro até o novo
   cobri-lo. O esmaecimento padrão (um some enquanto o outro surge) deixa a
   caixa translúcida no meio do caminho e a página aparece através dela. */
html[data-mnt-mov]::view-transition-old(mnt-proj){animation:none;}
html[data-mnt-mov]::view-transition-new(mnt-proj){animation:mnt-vt-entra .52s cubic-bezier(.4,0,.2,1) both;}
@keyframes mnt-vt-entra{from{opacity:0;}60%,to{opacity:1;}}
/* O resto da página escurece e volta sem competir com o cartão que cresce. */
html[data-mnt-mov]::view-transition-old(root),
html[data-mnt-mov]::view-transition-new(root){animation-duration:.34s;}
/* A janela tem entrada própria (site-tema.css). Durante a transição ela sai de
   cena: duas animações na mesma caixa deixariam o começo tremido. */
html[data-mnt-mov] .mnt-janela[data-mnt-vt][open]{animation:none;}

/* --------------------------------------------------------------------------
   8. Impressão e salvar em PDF: sem rolagem não há linha do tempo, e o que
   sobrar de um quadro-chave, uma pausa em branco de 85% da tela ou um título
   com fundo recortado não pode ir para o papel.
   -------------------------------------------------------------------------- */
@media print{
  html[data-mnt-mov] .mnt *,
  html[data-mnt-mov] .mnt *::before,
  html[data-mnt-mov] .mnt *::after{animation:none!important;}
  html[data-mnt-mov] .mnt .escuro[data-mnt-pin] > .mnt-mov-espaco{display:none;}
  html[data-mnt-mov] .mnt .escuro[data-mnt-pin]{overflow:visible;}
  html[data-mnt-mov] .mnt .escuro[data-mnt-pin] > .env{position:static;}
  html[data-mnt-mov] .mnt .regua .regua-frase{background:none;-webkit-text-fill-color:currentColor;}
}

/* --------------------------------------------------------------------------
   10. Os desenhos das abas de Serviços (1.72).
   Cada aba tem um desenho em SVG que se MONTA quando a aba abre: o rascunho
   vira página (Sites), o domínio chega à hospedagem (Infraestrutura), planilha,
   papel e WhatsApp se endireitam e viram painel (Sistemas), o dado passa do
   celular para o computador (Aplicativos), a busca é digitada e o alfinete cai
   (Conteúdo). E a régua do chave na mão acende passo a passo.

   POR TEMPO, NÃO POR ROLAGEM, e por isso fora do @supports: é a resposta a um
   gesto (abrir a aba), e funciona em qualquer navegador. Quem dispara é o
   site.js, trocando a classe .dz-roda; sem ela não há animação nenhuma.

   O ESTADO DE REPOUSO DE CADA PEÇA É O FINAL. As animações só vêm DE um estado
   (backwards): sem movimento — o dono desligou, o aparelho pede menos
   movimento (--mnt-off), o navegador não roda — o desenho está completo.
   Mesmo padrão de escrita do resto do arquivo: o nome do quadro-chave no atalho
   E na linha seguinte (ver o cabeçalho).
   ------------------------------------------------------------------------ */
@keyframes mnt-dz-surge{from{opacity:0;}}
@keyframes mnt-dz-sobe{from{opacity:0;transform:translateY(10px);}}
@keyframes mnt-dz-entra-d{from{opacity:0;transform:translateX(22px);}}
@keyframes mnt-dz-entra-e{from{opacity:0;transform:translateX(-22px);}}
@keyframes mnt-dz-estala{from{opacity:0;transform:scale(.55);}}
@keyframes mnt-dz-traca{from{stroke-dashoffset:1;}}
@keyframes mnt-dz-cresce{from{transform:scaleY(0);}}
@keyframes mnt-dz-endireita{from{opacity:0;transform:var(--de);}}
@keyframes mnt-dz-cai{0%{opacity:0;transform:translateY(-34px);}55%{opacity:1;transform:translateY(3px);}75%{transform:translateY(-2px);}100%{transform:none;}}
@keyframes mnt-dz-digita{from{transform:scaleX(1);}to{transform:scaleX(0);}}
@keyframes mnt-dz-rasc{0%{opacity:0;}14%{opacity:1;}68%{opacity:1;}100%{opacity:0;}}
@keyframes mnt-dz-pulsa{0%{opacity:.5;transform:scale(1);}100%{opacity:0;transform:scale(2.8);}}
@keyframes mnt-dz-novo1{0%,16%{opacity:0;transform:translateY(-8px);}22%,86%{opacity:1;transform:none;}94%,100%{opacity:0;}}
@keyframes mnt-dz-novo2{0%,45%{opacity:0;}51%,86%{opacity:1;}94%,100%{opacity:0;}}
@keyframes mnt-dz-onda{0%,12%{opacity:0;transform:scale(1);}13%{opacity:.6;transform:scale(1);}26%,100%{opacity:0;transform:scale(2.3);}}
@keyframes mnt-dz-toque{0%,11%,17%,100%{transform:scale(1);}14%{transform:scale(.86);}}
@keyframes mnt-dz-acende{from{background-color:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5);}}
@keyframes mnt-dz-trilho{from{background-size:0% 100%;}}

html[data-mnt-mov] .mnt .dz-roda .dz-surge{animation:mnt-dz-surge .55s cubic-bezier(.2,.7,.2,1) var(--d,0s) backwards;animation-name:var(--mnt-off,mnt-dz-surge);}
html[data-mnt-mov] .mnt .dz-roda .dz-sobe{animation:mnt-dz-sobe .55s cubic-bezier(.2,.7,.2,1) var(--d,0s) backwards;animation-name:var(--mnt-off,mnt-dz-sobe);}
html[data-mnt-mov] .mnt .dz-roda .dz-entraD{animation:mnt-dz-entra-d .55s cubic-bezier(.2,.7,.2,1) var(--d,0s) backwards;animation-name:var(--mnt-off,mnt-dz-entra-d);}
html[data-mnt-mov] .mnt .dz-roda .dz-entraE{animation:mnt-dz-entra-e .55s cubic-bezier(.2,.7,.2,1) var(--d,0s) backwards;animation-name:var(--mnt-off,mnt-dz-entra-e);}
html[data-mnt-mov] .mnt .dz-roda .dz-estala{animation:mnt-dz-estala .5s cubic-bezier(.2,.7,.2,1) var(--d,0s) backwards;animation-name:var(--mnt-off,mnt-dz-estala);}
html[data-mnt-mov] .mnt .dz-roda .dz-traca{animation:mnt-dz-traca .6s ease-in-out var(--d,0s) backwards;animation-name:var(--mnt-off,mnt-dz-traca);}
html[data-mnt-mov] .mnt .dz-roda .dz-cresce{animation:mnt-dz-cresce .6s cubic-bezier(.2,.7,.2,1) var(--d,0s) backwards;animation-name:var(--mnt-off,mnt-dz-cresce);}
html[data-mnt-mov] .mnt .dz-roda .dz-endireita{animation:mnt-dz-endireita .95s cubic-bezier(.2,.7,.2,1) var(--d,0s) backwards;animation-name:var(--mnt-off,mnt-dz-endireita);}
html[data-mnt-mov] .mnt .dz-roda .dz-cai{animation:mnt-dz-cai .75s ease-out var(--d,0s) backwards;animation-name:var(--mnt-off,mnt-dz-cai);}
html[data-mnt-mov] .mnt .dz-roda .dz-digita{animation:mnt-dz-digita 1.3s steps(21,end) var(--d,0s) backwards;animation-name:var(--mnt-off,mnt-dz-digita);}
html[data-mnt-mov] .mnt .dz-roda .dz-r{animation:mnt-dz-rasc 1.8s ease .15s both;animation-name:var(--mnt-off,mnt-dz-rasc);}
html[data-mnt-mov] .mnt .dz-roda .dz-pulsa{animation:mnt-dz-pulsa 2.2s ease-out var(--d,0s) infinite;animation-name:var(--mnt-off,mnt-dz-pulsa);}
html[data-mnt-mov] .mnt .dz-roda .dz-novo1{animation:mnt-dz-novo1 5s ease infinite;animation-name:var(--mnt-off,mnt-dz-novo1);}
html[data-mnt-mov] .mnt .dz-roda .dz-novo2{animation:mnt-dz-novo2 5s ease infinite;animation-name:var(--mnt-off,mnt-dz-novo2);}
html[data-mnt-mov] .mnt .dz-roda .dz-onda{animation:mnt-dz-onda 5s ease-out infinite;animation-name:var(--mnt-off,mnt-dz-onda);}
html[data-mnt-mov] .mnt .dz-roda .dz-toque{animation:mnt-dz-toque 5s ease infinite;animation-name:var(--mnt-off,mnt-dz-toque);}

/* O texto do painel chega junto com o desenho, mais discreto. */
html[data-mnt-mov] .mnt .painel.dz-roda .painel-txt{animation:mnt-dz-sobe .45s cubic-bezier(.2,.7,.2,1) backwards;animation-name:var(--mnt-off,mnt-dz-sobe);}

/* A régua acende passo a passo: o número, depois o trilho até o próximo. */
html[data-mnt-mov] .mnt .regua.dz-roda .regua-n{animation:mnt-dz-acende .35s ease backwards;animation-name:var(--mnt-off,mnt-dz-acende);}
html[data-mnt-mov] .mnt .regua.dz-roda li:nth-child(2) .regua-n{animation-delay:.45s;}
html[data-mnt-mov] .mnt .regua.dz-roda li:nth-child(3) .regua-n{animation-delay:.9s;}
html[data-mnt-mov] .mnt .regua.dz-roda li:nth-child(4) .regua-n{animation-delay:1.35s;}
@media (min-width:860px){
  html[data-mnt-mov] .mnt .regua.dz-roda li:not(:last-child)::after{animation:mnt-dz-trilho .32s linear backwards;animation-name:var(--mnt-off,mnt-dz-trilho);}
  html[data-mnt-mov] .mnt .regua.dz-roda li:nth-child(1)::after{animation-delay:.15s;}
  html[data-mnt-mov] .mnt .regua.dz-roda li:nth-child(2)::after{animation-delay:.6s;}
  html[data-mnt-mov] .mnt .regua.dz-roda li:nth-child(3)::after{animation-delay:1.05s;}
}

/* v1.75 — as cenas das abas de Serviços: cada peça entra com a rolagem (o
   site.js troca o data-p da cena de 1 a 4 conforme ela atravessa a tela). A
   peça desliza e acende; a trilha cresce. Sem movimento (gate --mnt-off não
   se aplica a transição — por isso o seletor exige data-mnt-mov e o site.js
   nem mexe no passo quando a pessoa pede menos movimento). */
html[data-mnt-mov] .mnt .cena :is(.s2,.s3,.s4,.so1){
  transition:opacity .5s ease,visibility .5s,translate .6s cubic-bezier(.2,.8,.2,1);}
html[data-mnt-mov] .mnt .cena[data-p="1"] :is(.s2,.s3,.s4),
html[data-mnt-mov] .mnt .cena[data-p="2"] :is(.s3,.s4),
html[data-mnt-mov] .mnt .cena[data-p="3"] .s4{translate:0 1.6cqw;}
html[data-mnt-mov] .mnt .cena .cn-fone.s3{transition-duration:.5s,.5s,.75s;}
html[data-mnt-mov] .mnt .cena[data-p="1"] .cn-fone.s3,html[data-mnt-mov] .mnt .cena[data-p="2"] .cn-fone.s3{translate:3.6cqw 2.9cqw;}
html[data-mnt-mov] .mnt .cena .cn-trilho i{transition:transform .5s cubic-bezier(.3,.7,.2,1);}
@media (prefers-reduced-motion:reduce){
  html[data-mnt-mov]:not([data-mnt-mov="ver"]) .mnt .cena *{transition:none!important;}
}

/* v1.75.3 — o dado andando pela linha: com movimento, o ponto viaja de uma
   peça à outra (SVG <animateMotion>) e o ponto parado sai. Pedindo menos
   movimento, ou no editor, fica o parado. */
html[data-mnt-mov] .mnt .cena .cn-fio .cn-viaja{display:inline;}
html[data-mnt-mov] .mnt .cena .cn-fio .cn-parado{display:none;}
html[data-mnt-editando] .mnt .cena .cn-fio .cn-viaja{display:none!important;}
html[data-mnt-editando] .mnt .cena .cn-fio .cn-parado{display:inline!important;}
@media (prefers-reduced-motion:reduce){
  html[data-mnt-mov]:not([data-mnt-mov="ver"]) .mnt .cena .cn-fio .cn-viaja{display:none;}
  html[data-mnt-mov]:not([data-mnt-mov="ver"]) .mnt .cena .cn-fio .cn-parado{display:inline;}
}