/* ==========================================================================
   Melhor CRM para WhatsApp — MakeCRM
   Presenca organica. Standalone, fora do WordPress.

   Identidade: a do PRODUTO, nao a da agencia. Os valores saem do CSS do
   usemakecrm.com.br: #0083fa como acento dominante, #f7fafc e #e4f0fb nos
   claros, #021026 de navy, #00d084 e #fc5c65 em estado.

   Base BRANCO GELO, nao #fff puro. Branco puro num fundo de pagina inteira
   estoura o contraste com o card branco que fica em cima dele, e ai nao sobra
   como separar superficie levantada de fundo. Com o gelo na base, o #fff passa
   a significar "isto esta acima", que e informacao.

   Ritmo de tons, lido da build do Deyel vendor: gelo, papel, bruma e um navy
   usado com parcimonia. Duas secoes vizinhas nunca repetem o tom.

   Os efeitos de fundo sao releitura em vanilla de ideias da React Bits (grade
   de pontos e veu de cor). Nao da para usar a biblioteca: ela e React e os
   efeitos dela dependem de WebGL via ogl, e esta pagina nao tem build.
   ========================================================================== */

:root{
  /* fundos, do mais claro ao mais escuro */
  --gelo:#F5F8FC;
  --papel:#FFFFFF;
  --bruma:#EAF1F8;
  --ink:#021026;
  --ink-2:#08192f;

  /* texto */
  --tinta:#0B1B31;
  --tinta-mid:rgba(11,27,49,.62);
  --tinta-fraca:rgba(11,27,49,.10);
  --on-ink:#EAF2FB;
  --on-ink-mute:#8FA6C4;
  --on-ink-faint:rgba(234,242,251,.12);

  /* marca */
  --azul:#0083FA;
  --azul-hi:#3AA0FF;
  --azul-lo:#0064C4;
  --azul-veu:#E4F0FB;
  --ok:#00A768;
  --alerta:#FC5C65;

  --sans:"articulat-cf",system-ui,-apple-system,sans-serif;
  --mono:"articulat-cf",system-ui,-apple-system,sans-serif;

  --d1:clamp(38px,5.2vw,84px);
  --d2:clamp(32px,4.6vw,68px);
  --d3:clamp(24px,2.6vw,40px);
  --body:clamp(15px,1.05vw,17px);

  --gut:clamp(22px,3.2vw,68px);
  --maxw:1720px;
  --rail:78px;
  --r:16px;
  --e:cubic-bezier(.22,1,.36,1);

  /* sombra de contato, azulada em vez de preta: sombra preta sobre gelo frio
     suja o tom e faz o card parecer descolado do fundo */
  --sombra:0 1px 2px rgba(11,27,49,.05), 0 12px 28px -14px rgba(11,27,49,.16);
  --sombra-alta:0 2px 4px rgba(11,27,49,.06), 0 30px 60px -24px rgba(11,27,49,.22);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--tinta);
  /* Gelo com profundidade, nao branco chapado. Tres camadas fixas: um campo
     azul frio no alto a direita, um contra-campo mais quente embaixo a esquerda
     e um gradiente vertical que fecha a base. Todas paradas: e cor que da
     emocao aqui, nao movimento. */
  background:
    radial-gradient(46% 38% at 82% 6%,  rgba(0,131,250,.16) 0%, transparent 62%),
    radial-gradient(52% 44% at 6% 84%,  rgba(0,131,250,.075) 0%, transparent 66%),
    linear-gradient(180deg, #FBFDFF 0%, var(--gelo) 46%, #EDF3FA 100%);
  background-attachment:fixed;
  font-family:var(--sans); font-size:var(--body); line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--azul); outline-offset:3px}

/* --------------------------------------------------------- tipo e papeis */
.d1{font-size:var(--d1); line-height:1; font-weight:400; letter-spacing:-.042em}
.d2{font-size:var(--d2); line-height:1.03; font-weight:400; letter-spacing:-.038em}
.d3{font-size:var(--d3); line-height:1.1; font-weight:400; letter-spacing:-.03em}
.acc{color:var(--azul)}
.lbl{font-family:var(--mono); font-size:12px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--azul-lo)}
.body{color:var(--tinta-mid)}

/* ---------------------------------------------------------- ritmo de tons */
.s{position:relative; z-index:2; padding-block:clamp(72px,10vh,140px)}
.s-gelo{background:var(--gelo)}
.s-papel{background:var(--papel)}
.s-bruma{background:var(--bruma)}
.s-ink{background:var(--ink); color:var(--on-ink)}
.s-ink .lbl{color:var(--azul-hi)}
.s-ink .body{color:var(--on-ink-mute)}
.s-ink .acc{color:var(--azul-hi)}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut)}

/* ------------------------------------------------------------------ cta */
/* Um padrao de CTA para toda a pagina: rotulo mais ficha redonda com a seta,
   igual ao do rail. A unica diferenca entre eles e a escala. Antes o do rail era
   maiuscula espacada e os da hero eram pilula chapada com a seta solta ao lado,
   ou seja tres desenhos para a mesma acao. */
.btn{
  display:inline-flex; align-items:center; gap:12px;
  padding:7px 9px 7px 23px; border-radius:999px;
  font-size:15px; font-weight:600; letter-spacing:-.008em;
  transition:background-color .4s var(--e), color .4s var(--e),
             transform .4s var(--e), box-shadow .4s var(--e);
}
.btn__ico{display:grid; place-items:center; flex:none;
  width:32px; height:32px; border-radius:999px;
  transition:background-color .4s var(--e), transform .45s var(--e)}
.btn__ico svg{width:15px; height:15px}
.btn:active{transform:translateY(1px)}

.btn--azul .btn__ico{background:rgba(255,255,255,.20)}
.btn--azul:hover .btn__ico{background:rgba(255,255,255,.34); transform:translateX(3px)}
/* no secundario a ficha aponta pra baixo, entao o deslocamento no hover tambem */
.btn--linha .btn__ico{background:rgba(0,131,250,.10); color:var(--azul)}
.btn--linha:hover .btn__ico{background:rgba(0,131,250,.17); transform:translateY(2px)}
.s-ink .btn--linha .btn__ico{background:rgba(255,255,255,.14); color:var(--azul-hi)}
.btn--azul{background:var(--azul); color:#fff;
  box-shadow:0 1px 2px rgba(0,80,160,.16), 0 14px 26px -12px rgba(0,131,250,.45)}
.btn--azul:hover{background:var(--azul-hi)}
.btn--linha{border:1px solid var(--tinta-fraca); color:var(--tinta); background:var(--papel)}
.btn--linha:hover{background:var(--bruma)}
.s-ink .btn--linha{border-color:var(--on-ink-faint); color:var(--on-ink); background:transparent}
.s-ink .btn--linha:hover{background:rgba(234,242,251,.07)}

/* Rotulo em caixa normal, e nao maiuscula espacada de 12px: maiuscula miuda num
   botao pequeno some e nao ganha nada em atencao. A seta vive numa ficha redonda
   propria, que e o que da desenho a peca sem precisar de moldura nem brilho. */
.pill{display:inline-flex; align-items:center; gap:11px;
  padding:6px 7px 6px 19px; border-radius:999px;
  font-size:13.5px; font-weight:600; letter-spacing:-.005em;
  transition:background-color .4s var(--e), color .4s var(--e),
             box-shadow .4s var(--e), transform .4s var(--e)}
.pill__ico{display:grid; place-items:center; flex:none;
  width:27px; height:27px; border-radius:999px;
  background:rgba(255,255,255,.20);
  transition:background-color .4s var(--e), transform .45s var(--e)}
.pill__ico svg{width:13px; height:13px}
.pill--azul{background:var(--azul); color:#fff;
  box-shadow:0 1px 2px rgba(0,80,160,.16), 0 10px 22px -12px rgba(0,131,250,.5)}
.pill--azul:hover{background:var(--azul-hi)}
.pill--azul:hover .pill__ico{background:rgba(255,255,255,.34); transform:translateX(3px)}
.pill:active{transform:translateY(1px)}
.hdr[data-tone="dark"] .pill__ico{background:rgba(255,255,255,.18)}

/* ------------------------------------------------------------------ rail */
.hdr{
  position:fixed; inset:0 0 auto; height:var(--rail); z-index:60;
  color:var(--tinta);
  transition:color .5s var(--e), transform .55s var(--e);
}
/* No topo o rail e transparente, e a hero fica inteira. Ao rolar ele ganha uma
   superficie de vidro para o conteudo nao passar por tras da logo. Vidro, e nao
   fio embaixo: fio ali corta a pagina em duas e e exatamente o que a hero nao
   precisa. O pseudo em z-index negativo fica atras do conteudo do rail mas ainda
   na frente da pagina, porque o rail ja e um contexto de empilhamento. */
