/* =========================================================================
   AKROS — Seção 6 · No ar em 4 passos

   Duas colunas: a trilha dos quatro passos à esquerda, e à direita um palco
   com DOIS aparelhos ao mesmo tempo — o celular e o computador.

   ---- por que os dois juntos, e não um virando o outro ----
   Cheguei a fazer um aparelho só que se deformava de celular em notebook.
   A forma era bonita e o argumento, pela metade: em qualquer instante só
   metade da história estava na tela. O que a seção precisa provar é a
   RELAÇÃO — a mensagem que chega no celular vira lead, score, fase e
   proposta no CRM, na mesma hora. Isso só se prova com os dois visíveis:
   um é a causa, o outro é o efeito, e o valor está no fato de acontecerem
   juntos. Separadamente, o celular é uma conversa qualquer e o painel é uma
   tela qualquer.

   ---- o que foi reaproveitado, e não redesenhado ----
   A moldura dos dois aparelhos fala a linguagem do celular da seção 2
   (pipeline.css): degradê de titânio, notch, barra de gesto, raio
   concêntrico entre corpo e tela. A conversa usa `.wa-head`, `.thread`,
   `.msg` e `.typing` daquele arquivo, sem uma linha nova. A trilha usa
   `.ato` de estudio.css e a grade usa `.feature`.

   ---- a matemática do palco ----
   `--H` é a altura TOTAL, igual para os dois, e sai do menor entre o que a
   largura permite e o que a altura permite. Todas as outras medidas — a
   largura de cada um, a moldura, o raio, o notch — derivam dela. Por isso
   nada aqui tem pixel cravado e nenhuma proporção pode quebrar por acidente:
   com uma medida só, não há duas para brigarem.
   ========================================================================= */

/* O chão desta seção mora em `bandas.css`, que carrega por último: ela é a
   faixa BRANCA logo depois do azul-noite da seção 5 — a troca mais forte da
   página, e a única que dispensa fio na emenda. A tinta clara que havia aqui
   quase apagava a aura azul do palco; sobre branco ela vira o único colorido
   da seção, e é ela que diz qual dos dois aparelhos está agindo. */

/* O rodapé some no desktop, e isso é medida, não descuido: o menu é fixo e
   cobre os 68px do topo, então a área que o leitor de fato vê começa ABAIXO
   dele. Com recuo embaixo o miolo fica mais perto do pé do que do menu, e o
   bloco parece afundado sem que se saiba dizer por quê. */
@media (min-width:1181px){
  #implanta{padding-bottom:0}
}

/* A coluna do texto é mais estreita que a das seções 2 e 3: aqui o palco
   precisa de LARGURA (são dois aparelhos lado a lado), e cada ponto que a
   coluna cede vira aparelho maior. */
.implanta{grid-template-columns:minmax(280px,29%) minmax(0,1fr)}
.implanta .sechead{margin-bottom:0;max-width:none;text-align:left}
.implanta .sechead__eyebrow i{display:block}
.implanta .sechead__title{
  font-size:min(clamp(1.55rem,2.25vw,2.2rem),4vh);
  margin-bottom:0;
}
.implanta__nota{
  display:flex;align-items:center;gap:9px;
  margin:clamp(14px,2.2vh,26px) 0 0;
  font-size:clamp(.82rem,.88vw,.93rem);line-height:1.45;color:var(--body);
}
.implanta__nota b{color:var(--ink);font-weight:600}
.implanta__nota svg{flex:none;color:var(--accent)}
/* O texto tem de morar num nó SÓ. Solto, cada trecho entre os <b> vira um
   item do flex e o `gap` abre um vão dentro da frase. */
.implanta__nota span{min-width:0}

/* Não há rotação 3D neste palco, então as folgas que pipeline.css reserva
   para as bordas projetadas não têm o que segurar — só empurrariam para
   dentro. */
.implanta__demo{margin-right:0;margin-top:0;display:block}

/* =======================================================================
   O PALCO
   ======================================================================= */
/* A CAIXA carrega duas coisas que o palco não pode carregar juntas:
   `container-type:size` (de onde saem as unidades cqw/cqh) e a perspectiva.
   Contenção e 3D no mesmo elemento brigam — a contenção achata o espaço e os
   aparelhos voltam a ser figuras planas. Separados, cada um faz o seu. */
.palcoBox{
  position:relative;height:100%;min-height:0;
  container-type:size;
  perspective:1750px;perspective-origin:50% 44%;
}

/* A luz de fundo. Ela não é enfeite: é ela que diz QUEM está agindo, porque
   se desloca para o lado do aparelho da vez. Numa cena com dois objetos,
   mover a luz é mais forte do que acender o objeto — o olho segue a luz
   antes de ler o conteúdo. */
@property --ax{syntax:'<percentage>';initial-value:50%;inherits:false}
@property --push{syntax:'<number>';initial-value:1;inherits:false}
@keyframes empurra{0%{--push:1}62%{--push:1.035}100%{--push:1}}
.aura{
  /* `inset` NEGATIVO sangrava a aura para fora da caixa e ela entrava na
     conta da altura da seção: 63px de transbordo, medidos. Presa em 0, o
     degradê já morre transparente antes da borda e o desfoque fecha o
     resto — o efeito é o mesmo e a seção volta a caber. */
  position:absolute;inset:0;z-index:0;pointer-events:none;
  --ax:50%;
  background:
    radial-gradient(40% 54% at var(--ax) 50%, rgba(10,128,226,.20) 0%, rgba(10,128,226,0) 70%),
    radial-gradient(64% 56% at 50% 104%, rgba(10,86,200,.09) 0%, rgba(10,86,200,0) 72%);
  filter:blur(6px);
  transition:--ax .7s var(--ease);
}

.palco2{
  position:relative;z-index:1;height:100%;min-height:0;
  display:flex;align-items:flex-end;justify-content:center;gap:var(--vao);
  transform-style:preserve-3d;
  --gy:0deg;--gx:0deg;
  /* O empurrão lento do vídeo: a cena nunca fica parada, cresce um fio ao
     longo do ciclo e volta. `--push` é propriedade registrada porque um
     custom property sem tipo não interpola — ficaria em degraus. */
  transform:rotateY(var(--gy)) rotateX(var(--gx)) scale(var(--push));
  animation:empurra 30s var(--ease-io) infinite;

  --arF:1.86;      /* celular: altura ÷ largura. 2,167 é o 15 Pro e 1,78 o
                      SE; este ponto da família dá mais largura ao texto,
                      que aqui divide espaço com um computador. */
  --arP:.625;      /* computador: 16:10 */
  --pe:.072;       /* quanto da altura do computador é a base */
  --vao:1.8cqw;
  --canal:5.5cqw;   /* o corredor do elo, entre os dois */

  /* largura total = celular + vão + canal + vão + computador
                   = 0,5376·H + 2·vão + canal + 1,5516·H
     → H = (larg − 2·vão − canal) / 2,0892 */
  --H:min(
        calc((100cqw - 2 * var(--vao) - var(--canal)) / 2.0892),
        97cqh);
}

/* =======================================================================
   OS APARELHOS NO ESPAÇO, E O FOCO

   Os dois ficam levemente virados UM PARA O OUTRO — é assim que dois objetos
   numa mesma cena se leem como parte da mesma cena, e não como duas fotos
   coladas lado a lado.

   O foco é o que destaca o fluxo: o aparelho da vez vem para a frente
   (translateZ, dentro da perspectiva da caixa, então ele de fato CRESCE em
   vez de dar um zoom falso) e o outro recua, perde um fio de cor e ganha um
   décimo de desfoque. O desfoque é minúsculo de propósito — o suficiente
   para o olho escolher sozinho onde pousar, não o suficiente para alguém
   dizer "está borrado".
   ======================================================================= */