.hdr::before{content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(246,249,253,.74);
  -webkit-backdrop-filter:blur(15px) saturate(1.5);
  backdrop-filter:blur(15px) saturate(1.5);
  opacity:0; transition:opacity .5s var(--e)}
.hdr[data-scroll="1"]::before{opacity:1}
.hdr[data-tone="dark"]::before{background:rgba(2,16,38,.74)}
.hdr__in{width:100%; max-width:var(--maxw); height:100%; margin-inline:auto;
  padding-inline:var(--gut);
  display:flex; align-items:center; justify-content:space-between}
.hdr[data-tone="dark"]{color:var(--on-ink)}
.hdr[data-hide="1"]{transform:translateY(calc(var(--rail) * -1))}
.hdr__lock{display:flex; align-items:center}
/* --marca-h manda na escala. --marca-w e o recorte: 0 significa mostrar inteiro */
.hdr__marca{--marca-h:26px; position:relative; display:block; height:var(--marca-h);
  overflow:hidden}
.hdr__logo{display:block; height:var(--marca-h); width:auto; max-width:none;
  transition:opacity .5s var(--e)}
.hdr__logo--cla{position:absolute; inset:0; opacity:0}
.hdr[data-tone="dark"] .hdr__logo--esc{opacity:0}
.hdr[data-tone="dark"] .hdr__logo--cla{opacity:1}

/* ================================================================== hero */
.hero{position:relative; min-height:100dvh; display:grid; align-items:center;
  overflow:clip}

/* A camada de fundo tem que sair do fluxo. Ela e um item do grid da hero: em
   position:static virava a primeira linha da grade e empurrava o conteudo pra
   baixo, que era a causa do bloco fora do centro vertical. */
.fundo{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden}

/* Veu de cor: campo azul MUITO fraco e PARADO. Antes eram dois campos com
   animacao de 26s, e fundo que se move sozinho compete com a leitura mesmo
   devagar. Aqui ele existe para o gelo nao ficar chapado, e nada mais. */
.fundo .brilho{position:absolute; left:50%; top:-16%;
  width:min(1180px,96vw); height:700px; transform:translateX(-50%);
  background:radial-gradient(46% 50% at 50% 46%, rgba(0,131,250,.13), transparent 66%);
  filter:blur(36px)}
.fundo .veu{position:absolute; inset:0;
  background:
    radial-gradient(74% 64% at 50% 40%, rgba(245,248,252,.06), rgba(245,248,252,.62) 84%),
    linear-gradient(180deg, rgba(255,255,255,.66), transparent 24%, transparent 74%, var(--gelo))}
.hero::after{content:""; position:absolute; left:0; right:0; bottom:0; height:190px;
  z-index:1; pointer-events:none;
  background:linear-gradient(transparent, var(--gelo))}

@media (prefers-reduced-motion:reduce){
}

/* width:100% de proposito junto do margin auto. Sem ele, margin-inline:auto num
   item de GRID derrota o stretch: o item passa a ser dimensionado pelo conteudo
   e centralizado, e ficava em 1410px numa coluna de 1600. Era por isso que
   mexer na goteira nao abria o container. */
/* Hero em SPLIT, como a hero da Deyel vendor: texto a esquerda, objeto a
   direita. A versao centralizada com painel embaixo vinha da LP, que e outra
   composicao. */
.hero__in{position:relative; z-index:3; width:100%; max-width:var(--maxw);
  margin-inline:auto; padding-inline:var(--gut);
  padding-block:clamp(52px,7.5vh,96px);
  display:grid; gap:clamp(30px,4vw,64px);
  grid-template-columns:minmax(0,1fr); align-items:center}

/* o texto se limita sozinho: a cena esta fora do fluxo, entao nao ha mais
   coluna de grade segurando a largura da coluna esquerda */
.hero__head{max-width:min(50%, 760px)}

.hero h1{margin:0; max-width:20ch}
/* ------- rodizio de plataforma na h1 -------
   A caixa corta e a trilha se move. A altura usa 1.18em e nao 1em porque o .d1 roda
   com line-height 1: numa caixa de exatamente uma linha o rabo do p de WhatsApp e do
   g de Instagram ficaria cortado. O sobressalente de .18em vira folga em cima e
   embaixo, e a margem negativa devolve o alinhamento da linha de texto em volta.

   A largura e animada junto porque as quatro palavras tem larguras diferentes: sem
   isso, ou a caixa fica na medida da maior e abre um buraco antes do ponto, ou ela
   corta a maior. */
/* A caixa mede 1em de LAYOUT, igual a linha do .d1, e o recorte do que se ve e
   feito por clip-path, que nao mexe em layout.

   Os numeros saem de medir a fonte, nao de chute. Na articulat-cf, com font-size F:
   tinta sobe 0,70F e desce 0,21F, e a caixa de fonte tem 1,07F de subida por 0,235F
   de descida. Com line-height 1 o entrelinhamento fica negativo e o baseline cai em
   0,9175F do topo da linha. Ou seja a tinta da palavra ocupa de 0,2175F a 1,1275F.

   Daí as tres consequencias:
   1. um recorte de 0 a 1em corta 0,13F do rabo do g de Instagram. Era o corte;
   2. o topo da caixa tem 0,2175F vazios, e ali entra o descendente da palavra de
      CIMA da trilha, que termina em 0,1275F;
   3. a palavra de BAIXO comeca a pintar em 1,2175F.

   Entao a janela visivel vai de 0,15em a 1,16em: cabe a tinta inteira, sobra 1,9px
   de folga para a de cima e 4,8px para a de baixo.

   overflow fica VISIBLE de proposito: com hidden a caixa cortaria em 1em de novo, e o
   clip-path nao teria como estender para baixo. */
.rod{display:inline-block; overflow:visible; vertical-align:top;
  height:1em; will-change:width;
  /* Folga lateral de 4px por causa da franja ciano e rosa do TikTok: com o recorte
     em zero na horizontal, ela era cortada rente na primeira e na ultima letra.

     Embaixo, -14% deixa passar a descida do g e do p (a tinta chega a 1,13em com
     line-height 1) e ainda para antes da celula seguinte, que agora comeca em
     1,2em por causa do padding. */
  clip-path:inset(15% -4px -14% -4px)}
.rod__t{display:block; will-change:transform}
/* max-content: sem ele o i e bloco e ocupa a largura do container, e a medida de
   cada palavra sai errada. Com ele cada item tem a largura do proprio texto. */
.rod i{display:block; width:max-content; font-style:normal; line-height:1;
  white-space:nowrap;
  /* Folga embaixo por causa do background-clip:text do Instagram. Com clip no texto,
     o gradiente e pintado na caixa do elemento e o texto e so a janela dele: a perna
     do g desce abaixo de 1em, cai fora da area pintada, e sai sem cor nenhuma.
     A folga estica a area de pintura ate cobrir a descida.

     Vai em TODOS os quatro, e nao so no Instagram, porque a subida da trilha e
     calculada em porcentagem da altura dela: celula de altura diferente
     desalinharia o passo e a palavra pararia fora da janela. */
  padding-bottom:.2em}

.hero__sub{margin:clamp(26px,3.1vh,42px) 0 0; max-width:56ch;
  font-size:clamp(16px,1.15vw,18.5px); line-height:1.68; color:var(--tinta-mid)}
.hero__cta{margin-top:clamp(32px,4.6vh,56px); display:flex; flex-wrap:wrap; gap:14px 16px}
.hero__note{margin-top:clamp(20px,2.5vh,30px); font-size:12.5px; font-weight:600;
  letter-spacing:.02em; color:rgba(11,27,49,.56)}

/* ----------------------------------------------------------------- cena
   Plano isometrico com solidos, mesma logica da hero do Deyel vendor: um unico
   par de eixos projeta chao, cubo, sombra e fio, e por isso a cena assenta em
   vez de virar colagem de formas. O que muda aqui e so a luz: fundo claro, tom
   do cubo vindo do azul do produto, sombra em azul-cinza no lugar do preto.

   O SVG e montado no JS: as posicoes vivem numa grade (i,j,altura) e o viewBox
   sai do getBBox, entao mexer numa etapa nao obriga a recalcular coordenada a
   mao no markup. */
/* A cena NAO fica dentro do container: ela ocupa a metade direita da secao e
   passa da goteira, que e o que da escala aos solidos. Presa no container ela
   virava um desenho pequeno com sobra de branco dos dois lados. */
.cena{position:absolute; z-index:1; top:3%; bottom:0; left:51%; right:-2vw;
  pointer-events:none}
.palco{position:absolute; inset:0; width:100%; height:100%; overflow:visible}

.palco .aresta{fill:none; stroke:rgba(255,255,255,.75); stroke-width:1;
  vector-effect:non-scaling-stroke}