.fone,.pc{
  transition:transform .85s var(--ease),filter .85s var(--ease);
  will-change:transform;
}
.pc{transform:rotateY(-6deg)}

/* O celular GIRA sozinho, devagar e sem parar. O giro mora na propriedade
   `rotate`, que é independente de `transform` — é o que permite ele conviver
   com o translateZ do foco sem um apagar o outro. Fosse tudo no `transform`,
   a classe de foco sobrescreveria a animação e o giro morreria na primeira
   troca de passo. */
.fone{transform:translateZ(0);animation:giraFone 11s ease-in-out infinite}
@keyframes giraFone{
  0%,100%{rotate:y 3deg}
  35%    {rotate:y 15deg}
  70%    {rotate:y 7deg}
}

/* Nada de desfoque: o que recua já recua de verdade (translateZ dentro da
   perspectiva), e borrar a tela do aparelho parado só esconde o que ele tem
   a dizer. A profundidade sozinha faz a hierarquia. */
.palco2.foco-f .fone{transform:translateZ(56px)}
.palco2.foco-f .pc  {transform:rotateY(-8deg) translateZ(-36px);filter:saturate(.86)}

.palco2.foco-p .pc  {transform:rotateY(-4deg) translateZ(46px)}
.palco2.foco-p .fone{transform:translateZ(-40px);filter:saturate(.86)}

/* Enquanto um cartão está fora, os DOIS aparelhos perdem a cor — é o que o
   vídeo faz para o cartão branco ficar sozinho na cena. Vem depois das
   regras de foco de propósito: têm a mesma especificidade, e quem ganha é
   quem vem por último. E a cor sai de cada aparelho, nunca do palco:
   `filter` num contexto `preserve-3d` ACHATA o 3D inteiro. */
.palco2.is-cinza .fone,
.palco2.is-cinza .pc{filter:grayscale(.74) saturate(.28) brightness(1.03)}

/* 🩸 O elo tem de ficar À FRENTE dos dois. Num contexto `preserve-3d` quem
   decide a ordem de pintura é a PROFUNDIDADE, não o `z-index` nem a ordem
   no documento: com o elo a 18px e o computador em foco a 44px, o pacote
   voava para trás da tampa e sumia na metade do caminho. A 72px ele passa
   na frente dos dois em qualquer estado de foco — que é o que se quer de
   um dado saindo de um aparelho e entrando no outro. */
.elo{transform:translateZ(72px)}