.palco .tr{fill:none; stroke:rgba(11,27,49,.14); stroke-width:1.3;
  stroke-linecap:square; vector-effect:non-scaling-stroke}
/* o fio aceso e o que faz o processo andar: percorre o traco com dash-offset */
.palco .tr-luz{fill:none; stroke:var(--azul); stroke-width:1.9;
  stroke-linecap:round; vector-effect:non-scaling-stroke}
.palco .icone{fill:none; stroke-width:1.9; stroke-linecap:round;
  stroke-linejoin:round; vector-effect:non-scaling-stroke}

/* A sombra troca de tom junto com a etapa em destaque, e a transicao mora aqui,
   nao no JS: stop-color e stop-opacity sao propriedades animaveis, e mexer nos
   stops e a unica forma de retingir a sombra sem substituir o url() do gradiente
   pelo fill, o que apagaria a dissolucao.
   data-seco desliga a transicao por um quadro, para o reset do ciclo nao aparecer
   como um fade de cor. */
.palco stop{transition:stop-color .45s var(--e), stop-opacity .45s var(--e)}
.palco .som-contato{transition:fill .45s var(--e)}
.palco[data-seco] stop,
.palco[data-seco] .som-contato{transition:none}

/* O lead cai de cima e pousa em cada cubo. Ele e o unico corpo que se move na
   composicao, o resto so respira, para o olho ter um alvo so. */
.lead{color:#fff}
.lead__bola{fill:var(--azul); stroke:#fff; stroke-width:2.4}
.lead__halo{fill:rgba(0,131,250,.18)}

/* pop-up de etapa, ancorado ao topo do cubo. Aparece um por vez e some: quatro
   cards fixos na tela nao e o que notificacao nenhuma faz. */
.avisos{position:absolute; inset:0; z-index:4}
.aviso{position:absolute; transform:translate(-50%,-100%); white-space:nowrap;
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(11,27,49,.09); border-radius:10px; padding:8px 13px 9px;
  box-shadow:0 1px 2px rgba(11,27,49,.05), 0 18px 36px -18px rgba(11,27,49,.34);
  opacity:0}
/* Tratamento de texto de INTERFACE, nao de display.
   Duas coisas estragavam o cartao antes:

   1. peso 700. O bold da articulat tem terminal grosso e chapado, e em 13px ele
      fica truncado, mais perto de etiqueta de sistema que de notificacao. 600
      segura a hierarquia com o mesmo desenho limpo.
   2. tracking negativo. Ele existe para compensar o espaco que sobra em corpo
      grande. Em 13px nao sobra espaco nenhum, e o negativo so encosta as letras
      uma na outra.

   Com isso a hierarquia passa a vir de tamanho e cor, que e o que aguenta pouco
   texto em caixa pequena, e nao de um salto de peso maior que o de tamanho. */
.aviso b{display:block; font-size:13px; font-weight:600; letter-spacing:0;
  color:var(--ink); line-height:1.3}
.aviso i{display:block; font-style:normal; font-size:12px; font-weight:400;
  letter-spacing:.004em; color:rgba(11,27,49,.66); line-height:1.35; margin-top:2px;
  /* algarismo de largura fixa: o ROAS e sorteado a cada volta, e sem isso o 1 e o
     5 tem larguras diferentes e o cartao pula alguns pixels de lado entre ciclos */
  font-variant-numeric:tabular-nums}
/* ------- roleta de plataformas -------
   AS LOGOS rodam. A fileira e longa e desliza dentro de um visor de tres celulas,
   entao da para ver as plataformas passando, e para com uma encaixada no slot do
   meio.

   O slot e uma janela fixa sobre uma copia azul da MESMA fileira. As duas recebem o
   mesmo x pelo JS, entao ficam sempre alinhadas, e a logo que encosta no slot acende
   sem troca de classe. A copia interna nasce recuada um passo porque a origem dela e
   a borda do slot, e nao a do visor. */
.rl{position:relative; display:block; overflow:hidden; margin-top:7px;
  width:calc(26px * 3 + 7px * 2); height:26px}
.rl__t{position:absolute; left:0; top:0; display:flex; gap:7px;
  will-change:transform}
.rl__c{flex:none; display:grid; place-items:center; width:26px; height:26px;
  border-radius:8px; background:var(--gelo);
  border:1px solid rgba(11,27,49,.07); color:rgba(11,27,49,.3)}
.rl__c svg{width:16px; height:16px}

.rl__slot{position:absolute; top:0; left:calc(26px + 7px);
  width:26px; height:26px; overflow:hidden; border-radius:8px;
  pointer-events:none}
.rl__slot .rl__t{left:calc((26px + 7px) * -1)}
.rl__t--on .rl__c{background:var(--azul-veu); color:var(--azul);
  border-color:rgba(0,131,250,.32)}

.aviso:after{content:""; position:absolute; left:50%; bottom:-5px;
  width:8px; height:8px; transform:translateX(-50%) rotate(45deg);
  background:rgba(255,255,255,.96);
  border-right:1px solid rgba(11,27,49,.10);
  border-bottom:1px solid rgba(11,27,49,.10)}
/* sem espaco acima, o aviso vira pra baixo e a seta sobe */
.aviso.abaixo{transform:translate(-50%,0)}
.aviso.abaixo:after{top:-5px; bottom:auto; border-right:0; border-bottom:0;
  border-left:1px solid rgba(11,27,49,.10);
  border-top:1px solid rgba(11,27,49,.10)}
/* O cartao da venda fechada acompanha a cor do cubo, que e a da plataforma sorteada
   na roleta. O verde fica como reserva: e o que aparece com movimento reduzido, onde
   a roleta nao roda e nao ha plataforma escolhida. As duas variaveis sao escritas
   pelo JS no momento em que o cubo acende. */
.aviso.bom{border-color:var(--mrc-b,rgba(0,167,104,.34))}
.aviso.bom b{color:var(--mrc,#00784B)}
/* a segunda linha acompanha, mais clara: com ela verde e o titulo na cor da marca,
   o cartao ficava com duas familias de cor discutindo dentro de 200px */
.aviso.bom i{color:var(--mrc-i,#0C9464)}

/* Abaixo de 960 a cena deita: ela deixa de dividir a linha com o texto e vira
   uma tira larga e baixa no pe da secao, com os cubos numa corrente horizontal.
   A hero abre espaco pra ela com padding-bottom, e nao com altura fixa: a tira
   e absoluta, entao sem esse espaco ela subiria por cima da copy. */
/* ================================================================== ponte
   Abertura da secao de criterios. Uma tela, o titulo sozinho, sem objeto novo.

   min-height e nao height: o espacador que o pin cria entra no lugar do
   .ponte__in e precisa ESTICAR a secao. Com altura travada o espacador vaza e a
   secao seguinte sobe por cima da area presa.

   O topo dissolve do gelo do body para a bruma da secao seguinte, em CSS. E esse
   degrade que faz a passagem existir: sem ele haveria uma linha reta de troca de
   cor no meio da tela, que e o corte que a pagina evita. */
.ponte{position:relative; z-index:2; min-height:100dvh;
  background:linear-gradient(180deg, transparent 0%, var(--bruma) 62%)}
.ponte__in{position:relative; height:100dvh; overflow:clip;
  display:grid; place-items:center; padding-inline:var(--gut)}

/* Teto em PX, nao em ch. ch resolve no font-size do proprio elemento, e aqui o
   bloco herda o corpo de texto: 60ch davam ~630px e estrangulavam o h2, que
   precisa de 703px pra caber "CRM para WhatsApp" numa linha. O resultado era o
   titulo caindo pra tres linhas sem motivo aparente. */
.ponte__bloco{max-width:min(880px, 92vw); text-align:center}
/* 19ch com balance quebra a frase em DUAS linhas de 17 caracteres cada,
   "O que avaliam num" e "CRM para WhatsApp", que e o corte natural dela.
   Em 15ch ela caia pra tres linhas. */
.ponte__t{margin:0; max-width:min(19ch, 90vw); text-align:center;
  font-size:clamp(36px,5.2vw,92px); line-height:1.04; font-weight:400;
  letter-spacing:-.044em; text-wrap:balance}
/* o span corta e guarda a versao apagada da palavra, o i carrega a acesa. Assim
   o acender e tween de OPACIDADE, composto pela GPU, e nao de cor, que forcaria
   repaint a cada quadro do scrub. */
.ponte__t .pw{position:relative; display:inline-block; overflow:hidden;
  color:rgba(11,27,49,.14)}
.ponte__t .pw::before{content:attr(data-w)}
.ponte__t .pw i{position:absolute; inset:0; font-style:normal; color:var(--tinta);
  will-change:transform, opacity}

.ponte__d{margin:clamp(22px,3vh,38px) auto 0; max-width:52ch;
  font-size:clamp(15.5px,1.12vw,18.5px); line-height:1.66; color:var(--tinta-mid)}

/* ============================================================== criterios
   Secao em BRUMA com card em PAPEL: a hero roda no gelo do body, entao repetir
   claro sobre claro aqui apagaria a divisa entre as duas. Com a bruma atras, o
   branco do card volta a significar "isto esta acima".

   As larguras sao 7/5 e depois 5/7. Nao e enfeite: o item mais largo de cada
   linha e o que carrega o desenho, e alternar o lado impede que a leitura desça
   sempre pela mesma margem, que e o que faz grade de card parecer template. */
/* A ponte entrega titulo e lede, entao o bloco comeca direto pela grade.

   A margem NEGATIVA sobe a grade por dentro da tela da ponte. Quando o pin
   solta, a metade de baixo daquela tela fica vazia embaixo do texto, que estava
   centralizado nela, e sem isso a grade so comecava depois de todo esse vazio.
   Nao da pra resolver encurtando o .ponte__in: ele precisa ter a tela inteira
   enquanto esta preso. */
.crit{margin-top:-15vh; padding-top:0}

.crit__grade{margin-top:0;
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(16px,1.5vw,26px)}

.crit__c{position:relative; grid-column:span 12;
  display:flex; flex-direction:column;
  padding:clamp(24px,2.3vw,40px);
  border-radius:20px; background:var(--papel);
  box-shadow:var(--sombra)}
.crit__c--7{grid-column:span 7}
.crit__c--5{grid-column:span 5}

.crit__t{margin-top:clamp(14px,1.6vh,20px);
  font-size:clamp(19px,1.45vw,25px); line-height:1.2; font-weight:600;
  letter-spacing:-.022em}
.crit__d{margin-top:12px; max-width:46ch;
  font-size:clamp(14.5px,1vw,16px); line-height:1.6; color:var(--tinta-mid)}

/* ------- 01: tres atendimentos convergindo para uma caixa ------- */
.crit__vis{margin-top:auto; padding-top:clamp(24px,3vh,38px);
  width:100%; max-width:470px; height:auto; overflow:visible}
.crit__linha path{fill:none; stroke:rgba(11,27,49,.16); stroke-width:1.4}
.crit__luz path{fill:none; stroke:var(--azul); stroke-width:2; stroke-linecap:round}
/* A regra e do QUADRO, nao de todo rect dentro dele. Sem a classe ela tambem pegava
   o <rect> de dentro do glifo do Instagram, que e o quadrado externo da marca, e
   pintava ele com o cinza do quadro: a logo ficava quase invisivel. */
.crit__tile{fill:var(--gelo); stroke:rgba(11,27,49,.09); stroke-width:1}
/* o logotipo e traco, nao preenchimento: assim ele acompanha a mesma linguagem dos
   icones do resto da pagina e nao vira mancha em 18px */
.crit__gl{fill:none; stroke:var(--azul); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round}
/* o rect do glifo herda o traco da marca, e nunca o preenchimento do quadro */
.crit__gl rect{fill:none; stroke:var(--azul)}
.crit__caixa{fill:var(--azul-veu); stroke:rgba(0,131,250,.26); stroke-width:1.2}
.crit__row rect{fill:var(--azul); opacity:.30}
.crit__row rect:nth-child(2){opacity:.5}

/* ------- 02: o numero e o argumento ------- */
.crit__c--dia{overflow:hidden}
.crit__dia{margin:auto 0 0; padding-top:clamp(20px,2.6vh,32px);
  display:flex; align-items:baseline; gap:12px; color:var(--azul)}
.crit__dia b{font-size:clamp(72px,8vw,132px); line-height:.82; font-weight:400;
  letter-spacing:-.06em}
.crit__dia span{font-size:clamp(17px,1.3vw,22px); font-weight:600;
  letter-spacing:-.02em; color:rgba(11,27,49,.5)}

/* ------- 03: mini pipeline, a etiqueta viaja junto com o negocio ------- */
.crit__pipe{position:relative; margin:auto 0 0; padding-top:clamp(26px,3.2vh,40px);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.cp__col{min-height:104px; border-radius:14px; background:var(--gelo);
  border:1px solid rgba(11,27,49,.07); padding:11px 12px;
  transition:background-color .5s var(--e), border-color .5s var(--e)}
.cp__col span{display:block; font-size:12px; font-weight:700;
  letter-spacing:.02em; color:rgba(11,27,49,.44)}
/* a ultima coluna e o destino, entao ela nasce marcada em verde fraco: sem isso
   o percurso nao tem fim visivel e o negocio parece so passear */
.cp__col:last-child{background:rgba(0,167,104,.11); border-color:rgba(0,167,104,.28)}
.cp__col:last-child span{color:#0C8158}
/* a coluna de destino responde quando o negocio chega nela. A classe vem do JS,
   no momento do pouso, e nao de um :nth-child cravado. */
.cp__col[data-aqui="1"]{background:var(--azul-veu); border-color:rgba(0,131,250,.3)}
.cp__col:last-child[data-aqui="1"]{background:rgba(0,167,104,.14);
  border-color:rgba(0,167,104,.34)}

/* o negocio e absoluto DENTRO do pipeline: e o JS que le a posicao real de cada
   coluna e o move ate ela */
.cp__neg{position:absolute; left:0; top:0;
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 12px; border-radius:999px;
  background:var(--papel); border:1px solid rgba(0,131,250,.28);
  box-shadow:0 1px 2px rgba(11,27,49,.05), 0 10px 22px -12px rgba(11,27,49,.3);
  font-size:12px; font-weight:600; letter-spacing:-.005em; white-space:nowrap}
.cp__neg svg{width:13px; height:13px; color:var(--azul)}

/* ------- 04: onda de audio e as linhas do resumo ------- */
.crit__aud{margin:auto 0 0; padding-top:clamp(24px,3vh,38px);
  display:grid; gap:16px}
/* Barras de altura variavel em SVG. A onda TOCA sempre, amplitude baixa e ciclo
   longo, e o card avisa quando sai da tela pra animacao nao rodar sem ninguem ver.
   No hover ela ganha amplitude, em vez de comecar do zero. */
.crit__onda{display:block; width:100%; max-width:430px; height:52px}
.crit__onda rect{fill:var(--azul); opacity:.5;
  transform-box:fill-box; transform-origin:50% 50%;
  animation:pnOnda 1.5s var(--e) infinite;
  animation-delay:calc(var(--i) * 42ms)}
@keyframes pnOnda{0%,100%{transform:scaleY(.62)}50%{transform:scaleY(1.1)}}
.crit__c:hover .crit__onda rect{animation-duration:1.05s}
.crit__c[data-vivo="0"] .crit__onda rect{animation-play-state:paused}
.crit__linhas{display:grid; gap:9px}
.crit__linhas i{display:block; height:7px; border-radius:3.5px;
  background:rgba(11,27,49,.11)}
.crit__linhas i:nth-child(1){width:72%}
.crit__linhas i:nth-child(2){width:88%}
.crit__linhas i:nth-child(3){width:44%}

/* ------- 05: o relatorio, ocupando a linha inteira -------
   Ele e largo porque o argumento e "tudo num lugar so": quatro metricas apertadas
   num card estreito diriam o contrario da frase. */
.crit__c--rel{grid-column:span 12; flex-direction:row; align-items:center;
  gap:clamp(26px,3.4vw,72px); flex-wrap:wrap}
.crit__relT{flex:1 1 380px; min-width:0}
.crit__c--rel .crit__d{max-width:52ch}

.crit__painel{flex:1 1 420px; min-width:0;
  padding:clamp(18px,1.8vw,26px); border-radius:16px;
  background:var(--gelo); border:1px solid rgba(11,27,49,.07)}
/* o ponto pulsa porque "tempo real" e a promessa do card. Pausa quando o card sai
   da tela, como o resto das animacoes da pagina. */
.crit__ao{display:flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--azul-lo)}
.crit__ao i{width:7px; height:7px; border-radius:50%; background:var(--azul);
  animation:pulsaAo 1.9s var(--e) infinite}
@keyframes pulsaAo{0%,100%{opacity:1; transform:scale(1)}50%{opacity:.35; transform:scale(.72)}}
.crit__c--rel[data-vivo="0"] .crit__ao i{animation-play-state:paused}

.crit__nums{margin-top:clamp(14px,1.8vh,20px); display:grid; gap:11px}
.crit__nums li{display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-items:center; gap:14px}
.crit__nums b{font-size:13.5px; font-weight:600; letter-spacing:-.01em;
  color:var(--tinta-mid)}
/* a barra usa --v por item: ela diz que existe medida, sem afirmar valor */
.crit__barra{display:block; width:clamp(70px,9vw,132px); height:6px;
  border-radius:3px; background:rgba(11,27,49,.08); overflow:hidden}
.crit__barra::before{content:""; display:block; height:100%; width:var(--v,50%);
  border-radius:3px; background:var(--azul); opacity:.55}

/* ------------------------------------------------- vida dos cards
   Duas camadas de movimento, e nenhuma delas roda sozinha na tela: entrada no
   scroll, uma vez, e reacao ao ponteiro. Card que se mexe sem ninguem pedir
   compete com a leitura, e a pagina inteira ja evita isso.

   O que reage e o DESENHO de dentro de cada card, e nao um efeito generico igual
   pra todos: e isso que faz o hover parecer parte do card e nao verniz. */
.crit__c{transition:transform .5s var(--e), box-shadow .5s var(--e)}
.crit__c:hover{transform:translateY(-5px); box-shadow:var(--sombra-alta)}

/* 01: os tres atendimentos avancam pro centro e as linhas da caixa acendem em
   sequencia, ou seja o desenho executa o que o titulo diz */
.crit__mk{transition:transform .55s var(--e)}
.crit__c:hover .crit__mk{transform:translateX(10px)}
.crit__row rect{transition:opacity .5s var(--e)}

/* 01: os tres atendimentos avancam pro centro e as linhas da caixa acendem */
.crit__mk{transition:transform .55s var(--e)}
.crit__c:hover .crit__mk{transform:translateX(10px)}
.crit__row rect{transition:opacity .5s var(--e)}

/* 02: o numero cresce a partir da base, ancorado onde ele encosta na palavra */
.crit__dia b{transition:transform .55s var(--e); transform-origin:0% 100%}
.crit__c:hover .crit__dia b{transform:scale(1.06)}



/* entrada no scroll: o estado inicial vem do JS, para a secao continuar visivel
   se o GSAP nao carregar */
.crit__c{will-change:transform}

@media (max-width:1140px){
  .crit__c--7,.crit__c--5{grid-column:span 6}
}
@media (max-width:760px){
  .crit__c--7,.crit__c--5{grid-column:span 12}
  .crit__d{max-width:none}
  .crit__dia b{font-size:clamp(64px,20vw,96px)}
  /* Pipeline em PE no celular. Em tres colunas cada uma tem ~100px e o chip do
     negocio tem ~130px, entao ele vazava por cima da coluna vizinha. Encolher a
     etiqueta nao resolve, "black-b2b" e o dado. Como o JS le a posicao real de
     cada celula, virar linha nao pede mudanca nenhuma no percurso. */
  .crit__pipe{grid-template-columns:minmax(0,1fr); gap:8px}

  /* empilhado, flex-basis trocaria de eixo e viraria altura minima, abrindo vazio
     dentro do card. Ja aconteceu no card navy que existia aqui. */
  .crit__c--rel{flex-direction:column; align-items:stretch}
  .crit__relT,.crit__painel{flex:0 1 auto}
  .crit__c--rel .crit__d{max-width:none}
  .crit__c--rel .crit__t{text-wrap:balance}
}


/* --------------------------------------------------- cores das plataformas
   As marcas aparecem em tres lugares: o nome na h1, a roleta da cena e os quatro
   tiles do card 01. A cor mora AQUI, num lugar so, e cada peca se identifica por
   data-pl. Repetir hexadecimal no markup de tres arquivos e como se perde o
   controle de cor de marca.

   Verde, azul, magenta e o par ciano/rosa sao as cores oficiais das quatro. Nenhuma
   delas passa no contraste de texto pequeno sobre branco, entao elas ficam so no
   nome grande da h1 e em desenho, nunca em texto corrido. */
:root{
  --pl-wa:#25D366;   --pl-wa-fraca:rgba(37,211,102,.34);
  --pl-ig:#D62976;   --pl-ig-fraca:rgba(214,41,118,.32);
  --pl-fb:#1877F2;   --pl-fb-fraca:rgba(24,119,242,.32);
  --pl-tt:#FE2C55;   --pl-tt-fraca:rgba(254,44,85,.32);
}

/* ------- o nome na h1 -------
   WhatsApp e Facebook tem cor unica. Instagram e TikTok sao gradiente, entao o
   texto recebe o degrade como fundo e vira janela dele com background-clip.

   O padding-right existe por causa do clip: sem ele, o gradiente termina no avanco
   da ultima letra e o tracking negativo do .d1 corta a tinta do k e do m. */
.rod i[data-pl="whatsapp"]{color:var(--pl-wa)}
.rod i[data-pl="facebook"]{color:var(--pl-fb)}
.rod i[data-pl="instagram"]{
  color:transparent; -webkit-text-fill-color:transparent;
  background-clip:text; -webkit-background-clip:text;
}
.rod i[data-pl="instagram"]{
  background-image:linear-gradient(72deg,#FEDA75 0%,#FA7E1E 22%,#D62976 52%,#962FBF 76%,#4F5BD5 100%);
}
/* TikTok NAO e degrade de ciano para rosa. O logotipo e a letra escura com uma
   copia ciano deslocada para um lado e uma rosa para o outro, aquele efeito de
   registro fora de esquadro. Pintar a palavra com a mistura das duas cores de
   contorno joga fora justamente a cor principal da marca.

   Entao a letra fica na tinta da pagina e as duas cores viram sombra deslocada. O
   deslocamento e em em, nao em px, porque o corpo da h1 sai de um clamp com vw: em
   px ele seria grosseiro no desktop e sumiria no celular. */
.rod i[data-pl="tiktok"]{
  color:var(--tinta); -webkit-text-fill-color:var(--tinta);
  text-shadow:-.028em -.02em 0 #25F4EE, .028em .02em 0 #FE2C55;
}

/* ------- a roleta da cena -------
   So a fileira acesa recebe cor: a de baixo continua cinza, senao o sorteio nao le
   como sorteio e vira uma fileira de logos colorida passando.

   Aqui a cor e chapada mesmo no Instagram e no TikTok: o quadro tem 16px, e nessa
   medida gradiente nao se distingue de cor unica, so custa mais para pintar. */
.rl__t--on .rl__c[data-pl="whatsapp"]{color:var(--pl-wa); border-color:var(--pl-wa-fraca)}
.rl__t--on .rl__c[data-pl="instagram"]{color:var(--pl-ig); border-color:var(--pl-ig-fraca)}
.rl__t--on .rl__c[data-pl="facebook"]{color:var(--pl-fb); border-color:var(--pl-fb-fraca)}
/* TikTok escuro tambem aqui, pelo mesmo motivo da h1: escuro E a cor da marca. E
   ele acende igual, porque a fileira apagada esta em 30% de opacidade, entao a
   passagem de cinza fraco para tinta cheia le como acender do mesmo jeito. */
.rl__t--on .rl__c[data-pl="tiktok"]{color:var(--tinta); border-color:rgba(11,27,49,.26)}
.rl__t--on .rl__c{background:#fff}

/* ------- os quatro tiles do card 01 -------
   Aqui o icone tem tamanho para mostrar gradiente, entao Instagram e TikTok usam os
   degrades de verdade, definidos no <defs> do proprio svg.

   Os FIOS continuam azuis: eles sao o caminho ate a caixa, nao a marca, e o pulso
   que corre por eles e o acento da pagina. */
.crit__mk[data-pl="whatsapp"] .crit__gl,
.crit__mk[data-pl="whatsapp"] .crit__gl rect{stroke:var(--pl-wa)}
.crit__mk[data-pl="facebook"] .crit__gl,
.crit__mk[data-pl="facebook"] .crit__gl rect{stroke:var(--pl-fb)}
.crit__mk[data-pl="instagram"] .crit__gl,
.crit__mk[data-pl="instagram"] .crit__gl rect{stroke:url(#mkIG)}
/* No tile o icone tem uns 17px na tela, e nessa medida a franja deslocada do
   TikTok viraria borrao de meio pixel em vez de logotipo. Entao aqui fica so a cor
   principal, que e a escura. O degrade ciano-rosa que estava aqui era a mistura das
   duas cores de contorno, ou seja a unica leitura que a marca nao tem. */
.crit__mk[data-pl="tiktok"] .crit__gl,
.crit__mk[data-pl="tiktok"] .crit__gl rect{stroke:var(--tinta)}

/* ============================================================== anuncios
   Tres cards de mesma largura, que e o arranjo da secao original. O acabamento e o
   nosso: card em gelo sobre secao em papel, canto de 20, sombra de contato azulada
   e o CTA no mesmo padrao de rotulo mais ficha do resto da pagina. */
/* Cabecalho CENTRADO, como na secao original. O container abre mais que os outros
   porque o h2 aqui e centrado: com o teto estreito, o mesmo corpo de texto quebra
   em mais linhas e a frase perde forca. */
.an__topo{max-width:min(1000px, 90%); margin-inline:auto; text-align:center}
/* headline e sub ficam no padrao da pagina, .d2 e o mesmo corpo das outras secoes.
   A reducao de escala desta secao vale para card, CTA e espacamento, nao para elas. */
.an__t{margin-top:clamp(14px,1.8vh,24px); max-width:22ch; margin-inline:auto}
.an__l{margin-top:clamp(18px,2.2vh,30px); margin-inline:auto; max-width:62ch;
  font-size:clamp(15.5px,1.12vw,18.5px); line-height:1.62; color:var(--tinta-mid);
  text-wrap:balance}
.an__l strong{font-weight:600; color:var(--tinta)}

.an__grade{margin-top:clamp(32px,4.2vh,58px);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2vw,34px)}

.an__c{display:flex; flex-direction:column; overflow:hidden;
  border-radius:20px; background:var(--gelo);
  border:1px solid rgba(11,27,49,.07); box-shadow:var(--sombra);
  transition:transform .5s var(--e), box-shadow .5s var(--e)}
.an__c:hover{transform:translateY(-5px); box-shadow:var(--sombra-alta)}

.an__tx{padding:clamp(20px,2vw,30px) clamp(20px,2vw,30px) clamp(17px,1.9vh,24px)}
.an__ct{font-size:clamp(16.5px,1.22vw,20px); line-height:1.24; font-weight:600;
  letter-spacing:-.02em}
.an__cd{margin-top:9px; font-size:clamp(13.5px,.92vw,14.5px); line-height:1.6;
  color:var(--tinta-mid)}

/* O clipe fecha o card e encosta nas tres bordas: 1122x388 exibido inteiro daria
   uma tira de 150px de altura dentro de um card de 500, e a tira nao le como tela.
   Em 16/10 o video entra a 0,71 de escala e mostra a metade esquerda do painel.

   object-position no canto superior esquerdo, e nao no centro: e onde mora o
   conteudo que a legenda de cada card promete, e o rodape dos painéis nao entra. */
.an__q{margin-top:auto; aspect-ratio:16 / 10; overflow:hidden;
  background:var(--papel); border-top:1px solid rgba(11,27,49,.06)}
.an__q video{display:block; width:100%; height:100%;
  object-fit:cover; object-position:0 0}

/* botao e nota empilhados e centrados: lado a lado, a nota e mais larga que o
   botao e puxa o par pra esquerda do eixo, entao o conjunto le como desalinhado
   mesmo estando centrado. */
.an__pe{margin-top:clamp(28px,3.6vh,46px); display:grid; justify-items:center;
  gap:clamp(12px,1.6vh,18px)}
.an__nota{font-size:13px; color:var(--tinta-mid); text-align:center}

@media (max-width:1040px){
  .an__topo{max-width:none}
  .an__t{max-width:none}
  .an__grade{grid-template-columns:repeat(2,minmax(0,1fr))}
  .an__c:last-child{grid-column:1 / -1}
  /* O clipe de UTM e 450x280 nativo, e nao a tira larga que estava aqui antes.
     Espalhado por uma faixa de mil pixels o cover ampliaria ele 2,2 vezes e o
     painel viraria borrao, entao neste ponto ele para de preencher: fica no
     tamanho real, centrado, sobre o papel do proprio card. */
  .an__c:last-child .an__q{aspect-ratio:auto; height:300px;
    display:grid; place-items:center; background:var(--gelo)}
  /* o campo em gelo e o que faz a sobra dos lados ler como moldura e nao como
     falha: clipe branco centrado num card branco parece imagem que nao carregou */
  .an__c:last-child .an__q video{width:auto; max-width:100%; height:100%;
    object-fit:contain; object-position:center; border-radius:10px;
    box-shadow:0 1px 2px rgba(11,27,49,.06), 0 10px 24px -14px rgba(11,27,49,.22)}
}
@media (max-width:660px){
  .an__grade{grid-template-columns:minmax(0,1fr)}
  .an__c:last-child{grid-column:auto}
  .an__c:last-child .an__q{aspect-ratio:16 / 10; height:auto; display:block}
  .an__c:last-child .an__q video{width:100%; height:100%;
    object-fit:cover; object-position:0 0}
  .an__pe .btn{width:100%; justify-content:center}
}

/* =========================================================== depoimentos
   A prova do argumento da pagina. Como o termo trabalhado e "mais bem avaliado",
   esta e a secao que sustenta a nota, e ela precisa de presenca de secao inteira,
   nao de um rodape de aspas.

   Duas colunas, e nao fileira de tres. Coluna estreita a esquerda com o cabecalho e
   a fala que resume tudo; coluna larga a direita com os tres depoimentos colhidos.
   Tres cards iguais lado a lado darao sempre a mesma leitura de fileira, e aqui a
   hierarquia importa, porque a primeira fala e a que vale por todas.

   O cabecalho fica DENTRO da coluna da esquerda, e nao atravessado no topo. Assim as
   duas colunas comecam na mesma linha e a esquerda enche a propria altura em vez de
   deixar um vao morto embaixo da citacao.

   A fala destacada nao ganha card: fundo proprio ali competiria com os tres da
   direita e o conjunto viraria quatro caixas. Sem moldura ela le como voz, e os
   cards como depoimento colhido. */
.depo .wrap{display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6.1fr);
  column-gap:clamp(40px,4.6vw,92px); row-gap:clamp(26px,3.2vh,44px);
  align-items:start}

.dp__topo{grid-column:1; grid-row:1; display:grid; gap:14px}

/* ------- a fala que abre -------
   Ela e a voz da secao, entao carrega o corpo grande e a aspa solta em cima. */
.dp__destaque{grid-column:1; grid-row:2; margin:0;
  display:grid; gap:clamp(20px,2.6vh,32px)}

/* A aspa e desenhada com o proprio tipo, em corpo grande e no azul da marca: ela
   marca o inicio da citacao sem virar icone e sem pedir arquivo. */
.dp__destaque::before{content:"“"; display:block;
  font-size:clamp(54px,4.4vw,80px); line-height:.58; color:var(--azul);
  opacity:.2; margin-bottom:clamp(-12px,-.9vw,-6px)}

/* Corpo menor e com peso.
   Antes ela ia a 38px no peso 400, e nesse tamanho a articulat-cf fica com haste
   fina demais: cinco linhas de titulo magro pedem esforco pra ler, porque o olho
   trata como display e o texto e para ser LIDO, nao escaneado.

   O kit entrega de 200 a 900, entao o 500 e peso real e nao engrossado pelo
   navegador. Trinta pixels no 500 tem a mesma presenca com metade do esforco. */
.dp__destaque blockquote{margin:0; font-size:clamp(20.5px,1.95vw,30px);
  font-weight:500; line-height:1.22; letter-spacing:-.024em; text-wrap:balance}

/* A enfase e curta de proposito. Espalhada por duas linhas, o azul deixa de ser
   acento e passa a ler como link no meio da frase. Ela acompanha o peso do resto:
   mais leve que a frase, o acento viraria buraco. */
.dp__destaque blockquote b{font-weight:inherit; color:var(--azul)}

/* ------- os tres colhidos -------
   A fala aqui e o conteudo principal do card, e nao legenda: corpo acima do
   texto corrido da pagina, entrelinha fechada e aspas de verdade nas pontas.

   Sem as aspas, tres frases em cinza-tinta dentro de um card branco leem como
   descricao de funcionalidade, que e exatamente o que a secao NAO esta dizendo.

   A aspa de abertura fica pendurada para fora com recuo negativo na primeira
   linha, entao a coluna de texto continua alinhada com o retrato embaixo. */
.dp__grade{grid-column:2; grid-row:1 / span 2;
  display:grid; gap:clamp(14px,1.6vh,20px)}

.dp__c{margin:0; padding:clamp(24px,2.1vw,34px); border-radius:20px;
  background:var(--papel); border:1px solid rgba(11,27,49,.07);
  box-shadow:var(--sombra);
  display:grid; gap:clamp(18px,2vh,24px);
  transition:transform .5s var(--e), box-shadow .5s var(--e)}
.dp__c:hover{transform:translateY(-4px); box-shadow:var(--sombra-alta)}

.dp__c blockquote{margin:0; font-size:clamp(17px,1.34vw,21px);
  line-height:1.4; letter-spacing:-.022em;
  text-indent:-.34em; text-wrap:balance}
/* As aspas precisam de corpo proprio. No tamanho do texto, o desenho delas nesta
   fonte sai com uns cinco pixels e encostado no topo da linha, e ai nao leem como
   aspas, leem como virgula perdida. Ampliadas e baixadas, viram pontuacao.
   line-height:0 impede que o corpo maior empurre a primeira linha do bloco. */
.dp__c blockquote::before,
.dp__c blockquote::after{font-size:1.42em; line-height:0;
  vertical-align:-.18em; color:var(--azul); opacity:.5}
.dp__c blockquote::before{content:"“"}
.dp__c blockquote::after{content:"”"; margin-left:.02em}

/* ------- quem falou -------
   Nome com peso, funcao em versalete espacado. O versalete e o que separa a
   assinatura da fala sem precisar de fio nem de segunda cor forte.

   Os arquivos de retrato sao MARCACAO, e a linha de baixo diz qual campo falta:
   nome real com foto real e o unico jeito de esta secao valer alguma coisa. */
.depo figcaption{display:flex; align-items:center; gap:14px}
.depo figcaption span{display:grid; gap:3px; min-width:0}
.depo figcaption b{font-size:15px; font-weight:600; letter-spacing:-.014em;
  line-height:1.2}
.depo figcaption i{font-style:normal; font-size:12px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; line-height:1.2;
  color:rgba(11,27,49,.46)}

.dp__foto{flex:none; width:46px; height:46px; border-radius:50%;
  object-fit:cover; background:var(--azul-veu);
  box-shadow:0 0 0 1px rgba(11,27,49,.08)}
.dp__c .dp__foto{width:40px; height:40px}

@media (max-width:1040px){
  /* Coluna unica: cabecalho, a fala grande e os tres cards em fila, todos com a
     mesma largura.

     O arranjo anterior era duas colunas com o terceiro card atravessando a linha,
     e isso dava a ele o dobro da largura dos outros dois. O card de menor peso
     terminava sendo o mais largo da tela, competindo com a fala que abre.

     A largura e limitada porque o card acompanharia a coluna inteira: a mil pixels
     a fala de 21px passaria de noventa caracteres por linha e deixaria de ser
     citacao pra virar paragrafo. */
  .depo .wrap{grid-template-columns:minmax(0,1fr)}
  .dp__topo, .dp__destaque, .dp__grade{grid-column:1; grid-row:auto}
  .dp__destaque{max-width:760px}
  .dp__grade{grid-template-columns:minmax(0,1fr); max-width:680px}
}

/* ============================================================== alavanca
   Secao com fundo pixelado. O azul e o fundo REAL da secao e o conteudo vive em
   cima dele; o que se desfaz e uma placa branca por cima dos dois.

   overflow:clip e obrigatorio: os pixels da borda passam do quadro para nao ficarem
   cortados pela metade, e sem o clip eles vazariam para as secoes vizinhas. */
.pxs{position:relative; overflow:clip; color:#fff;
  background:linear-gradient(148deg, var(--azul) 0%, var(--azul-lo) 62%, #004E9B 100%)}
.pxs__in{position:relative; z-index:1}

/* ------- a afirmacao -------
   Ela e o h2 da secao. O rotulo em mono que ficava acima saiu, e promover a frase a
   titulo resolve o cabecalho e a hierarquia de uma vez.

   Duas camadas por linha: o span CORTA e o i se move. E o span que recebe o
   clip-path da revelacao da esquerda para a direita, entao o texto entra por tras de
   uma borda que anda, em vez de aparecer inteiro de uma vez. */
.pxs__grande{margin:0;
  font-size:clamp(32px,6.1vw,104px); line-height:1.16; font-weight:400;
  letter-spacing:-.046em; color:#fff}
.pxs__grande span{display:block}
.pxs__grande i{display:block; font-style:normal}

/* So "convertendo" inverte a cor. Com a linha inteira em branco a placa ocupava
   1500 dos 1584px do container: era faixa, nao destaque. */
/* A caixa vinha com a entrelinha herdada de 1,16, e nela metade do espaco extra
   fica ACIMA das maiusculas: sobrava testa e a base encostava nas letras. Com
   line-height 1 a caixa abraca o texto, e o padding decide a folga.

   O padding e assimetrico de proposito. Medido na tela: com .13 em cima e .12
   embaixo, a folga acima do 'd' ficava 40% maior que a do baseline, porque o topo da
   caixa acompanha o ascendente da fonte e nao a letra. .09 em cima e .16 embaixo
   equilibra o que o olho ve. */
.pxs__real{display:inline-block; font-weight:400; line-height:1;
  padding:.09em .2em .16em; border-radius:.08em;
  background:#fff; color:var(--azul-lo)}

/* ------- os apoios -------
   Eles ganham SUPERFICIE. Antes eram icone, titulo e linha soltos sobre o azul, e
   tres blocos de texto sem moldura no meio de um campo de cor nao se separam: leem
   como um paragrafo em tres colunas.

   A superficie e translucida, nao branca: o azul continua atravessando, entao os
   apoios pertencem ao cartaz em vez de virarem tres cartoes colados em cima dele. */
.pxs__ganhos{margin-top:clamp(44px,6vh,96px);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.6vw,26px)}
.pxs__ganhos li{display:flex; flex-direction:column;
  padding:clamp(20px,1.9vw,30px);
  border-radius:18px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.17);
  transition:background-color .45s var(--e), transform .45s var(--e)}
.pxs__ganhos li:hover{background:rgba(255,255,255,.15); transform:translateY(-3px)}

.pxs__ico{display:grid; place-items:center; width:40px; height:40px;
  border-radius:12px; color:var(--azul-lo);
  background:#fff}
.pxs__ico svg{width:21px; height:21px}
.pxs__ganhos b{display:block; margin:clamp(16px,2vh,22px) 0 7px;
  font-size:clamp(15.5px,1.15vw,19px); line-height:1.24; font-weight:600;
  letter-spacing:-.018em; text-wrap:balance}
.pxs__d{font-size:clamp(13.5px,.94vw,15px); line-height:1.56;
  color:rgba(255,255,255,.76)}

/* ------- a placa que se desfaz -------
   Cada pixel e um quadrado branco opaco. Eles cobrem a secao inteira e depois
   encolhem e somem, em ordem, abrindo vao entre um e outro. E o vao que aparecendo
   faz a leitura de pixelacao. */
.pxs__placa{position:absolute; inset:0; z-index:4; pointer-events:none}
.pxs__px{position:absolute; background:var(--gelo); contain:paint}

@media (max-width:1040px){
  .pxs__ganhos{grid-template-columns:minmax(0,1fr); gap:clamp(26px,3.6vh,36px)}
  .pxs__ico{width:40px; height:40px; border-radius:12px}
  .pxs__ico svg{width:20px; height:20px}
}
@media (max-width:560px){
  /* em 390px a afirmacao ja quebra sozinha dentro de cada linha, entao o display
     block por span deixaria seis linhas em vez de tres */
  .pxs__grande{letter-spacing:-.038em}
  .pxs__real{padding:.04em .22em .08em}
}

/* ============================================================= perguntas
   Accordion em <details> nativo. Cada item e uma SUPERFICIE com canto e fundo, e
   nao uma linha com fio embaixo: e a diferenca entre bloco de conteudo e tabela.

   O fechado usa gelo e o aberto usa papel com sombra, entao o item que esta aberto
   fica visivelmente ACIMA dos outros, sem precisar de moldura extra. */
/* Duas colunas: a esquerda fica presa enquanto a lista corre a direita. A coluna e
   mais estreita que a lista porque quem manda na altura da secao e a lista, e o
   titulo mora no lado curto.

   O top do sticky soma a altura do rail: sem isso o titulo para atras do header
   fixo quando a secao passa por ele. */
.pg__in{display:grid; gap:clamp(30px,4.4vw,86px);
  grid-template-columns:minmax(0,.62fr) minmax(0,1fr); align-items:start}
.pg__fix{position:sticky; top:calc(var(--rail) + clamp(30px,6vh,80px))}
.pg__t{max-width:19ch; text-wrap:balance}
.pg__l{margin-top:clamp(16px,2vh,26px); max-width:34ch;
  font-size:clamp(15px,1.05vw,17px); line-height:1.62}

.pg__lista{display:grid; gap:clamp(10px,1.2vh,14px)}

.pg__i{border-radius:18px; background:var(--gelo);
  border:1px solid rgba(11,27,49,.07);
  transition:background-color .45s var(--e), box-shadow .45s var(--e),
             border-color .45s var(--e)}
.pg__i[open]{background:var(--papel); box-shadow:var(--sombra);
  border-color:rgba(11,27,49,.05)}

.pg__q{display:flex; align-items:center; justify-content:space-between;
  gap:clamp(16px,2vw,32px);
  padding:clamp(17px,2.1vh,25px) clamp(19px,2.1vw,32px);
  cursor:pointer; list-style:none}
/* o triangulo padrao do details sai nos dois motores */
.pg__q::-webkit-details-marker{display:none}
.pg__q::marker{content:""}
.pg__h{margin:0; font-size:clamp(15.5px,1.25vw,20px); line-height:1.3;
  font-weight:600; letter-spacing:-.02em; text-wrap:balance;
  transition:color .4s var(--e)}
.pg__i:hover .pg__h{color:var(--azul-lo)}

/* mais que vira menos: a barra vertical gira para deitar sobre a horizontal */
.pg__mais{position:relative; flex:none; width:30px; height:30px;
  border-radius:999px; background:rgba(11,27,49,.06);
  transition:background-color .45s var(--e)}
.pg__mais::before,.pg__mais::after{content:""; position:absolute;
  left:50%; top:50%; width:11px; height:1.8px; border-radius:2px;
  background:var(--tinta); transform:translate(-50%,-50%);
  transition:transform .45s var(--e), background-color .45s var(--e)}
.pg__mais::after{transform:translate(-50%,-50%) rotate(90deg)}
.pg__i[open] .pg__mais{background:var(--azul)}
.pg__i[open] .pg__mais::before,.pg__i[open] .pg__mais::after{background:#fff}
.pg__i[open] .pg__mais::after{transform:translate(-50%,-50%) rotate(0deg)}

/* a caixa da resposta e quem o JS anima em altura. overflow:hidden e o que permite
   a altura ir a zero sem o texto vazar durante o fechamento. */
.pg__cx{overflow:hidden}
.pg__r{padding:0 clamp(19px,2.1vw,32px) clamp(20px,2.4vh,28px);
  max-width:72ch; font-size:clamp(14.5px,1vw,16.5px); line-height:1.66;
  color:var(--tinta-mid)}

@media (max-width:960px){
  /* Uma coluna, e o titulo deixa de ser preso: com a lista embaixo dele, prender
     faria o titulo ficar colado no topo atravessando as seis perguntas. */
  .pg__in{grid-template-columns:minmax(0,1fr); gap:clamp(26px,4vh,38px)}
  .pg__fix{position:static}
  .pg__t{max-width:22ch}
  .pg__l{max-width:46ch}
  .pg__r{max-width:none}
}

/* ================================================================= falar
   Unico bloco em navy cheio. Ele fecha a pagina, entao a inversao de tom marca
   "aqui a leitura termina e a acao comeca". */
.fl__in{display:grid; gap:clamp(34px,4.6vw,90px);
  grid-template-columns:minmax(0,.86fr) minmax(0,1fr); align-items:start}
.falar h2{max-width:18ch}
.fl__l{margin-top:clamp(18px,2.2vh,28px); max-width:44ch;
  font-size:clamp(15.5px,1.1vw,17.5px); line-height:1.64; color:var(--on-ink-mute)}

/* o que acontece depois de enviar. Numerado porque a duvida real de quem
   preenche formulario e "e agora?", e nao mais um argumento de venda */
.fl__passos{margin-top:clamp(28px,3.6vh,44px); display:grid; gap:14px}
/* Sem ordinal: a sequencia ja esta no proprio texto, e o numerinho em mono era o
   mesmo motivo que saiu dos cards. O que marca cada passo agora e um ponto, que
   pertence a lista e nao pretende ser dado. */
.fl__passos li{position:relative; padding-left:20px;
  font-size:clamp(14px,1vw,15.5px); line-height:1.5; color:var(--on-ink)}
.fl__passos li::before{content:""; position:absolute; left:0; top:.55em;
  width:6px; height:6px; border-radius:50%; background:var(--azul-hi)}

/* ------- formulario -------
   Ele agora e um CARD BRANCO sobre o navy. Antes os campos eram caixas translucidas
   em cima do escuro, e nesse contraste um campo vazio nao se distingue do fundo: a
   pessoa nao sabe onde clicar nem quantos campos existem.

   O card tambem separa as duas metades da secao: a esquerda argumenta, a direita
   coleta. Sem superficie propria, as duas eram o mesmo bloco de texto. */
.fl__form{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.4vw,20px);
  padding:clamp(24px,2.6vw,40px); border-radius:24px;
  background:var(--papel);
  box-shadow:0 2px 8px rgba(2,16,38,.2), 0 40px 80px -34px rgba(2,16,38,.6)}
.fl__c{display:grid; gap:7px; min-width:0}
.fl__c--w{grid-column:1 / -1}
.fl__c label{font-size:12.5px; font-weight:600; letter-spacing:.005em;
  color:var(--tinta-mid)}
.fl__c label span{font-weight:400; color:rgba(11,27,49,.42)}

/* campo em gelo dentro do card branco: o fundo levemente mais escuro que o card e
   o que faz a caixa existir sem precisar de borda grossa */
.fl__c input,.fl__c select,.fl__c textarea{
  width:100%; padding:13px 15px; border-radius:12px;
  font:inherit; font-size:15px; color:var(--tinta);
  background:var(--gelo);
  border:1px solid rgba(11,27,49,.10);
  transition:border-color .3s var(--e), background-color .3s var(--e),
             box-shadow .3s var(--e)}
.fl__c textarea{resize:vertical; min-height:84px; line-height:1.55}
.fl__c input::placeholder{color:rgba(11,27,49,.36)}
.fl__c input:focus,.fl__c select:focus,.fl__c textarea:focus{
  outline:none; border-color:var(--azul); background:var(--papel);
  box-shadow:0 0 0 3px rgba(0,131,250,.14)}

.fl__c select{appearance:none; -webkit-appearance:none; padding-right:40px;
  background-image:url("../img/seta-select.svg");
  background-repeat:no-repeat; background-position:right 15px center;
  background-size:12px 8px}
.fl__form[data-erro="1"] :invalid{border-color:rgba(220,38,52,.5);
  background:rgba(252,92,101,.05)}

.fl__pe{grid-column:1 / -1; display:grid; gap:12px;
  margin-top:clamp(4px,1vh,10px)}
.fl__pe .btn{width:100%; justify-content:center}
.fl__aviso{margin:0; font-size:13px; line-height:1.45; text-align:center;
  color:var(--tinta-mid)}
.fl__aviso[data-ok="1"]{color:#00764A}
.fl__aviso[data-ok="0"]{color:#C42631}
button.btn:disabled{opacity:.6; cursor:progress}

/* ================================================================ footer
   Navy mais fundo que o bloco de conversao: os dois sao escuros e vizinhos, e sem
   a diferenca de tom o rodape colaria na secao de cima. */
.pe{position:relative; z-index:2; background:var(--ink-2); color:var(--on-ink);
  padding-block:clamp(40px,5.4vh,70px)}
.pe__in{display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(18px,2.4vw,44px); justify-content:space-between}
.pe__marca img{display:block; height:24px; width:auto; max-width:none}
.pe__nav{display:flex; flex-wrap:wrap; gap:clamp(14px,1.8vw,30px)}
.pe__nav a{font-size:13.5px; color:var(--on-ink-mute);
  transition:color .35s var(--e)}
.pe__nav a:hover{color:var(--on-ink)}
.pe__c{flex:1 1 100%; margin:0; font-size:12.5px; color:rgba(143,166,196,.62)}

@media (max-width:960px){
  .pg__t{max-width:none}
  .pg__grade{grid-template-columns:minmax(0,1fr)}
  .pg__q,.pg__r{max-width:none}
  .fl__in{grid-template-columns:minmax(0,1fr)}
  .falar h2{max-width:none}
  .fl__l{max-width:none}
}
@media (max-width:560px){
  /* o formulario deixa de ser duas colunas: campo de 150px nao serve para
     telefone nem para nome */
  .fl__form{grid-template-columns:minmax(0,1fr); padding:clamp(20px,5vw,28px);
    border-radius:20px}
  .pe__in{flex-direction:column; align-items:flex-start; gap:22px}
}

@media (max-width:960px){
  .hero{min-height:auto; display:block;
    padding-bottom:clamp(240px,44vw,340px)}
  .hero__head{max-width:none}
  .hero__in{grid-template-columns:1fr; gap:0;
    padding-block:calc(var(--rail) + 26px) clamp(30px,5vh,52px)}
  .hero h1{max-width:none; text-wrap:balance}
  .hero__sub{max-width:46ch}
  .cena{top:auto; bottom:0; left:0; right:0;
    height:clamp(216px,42vw,320px)}
  .aviso{padding:7px 11px 8px}
  .aviso b{font-size:12.5px}
  .aviso i{font-size:12px}
}

@media (max-width:560px){
  /* Na largura de celular o lockup inteiro nao cabe ao lado do botao: a marca e
     recortada logo depois do M de CRM, que e a parte que identifica a pagina.
     5.97 e a razao largura/altura do trecho "MakeCRM" dentro do arquivo. */
  .hdr__marca{--marca-h:22px; width:calc(var(--marca-h) * 5.97)}

  .hero{padding-bottom:clamp(268px,66vw,340px)}
  .cena{height:clamp(230px,58vw,300px)}
  .aviso{padding:6px 10px 7px; border-radius:9px}
  .aviso b{font-size:12px}
  .aviso i{font-size:12px}
  .hero__cta{gap:10px}
  .hero__cta .btn{flex:1 1 auto; justify-content:center}
}