/* ---------------- o celular ---------------- */
.fone{
  position:relative;flex:none;
  width:calc(var(--H) / var(--arF));
  height:var(--H);
  display:flex;flex-direction:column;overflow:hidden;min-height:0;
  border-radius:calc(var(--H) * .074 * var(--r-fone));
  padding:max(5px, calc(var(--H) * .0135));
  background:linear-gradient(158deg,#2A3D54 0%,#182740 62%,#101D33 100%);
  box-shadow:
    0 46px 74px -26px rgba(12,28,48,.58),
    0 10px 22px -10px rgba(12,28,48,.38),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 0 0 1px rgba(255,255,255,.09);
}
.fone__notch{
  position:absolute;z-index:4;left:50%;transform:translateX(-50%);
  top:calc(var(--H) * .0255);
  width:calc(var(--H) * .098);height:calc(var(--H) * .0255);
  border-radius:calc(99px * var(--r-fone));
  background:#0A1421;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.fone__gesto{
  position:absolute;z-index:4;left:50%;transform:translateX(-50%);
  bottom:calc(var(--H) * .021);
  width:31%;height:max(3px,calc(var(--H) * .008));
  border-radius:calc(99px * var(--r-fone));background:rgba(10,31,69,.25);
}
/* raio concêntrico: o da tela é o do corpo MENOS a moldura, senão o vão
   entre os dois engorda nos cantos e o aparelho parece um estojo */
.fone__tela{
  position:relative;flex:1;min-height:0;overflow:hidden;background:#F1F6FA;
  border-radius:calc((var(--H) * .074 - var(--H) * .0135) * var(--r-fone));
}

/* ---------------- o computador ---------------- */
.pc{flex:none;height:var(--H);display:flex;flex-direction:column;align-items:center}
.pc__tampa{
  position:relative;
  width:calc(var(--H) * (1 - var(--pe)) / var(--arP));
  height:calc(var(--H) * (1 - var(--pe)));
  display:flex;overflow:hidden;
  border-radius:calc(var(--H) * .022 * var(--r-fone));
  padding:max(5px, calc(var(--H) * .0145));
  background:linear-gradient(158deg,#2A3D54 0%,#182740 62%,#101D33 100%);
  box-shadow:
    0 46px 74px -26px rgba(12,28,48,.55),
    0 10px 22px -10px rgba(12,28,48,.36),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 0 0 1px rgba(255,255,255,.09);
}
.pc__cam{
  position:absolute;z-index:4;left:50%;transform:translateX(-50%);
  top:calc(var(--H) * .0052);
  width:3px;height:3px;border-radius:50%;
  background:#41566F;box-shadow:0 0 0 1.5px rgba(10,20,33,.9);
}
.pc__tela{
  /* `display:flex` NAO e' enfeite: sem ele o `flex:1` do .crm nao tem contra
     o que crescer, a plataforma fica com a altura do conteudo, .pf__telas
     as telas (que sao position:absolute) somem. Aparecia so a barra lateral. */
  display:flex;
  position:relative;flex:1;min-width:0;min-height:0;overflow:hidden;background:#F4F8FC;
  border-radius:calc((var(--H) * .022 - var(--H) * .0145) * var(--r-fone));
  /* CONTENTOR: é daqui que o CRM tira as próprias medidas. Sem isso ele é
     desenhado em pixel cravado e sai certo numa janela e ralo em todas as
     outras. */
  container-type:size;
}
/* Vista de frente, a base de um notebook não é um retângulo: ela fecha para
   dentro no pé. O recorte é o que a faz parecer corpo em vez de prateleira. */
.pc__base{
  position:relative;flex:none;
  width:calc(var(--H) * (1 - var(--pe)) / var(--arP) * 1.045);
  height:calc(var(--H) * var(--pe));
  border-radius:0 0 calc(8px * var(--r-fone)) calc(8px * var(--r-fone));
  background:linear-gradient(180deg,#384C65 0%,#22344B 46%,#15243A 100%);
  box-shadow:0 20px 28px -18px rgba(12,28,48,.65),inset 0 1px 0 rgba(255,255,255,.17);
  clip-path:polygon(0 0,100% 0,98.6% 100%,1.4% 100%);
}
.pc__pega{
  position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:12%;height:42%;border-radius:0 0 99px 99px;background:rgba(6,14,26,.5);
}

/* =======================================================================
   AS CENAS — em cada aparelho elas ocupam o mesmo espaço e se revezam
   ======================================================================= */
/* A troca é um EMPURRÃO, não um crossfade. Duas telas cruzando de
   opacidade no mesmo lugar não têm direção, e sem direção não existe
   "avançou um passo": existe "piscou". A que entra vem da direita, a que
   sai vai para a esquerda — e as duas se movem no mesmo instante nos dois
   aparelhos, porque é o mesmo passo acontecendo nos dois. */
.cenaF,.crmT{
  position:absolute;inset:0;display:flex;flex-direction:column;
  opacity:0;visibility:hidden;
  transform:translateX(15%) scale(.982);
  transition:opacity .32s var(--ease),transform .46s var(--ease),visibility 0s .46s;
}
.cenaF.is-on,.crmT.is-on{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .3s var(--ease) .1s,transform .52s var(--ease),visibility 0s;
}
/* a que está saindo AGORA: para a esquerda. Sem esta classe ela voltaria
   para a direita, que é o gesto de "voltar", não o de "avançar". */
.cenaF.sai,.crmT.sai{transform:translateX(-12%) scale(.982)}

/* Desliga TODA transição por um quadro. É o que permite ao clique num passo
   cair no estado inteiro daquele passo em vez de animar a história toda em
   avanço rápido. */
.palco2.is-seco,.palco2.is-seco *{transition:none!important}

/* ---- a barra de topo do celular; o recuo de cima livra o notch ---- */
.apCab{
  flex:none;display:flex;align-items:center;gap:6px;padding:24px 11px 8px;
  font-size:9px;letter-spacing:.11em;text-transform:uppercase;font-weight:600;
  color:var(--faint);border-bottom:1px solid var(--line-soft);
}
.apCab__pt{width:5px;height:5px;border-radius:50%;background:#25C168;box-shadow:0 0 0 3px rgba(37,193,104,.15)}

/* ---- celular · 1 Conectamos ---- */
.conecta{
  flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:9px;padding:12px 13px 20px;text-align:center;
}
.conecta__selo{
  flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(10,128,226,.10);color:var(--accent-lo);
  box-shadow:0 0 0 0 rgba(37,193,104,0);
  transition:background .55s var(--ease),color .55s var(--ease),box-shadow .55s var(--ease);
}
/* o risco do certo é DESENHADO, não aceso: o traço corre do começo ao fim */
.conecta__ck{stroke-dasharray:14;stroke-dashoffset:14;transition:stroke-dashoffset .6s var(--ease) .1s}
.conecta.is-ok .conecta__selo{background:rgba(37,193,104,.14);color:#128A47;box-shadow:0 0 0 7px rgba(37,193,104,.09)}
.conecta.is-ok .conecta__ck{stroke-dashoffset:0}
.conecta__num{font-size:13.5px;font-weight:600;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.conecta__num i{font-style:normal;color:var(--ghost)}
.conecta__barra{width:78%;height:3px;border-radius:99px;background:rgba(18,46,76,.10);overflow:hidden}
.conecta__barra i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--accent-lo),var(--accent-hi));transition:width .55s linear}
.conecta__st{font-size:9.5px;color:var(--faint);min-height:1.3em}
.conecta__lista{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:6px;width:100%;text-align:left}
.conecta__lista li{
  display:flex;align-items:center;gap:7px;font-size:10px;color:var(--faint);
  opacity:.3;transform:translateY(4px);
  transition:opacity .45s var(--ease),transform .45s var(--ease),color .45s var(--ease);
}
.conecta__lista li.is-on{opacity:1;transform:none;color:var(--body)}
.conecta__lista li i{position:relative;flex:none;width:13px;height:13px;border-radius:50%;background:rgba(37,193,104,.16)}
.conecta__lista li i::after{
  content:"";position:absolute;left:4.4px;top:3px;width:3px;height:5.4px;
  border:solid #128A47;border-width:0 1.4px 1.4px 0;transform:rotate(42deg);
}

/* ---- celular · 2 Ensinamos ---- */
.aprende{list-style:none;flex:1;min-height:0;margin:0;padding:11px 10px 5px;display:flex;flex-direction:column;gap:6px;justify-content:center}
.aprende li{
  display:flex;align-items:center;gap:8px;padding:7px 9px;
  border-radius:calc(10px * var(--r));background:#fff;border:1px solid rgba(18,46,76,.07);
  box-shadow:0 1px 2px rgba(18,46,76,.04);
  opacity:.38;transform:translateY(4px);
  transition:opacity .45s var(--ease),transform .45s var(--ease),border-color .45s var(--ease);
}
.aprende li.is-on{opacity:1;transform:none;border-color:rgba(37,193,104,.32)}
.aprende li span{flex:1;min-width:0}
.aprende b{display:block;font-size:10.5px;font-weight:600;color:var(--ink);letter-spacing:-.012em}
.aprende small{display:block;font-size:9px;color:var(--faint);margin-top:1px}
.aprende li i{position:relative;flex:none;width:14px;height:14px;border-radius:50%;background:rgba(18,46,76,.07);transition:background .45s var(--ease)}
.aprende li.is-on i{background:rgba(37,193,104,.18)}
.aprende li i::after{
  content:"";position:absolute;left:4.8px;top:3.3px;width:3.1px;height:5.6px;
  border:solid transparent;border-width:0 1.5px 1.5px 0;transform:rotate(42deg);
  transition:border-color .4s var(--ease);
}
.aprende li.is-on i::after{border-color:#128A47}
.aprende__pe{flex:none;padding:0 10px 13px;display:flex;flex-direction:column;gap:5px}
.aprende__barra{height:3px;border-radius:99px;background:rgba(18,46,76,.10);overflow:hidden}
.aprende__barra i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--accent-lo),var(--accent-hi));transition:width .55s linear}
.aprende__pe small{font-size:9px;color:var(--faint);text-align:center}

/* ---- celular · 3 e 4 · a conversa ----
   Tudo daqui vem de pipeline.css. A única linha nova é o degradê do pé: a
   última bolha era CORTADA na borda, e some em degradê lê como conversa
   rolando em vez de defeito. */
#f2::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:24px;pointer-events:none;
  background:linear-gradient(to top,#F1F6FA 14%,rgba(241,246,250,0));
}

/* O aviso que cai no celular DO DONO no passo 4: a venda fechada volta como
   notificação, fechando o laço entre os dois aparelhos. Ele passa por cima da
   conversa, como uma notificação de verdade, e sai sozinho depois. */
.aviso{
  position:absolute;z-index:6;left:8px;right:8px;top:21px;
  display:flex;align-items:center;gap:8px;
  padding:8px 9px;border-radius:calc(11px * var(--r));
  background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(18,46,76,.09);
  box-shadow:0 16px 28px -12px rgba(12,28,48,.42);
  opacity:0;transform:translateY(-140%);pointer-events:none;
  transition:opacity .4s var(--ease),transform .55s var(--ease-pop);
}
.aviso.is-on{opacity:1;transform:none}
.aviso i{
  flex:none;display:grid;place-items:center;width:22px;height:22px;
  border-radius:calc(7px * var(--r));background:rgba(37,193,104,.16);color:#0F7A42;
}
.aviso b{display:block;font-size:9.5px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.aviso small{display:block;font-size:8.5px;color:var(--faint);margin-top:1px}

/* =======================================================================
   OS BALÕES QUE ATRAVESSAM

   Não há mais fio nem seta. O que liga os dois aparelhos é a própria bolha:
   ela nasce na conversa, se solta do celular e ATRAVESSA a cena até o
   computador, onde vira linha no CRM. Um fio com seta explica a relação; a
   bolha viajando É a relação — e é a mesma bolha, com a mesma cor e o mesmo
   canto cortado, então não há o que interpretar.

   A camada dos balões cobre o palco inteiro, não o vão entre os aparelhos:
   o percurso é um ARCO que sai da tela do celular, sobe por cima dos dois e
   desce na lista do CRM. Reto e curto, o movimento lê como um deslize; em
   arco e longo, lê como algo sendo entregue.
   ======================================================================= */
.elo{
  position:absolute;inset:0;pointer-events:none;
  /* 🩸 À FRENTE dos dois. Num contexto `preserve-3d` quem decide a ordem de
     pintura é a PROFUNDIDADE, não o `z-index` nem a ordem no documento: com
     o elo atrás, o balão sumia atrás da tampa na metade do caminho. */
  transform:translateZ(80px);
}

.bal{
  position:absolute;z-index:9;
  max-width:24%;
  padding:clamp(5px,1.1cqh,9px) clamp(7px,1.4cqw,12px);
  border-radius:calc(12px * var(--r));
  font-size:clamp(8px,1.6cqh,11px);line-height:1.34;
  color:var(--ink);
  box-shadow:0 18px 34px -12px rgba(12,28,48,.42),0 3px 7px rgba(12,28,48,.14);
  animation:voaBal 1.55s var(--ease) forwards;
  will-change:transform,left,top;
}
/* a mesma cor e o mesmo canto cortado das bolhas do celular: quem chega no
   CRM tem de ser reconhecível como quem saiu da conversa */
.bal--in{background:#fff;border:1px solid rgba(10,31,69,.08);border-bottom-left-radius:calc(4px * var(--r))}
.bal--out{background:linear-gradient(150deg,#E3EEF9,#D6E6F6);border-bottom-right-radius:calc(4px * var(--r))}
.bal--out b{font-weight:600}
/* os avisos do sistema (conexão, catálogo, alerta) não são conversa: viajam
   como etiqueta, não como bolha */
.bal--sis{
  background:#fff;border:1px solid rgba(10,128,226,.3);color:var(--accent-lo);
  font-weight:600;font-size:clamp(7.5px,1.5cqh,10px);letter-spacing:.015em;
  border-radius:calc(99px * var(--r));white-space:nowrap;max-width:none;
}
.bal--sis.ok{border-color:rgba(37,193,104,.42);color:#0F7A42}

/* O ARCO. Sai da tela do celular (≈20%), sobe até acima dos dois e desce na
   lista do CRM (≈72%). A escala cai nas pontas para o balão parecer sair de
   dentro de um aparelho e entrar no outro, em vez de aparecer e sumir. */
@keyframes voaBal{
  0%  {left:20%;top:64%;opacity:0;transform:translate(-50%,-50%) scale(.55) rotate(-7deg)}
  13% {          opacity:1;       transform:translate(-50%,-50%) scale(1.02) rotate(-4deg)}
  38% {left:38%;top:38%;          transform:translate(-50%,-50%) scale(1.06) rotate(1deg)}
  68% {left:57%;top:31%;          transform:translate(-50%,-50%) scale(1) rotate(4deg)}
  87% {          opacity:1}
  100%{left:73%;top:50%;opacity:0;transform:translate(-50%,-50%) scale(.58) rotate(2deg)}
}
/* o alerta do passo 4 faz o caminho de volta: do painel para o celular */
.bal--volta{animation-name:voaBalVolta}
@keyframes voaBalVolta{
  0%  {left:73%;top:50%;opacity:0;transform:translate(-50%,-50%) scale(.55) rotate(6deg)}
  13% {          opacity:1;       transform:translate(-50%,-50%) scale(1.02) rotate(4deg)}
  40% {left:56%;top:30%;          transform:translate(-50%,-50%) scale(1.06) rotate(-1deg)}
  70% {left:36%;top:37%;          transform:translate(-50%,-50%) scale(1) rotate(-4deg)}
  87% {          opacity:1}
  100%{left:20%;top:62%;opacity:0;transform:translate(-50%,-50%) scale(.58) rotate(-3deg)}
}

/* A linha do CRM que ACABOU de receber o pacote pisca uma vez. É o fecho do
   gesto: o pacote sai, atravessa e a linha que ele virou acende. */
.ld__log li.chega{animation:logEntra .4s var(--ease-pop) both, brilha 1.1s var(--ease) .05s}
@keyframes brilha{
  0%  {background:rgba(10,128,226,.24)}
  100%{background:rgba(18,46,76,.035)}
}
.ld__log li.ok.chega{animation:logEntra .4s var(--ease-pop) both, brilhaOk 1.1s var(--ease) .05s}
@keyframes brilhaOk{
  0%  {background:rgba(37,193,104,.26)}
  100%{background:rgba(18,46,76,.035)}
}

/* o score dá um salto quando muda — número que muda sozinho sem se mexer
   passa despercebido numa tela com tanta coisa acontecendo */
.ld__sc.bate{animation:bateSc .62s var(--ease-pop)}
@keyframes bateSc{0%{transform:scale(1)}38%{transform:scale(1.1)}100%{transform:scale(1)}}

/* a fase que acabou de ser alcançada também */
.fase.is-on{animation:bateSc .55s var(--ease-pop)}

/* =======================================================================
   O NOTEBOOK MOSTRA A PLATAFORMA

   Não uma aproximação dela: a tela real já existe neste site, é a `.tela` de
   leads.css que a seção 4 desenha. Daqui para baixo tudo veio de lá com os
   mesmos valores — o chão cinza do app, o acento RUBI (o produto não é azul),
   o trilho de ícones com a barrinha vermelha no item ativo, a barra de título
   com trilha de navegação e avatar, e o par lista + ficha.

   Tudo medido em unidades da PRÓPRIA tela do computador (cqh/cqw), porque a
   mesma interface tem de caber em 534px de largura a 1280×660 e em 782px a
   1920×1080 sem virar outra coisa.
   ======================================================================= */
.pf{
  /* os mesmos valores de leads.css, sem reinterpretar nenhum */
  --app:#E8EBF0; --bar:#F0F2F5; --card:#FFFFFF; --well:#F4F6F9; --pit:#F1F3F6;
  --b1:#CDD3DB; --b2:#DDE2E8; --b3:#E6EAEF;
  --t1:#54565E; --t2:#5F616A; --t3:#6B6D77; --t4:#737581; --t5:#A9ABB3;
  --rub:#DC2626; --vrd:#059669; --amb:#D97706; --azu:#2563EB;

  flex:1;min-width:0;display:flex;flex-direction:column;
  background:var(--app);color:var(--t2);
}
.pf svg{stroke:currentColor;fill:none}

/* ---- barra de título ---- */
.pf__bar{
  flex:none;display:flex;align-items:center;gap:clamp(6px,1.4cqw,12px);
  padding:0 clamp(6px,1.4cqw,12px);height:clamp(19px,5.6cqh,34px);
  background:linear-gradient(180deg,#F4F6F9 0%,#E8EBF0 100%);
  border-bottom:1px solid var(--b1);
}
.pf__crumb{
  display:flex;align-items:center;gap:clamp(3px,.8cqw,7px);min-width:0;
  color:var(--t4);font-size:clamp(6.5px,2.2cqh,11.5px);
}
.pf__crumb b{color:var(--t1);font-weight:600}
.pf__crumb i{font-style:normal;opacity:.42}
.pf__eu{margin-left:auto;display:flex;align-items:center;gap:clamp(4px,1cqw,8px)}
.pf__f{
  display:flex;align-items:center;height:clamp(12px,3.4cqh,21px);
  padding:0 clamp(4px,1cqw,9px);
  background:var(--card);border:1px solid var(--b1);border-radius:calc(6px * var(--r));
  font-size:clamp(6px,1.9cqh,10.5px);color:var(--t4);white-space:nowrap;
}
.pf__me{
  flex:none;display:grid;place-items:center;
  width:clamp(13px,3.6cqh,22px);height:clamp(13px,3.6cqh,22px);border-radius:50%;
  font-size:clamp(5.5px,1.7cqh,9px);font-weight:700;
  background:#DBEAFE;color:var(--azu);border:1px solid #BFDBFE;
}

/* ---- corpo: trilho · telas ---- */
.pf__corpo{flex:1;min-height:0;display:flex;gap:clamp(4px,1cqw,9px);padding:clamp(4px,1cqw,9px)}
.pf__rail{
  flex:none;width:clamp(21px,4.6cqw,42px);align-self:stretch;
  background:var(--bar);border:1px solid var(--b2);border-radius:calc(9px * var(--r));
  padding:clamp(3px,.9cqh,6px) clamp(2px,.6cqw,5px);
  display:flex;flex-direction:column;gap:2px;overflow:hidden;
}
.pf__mi{
  position:relative;display:grid;place-items:center;
  height:clamp(15px,4.1cqh,27px);color:var(--t3);
  border-radius:calc(6px * var(--r));
  transition:background .4s var(--ease),color .4s var(--ease),
             transform .17s var(--ease),filter .17s var(--ease);
}
.pf__mi svg{width:clamp(9px,2.6cqh,15px);height:clamp(9px,2.6cqh,15px);stroke-width:1.7}
/* o item ativo é RUBI, com a barrinha de fora — a marca da plataforma */
.pf__mi.is-on{background:#FEE2E2;color:var(--rub)}
.pf__mi.is-on::before{
  content:"";position:absolute;left:clamp(-6px,-.7cqw,-3px);top:50%;transform:translateY(-50%);
  width:2px;height:56%;background:var(--rub);
}

.pf__telas{position:relative;flex:1;min-width:0;min-height:0}
.crmT{padding:0;gap:clamp(4px,1cqh,8px)}

/* ---- o par lista + ficha, como no produto ---- */
.pf__duo{flex:1;min-height:0;display:flex;gap:clamp(4px,1cqw,9px)}
.pf__lista{
  flex:none;width:clamp(74px,26cqw,230px);min-width:0;
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--card);border:1px solid var(--b1);border-radius:calc(9px * var(--r));
}
.pf__lt{
  flex:none;display:flex;align-items:baseline;gap:clamp(3px,.7cqw,6px);
  padding:clamp(4px,1.3cqh,9px) clamp(5px,1.2cqw,11px);
  border-bottom:1px solid var(--b3);
}
.pf__lt b{font-size:clamp(7px,2.3cqh,13px);font-weight:650;color:var(--t1);letter-spacing:-.012em}
.pf__lt em{font-style:normal;font-size:clamp(5.5px,1.8cqh,10.5px);color:var(--t4)}
.pf__lr{
  flex:none;display:flex;align-items:center;gap:clamp(4px,1cqw,8px);
  padding:clamp(4px,1.3cqh,9px) clamp(5px,1.2cqw,11px);
  border-bottom:1px solid var(--b3);position:relative;
}
/* a linha aberta: fundo rosado e o fio rubi na borda, igual ao produto */
.pf__lr.is-on{background:#FEF4F4}
.pf__lr.is-on::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--rub)}
.pf__la{
  flex:none;display:grid;place-items:center;
  width:clamp(12px,3.4cqh,21px);height:clamp(12px,3.4cqh,21px);border-radius:50%;
  background:var(--pit);border:1px solid var(--b2);
  font-size:clamp(5px,1.5cqh,8.5px);font-weight:700;color:var(--t3);
}
.pf__ln{
  flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:clamp(6px,2cqh,12px);font-weight:600;color:var(--t1);
}
.pf__ls{flex:none;font-size:clamp(6px,2cqh,11.5px);font-weight:700;color:var(--t3);font-variant-numeric:tabular-nums}
.pf__ls.quente{color:var(--vrd)}
/* =======================================================================
   OS QUATRO PASSOS — a coluna É a narração

   O vídeo de referência não empilha quatro caixas cinzas: mostra UMA frase
   grande de cada vez, em contraste cheio, e acende depois a palavra que
   importa. É por isso que ele lê como comercial e uma pilha de caixas lê
   como formulário de quatro etapas.

   Aqui vale a mesma regra, guardando o que a seção precisa manter: os
   quatro títulos ficam à vista (são o índice do que vem), mas só o passo
   da vez abre o texto e só ele tem contraste cheio. Os outros três
   recuam para rótulo.

   Sem caixa, sem borda, sem sombra. O que separa os passos é UMA linha
   vertical contínua à esquerda, e o tempo é o trecho dela que já foi
   preenchido: um traço só atravessando os quatro diz "isto é um
   percurso"; quatro barrinhas soltas dizem "isto é um formulário".

   Tudo preso a `#atosImp` de propósito. A classe `.ato` é da seção 3
   também, e lá o cartão está certo — o que muda aqui é o papel da lista,
   não a peça.
   ======================================================================= */
#atosImp{gap:0;margin-top:clamp(14px,2.2vh,28px)}

#atosImp .ato{
  padding:clamp(10px,1.55vh,19px) 0 clamp(10px,1.55vh,19px) clamp(15px,1.25vw,23px);
  gap:0 clamp(12px,1vw,18px);
  background:none;border:0;border-radius:0;box-shadow:none;overflow:visible;
  color:var(--faint);
  transition:color .45s var(--ease);
}
#atosImp .ato:hover{transform:none}
#atosImp .ato:hover .ato__num{color:var(--muted)}
#atosImp .ato[aria-current="true"]{
  color:var(--body);background:none;border:0;box-shadow:none;transform:none;
}

/* o trilho: vertical, colado no de cima e no de baixo, sem raio — os
   quatro pedaços têm de ler como UM fio, então a lista não tem `gap` e a
   barra vai de topo a base de cada passo. */
#atosImp .ato__track{
  top:0;bottom:0;left:0;right:auto;
  width:2px;height:auto;
  background:rgba(18,46,76,.11);
}
#atosImp .ato__fill{
  width:100%;height:0;
  background:linear-gradient(180deg,var(--accent-hi),var(--accent-lo));
}

/* o número deixa de ser widget e vira tipografia: dois dígitos, tabular,
   entrelinhado aberto. Bolinha com fundo é interface; número solto ao
   lado do título é editorial. */
#atosImp .ato__num{
  display:block;width:auto;height:auto;margin-top:.42em;
  border-radius:0;background:none;box-shadow:none;
  font-size:clamp(.64rem,.7vw,.78rem);font-weight:700;letter-spacing:.1em;
  color:var(--ghost);
  transition:color .5s var(--ease);
}
#atosImp .ato[aria-current="true"] .ato__num{
  background:none;box-shadow:none;color:var(--accent);
}

#atosImp .ato__txt{font-size:clamp(.92rem,1vw,1.06rem);line-height:1.4}
#atosImp .ato__txt b{font-size:1.04em;letter-spacing:-.02em}

/* Só o passo da vez abre. A altura fechada é 0 e a aberta é `--dh`, que o
   JS mede uma vez por tamanho de tela: animar para `auto` não anima, e sem
   número medido a abertura seria um corte seco. Sem JS (e em movimento
   reduzido) os quatro ficam abertos — a regra vive sob `.js`. */
.js #atosImp .ato__d{
  display:block;overflow:hidden;
  height:0;margin-top:0;opacity:0;transform:translateY(7px);
  font-size:.9em;line-height:1.48;
  transition:height .52s var(--ease),margin-top .52s var(--ease),
             opacity .4s var(--ease),transform .52s var(--ease);
}
.js #atosImp .ato[aria-current="true"] .ato__d{
  height:var(--dh,auto);margin-top:clamp(4px,.75vh,9px);
  opacity:1;transform:none;
}

/* A PALAVRA QUE ACENDE. No vídeo a frase entra branca e, um tempo depois,
   só o trecho que importa vira verde — é o único destaque tipográfico dele
   e é o que dá ritmo à leitura. A cópia acesa é um `::after` com o mesmo
   texto, revelado por varredura; assim a linha não muda de largura nem
   reflui quando acende. */
#atosImp .ac{
  position:relative;display:inline-block;white-space:nowrap;font-style:normal;
}
#atosImp .ac::after{
  content:attr(data-w);
  position:absolute;left:0;top:0;
  color:var(--accent-lo);
  clip-path:inset(0 100% 0 0);
  transition:clip-path .55s var(--ease) .34s;
}
/* 🩸 A cópia acesa tem de ter EXATAMENTE a métrica da original. Com
   `font-weight:600` ela ficava mais larga que o texto de baixo e a
   varredura terminava mostrando "SEU negóc" com o "io" da original
   escapando à direita. Só a cor muda — como no vídeo. */
#atosImp .ato[aria-current="true"] .ac::after{clip-path:inset(0 -.08em 0 0)}

/* a virada do passo: o título pousa e o número bate. Sem caixa para
   levantar, quem se move é o texto — como as linhas do vídeo. */
#atosImp .ato.entra .ato__txt b{animation:passoEntra .6s var(--ease)}
@keyframes passoEntra{
  0%  {opacity:.3;transform:translateY(7px)}
  100%{opacity:1;transform:none}
}
#atosImp .ato.entra .ato__num{animation:numEntra .68s var(--ease-pop)}
@keyframes numEntra{
  0%  {transform:scale(1)}
  38% {transform:scale(1.22)}
  100%{transform:scale(1)}
}

/* =======================================================================
   O CARTÃO QUE SAI DO APARELHO

   É o movimento que o vídeo de referência repete três vezes e é o que faz
   a peça parecer feita por um estúdio: a parte da tela que acabou de mudar
   não cresce no lugar — ela SE SOLTA, vira um cartão branco grande no meio
   do palco, e os dois aparelhos perdem a cor atrás dela.

   O cartão é um FLIP: nasce exatamente sobre o original (mesmo retângulo,
   medido no quadro) e daí em diante é só `transform`. Animar `width`/`top`
   seria refazer layout 60 vezes por segundo em cima de uma cena 3D.

   🩸 A parte difícil não é o movimento, é a MEDIDA. A peça é desenhada em
   unidades da tela do aparelho (cqh/cqw). Arrancada dali, `1cqh` passaria a
   valer 1% do palco inteiro e o cartão sairia com outra tipografia, outros
   espaçamentos — outra peça. Por isso o que vai para dentro do cartão não é
   a peça solta: é uma CÂMARA do tamanho exato da tela do aparelho, com a
   peça na posição que ela ocupa lá dentro, e o cartão recorta essa câmara.
   Assim toda conta de dentro dela dá o mesmo número que dava no aparelho.
   ======================================================================= */
.lupa{position:absolute;inset:0;z-index:30;pointer-events:none}

.lupa__c{
  position:absolute;transform-origin:50% 50%;overflow:hidden;
  border-radius:calc(12px * var(--r));
  background:#fff;
  box-shadow:0 8px 16px -6px rgba(12,28,48,.26),
             0 34px 60px -28px rgba(12,28,48,.55);
  transition:transform .62s var(--ease);
  will-change:transform;
}
/* a câmara: mesma geometria da tela de onde a peça veio, para as unidades
   de contêiner continuarem valendo o que valiam */
.lupa__cam{position:absolute;container-type:size}
/* nada dentro do retrato se mexe sozinho: é um retrato, não uma segunda
   cópia viva da interface */
.lupa__c *{animation:none!important;transition:none!important}

/* a paleta do produto vale também para o retrato — sem isto o clone sai
   do `.pf` e perde todas as cores da plataforma */
.lupa{
  --app:#E8EBF0; --bar:#F0F2F5; --card:#FFFFFF; --well:#F4F6F9; --pit:#F1F3F6;
  --b1:#CDD3DB; --b2:#DDE2E8; --b3:#E6EAEF;
  --t1:#54565E; --t2:#5F616A; --t3:#6B6D77; --t4:#737581; --t5:#A9ABB3;
  --rub:#DC2626; --vrd:#059669; --amb:#D97706; --azu:#2563EB;
}
.lupa svg{stroke:currentColor;fill:none}

/* =======================================================================
   O TOQUE

   No vídeo, antes de CADA tela mudar, um círculo verde macio pousa no botão
   e ele afunda um fio. Sem isso a tela troca sozinha e a cena vira slide;
   com isso existe alguém operando — que é o que a seção afirma.
   ======================================================================= */
.onda{
  position:absolute;z-index:31;pointer-events:none;border-radius:50%;
  width:var(--od);height:var(--od);
  margin:calc(var(--od) / -2) 0 0 calc(var(--od) / -2);
  background:radial-gradient(circle,
    rgba(37,193,104,.52) 0%, rgba(37,193,104,.20) 54%, rgba(37,193,104,0) 72%);
  animation:onda .74s var(--ease) forwards;
}
@keyframes onda{
  0%  {opacity:0;transform:scale(.18)}
  20% {opacity:1;transform:scale(.7)}
  100%{opacity:0;transform:scale(1.35)}
}
.premido{transform:scale(.93);filter:brightness(.93)}

/* =======================================================================
   O CURSOR E A ESPERA

   Duas coisas que o vídeo mostra e que nenhuma tela parada consegue fingir:
   texto sendo DIGITADO, com a barrinha piscando ao lado, e o momento em que
   o sistema está pensando. Uma resposta que aparece inteira é um slide; uma
   resposta que é escrita é uma conversa.
   ======================================================================= */
.msg.is-dig::after{
  content:"";display:inline-block;vertical-align:-2px;margin-left:1.5px;
  width:1.4px;height:.95em;background:var(--accent-lo);
  animation:cursor .9s steps(1) infinite;
}
@keyframes cursor{0%,50%{opacity:1}50.01%,100%{opacity:0}}

.spin{
  display:inline-block;vertical-align:-1px;margin-right:4px;
  width:8px;height:8px;border-radius:50%;
  border:1.4px solid rgba(18,46,76,.16);border-top-color:var(--accent);
  animation:roda .72s linear infinite;
}
@keyframes roda{to{transform:rotate(360deg)}}

/* =======================================================================
   O CONFETE — um por ciclo, no instante do aceite

   Sobe para a camada do palco, não para dentro da tela: no vídeo o estouro
   é MAIOR que o cartão da conquista, e recortado pela moldura de um aparelho
   ele viraria um chuvisco. Ângulos, raios e cores são fixos — sorteados,
   cada volta do ciclo desenharia um estouro diferente e a cena deixaria de
   ser a mesma cena.
   ======================================================================= */
.confete{position:absolute;inset:0;z-index:32;pointer-events:none}
.confete i{
  position:absolute;display:block;width:7px;height:11px;border-radius:1.5px;
  animation:estoura 1.5s var(--ease) forwards;
}
.confete i.r{width:8px;height:8px;border-radius:50%}
.confete i.b{width:3.5px;height:15px;border-radius:2px}
.confete i.q{width:9px;height:9px;border-radius:2px}
@keyframes estoura{
  0%  {opacity:0;transform:translate(-50%,-50%) rotate(0) scale(.4)}
  10% {opacity:1}
  100%{opacity:0;
       transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy)))
                 rotate(var(--rr)) scale(1)}
}

/* ---- plataforma · 1 · a conexão ---- */
.cx{
  flex:none;display:flex;align-items:center;gap:clamp(6px,1.4cqw,12px);
  padding:clamp(6px,1.8cqh,13px) clamp(7px,1.6cqw,14px);
  background:var(--card);border:1px solid var(--b1);border-radius:calc(9px * var(--r));
  transition:border-color .5s var(--ease),box-shadow .5s var(--ease);
}
.cx.is-ok{border-color:rgba(5,150,105,.45);box-shadow:0 0 0 3px rgba(5,150,105,.08)}
.cx__ic{
  flex:none;display:grid;place-items:center;
  width:clamp(18px,4.8cqh,30px);height:clamp(18px,4.8cqh,30px);border-radius:calc(7px * var(--r));
  background:#FEE2E2;color:var(--rub);
  transition:background .5s var(--ease),color .5s var(--ease);
}
.cx.is-ok .cx__ic{background:#D1FAE5;color:var(--vrd)}
.cx__txt{flex:1;min-width:0}
.cx__txt b{display:block;font-size:clamp(7px,2.3cqh,12.5px);font-weight:600;color:var(--t1)}
.cx__txt small{display:block;font-size:clamp(6px,1.9cqh,10.5px);color:var(--t4);margin-top:1px}
.cx__tag{
  flex:none;font-size:clamp(5.5px,1.8cqh,9.5px);font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:clamp(2px,.6cqh,4px) clamp(4px,1cqw,9px);border-radius:calc(99px * var(--r));
  background:var(--pit);color:var(--t3);border:1px solid var(--b2);
  transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease);
}
.cx.is-ok .cx__tag{background:#D1FAE5;color:var(--vrd);border-color:rgba(5,150,105,.3)}
.cx__linhas{list-style:none;margin:0;padding:0;display:grid;gap:clamp(3px,1cqh,6px)}
.cx__linhas li{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:clamp(4px,1.3cqh,8px) clamp(7px,1.6cqw,14px);
  background:var(--card);border:1px solid var(--b2);border-radius:calc(7px * var(--r));
  font-size:clamp(6px,1.9cqh,10.5px);color:var(--t4);
  opacity:.36;transform:translateY(3px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.cx__linhas li.is-on{opacity:1;transform:none}
.cx__linhas b{font-weight:600;color:var(--t1);font-variant-numeric:tabular-nums}

/* ---- plataforma · 2 · o catálogo ---- */
.cat{
  flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;
  background:var(--card);border:1px solid var(--b1);border-radius:calc(9px * var(--r));
}
.cat__l{
  flex:none;display:flex;align-items:center;gap:clamp(6px,1.4cqw,12px);
  padding:clamp(4px,1.3cqh,9px) clamp(6px,1.5cqw,13px);
  border-bottom:1px solid var(--b3);
  /* 🩸 Repouso NÃO é invisível. No vídeo nenhuma tela aparece vazia se
     enchendo: a tela já está cheia e o que a animação faz é ACENDER o que
     acabou de ser lido. Com opacidade 0 o notebook passava 80% do ciclo
     mostrando uma folha branca. */
  opacity:.34;transform:translateY(4px);
  transition:opacity .38s var(--ease),transform .38s var(--ease);
}
.cat__l.is-on{opacity:1;transform:none}
.cat__q{flex:none;width:clamp(10px,2.8cqh,17px);height:clamp(10px,2.8cqh,17px);border-radius:calc(4px * var(--r));background:var(--pit);border:1px solid var(--b2)}
.cat__n{flex:1;min-width:0}
.cat__n i{display:block;height:clamp(3.5px,.9cqh,6px);border-radius:99px;background:var(--b1)}
.cat__l b{flex:none;font-size:clamp(6.5px,2.1cqh,11.5px);font-weight:600;color:var(--t1);font-variant-numeric:tabular-nums}
.cat__pe{
  flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:auto;padding:clamp(4px,1.4cqh,9px) clamp(6px,1.5cqw,13px);
  background:var(--well);border-top:1px solid var(--b2);
  font-size:clamp(6px,1.9cqh,10.5px);color:var(--t4);
}
.cat__pe b{color:var(--t1);font-weight:600;font-variant-numeric:tabular-nums}
.cat__reg{opacity:0;transition:opacity .5s var(--ease)}
.cat__reg.is-on{opacity:1}

/* ---- plataforma · 3 · a ficha do lead ---- */
.ld{
  flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;
  gap:clamp(4px,1.3cqh,9px);overflow:hidden;
  padding:clamp(5px,1.5cqh,11px) clamp(6px,1.4cqw,12px);
  background:var(--card);border:1px solid var(--b1);border-radius:calc(9px * var(--r));
}
.ld__cab{
  flex:none;display:flex;align-items:center;gap:clamp(6px,1.4cqw,12px);
  padding-bottom:clamp(5px,1.5cqh,10px);border-bottom:1px solid var(--b3);
}
.ld__av{
  flex:none;display:grid;place-items:center;
  width:clamp(18px,4.8cqh,30px);height:clamp(18px,4.8cqh,30px);border-radius:50%;
  background:#FEE2E2;color:var(--rub);border:1px solid #FECACA;
  font-size:clamp(6px,1.9cqh,10.5px);font-weight:700;
}
.ld__id{flex:1;min-width:0}
.ld__id b{display:block;font-size:clamp(7.5px,2.5cqh,13.5px);font-weight:650;color:var(--t1);letter-spacing:-.012em}
.ld__id small{display:block;font-size:clamp(6px,1.9cqh,10.5px);color:var(--t4);margin-top:1px}
.ld__sc{
  flex:none;text-align:center;padding:clamp(2px,.9cqh,6px) clamp(5px,1.2cqw,11px);
  border-radius:calc(7px * var(--r));background:var(--pit);border:1px solid var(--b2);
  transition:background .5s var(--ease),border-color .5s var(--ease);
}
.ld__sc b{display:block;font-size:clamp(10px,3.2cqh,18px);font-weight:700;line-height:1;color:var(--t2);font-variant-numeric:tabular-nums;transition:color .5s var(--ease)}
.ld__sc small{display:block;font-size:clamp(5px,1.5cqh,8.5px);letter-spacing:.08em;text-transform:uppercase;color:var(--t4);margin-top:2px}
.ld__sc.quente{background:#D1FAE5;border-color:rgba(5,150,105,.32)}
.ld__sc.quente b{color:var(--vrd)}

.ld__fases{flex:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(3px,.8cqw,6px)}
.fase{
  text-align:center;padding:clamp(3px,1.2cqh,8px) 2px;border-radius:calc(6px * var(--r));
  font-size:clamp(5.5px,1.8cqh,10px);font-weight:600;
  background:var(--pit);color:var(--t5);border:1px solid var(--b3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease);
}
.fase.is-feita{background:#FEF4F4;color:var(--rub);border-color:#FECACA}
.fase.is-on{background:var(--rub);color:#fff;border-color:var(--rub)}

.ld__log{
  list-style:none;flex:1;min-height:0;margin:0;padding:0;overflow:hidden;
  display:flex;flex-direction:column;gap:clamp(2px,.9cqh,5px);
}
.ld__log li{
  flex:none;display:flex;align-items:center;gap:clamp(4px,1cqw,8px);
  padding:clamp(3px,1.1cqh,7px) clamp(5px,1.3cqw,12px);
  border-radius:calc(6px * var(--r));background:var(--well);
  font-size:clamp(5.5px,1.8cqh,10.5px);color:var(--t2);
  animation:logEntra .4s var(--ease-pop) both;
}
.ld__log li::before{
  content:"";flex:none;width:clamp(4px,1cqh,6px);height:clamp(4px,1cqh,6px);
  border-radius:50%;background:var(--azu);
}
.ld__log li.ok::before{background:var(--vrd)}
.ld__log li b{font-weight:600;color:var(--t1)}
@keyframes logEntra{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

.ld__prop{
  flex:none;display:flex;align-items:center;gap:clamp(6px,1.4cqw,12px);
  padding:clamp(5px,1.5cqh,10px) clamp(6px,1.4cqw,12px);
  border-radius:calc(8px * var(--r));background:var(--well);border:1px solid var(--b2);
  opacity:.4;transition:opacity .5s var(--ease),border-color .5s var(--ease),background .5s var(--ease);
}
.ld__prop.is-on{opacity:1}
.ld__prop.is-ok{background:#ECFDF5;border-color:rgba(5,150,105,.34)}
.ld__propic{
  flex:none;display:grid;place-items:center;
  width:clamp(16px,4.2cqh,26px);height:clamp(16px,4.2cqh,26px);border-radius:calc(6px * var(--r));
  background:var(--card);border:1px solid var(--b2);color:var(--t3);
}
.ld__prop.is-ok .ld__propic{background:#D1FAE5;border-color:rgba(5,150,105,.3);color:var(--vrd)}
.ld__proptxt{flex:1;min-width:0}
.ld__proptxt b{display:block;font-size:clamp(6.5px,2.1cqh,11.5px);font-weight:600;color:var(--t1)}
.ld__proptxt small{display:block;font-size:clamp(5.5px,1.8cqh,10px);color:var(--t4);margin-top:1px}
.ld__val{flex:none;font-size:clamp(8px,2.6cqh,14px);font-weight:700;color:var(--t1);font-variant-numeric:tabular-nums;transition:color .5s var(--ease)}
.ld__prop.is-ok .ld__val{color:var(--vrd)}

/* ---- plataforma · 4 · o painel ---- */
.pn{flex:1;min-height:0;display:flex;flex-direction:column;gap:clamp(4px,1.4cqh,9px)}
.pn__kpis{flex:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(4px,1cqw,8px)}
.pn__k{
  padding:clamp(4px,1.5cqh,10px) clamp(4px,1.1cqw,9px);
  border-radius:calc(8px * var(--r));background:var(--card);border:1px solid var(--b1);
}
.pn__k b{display:block;font-size:clamp(9px,2.9cqh,16px);font-weight:700;line-height:1;color:var(--t1);font-variant-numeric:tabular-nums}
.pn__k small{display:block;font-size:clamp(5px,1.5cqh,8.5px);color:var(--t4);margin-top:3px;line-height:1.2}
.pn__k--ok b{color:var(--vrd)}

.pn__funil{
  flex:1;min-height:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(4px,1cqw,8px);align-items:end;
  padding:clamp(5px,1.6cqh,11px);border-radius:calc(8px * var(--r));
  background:var(--card);border:1px solid var(--b1);
}
.pn__f{display:flex;align-items:flex-end;height:100%}
.pn__f i{
  display:block;width:100%;height:0;border-radius:calc(4px * var(--r)) calc(4px * var(--r)) 0 0;
  background:linear-gradient(180deg,#FCA5A5,var(--rub));
  transition:height .8s var(--ease);
}
.pn.is-on .pn__f i{height:var(--h)}

.pn__alerta{
  flex:none;display:flex;align-items:center;gap:clamp(6px,1.4cqw,12px);
  padding:clamp(5px,1.5cqh,10px) clamp(6px,1.4cqw,12px);
  border-radius:calc(8px * var(--r));
  background:#ECFDF5;border:1px solid rgba(5,150,105,.34);
  opacity:0;transform:translateY(6px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.pn__alerta.is-on{opacity:1;transform:none}
.pn__ai{
  flex:none;display:grid;place-items:center;
  width:clamp(16px,4.2cqh,26px);height:clamp(16px,4.2cqh,26px);border-radius:calc(6px * var(--r));
  background:#D1FAE5;color:var(--vrd);
}
.pn__alerta b{display:block;font-size:clamp(6.5px,2.1cqh,11.5px);font-weight:600;color:var(--t1)}
.pn__alerta small{display:block;font-size:clamp(5.5px,1.8cqh,10px);color:var(--t2);margin-top:1px}

/* =======================================================================
   RESPONSIVO
   ======================================================================= */
@media (min-width:1181px) and (max-height:820px){
  #atosImp .ato{padding:clamp(8px,1.15vh,14px) 0 clamp(8px,1.15vh,14px) clamp(13px,1.1vw,19px)}
  #atosImp .ato__txt{font-size:clamp(.85rem,.93vw,.98rem)}
  .implanta__nota{margin-top:clamp(10px,1.6vh,18px);font-size:.81rem}
}

@media (max-width:1180px){
  #atosImp .ato{padding:clamp(9px,1.3vh,15px) 0 clamp(9px,1.3vh,15px) 15px}
  #atosImp .ato__txt{font-size:.9rem}
  /* `.feature` já vira uma coluna aqui (pipeline.css). O palco perde a altura
     que vinha da seção esticada, então precisa de uma própria — senão
     `container-type:size` mede zero e os aparelhos somem. */
  .implanta{grid-template-columns:1fr}
  .implanta .sechead__title{font-size:clamp(1.8rem,4.4vw,2.5rem)}
  /* A altura tem de ir para a CAIXA: é ela o contentor de onde saem cqw e
     cqh. Posta no palco, a caixa media zero e os aparelhos saíam com 10px. */
  .palcoBox{height:clamp(320px,46vh,480px);margin-top:clamp(18px,3vh,34px)}
}
@media (max-width:1023px){
  /* Lado a lado numa tela estreita, o celular sairia com menos de 130px e o
     texto dentro dele deixaria de ser legível. Empilhados, cada um usa a
     largura inteira — e a relação causa/efeito continua de pé, só que lida
     de cima para baixo em vez de da esquerda para a direita. */
  /* Lado a lado abaixo de 1024 o celular sairia com menos de 200px e o
     texto dentro dele deixaria de ser legível. Empilhados, cada um usa a
     largura inteira — e a relação causa/efeito continua de pé, só que lida
     de cima para baixo em vez de da esquerda para a direita. */
  .palcoBox{height:auto;container-type:inline-size;perspective:none}
  .palco2{
    flex-direction:column;align-items:center;justify-content:center;
    height:auto;gap:clamp(14px,3vh,26px);
    --H:min(calc(56cqw * var(--arF)), 400px);
  }
  .pc{--H:min(calc(70cqw * .74), 330px)}
  /* Empilhados, o elo deita: o fio fica em pé e a seta aponta para baixo,
     que é para onde o CRM foi parar. */
  /* Empilhados o arco deita: o balão desce do celular para o computador. */
  .bal{animation-name:voaBalV;max-width:62%}
  .bal--volta{animation-name:voaBalVoltaV}
  /* Empilhados não há cena em profundidade para montar: virar os aparelhos
     só rouba largura de quem já está apertado. */
  .palcoBox{perspective:none}
  .fone,.pc,.palco2.foco-f .fone,.palco2.foco-f .pc,
  .palco2.foco-p .fone,.palco2.foco-p .pc{transform:none;filter:none}
  .elo{transform:none}
  .aura{display:none}
}

@media (prefers-reduced-motion:reduce){
  .js #atosImp .ato__d{height:auto;opacity:1;transform:none;margin-top:clamp(4px,.75vh,9px)}
  #atosImp .ac::after{clip-path:inset(0 -.08em 0 0);transition:none}

}

@keyframes voaBalV{
  0%  {left:38%;top:22%;opacity:0;transform:translate(-50%,-50%) scale(.55)}
  13% {opacity:1;                 transform:translate(-50%,-50%) scale(1.02)}
  52% {left:58%;top:50%;          transform:translate(-50%,-50%) scale(1.04)}
  87% {opacity:1}
  100%{left:44%;top:76%;opacity:0;transform:translate(-50%,-50%) scale(.58)}
}
@keyframes voaBalVoltaV{
  0%  {left:44%;top:76%;opacity:0;transform:translate(-50%,-50%) scale(.55)}
  13% {opacity:1;                 transform:translate(-50%,-50%) scale(1.02)}
  52% {left:58%;top:50%;          transform:translate(-50%,-50%) scale(1.04)}
  87% {opacity:1}
  100%{left:38%;top:22%;opacity:0;transform:translate(-50%,-50%) scale(.58)}
}

/* Quem pediu menos movimento não quer balão atravessando nem aparelho girando. */
@media (prefers-reduced-motion:reduce){
  .bal{display:none}
  .fone{animation:none}
  .palco2{animation:none}
  .lupa{display:none}
  .cenaF,.crmT{transform:none}
  .spin{animation:none;border-top-color:rgba(18,46,76,.16)}
  .fase.is-on{animation:none}
  /* o foco continua existindo, mas chega sem viagem */
  .fone,.pc{transition:none}
  .aura{transition:none}
}