/* PipeON — animações de tela do site.
   A1: recriação simplificada do Pipeline, usada no hero da home.
   Depende dos tokens de cor definidos em css/pipeon.css (:root). */

/* ============================================================
   A1 — recriação simplificada do Pipeline.
   Prefixo .a1- para não colidir com o CSS do site.
   ============================================================ */

.a1{position:relative;width:100%;overflow:hidden}
.a1-fit{position:relative;width:100%}
/* A largura do palco é definida pelo JS: fluida acima do piso de
   conforto, escalada abaixo dele. */
.a1-stage{transform-origin:top left;position:absolute;top:0;left:0}

/* ---- hero: texto numa div, animação noutra, as duas centradas --
   O contêiner é mais largo que o .wrap padrão (1200px) porque a
   janela do app precisa de espaço para as três colunas caberem sem
   truncar. Nada sangra para fora da tela: tudo fica dentro. */
.a1-hero{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr);
gap:clamp(28px,3.4vw,56px);align-items:center;
max-width:1480px;margin:0 auto;padding:0 24px}
.a1-hero-txt{min-width:0}
.a1-hero-anim{min-width:0}

/* Abaixo de 1150px a coluna da direita fica estreita demais:
   o hero vira uma coluna só e a animação assume a largura inteira. */
@media (max-width:1149px){
  .a1-hero{grid-template-columns:minmax(0,1fr);gap:38px;max-width:1200px}
}

/* ---- páginas internas: o A1 ao lado do texto --------------------
   O texto fica alinhado ao .wrap (1200px), como o resto da página, e
   a animação avança até 160px além dele para as três colunas do funil
   caberem sem truncar os nomes (abaixo de 640px o A1 aperta os cards). */
.a1-lado{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr);
gap:clamp(28px,3.4vw,56px);align-items:center;
padding-left:max(24px,calc((100% - 1200px) / 2 + 24px));
padding-right:max(24px,calc((100% - 1200px) / 2 - 136px))}
@media (max-width:1149px){
  .a1-lado{grid-template-columns:minmax(0,1fr);gap:38px;max-width:1200px;margin:0 auto;padding:0 24px}
}
@media (max-width:560px){.a1-lado{padding:0 18px}}

/* ---- moldura da janela do app ---- */
.a1-win{border:1px solid rgba(120,150,210,.22);border-radius:16px;overflow:hidden;
background:linear-gradient(168deg,#0c1e46,#081530);
box-shadow:0 40px 90px -34px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.03) inset}

/* ---- barra do pipeline ---- */
.a1-top{display:flex;align-items:center;gap:12px;padding:13px 16px;
border-bottom:1px solid rgba(120,150,210,.14);background:rgba(6,16,38,.6)}
.a1-funil{display:flex;align-items:center;gap:9px;padding:8px 13px;border-radius:10px;
border:1px solid rgba(120,150,210,.26);background:rgba(255,255,255,.04);
font:600 .84rem/1 'Plus Jakarta Sans',sans-serif;color:var(--ink)}
.a1-funil svg{width:13px;height:13px;color:var(--dim)}
.a1-count{margin-left:auto;display:flex;align-items:center;gap:10px;padding:8px 14px;
border-radius:10px;border:1px solid rgba(120,150,210,.22);background:rgba(255,255,255,.03);
font:700 .84rem/1 'Sora',sans-serif}
.a1-count .n{color:var(--mut)}
.a1-count .v{color:var(--tealL)}
.a1-new{display:flex;align-items:center;gap:7px;padding:9px 15px;border-radius:10px;border:0;
background:linear-gradient(92deg,var(--blue),var(--blue2));color:#fff;
font:700 .84rem/1 'Sora',sans-serif;box-shadow:0 8px 20px -8px rgba(47,123,255,.7)}

/* ---- quadro ---- */
.a1-board{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:16px;
min-height:392px;align-content:start}
.a1-col{container-type:inline-size;border-radius:13px;background:rgba(6,15,36,.62);
border:1px solid rgba(120,150,210,.1);overflow:hidden;display:flex;flex-direction:column}
.a1-col::before{content:"";display:block;height:3px;background:var(--c)}
.a1-colhd{display:flex;align-items:center;gap:8px;padding:11px 13px;
border-bottom:1px solid rgba(120,150,210,.1);background:rgba(255,255,255,.022)}
.a1-dot{width:8px;height:8px;border-radius:50%;background:var(--c);flex:0 0 8px}
.a1-colhd .nm{font:700 .84rem/1 'Sora',sans-serif;color:#fff;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis}
.a1-pill{flex:0 0 auto;min-width:20px;padding:2px 7px;border-radius:999px;
background:rgba(255,255,255,.09);font:700 .72rem/1.5 'Sora',sans-serif;color:var(--mut);
text-align:center}
.a1-colhd .sum{margin-left:auto;font:700 .78rem/1 'Sora',sans-serif;color:var(--mut);
white-space:nowrap;font-variant-numeric:tabular-nums}
.a1-list{padding:10px;display:flex;flex-direction:column;gap:9px;flex:1}

/* ---- card ---- */
.a1-card{position:relative;display:grid;grid-template-columns:auto 1fr auto;
grid-template-areas:"av id meta" "val val own";gap:4px 10px;padding:11px;border-radius:11px;
background:linear-gradient(165deg,#12295c,#0d1c42);border:1px solid rgba(120,150,210,.16)}
.a1-av{grid-area:av;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
font:700 .76rem/1 'Sora',sans-serif;color:#fff;background:var(--av,#28407e)}
.a1-id{grid-area:id;min-width:0}
/* O título quebra em até duas linhas, como no app. Truncar em uma
   linha só transformava todo nome em "C..." nas colunas estreitas. */
.a1-id b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden;font:700 .87rem/1.25 'Sora',sans-serif;color:#fff;
overflow-wrap:anywhere}
.a1-id span{display:block;margin-top:3px;font-size:.76rem;color:var(--dim);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a1-meta{grid-area:meta;display:flex;align-items:flex-start;gap:6px}
.a1-chat{display:flex;align-items:center;gap:5px;padding:4px 8px;border-radius:7px;
background:rgba(19,181,166,.14);border:1px solid rgba(19,181,166,.3);
font:700 .68rem/1 'Sora',sans-serif;color:var(--tealL);white-space:nowrap}
.a1-chat svg{width:11px;height:11px}
/* temperatura: ponto + número, faixas de cor por score */
.a1-temp{display:flex;align-items:center;gap:5px;padding:4px 8px;border-radius:7px;
background:rgba(255,255,255,.06);font:700 .7rem/1 'Sora',sans-serif;color:var(--mut);
font-variant-numeric:tabular-nums;transition:color .5s,background .5s}
.a1-temp i{width:6px;height:6px;border-radius:50%;background:#6b7ea6;
transition:background .5s,box-shadow .5s}
.a1-temp[data-band="morno"]{color:#ffc98a;background:rgba(245,158,11,.13)}
.a1-temp[data-band="morno"] i{background:#f59e0b}
.a1-temp[data-band="quente"]{color:#ffb3a0;background:rgba(255,110,80,.16)}
.a1-temp[data-band="quente"] i{background:#ff6e50;box-shadow:0 0 0 3px rgba(255,110,80,.22)}
.a1-val{grid-area:val;justify-self:start;margin-top:5px;padding:4px 9px;border-radius:7px;
background:rgba(19,181,166,.12);font:700 .8rem/1 'Sora',sans-serif;color:var(--tealL);
font-variant-numeric:tabular-nums;white-space:nowrap}
.a1-own{grid-area:own;align-self:end;justify-self:end;width:22px;height:22px;border-radius:50%;
display:grid;place-items:center;font:700 .62rem/1 'Sora',sans-serif;color:#cfe0ff;
background:rgba(255,255,255,.11)}

/* estado vazio da coluna */
.a1-empty{flex:1;min-height:96px;margin:2px;border-radius:10px;display:grid;
place-items:center;gap:7px;border:1px dashed rgba(120,150,210,.2);color:var(--gray);
font-size:.78rem;text-align:center;padding:14px}
.a1-empty svg{width:20px;height:20px;opacity:.6}

/* ---- beats do roteiro ---- */
/* o lead novo entra pelo topo */
.a1-card.enter{animation:a1in .55s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes a1in{from{opacity:0;transform:translateY(-16px) scale(.94)}
to{opacity:1;transform:none}}
/* o card muda de etapa: fantasma sai, prévia entra no destino */
.a1-card.ghost{opacity:.34;transform:scale(.97) rotate(-1.4deg);
transition:opacity .5s,transform .5s;pointer-events:none}
.a1-card.a1-drop{animation:a1drop .6s cubic-bezier(.2,.9,.3,1.15) both}
@keyframes a1drop{from{opacity:0;transform:translateY(-10px) scale(.96)}
to{opacity:1;transform:none}}
.a1-card.leave{animation:a1out .45s ease both}
@keyframes a1out{to{opacity:0;transform:translateX(22px) scale(.93);
margin-bottom:-60px;max-height:0;padding-top:0;padding-bottom:0}}

/* o clique */
.a1-card.focus{border-color:rgba(95,227,210,.65);
box-shadow:0 0 0 1px rgba(95,227,210,.5),0 14px 34px -12px rgba(19,181,166,.55);
transition:border-color .35s,box-shadow .35s}

/* cursor sintético */
.a1-cur{position:absolute;top:0;left:0;width:19px;height:19px;z-index:40;opacity:0;
pointer-events:none;transition:transform .5s cubic-bezier(.5,0,.2,1),opacity .28s;
filter:drop-shadow(0 3px 7px rgba(0,0,0,.6))}
.a1-cur.on{opacity:1}
.a1-cur::after{content:"";position:absolute;inset:-9px;border-radius:50%;
border:2px solid var(--tealL);opacity:0;transform:scale(.4)}
.a1-cur.tap::after{animation:a1tap .55s ease both}
@keyframes a1tap{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(1.5)}}

/* 4,2s — Piper */
.a1-piper{position:absolute;right:16px;bottom:16px;z-index:30;display:flex;
align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:0;
background:linear-gradient(92deg,var(--blue),var(--blue2));color:#fff;
font:700 .84rem/1 'Sora',sans-serif;box-shadow:0 12px 26px -10px rgba(47,123,255,.85)}
.a1-piper svg{width:15px;height:15px}
.a1-piper .i-down{display:none}
.a1-piper.open .i-bot{display:none}
.a1-piper.open .i-down{display:block}
.a1-piper.pulse{animation:a1pulse .9s ease 2}
@keyframes a1pulse{50%{box-shadow:0 12px 26px -10px rgba(47,123,255,.85),
0 0 0 10px rgba(95,227,210,.16)}}

/* painel do Piper — cabeçalho azul, bolhas, composer.
   Estrutura tirada dos prints reais do assistente. */
.a1-panel{position:absolute;right:16px;bottom:62px;z-index:31;width:302px;
border-radius:14px;overflow:hidden;opacity:0;transform:translateY(14px) scale(.96);
transform-origin:100% 100%;background:#0e1729;border:1px solid rgba(120,150,210,.22);
box-shadow:0 30px 60px -20px rgba(0,0,0,.9);transition:opacity .4s,transform .4s}
.a1-panel.on{opacity:1;transform:none}
.a1-pp-hd{display:flex;align-items:center;gap:9px;padding:10px 12px;
background:linear-gradient(92deg,#2f6fe4,#3b82f6)}
.a1-pp-hd .bot{flex:0 0 30px;width:30px;height:30px;border-radius:50%;display:grid;
place-items:center;background:rgba(255,255,255,.22)}
.a1-pp-hd .bot svg{width:16px;height:16px;color:#fff}
.a1-pp-hd .who{min-width:0;flex:1}
.a1-pp-hd .who b{display:block;font:700 .87rem/1.2 'Sora',sans-serif;color:#fff}
.a1-pp-hd .who span{display:block;font-size:.71rem;color:rgba(255,255,255,.78)}
.a1-pp-hd .act{display:flex;gap:9px;color:rgba(255,255,255,.85)}
.a1-pp-hd .act svg{width:14px;height:14px}
.a1-pp-body{padding:12px;display:flex;flex-direction:column;gap:9px;min-height:118px}
.a1-pp-msg{display:flex;gap:7px;align-items:flex-end;max-width:88%}
.a1-pp-msg p{margin:0;padding:9px 12px;border-radius:12px;font-size:.79rem;line-height:1.45}
.a1-pp-msg.me{align-self:flex-end}
.a1-pp-msg.me p{background:#3b82f6;color:#fff;border-bottom-right-radius:4px}
.a1-pp-msg.ai{align-self:flex-start}
.a1-pp-msg.ai p{background:#1e2637;color:#dfe7f7;border-bottom-left-radius:4px}
.a1-pp-msg.ai p b{color:#7fb4ff}
.a1-pp-msg.ai .a1-ico{flex:0 0 22px;width:22px;height:22px;border-radius:7px;display:grid;
place-items:center;background:#18233a}
.a1-pp-msg.ai .a1-ico svg{width:12px;height:12px;color:#5b93ff}
.a1-pp-msg.in{animation:a1bub .34s cubic-bezier(.2,.9,.3,1.15) both}
@keyframes a1bub{from{opacity:0;transform:translateY(7px) scale(.96)}to{opacity:1;transform:none}}
.a1-pp-typing p{display:flex;gap:4px;padding:12px}
.a1-pp-typing i{width:5px;height:5px;border-radius:50%;background:#7b8cb2;
animation:a1typ 1.1s ease-in-out infinite}
.a1-pp-typing i:nth-child(2){animation-delay:.16s}
.a1-pp-typing i:nth-child(3){animation-delay:.32s}
@keyframes a1typ{0%,60%,100%{opacity:.28;transform:translateY(0)}
30%{opacity:1;transform:translateY(-3px)}}
.a1-pp-comp{display:flex;align-items:center;gap:9px;padding:9px 10px;
border-top:1px solid rgba(120,150,210,.14)}
.a1-pp-comp .fld{flex:1;padding:8px 12px;border-radius:9px;background:#182131;
border:1px solid rgba(120,150,210,.16);font-size:.76rem;color:#6b7c9e}
.a1-pp-comp svg{width:15px;height:15px;color:#7b8cb2;flex:0 0 15px}
.a1-pp-comp .send{flex:0 0 30px;width:30px;height:30px;border-radius:9px;display:grid;
place-items:center;background:#3b82f6}
.a1-pp-comp .send svg{width:14px;height:14px;color:#fff}

/* ---- acessibilidade: sem movimento, entrega o estado final ---- */
@media (prefers-reduced-motion:reduce){
  .a1-card.enter,.a1-card.a1-drop,.a1-card.leave,.a1-piper.pulse,
  .a1-pp-msg.in,.a1-pp-typing i{animation:none!important}
  .a1-card.ghost{opacity:1;transform:none}
  .a1-cur{display:none}
  .a1-panel{transition:none}
}

/* ---- celular ------------------------------------------------
   Abaixo de 700px o palco trava num piso menor (ver MIN_W no
   anim.js) e estas regras compactam o miolo, para que as três
   colunas ainda caibam sem virar borrão. */
@media (max-width:700px){
  .a1-top{padding:10px 12px;gap:8px}
  .a1-new{display:none}
  .a1-board{gap:8px;padding:10px;min-height:334px}
  .a1-colhd{padding:9px 10px;gap:6px}
  .a1-colhd .sum{font-size:.72rem}
  .a1-list{padding:7px;gap:7px}
  .a1-card{padding:9px;gap:3px 7px}
  .a1-av{width:28px;height:28px;font-size:.7rem}
  .a1-chat span,.a1-chat{font-size:.64rem;padding:3px 6px}
  .a1-panel{width:254px}
}

/* ---- coluna estreita ----------------------------------------
   Container query: o card reage a largura REAL da coluna, nao a da
   viewport. Abaixo de 300px o botao de chat vira so o icone e o
   titulo recupera o espaco que faltava. */
@container (max-width:300px){
  .a1-chat span{display:none}
  .a1-chat{padding:5px 6px}
  /* melhor sumir do que virar "Reforma d..." */
  .a1-id span{display:none}
  .a1-id b{-webkit-line-clamp:2}
}
@container (max-width:230px){
  .a1-av{width:26px;height:26px;font-size:.66rem}
  .a1-temp{padding:4px 6px;gap:4px}
}


/* ============================================================
   A3 — WhatsApp integrado. Seção "WhatsApp integrado à gestão
   comercial", de fundo claro. Recria o inbox de três colunas do
   app — lista, conversa e ficha do contato — num recorte enxuto.
   Toda a marcação interna é gerada pelo JS.
   ============================================================ */

/* a animação leva um pouco mais de espaço que o texto (1,2 : 1) */
@media (min-width:1100px){.grid2.a3-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}}
@media (max-width:1099px){.grid2.a3-grid{grid-template-columns:minmax(0,1fr)}}
.a3-hold{min-width:0}

.a3{position:relative;width:100%;overflow:hidden}
.a3-fit{position:relative;width:100%}
.a3-stage{position:absolute;top:0;left:0;transform-origin:top left}
.a3 p{margin:0}

/* ---- janela ---- */
.a3-win{display:grid;grid-template-columns:minmax(0,.25fr) minmax(0,.45fr) minmax(0,.3fr);
height:470px;border-radius:16px;overflow:hidden;background:#070d1c;
border:1px solid rgba(120,150,210,.22);box-shadow:0 34px 70px -30px rgba(10,26,58,.55);
font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:#dfe7f7;text-align:left}
.a3-win svg{flex:0 0 auto}

/* ---- coluna 1: lista de conversas ---- */
.a3-list{display:flex;flex-direction:column;min-width:0;min-height:0;background:#0d1628;
border-right:1px solid rgba(120,150,210,.12)}
.a3-lhd{display:flex;align-items:center;gap:6px;padding:12px 12px 9px}
.a3-lhd b{font:700 .88rem/1 'Sora',sans-serif;color:#fff}
.a3-lhd>span{font-size:.74rem;color:#6b7c9e}
.a3-lhd .new{margin-left:auto;width:24px;height:24px;border-radius:7px;background:#3b82f6;
display:grid;place-items:center}
.a3-lhd .new svg{width:13px;height:13px;color:#fff}
.a3-search,.a3-conx{display:flex;align-items:center;gap:6px;margin:0 12px 7px;padding:6px 9px;
border-radius:8px;font-size:.66rem;white-space:nowrap;overflow:hidden}
.a3-search{border:1px solid rgba(120,150,210,.18);color:#6b7c9e}
.a3-conx{margin-bottom:10px;border:1px solid rgba(59,130,246,.45);background:rgba(59,130,246,.1);
color:#7fb4ff;font-weight:600}
.a3-search svg,.a3-conx svg{width:12px;height:12px}
.a3-conx i{margin-left:auto;min-width:15px;height:15px;border-radius:99px;background:#3b82f6;
color:#fff;font:700 .56rem/15px 'Sora',sans-serif;text-align:center;font-style:normal}
.a3-rows{position:relative;flex:1;min-height:0;overflow:hidden;
border-top:1px solid rgba(120,150,210,.1)}
.a3-row{position:absolute;left:0;right:0;top:0;height:64px;display:grid;
grid-template-columns:30px minmax(0,1fr);align-content:center;gap:2px 8px;
padding:0 10px 0 11px;border-left:2px solid transparent;
transition:transform .55s cubic-bezier(.3,.8,.3,1),background .3s,border-color .3s}
.a3-row.sel{background:rgba(59,130,246,.1);border-left-color:#3b82f6}
.a3-row.tap{background:rgba(59,130,246,.2)}
.a3-av{display:grid;place-items:center;border-radius:50%;color:#fff;background:var(--av);
font:700 .62rem/1 'Sora',sans-serif}
.a3-row .a3-av{grid-row:1 / 4;width:30px;height:30px}
.a3-row .l1{display:flex;align-items:baseline;gap:4px;min-width:0}
.a3-row .l1 b{font:700 .72rem/1.25 'Sora',sans-serif;color:#fff;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis}
.a3-row .l1 span{margin-left:auto;font-size:.58rem;color:#6b7c9e;white-space:nowrap}
.a3-row .l2{display:flex;align-items:center;gap:3px;font-size:.58rem;color:#6b7c9e;
white-space:nowrap;overflow:hidden}
.a3-row .l2 svg{width:9px;height:9px}
.a3-row .l3{display:flex;align-items:center;gap:4px;min-width:0;font-size:.66rem;color:#aebbda}
.a3-pv{flex:1;min-width:0;display:flex;align-items:center;gap:3px;white-space:nowrap;overflow:hidden}
.a3-pv svg{width:10px;height:10px;color:#6b7c9e}
.a3-pv span{overflow:hidden;text-overflow:ellipsis}
.a3-un{min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:#25d366;color:#fff;
font:700 .56rem/16px 'Sora',sans-serif;text-align:center;font-style:normal;transform:scale(0);
transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.a3-row.has-un .a3-un{transform:scale(1)}
.a3-row.has-un .a3-pv{color:#fff;font-weight:600}

/* ---- coluna 2: conversa ---- */
.a3-conv{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
.a3-chd{display:flex;align-items:center;gap:8px;padding:9px 11px;background:#0d1628;
border-bottom:1px solid rgba(120,150,210,.12)}
.a3-chd .a3-av{flex:0 0 30px;width:30px;height:30px}
.a3-chd .who{min-width:0}
.a3-chd .who b{display:block;font:700 .78rem/1.2 'Sora',sans-serif;color:#fff;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis}
.a3-chd .who span{display:block;font-size:.6rem;color:#8fa0c4}
.a3-pills{margin-left:auto;display:flex;gap:4px}
.a3-pill{display:flex;align-items:center;gap:3px;padding:4px 6px;border-radius:7px;
font-size:.58rem;font-weight:600;white-space:nowrap}
.a3-pill svg{width:10px;height:10px}
.a3-pill.cx{border:1px solid rgba(59,130,246,.45);background:rgba(59,130,246,.1);color:#7fb4ff}
.a3-pill.hu{border:1px solid rgba(245,158,11,.35);background:rgba(245,158,11,.14);color:#fbbf24}
/* flex-end: mensagem nova empurra as antigas para cima, como num chat */
.a3-msgs{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;
gap:6px;padding:10px 11px;overflow:hidden}
.a3-chd,.a3-msgs,.a3-ficha{transition:opacity .2s}
.a3-conv.sw .a3-chd,.a3-conv.sw .a3-msgs,.a3-ficha.sw{opacity:0}
.a3-date{flex:0 0 auto;align-self:center;padding:2px 9px;border-radius:99px;background:#18233a;
font:600 .56rem/1.5 'Sora',sans-serif;color:#9fb0cf}
.a3-b{flex:0 0 auto;max-width:84%;padding:6px 9px 5px;border-radius:11px;font-size:.68rem;
line-height:1.4}
.a3-b.in{align-self:flex-start;background:#1c2436;border-bottom-left-radius:4px}
.a3-b.out{align-self:flex-end;background:#0e3a2d;color:#e6f5ee;border-bottom-right-radius:4px}
/* quem enviou, no topo de cada bolha — como no app */
.a3-b .nm{display:block;margin-bottom:2px;font:700 .52rem/1.2 'Sora',sans-serif;
letter-spacing:.06em;text-transform:uppercase;color:#8fa0c4}
.a3-b.out .nm{color:#7fcfae}
.a3-b .t{display:flex;justify-content:flex-end;align-items:center;gap:3px;margin-top:2px;
font-size:.52rem;color:#8fa0c4}
.a3-b .t svg{width:12px;height:12px;color:#5b9cff}
.a3-b.pop{animation:a3pop .38s cubic-bezier(.2,.9,.3,1.15) both}
@keyframes a3pop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
/* áudio */
.a3-aud{display:flex;align-items:center;gap:7px;width:176px;max-width:100%}
.a3-aud .pl{flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:#eef4ff;
color:#0A1A3A;display:grid;place-items:center}
.a3-aud .pl svg{width:10px;height:10px;margin-left:1px}
.a3-aud .bar{flex:1;height:3px;border-radius:99px;background:rgba(255,255,255,.18)}
.a3-aud .sp{padding:1px 5px;border-radius:5px;background:rgba(255,255,255,.1);
font:700 .5rem/1.4 'Sora',sans-serif}
.a3-audt{display:flex;justify-content:space-between;width:176px;max-width:100%;
padding:2px 0 0 29px;font-size:.52rem;color:#8fa0c4}
.a3-tr{display:flex;align-items:center;gap:4px;margin-top:4px;font-size:.58rem;font-weight:600;
color:#aebbda}
.a3-tr svg{width:10px;height:10px}
.a3-tr.tap,.a3-tr.busy{color:#7fb4ff}
.a3-trtext{max-width:190px;margin-top:5px;padding-top:5px;border-top:1px solid rgba(255,255,255,.08);
font-size:.64rem;font-style:italic;color:#dfe7f7;animation:a3pop .35s both}
/* arquivo */
.a3-file{display:flex;align-items:center;gap:8px;padding:5px 7px;border-radius:8px;
background:rgba(0,0,0,.2)}
.a3-file .ic{flex:0 0 24px;width:24px;height:28px;border-radius:4px;background:#e5484d;
display:grid;place-items:center;font:800 .46rem/1 'Sora',sans-serif;color:#fff}
.a3-file b{display:block;font-size:.64rem;color:#fff;white-space:nowrap}
.a3-file small{display:block;font-size:.54rem;color:#9fcfb8}
/* composição */
.a3-tabs{display:flex;gap:6px;padding:7px 11px 0;border-top:1px solid rgba(120,150,210,.12)}
.a3-tab{display:flex;align-items:center;gap:4px;padding:3px 8px;border-radius:99px;
font-size:.58rem;font-weight:600}
.a3-tab svg{width:10px;height:10px}
.a3-tab.a3-wa{background:#25d366;color:#fff}
.a3-tab.em{border:1px solid rgba(120,150,210,.25);color:#aebbda}
.a3-comp{display:flex;align-items:center;gap:8px;padding:7px 11px 9px}
.a3-comp>svg{width:14px;height:14px;color:#7b8cb2}
.a3-field{flex:1;min-width:0;min-height:30px;display:flex;align-items:center;flex-wrap:wrap;
gap:4px 6px;padding:6px 9px;border-radius:9px;background:#131d31;
border:1px solid rgba(120,150,210,.16);font-size:.66rem}
.a3-field .ph{color:#6b7c9e}
.a3-field .tx{color:#fff}
.a3-caret{display:inline-block;width:1px;height:12px;margin-left:-4px;background:#7fb4ff;
animation:a3blink 1s steps(1) infinite}
@keyframes a3blink{50%{opacity:0}}
.a3-att{display:flex;align-items:center;gap:4px;padding:2px 7px;border-radius:6px;
background:rgba(229,72,77,.16);color:#ff9ea1;font-size:.58rem;font-weight:600;white-space:nowrap;
animation:a3pop .3s both}
.a3-att svg{width:10px;height:10px}
.a3-send{flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:#3b82f6;
display:grid;place-items:center;transition:transform .15s}
.a3-send svg{width:13px;height:13px;color:#fff}
.a3-send.tap{transform:scale(.88)}

/* ---- coluna 3: ficha do contato ---- */
.a3-ficha{position:relative;min-width:0;min-height:0;overflow:hidden;background:#0d1628;
border-left:1px solid rgba(120,150,210,.12)}
.a3-fin{display:flex;flex-direction:column;gap:9px;padding:11px;
transition:transform .6s cubic-bezier(.3,.8,.3,1)}
.a3-lab{font:700 .54rem/1 'Sora',sans-serif;letter-spacing:.08em;text-transform:uppercase;
color:#7b8cb2}
.a3-blk{display:flex;flex-direction:column;gap:6px}
.a3-contact{display:flex;align-items:flex-start;gap:6px}
.a3-contact>div{min-width:0}
.a3-contact b{display:block;font:700 .76rem/1.25 'Sora',sans-serif;color:#fff}
.a3-contact>div>span{display:block;font-size:.6rem;color:#8fa0c4}
.a3-edit{margin-left:auto;display:flex;align-items:center;gap:3px;padding:4px 7px;border-radius:6px;
background:#3b82f6;color:#fff;font-size:.56rem;font-weight:600;white-space:nowrap}
.a3-edit svg{width:10px;height:10px}
.a3-hum{display:flex;align-items:center;gap:5px;padding:7px 8px;border-radius:8px;
background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.25);font-size:.62rem;
font-weight:700;color:#fbbf24}
.a3-hum svg{width:11px;height:11px}
.a3-hum span{margin-left:auto;font-size:.54rem;font-weight:500;color:#8fa0c4;white-space:nowrap}
.a3-resp{padding:8px;border-radius:9px;border:1px solid rgba(120,150,210,.16)}
.a3-resp small{display:block;font-size:.54rem;color:#8fa0c4}
.a3-resp b{display:block;font-size:.66rem;color:#fff}
.a3-btns{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.a3-resp .a3-btns{margin-top:7px}
.a3-btn{display:flex;align-items:center;justify-content:center;gap:4px;padding:6px 4px;
border-radius:7px;border:1px solid rgba(120,150,210,.22);font-size:.56rem;font-weight:600;
line-height:1.25;text-align:center;color:#dfe7f7;transition:background .2s,border-color .2s}
.a3-btn svg{width:11px;height:11px}
.a3-btn.pri{background:#3b82f6;border-color:#3b82f6;color:#fff}
.a3-btn.tap{background:rgba(59,130,246,.22);border-color:#3b82f6}
/* resumo da IA */
.a3-sum{display:none;padding:9px;border-radius:9px;background:#111d33;
border:1px solid rgba(120,150,210,.22)}
.a3-sum.on{display:block;animation:a3pop .4s both}
.a3-sum .hd{display:flex;align-items:center;gap:5px;margin-bottom:7px;
font:700 .56rem/1 'Sora',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#7fb4ff}
.a3-sum .hd svg{width:11px;height:11px}
.a3-chips{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:7px}
.a3-chip{padding:2px 6px;border-radius:5px;border:1px solid;font-size:.54rem;font-weight:600;
line-height:1.4;white-space:nowrap}
.a3-chip.am{color:#fbbf24;border-color:rgba(245,158,11,.4);background:rgba(245,158,11,.1)}
.a3-chip.gr{color:#5fe3b5;border-color:rgba(37,211,102,.35);background:rgba(37,211,102,.08)}
.a3-chip.bl{color:#7fb4ff;border-color:rgba(59,130,246,.4);background:rgba(59,130,246,.1)}
.a3-sum .a3-lab{margin-bottom:3px}
.a3-sum p{margin-bottom:7px;font-size:.62rem;line-height:1.4;color:#dfe7f7}
.a3-next{padding:7px 8px;border-radius:7px;background:rgba(59,130,246,.1);font-size:.62rem;
line-height:1.4;color:#dfe7f7}
.a3-next small{display:flex;align-items:center;gap:4px;margin-bottom:3px;
font:700 .52rem/1 'Sora',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#7fb4ff}
.a3-next svg{width:10px;height:10px}
/* negócios */
.a3-neghd{display:flex;align-items:center;gap:5px;padding-top:9px;
border-top:1px solid rgba(120,150,210,.12)}
.a3-neghd svg{width:10px;height:10px;color:#7b8cb2}
.a3-neghd i{margin-left:auto;min-width:15px;height:15px;border-radius:99px;
background:rgba(255,255,255,.1);font:700 .54rem/15px 'Sora',sans-serif;text-align:center;
font-style:normal;color:#aebbda}
.a3-newneg{display:flex;align-items:center;justify-content:center;gap:4px;padding:6px;
border-radius:7px;background:#3b82f6;color:#fff;font-size:.6rem;font-weight:600}
.a3-newneg svg{width:10px;height:10px}
.a3-neg{padding:9px;border-radius:9px;border:1px solid rgba(120,150,210,.18)}
.a3-neg b{display:block;margin-bottom:5px;font:700 .68rem/1.25 'Sora',sans-serif;color:#fff}
.a3-stg{display:inline-block;padding:2px 8px;border-radius:99px;background:rgba(255,255,255,.1);
font-size:.58rem;font-weight:600;line-height:1.5;color:#dfe7f7;transition:background .4s,color .4s}
.a3-stg.chg{background:rgba(47,123,255,.28);color:#bcd6ff}
.a3-lk{display:flex;gap:9px;margin-top:6px;font-size:.58rem;color:#6ea2ff}
.a3-lk .tap{text-decoration:underline}

/* ---- cursor: um span em volta do svg, para o ::after do toque
   renderizar (pseudo-elemento em svg não aparece) ---- */
.a3-cur{position:absolute;top:0;left:0;width:19px;height:19px;z-index:40;opacity:0;
pointer-events:none;transition:transform .42s cubic-bezier(.5,0,.2,1),opacity .28s;
filter:drop-shadow(0 3px 7px rgba(0,0,0,.6))}
.a3-cur svg{display:block;width:19px;height:19px}
.a3-cur.on{opacity:1}
.a3-cur::after{content:"";position:absolute;left:-8px;top:-8px;width:34px;height:34px;
border-radius:50%;border:2px solid var(--tealL);opacity:0;transform:scale(.4)}
.a3-cur.tap::after{animation:a3tapc .5s ease both}
@keyframes a3tapc{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(1.4)}}

/* reinício do loop: volta ao estado inicial sem animar a volta */
.a3-still,.a3-still *{transition:none!important}

/* ---- tela estreita: a lista sai, conversa e ficha empilham ---- */
.a3.narrow .a3-win{grid-template-columns:minmax(0,1fr);grid-template-rows:400px 330px;height:auto}
.a3.narrow .a3-list{display:none}
.a3.narrow .a3-ficha{border-left:0;border-top:1px solid rgba(120,150,210,.16)}

@media (prefers-reduced-motion:reduce){
  .a3 *{animation:none!important;transition:none!important}
  .a3-cur{display:none}
}


/* ============================================================
   A5 — Piper, o assistente. Seção "Inteligência artificial
   integrada ao processo de vendas" (fundo escuro), abaixo dos
   4 cards. O painel do Piper aberto sobre o app, no canto
   inferior direito, como no produto. Marcação interna via JS.
   ============================================================ */

.a5-hold{margin-top:44px}
.a5{position:relative;width:100%;max-width:860px;margin:0 auto;overflow:hidden}
.a5-fit{position:relative;width:100%}
.a5-stage{position:absolute;top:0;left:0;transform-origin:top left}
.a5 p{margin:0}

.a5-win{position:relative;height:480px;border-radius:16px;overflow:hidden;
background:linear-gradient(168deg,#0c1e46,#081530);border:1px solid rgba(120,150,210,.22);
box-shadow:0 40px 90px -34px rgba(0,0,0,.85);
font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:#dfe7f7;text-align:left}
.a5-win svg{flex:0 0 auto}

/* o app ao fundo: um funil esmaecido, só para dar contexto de que
   o Piper abre por cima de qualquer tela */
.a5-bg{position:absolute;inset:0;padding:16px;display:grid;grid-template-columns:repeat(3,1fr);
gap:12px;opacity:.38;filter:blur(1.5px);pointer-events:none}
.a5-bgcol{display:flex;flex-direction:column;gap:9px;padding:10px;border-radius:12px;
background:rgba(6,15,36,.6);border:1px solid rgba(120,150,210,.12);overflow:hidden}
.a5-bgcol::before{content:"";display:block;height:3px;margin:-10px -10px 3px;background:var(--c)}
.a5-bgcol b{font:700 .78rem/1 'Sora',sans-serif;color:#fff}
.a5-bgcard{flex:0 0 62px;border-radius:10px;background:linear-gradient(165deg,#12295c,#0d1c42);
border:1px solid rgba(120,150,210,.16)}

/* pill flutuante: com o painel aberto, mostra o chevron */
.a5-pill{position:absolute;right:18px;bottom:16px;z-index:3;display:flex;align-items:center;gap:8px;
padding:11px 18px;border-radius:999px;background:#5b8def;color:#fff;font:700 .86rem/1 'Sora',sans-serif;
box-shadow:0 12px 26px -10px rgba(47,123,255,.85)}
.a5-pill svg{width:15px;height:15px}

/* ---- painel ---- */
.a5-panel{position:absolute;right:18px;bottom:68px;z-index:4;width:360px;height:392px;
display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:#111a2b;
border:1px solid rgba(120,150,210,.2);box-shadow:0 30px 60px -20px rgba(0,0,0,.9)}
.a5-hd{display:flex;align-items:center;gap:10px;padding:11px 14px;background:#5b8def}
.a5-hd .bot{flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.25);
display:grid;place-items:center}
.a5-hd .bot svg{width:16px;height:16px;color:#fff}
.a5-hd .who{flex:1;min-width:0}
.a5-hd .who b{display:block;font:700 .9rem/1.2 'Sora',sans-serif;color:#fff}
.a5-hd .who span{display:block;font-size:.72rem;color:rgba(255,255,255,.82)}
.a5-hd .act{display:flex;align-items:center;gap:12px;color:#fff}
.a5-hd .act svg{display:block;width:15px;height:15px}
/* a lixeira só aparece quando já existe conversa, como no app */
.a5-hd .trash{transition:opacity .3s}
.a5-panel:not(.has) .a5-hd .trash{opacity:0}

.a5-body{position:relative;flex:1;min-height:0;overflow:hidden}
/* estado inicial real: saudação e as três sugestões prontas */
.a5-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:8px;padding:18px;text-align:center;transition:opacity .3s}
.a5-panel.has .a5-empty{opacity:0;pointer-events:none}
.a5-empty .big{width:44px;height:44px;margin-bottom:4px;border-radius:12px;background:#1b2740;
display:grid;place-items:center}
.a5-empty .big svg{width:22px;height:22px;color:#5b8def}
.a5-empty b{font:700 .92rem/1.2 'Sora',sans-serif;color:#fff}
.a5-empty p{max-width:250px;margin-bottom:6px;font-size:.72rem;line-height:1.45;color:#8fa0c4}
.a5-sug{padding:6px 12px;border-radius:999px;border:1px solid rgba(120,150,210,.3);background:#161f33;
font-size:.7rem;color:#dfe7f7;transition:background .2s,border-color .2s}
.a5-sug.tap{background:rgba(91,141,239,.25);border-color:#5b8def}

/* conversa: flex-end, a mensagem nova empurra as antigas para cima */
.a5-msgs{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
gap:9px;padding:12px 14px}
.a5-m{display:flex;align-items:flex-end;gap:8px;max-width:88%}
.a5-m.me{align-self:flex-end}
.a5-m.ai{align-self:flex-start}
.a5-m .bx{padding:9px 12px;border-radius:14px;font-size:.74rem;line-height:1.5}
.a5-m.me .bx{background:#5b8def;color:#fff}
.a5-m.ai .bx{background:#262f42;color:#e3e9f5}
.a5-m.ai .a5-ico{flex:0 0 24px;width:24px;height:24px;border-radius:8px;background:#1b2740;
display:grid;place-items:center}
.a5-m.ai .a5-ico svg{width:13px;height:13px;color:#5b8def}
.a5-m ul{margin:4px 0 5px;padding-left:16px}
.a5-m li{margin:2px 0}
.a5-m b{color:#fff}
.a5-m.in{animation:a5in .34s cubic-bezier(.2,.9,.3,1.15) both}
@keyframes a5in{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.a5-dots .bx{display:flex;gap:4px;padding:11px 13px}
.a5-dots i{width:6px;height:6px;border-radius:50%;background:#8fa0c4;
animation:a5typ 1.1s ease-in-out infinite}
.a5-dots i:nth-child(2){animation-delay:.16s}
.a5-dots i:nth-child(3){animation-delay:.32s}
@keyframes a5typ{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}

/* ---- barra de composição ---- */
.a5-comp{display:flex;align-items:center;gap:10px;padding:10px 12px;
border-top:1px solid rgba(120,150,210,.14)}
.a5-comp .clip,.a5-comp .mic{width:16px;height:16px;color:#8fa0c4}
.a5-comp .mic{transition:color .2s}
.a5-comp .mic.tap{color:#5b8def}
.a5-fld{flex:1;min-width:0;min-height:36px;display:flex;align-items:center;padding:0 12px;
border-radius:10px;background:#1a2336;border:1px solid rgba(120,150,210,.18);font-size:.74rem;
color:#6b7c9e;white-space:nowrap;overflow:hidden}
.a5-fld .tx{color:#fff}
.a5-caret{display:inline-block;width:1px;height:14px;margin-left:1px;background:#7fb4ff;
animation:a5blink 1s steps(1) infinite}
@keyframes a5blink{50%{opacity:0}}
.a5-send{flex:0 0 40px;width:40px;height:34px;border-radius:9px;background:#4a7fe0;
display:grid;place-items:center;transition:transform .15s}
.a5-send svg{width:15px;height:15px;color:#fff}
.a5-send.tap{transform:scale(.9)}
/* gravando: a barra troca de modo, como no print */
.a5-rec{display:none;flex:1;align-items:center;gap:10px;min-height:36px;font-size:.76rem;color:#dfe7f7}
.a5-rec svg{width:16px;height:16px;color:#ef4444}
.a5-rec i{width:8px;height:8px;border-radius:50%;background:#ef4444;animation:a5blink 1s steps(1) infinite}
.a5-rec em{font-style:normal;font-variant-numeric:tabular-nums}
.a5-comp.rec .clip,.a5-comp.rec .a5-fld,.a5-comp.rec .mic{display:none}
.a5-comp.rec .a5-rec{display:flex}

/* ---- cursor (span em volta do svg, para o ::after renderizar) ---- */
.a5-cur{position:absolute;top:0;left:0;width:19px;height:19px;z-index:40;opacity:0;
pointer-events:none;transition:transform .42s cubic-bezier(.5,0,.2,1),opacity .28s;
filter:drop-shadow(0 3px 7px rgba(0,0,0,.6))}
.a5-cur svg{display:block;width:19px;height:19px}
.a5-cur.on{opacity:1}
.a5-cur::after{content:"";position:absolute;left:-8px;top:-8px;width:34px;height:34px;
border-radius:50%;border:2px solid var(--tealL);opacity:0;transform:scale(.4)}
.a5-cur.tap::after{animation:a5tapc .5s ease both}
@keyframes a5tapc{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(1.4)}}

.a5-still,.a5-still *{transition:none!important}

@media (prefers-reduced-motion:reduce){
  .a5 *{animation:none!important;transition:none!important}
  .a5-cur{display:none}
}


/* ============================================================
   A6 — O funil inteiro em um olhar. Seção "Acompanhe leads,
   vendedores e oportunidades" (fundo claro), no lugar do
   frag-kpis.png. Recria o relatório Funil de Leads: indicadores
   que contam, o funil que cresce etapa por etapa e a etapa onde os
   leads travam em destaque. Marcação interna via JS.
   ============================================================ */

/* a animação fica à esquerda nesta seção, na proporção 1,2 : 1 */
@media (min-width:1100px){.grid2.a6-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}}
@media (max-width:1099px){.grid2.a6-grid{grid-template-columns:minmax(0,1fr)}}
/* texto das seções com animação ao lado: a coluna precisa de ~500px
   para o título não quebrar palavra por palavra, e o balance
   distribui as palavras por igual entre as linhas */
.grid2.a3-grid h2,.grid2.a6-grid h2{text-wrap:balance}
.a6-hold{min-width:0}

.a6{position:relative;width:100%;overflow:hidden}
.a6-fit{position:relative;width:100%}
.a6-stage{position:absolute;top:0;left:0;transform-origin:top left}
.a6 p{margin:0}

.a6-win{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:16px;
background:#070d1c;border:1px solid rgba(120,150,210,.22);
box-shadow:0 34px 70px -30px rgba(10,26,58,.55);
font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:#dfe7f7;text-align:left}
.a6-win svg{flex:0 0 auto}

/* ---- cabeçalho do relatório ---- */
.a6-hd{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.a6-hd b{margin-right:auto;font:700 .95rem/1 'Sora',sans-serif;color:#fff}
.a6-flt{display:flex;align-items:center;gap:5px;padding:5px 9px;border-radius:8px;
border:1px solid rgba(120,150,210,.22);background:rgba(255,255,255,.03);font-size:.64rem;
color:#aebbda;white-space:nowrap}
.a6-flt svg{width:11px;height:11px;color:#7b8cb2}

/* ---- indicadores ---- */
.a6-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.a6-kpi{min-width:0;padding:11px 12px;border-radius:11px;background:#0f1729;
border:1px solid rgba(120,150,210,.14)}
.a6-kpi small{display:block;font-size:.64rem;color:#aebbda;white-space:nowrap;overflow:hidden;
text-overflow:ellipsis}
.a6-kpi b{display:block;margin:4px 0 3px;font:800 1.35rem/1.1 'Sora',sans-serif;color:#fff;
font-variant-numeric:tabular-nums;white-space:nowrap}
.a6-kpi b.ok{color:#22c55e}
.a6-kpi b.bad{color:#f43f5e}
.a6-kpi span{display:block;font-size:.58rem;color:#7b8cb2;white-space:nowrap;overflow:hidden;
text-overflow:ellipsis}

/* ---- funil de conversão ---- */
.a6-card{position:relative;padding:12px 14px 16px;border-radius:12px;background:#0f1729;
border:1px solid rgba(120,150,210,.14)}
.a6-card>b{display:block;font:700 .82rem/1.2 'Sora',sans-serif;color:#fff}
.a6-card>p{margin-top:3px;font-size:.62rem;line-height:1.4;color:#8fa0c4}
/* altura dos níveis (62px) e o vão entre eles (8px) espelham LV_H e
   LV_G no anim.js: as quedas são posicionadas por essa conta. Os 62px
   deixam respiro em cima e embaixo das 4 linhas de texto do nível */
.a6-fun{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;
margin-top:12px}
.a6-lv{position:relative;flex:0 0 62px;height:62px;transition:opacity .5s}
/* o trapézio é recortado; o texto fica fora do recorte, porque no
   app o texto dos níveis estreitos passa da forma */
.a6-lv .sh{position:absolute;inset:0;background:var(--c);
clip-path:polygon(0 0,100% 0,var(--r) 100%,var(--l) 100%);transform:scaleX(0);opacity:0;
transition:transform .55s cubic-bezier(.2,.8,.3,1),opacity .3s}
.a6-lv .tx{position:absolute;left:50%;top:50%;width:max-content;transform:translate(-50%,-50%);
text-align:center;color:#fff;opacity:0;transition:opacity .35s .15s;
text-shadow:0 1px 2px rgba(0,0,0,.25)}
.a6-lv.on .sh{transform:none;opacity:1}
.a6-lv.on .tx{opacity:1}
.a6-lv .tx i{display:block;font:700 .56rem/1 'Sora',sans-serif;letter-spacing:.06em;
text-transform:uppercase;font-style:normal}
.a6-lv .tx b{display:block;margin:2px 0 1px;font:800 1.1rem/1 'Sora',sans-serif;
font-variant-numeric:tabular-nums}
.a6-lv .tx span{display:block;font-size:.5rem;line-height:1.35;white-space:nowrap}
/* queda entre etapas */
.a6-drop{position:absolute;padding:2px 7px;border-radius:99px;background:rgba(244,63,94,.14);
border:1px solid rgba(244,63,94,.45);font:700 .54rem/1.5 'Sora',sans-serif;color:#fda4af;
white-space:nowrap;opacity:0;transform:translate(-4px,-50%);transition:opacity .35s,transform .35s}
.a6-drop.on{opacity:1;transform:translate(0,-50%)}
/* destaque: onde os leads travam */
.a6-fun.hl .a6-lv:not(.hot){opacity:.32}
.a6-fun.hl .a6-drop.on:not(.hot){opacity:.3}
.a6-drop.hot{background:#f43f5e;border-color:#f43f5e;color:#fff;animation:a6pulse 1.2s ease 2}
@keyframes a6pulse{50%{box-shadow:0 0 0 7px rgba(244,63,94,.2)}}
/* legenda — não é interface do app, por isso usa o verde-água do site */
.a6-note{position:absolute;display:flex;align-items:center;gap:5px;padding:4px 10px;
border-radius:99px;background:var(--teal);color:#fff;font:700 .6rem/1.3 'Sora',sans-serif;
white-space:nowrap;opacity:0;transform:translate(calc(-100% - 8px),-50%);
transition:opacity .4s,transform .4s}
.a6-note.on{opacity:1;transform:translate(-100%,-50%)}
.a6-note svg{width:11px;height:11px}

.a6-still,.a6-still *{transition:none!important}

/* ---- tela estreita: indicadores em 2×2, sem a legenda lateral ---- */
.a6.narrow .a6-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
.a6.narrow .a6-note{display:none}

@media (prefers-reduced-motion:reduce){
  .a6 *{animation:none!important;transition:none!important}
}

/* ---- A5 ao lado dos cards, como no hero ----------------------
   O título e o texto da seção seguem centralizados no topo; abaixo,
   os 4 cards ocupam uma coluna e o Piper a outra. Com o título
   também na lateral, a coluna de texto ficaria com quase o dobro
   da altura da animação. Abaixo de 1000px, empilha. */
.a5-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:clamp(24px,3vw,40px);align-items:center}
.a5-split>div{min-width:0}
.a5-split .a5-hold{margin-top:0}
@media (max-width:999px){
  .a5-split{grid-template-columns:minmax(0,1fr)}
  .a5-split .a5-hold{margin-top:8px}
}


/* ============================================================
   A7 — Decisões. Seção "Acompanhe leads, vendedores e
   oportunidades" (fundo claro), na linha abaixo do A6. Recria a
   tela Decisões: um item é dispensado por hoje (sai com fade), e
   "Abrir conversa" leva à tela de Conversas, onde o vendedor
   responde. A conversa reaproveita as classes do A3 (.a3-chd,
   .a3-b, .a3-comp…). Marcação interna via JS.
   ============================================================ */

/* segunda linha da seção: texto à esquerda, animação à direita */
.grid2.a7-grid{margin-top:clamp(56px,7vw,96px)}
@media (min-width:1100px){.grid2.a7-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}}
@media (max-width:1099px){.grid2.a7-grid{grid-template-columns:minmax(0,1fr)}}
.grid2.a7-grid h3{margin-bottom:14px;font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.18;
text-wrap:balance}
.a7-hold{min-width:0}

.a7{position:relative;width:100%;overflow:hidden}
.a7-fit{position:relative;width:100%}
.a7-stage{position:absolute;top:0;left:0;transform-origin:top left}
.a7 p{margin:0}

.a7-win{position:relative;height:470px;border-radius:16px;overflow:hidden;background:#070d1c;
border:1px solid rgba(120,150,210,.22);box-shadow:0 34px 70px -30px rgba(10,26,58,.55);
font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:#dfe7f7;text-align:left;
transition:opacity .45s}
.a7-win.fade{opacity:0}
.a7-win svg{flex:0 0 auto}

/* as duas telas ficam empilhadas; "Abrir conversa" troca uma pela outra */
.a7-scr{position:absolute;inset:0;transition:opacity .35s,transform .45s cubic-bezier(.3,.8,.3,1)}
.a7-cv{opacity:0;transform:translateX(24px)}
.a7-win.cv .a7-dec{opacity:0;transform:translateX(-24px)}
.a7-win.cv .a7-cv{opacity:1;transform:none}

/* ---- tela Decisões ---- */
.a7-dec{display:flex;flex-direction:column;padding:18px 18px 0}
.a7-ttl{display:block;font:800 1.12rem/1.2 'Sora',sans-serif;letter-spacing:-.01em;color:#fff}
.a7-sub{margin-top:4px;font-size:.7rem;color:#8fa0c4}
.a7-bar{display:flex;align-items:center;gap:8px;margin:14px 0 12px}
.a7-tg,.a7-pp{display:flex;align-items:center;gap:5px;padding:6px 10px;border-radius:8px;
border:1px solid rgba(120,150,210,.22);background:#0d1628;font-size:.62rem;font-weight:600;
color:#fff;white-space:nowrap}
.a7-pp{margin-left:auto}
.a7-pp svg{width:11px;height:11px}
/* a lista continua abaixo da janela, como no app: some num degradê */
.a7-list{position:relative;flex:1;min-height:0;overflow:hidden;
-webkit-mask-image:linear-gradient(#000 calc(100% - 36px),transparent);
mask-image:linear-gradient(#000 calc(100% - 36px),transparent)}
.a7-it{display:grid;grid-template-columns:26px minmax(0,1fr);gap:0 10px;margin-bottom:8px;
padding:11px 12px;border-radius:10px;background:#0c1426;border:1px solid rgba(120,150,210,.16);
overflow:hidden;transition:opacity .6s,transform .6s,height .6s cubic-bezier(.3,.8,.3,1),
margin .6s,padding .6s,border-width .6s}
.a7-it .ic{width:26px;height:26px;border-radius:7px;background:rgba(244,63,94,.12);color:#f43f5e;
display:grid;place-items:center}
.a7-it .ic svg{width:13px;height:13px}
.a7-it b{display:block;font:600 .74rem/1.3 'Sora',sans-serif;color:#fff}
.a7-it .mt{display:block;margin-top:2px;font-size:.62rem;color:#7f9bd0}
/* trecho da última mensagem — só quando ela foi texto */
.a7-it .qt{margin-top:6px;padding:1px 0 1px 8px;border-left:2px solid rgba(120,150,210,.3);
font-size:.62rem;font-style:italic;color:#9fb3d9}
.a7-acts{display:flex;align-items:center;gap:10px;margin-top:8px}
.a7-ab{padding:5px 10px;border-radius:6px;background:#3b82f6;color:#fff;font-size:.62rem;
font-weight:600;transition:background .2s,transform .15s}
.a7-ab.tap{background:#2563eb;transform:scale(.95)}
.a7-ds{font-size:.62rem;color:#9fb0cf;transition:color .2s}
.a7-ds.tap{color:#fff}
/* dispensar hoje: o item some com fade e os de baixo sobem */
.a7-it.bye{opacity:0;transform:scale(.98)}
.a7-it.gone{margin-bottom:0;padding-top:0;padding-bottom:0;border-width:0}

/* ---- tela Conversas: lista + conversa (a ficha não cabe aqui) ---- */
.a7-cv{display:grid;grid-template-columns:minmax(0,.36fr) minmax(0,.64fr);
grid-template-rows:minmax(0,1fr)}
/* a mensagem que estava na Decisões pisca ao chegar na conversa */
.a3-b.a7-hl{animation:a7hl 1.1s ease 2}
@keyframes a7hl{50%{box-shadow:0 0 0 3px rgba(95,227,210,.5)}}

/* ---- cursor ---- */
.a7-cur{position:absolute;top:0;left:0;width:19px;height:19px;z-index:40;opacity:0;
pointer-events:none;transition:transform .42s cubic-bezier(.5,0,.2,1),opacity .28s;
filter:drop-shadow(0 3px 7px rgba(0,0,0,.6))}
.a7-cur svg{display:block;width:19px;height:19px}
.a7-cur.on{opacity:1}
.a7-cur::after{content:"";position:absolute;left:-8px;top:-8px;width:34px;height:34px;
border-radius:50%;border:2px solid var(--tealL);opacity:0;transform:scale(.4)}
.a7-cur.tap::after{animation:a7tapc .5s ease both}
@keyframes a7tapc{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(1.4)}}

.a7-still,.a7-still *{transition:none!important}

/* ---- tela estreita: na Conversas, a lista sai ---- */
.a7.narrow .a7-cv{grid-template-columns:minmax(0,1fr)}
.a7.narrow .a7-cv .a3-list{display:none}

@media (prefers-reduced-motion:reduce){
  .a7 *{animation:none!important;transition:none!important}
  .a7-cur{display:none}
}


/* ============================================================
   A8 — Bento "Todo o comercial organizado num lugar só".
   Os três cards de cima ganham uma microanimação no topo; os
   outros seis continuam como cards de texto, em duas linhas de 3.
   ============================================================ */
.a8-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:18px}
.a8-card{padding:0;overflow:hidden}
.a8-media{background:#0b1120;border-bottom:1px solid var(--line)}
.a8-txt{display:flex;flex-direction:column;flex:1;padding:22px 26px 26px}
/* tablet: um card por linha, animação à esquerda e texto à direita */
@media (max-width:999px){
  .a8-grid{grid-template-columns:minmax(0,1fr)}
  .a8-card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center}
  .a8-media{align-self:stretch;display:flex;align-items:center;border-bottom:0;
  border-right:1px solid var(--line)}
}
/* celular: volta a empilhar */
@media (max-width:639px){
  .a8-card{display:flex}
  .a8-media{border-right:0;border-bottom:1px solid var(--line)}
}

/* ============================================================
   A8.1 — Automações: o Editor de Fluxo. Um fluxo é montado
   bloco a bloco — mensagem recebida, resposta, espera de 2 dias,
   follow-up — e publicado. Estrutura tirada dos prints do editor:
   cores dos blocos por grupo, portas nas laterais, ligação em
   curva e a notificação "Fluxo publicado". Marcação via JS.
   ============================================================ */
.a8a{position:relative;width:100%;overflow:hidden;background:#0b1120}
.a8a-fit{position:relative;width:100%}
.a8a-stage{position:absolute;top:0;left:0;width:360px;transform-origin:top left}
.a8a-win{position:relative;height:264px;font-family:'Plus Jakarta Sans',system-ui,sans-serif;
color:#e2e8f0;text-align:left;transition:opacity .45s}
.a8a-win.fade{opacity:0}

/* barra do editor */
.a8a-bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 10px;background:#0a0f1c;
border-bottom:1px solid rgba(148,163,184,.14)}
.a8a-bar>span{display:flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;
font-size:.56rem;font-weight:600;white-space:nowrap}
.a8a-bar>.a8a-back,.a8a-bar>.a8a-name{border:1px solid rgba(148,163,184,.25);background:#131a2a}
.a8a-bar>.a8a-back{color:#94a3b8}
.a8a-bar>.a8a-name{color:#fff}
.a8a-bar>.a8a-pill{height:18px;padding:0 7px;border-radius:99px;background:rgba(59,130,246,.18);
color:#93c5fd;font-size:.5rem;opacity:0;transform:scale(.9);transition:opacity .3s,transform .3s}
.a8a-bar>.a8a-pill.on{opacity:1;transform:none}
.a8a-bar>.a8a-pub{margin-left:auto;background:linear-gradient(90deg,#2563eb,#0ea5a4);color:#fff;
transition:transform .15s,filter .2s}
.a8a-bar>.a8a-pub.tap{transform:scale(.94);filter:brightness(1.15)}

/* tela pontilhada */
.a8a-cv{position:absolute;left:0;right:0;top:34px;bottom:0;overflow:hidden;
background-image:radial-gradient(rgba(148,163,184,.2) 1px,transparent 1.3px);background-size:14px 14px}
.a8a-edges{position:absolute;left:0;top:0;width:360px;height:230px;overflow:visible}
/* pathLength=1: a linha "se desenha" indo de dashoffset 1 a 0 */
.a8a-edges path{fill:none;stroke:rgba(148,163,184,.62);stroke-width:1.3;stroke-dasharray:1;
stroke-dashoffset:1;transition:stroke-dashoffset .7s ease}
.a8a-edges path.on{stroke-dashoffset:0}

/* blocos */
.a8a-n{position:absolute;width:140px;border-radius:9px;background:#1b2332;
border:1px solid rgba(148,163,184,.22);box-shadow:0 10px 22px -12px rgba(0,0,0,.8);opacity:0;
transform:translateY(8px) scale(.94);transition:opacity .4s,transform .45s cubic-bezier(.2,.9,.3,1.2)}
.a8a-n.on{opacity:1;transform:none}
.a8a-n .hd{display:flex;align-items:center;gap:5px;padding:5px 8px;border-radius:8px 8px 0 0;
font:700 .6rem/1.25 'Sora',sans-serif;color:#fff}
.a8a-n .hd i{font-style:normal;font-size:.62rem}
.a8a-n .hd b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a8a-n .hd.gat{background:linear-gradient(90deg,#0b8fd6,#1ba6ec)}
.a8a-n .hd.msg{background:linear-gradient(90deg,#2563eb,#14b8a6)}
.a8a-n .hd.esp{background:linear-gradient(90deg,#3b82f6,#6366f1)}
.a8a-n .bd{display:flex;flex-direction:column;gap:4px;padding:6px 8px 8px}
.a8a-n .ds{font-size:.52rem;line-height:1.35;color:#94a3b8}
.a8a-n .lb{font-size:.48rem;font-weight:600;color:#94a3b8}
.a8a-in{display:flex;align-items:center;gap:4px;min-width:0;padding:4px 6px;border-radius:5px;
background:#121a28;border:1px solid rgba(148,163,184,.28);font-size:.54rem;line-height:1.35;color:#e2e8f0}
.a8a-in svg{flex:0 0 auto;width:8px;height:8px;margin-left:auto;color:#94a3b8}
.a8a-ta{display:block;min-height:32px}
.a8a-row{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:4px}
.a8a-in.chg{animation:a8aflash .8s ease}
@keyframes a8aflash{0%{border-color:#60a5fa;box-shadow:0 0 0 2px rgba(96,165,250,.35)}}
.a8a-caret{display:inline-block;width:1px;height:9px;margin-left:1px;background:#7fb4ff;
vertical-align:-1px;animation:a8ablink 1s steps(1) infinite}
@keyframes a8ablink{50%{opacity:0}}
/* portas: entrada à esquerda, na altura do cabeçalho; saída à direita, no meio */
.a8a-n .pi,.a8a-n .po{position:absolute;width:7px;height:7px;border-radius:50%;background:#60a5fa;
box-shadow:0 0 0 2px #0b1120}
.a8a-n .pi{left:-4px;top:8px}
.a8a-n .po{right:-4px;top:50%;margin-top:-3.5px}

/* notificação de publicado */
.a8a-toast{position:absolute;top:42px;right:8px;z-index:5;width:214px;display:flex;gap:7px;
padding:9px 10px;border-radius:9px;background:#0f172a;border:1px solid rgba(148,163,184,.25);
box-shadow:0 18px 36px -14px rgba(0,0,0,.9);opacity:0;transform:translateY(-8px);
transition:opacity .35s,transform .4s cubic-bezier(.2,.9,.3,1.1)}
.a8a-toast.on{opacity:1;transform:none}
.a8a-toast svg{flex:0 0 13px;width:13px;height:13px;margin-top:1px;color:#2dd4bf}
.a8a-toast b{display:block;font:700 .62rem/1.3 'Sora',sans-serif;color:#fff}
.a8a-toast .tx span{display:block;margin-top:2px;font-size:.54rem;line-height:1.4;color:#94a3b8}
.a8a-toast .x{margin-left:auto;font-style:normal;font-size:.62rem;line-height:1;color:#64748b}

/* cursor */
.a8a-cur{position:absolute;top:0;left:0;width:17px;height:17px;z-index:40;opacity:0;
pointer-events:none;transition:transform .45s cubic-bezier(.5,0,.2,1),opacity .28s;
filter:drop-shadow(0 3px 7px rgba(0,0,0,.6))}
.a8a-cur svg{display:block;width:17px;height:17px}
.a8a-cur.on{opacity:1}
.a8a-cur::after{content:"";position:absolute;left:-8px;top:-8px;width:32px;height:32px;
border-radius:50%;border:2px solid var(--tealL);opacity:0;transform:scale(.4)}
.a8a-cur.tap::after{animation:a8atapc .5s ease both}
@keyframes a8atapc{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(1.4)}}

.a8a-still,.a8a-still *{transition:none!important}

@media (prefers-reduced-motion:reduce){
  .a8a *{animation:none!important;transition:none!important}
  .a8a-cur{display:none}
}


/* ============================================================
   A8.2 — Propostas e parcelas. Na gaveta do negócio, "Gerar
   proposta" abre o modal do PDF (condições + envio pelo
   WhatsApp) e a proposta fica "Aguardando". Depois, a venda
   ganha é dividida em 3 parcelas no "Confirmar venda ganha".
   Estrutura tirada dos prints da gaveta, dos dois modais e do
   aviso "Proposta gerada". Marcação via JS.
   ============================================================ */
.a8b{position:relative;width:100%;overflow:hidden;background:#0f172a}
.a8b-fit{position:relative;width:100%}
.a8b-stage{position:absolute;top:0;left:0;width:360px;transform-origin:top left}
.a8b-win{position:relative;height:264px;overflow:hidden;background:#0f172a;
font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:#e2e8f0;text-align:left;transition:opacity .45s}
.a8b-win.fade{opacity:0}
.a8b-win svg{flex:0 0 auto}

/* gaveta do negócio, ao fundo */
.a8b-hd{display:flex;align-items:center;height:34px;padding:0 12px;border-bottom:1px solid rgba(148,163,184,.14);
font:700 .7rem/1 'Sora',sans-serif;color:#fff}
.a8b-hd i{margin-left:auto;font-style:normal;font-weight:400;color:#64748b}
.a8b-tabs{display:flex;gap:2px;margin:9px 10px 0;padding:3px;border-radius:9px;
border:1px solid rgba(148,163,184,.16);background:#0b1222}
.a8b-tab{display:flex;align-items:center;gap:4px;padding:5px 8px;border-radius:6px;font-size:.56rem;
font-weight:600;color:#94a3b8;white-space:nowrap;transition:background .3s,color .3s}
.a8b-tab svg{width:10px;height:10px}
.a8b-tab.on{background:rgba(59,130,246,.14);color:#7fb4ff}
.a8b-pane{position:absolute;left:10px;right:10px;top:82px;padding:10px;border-radius:9px;
border:1px solid rgba(148,163,184,.16);transition:opacity .3s}
.a8b-pane.off{opacity:0}
.a8b-it{display:grid;grid-template-columns:minmax(0,1fr) 54px 70px;gap:6px;padding:6px 2px;
border-bottom:1px solid rgba(148,163,184,.12);font-size:.58rem}
.a8b-it.th{font-size:.52rem;font-weight:700;color:#cbd5e1}
.a8b-it span:nth-child(n+2){text-align:right}
.a8b-btns{display:flex;gap:6px;margin-top:10px}
.a8b-btn{display:inline-flex;align-items:center;gap:4px;padding:6px 9px;border-radius:6px;
background:#3b82f6;color:#fff;font-size:.58rem;font-weight:600;white-space:nowrap;
transition:transform .15s,filter .2s}
.a8b-btn svg{width:10px;height:10px}
.a8b-btn.sky{background:#0284c7}
.a8b-btn.grn{background:#059669}
.a8b-btn.out{background:transparent;border:1px solid rgba(148,163,184,.3);color:#e2e8f0}
.a8b-btn.tap{transform:scale(.94);filter:brightness(1.15)}
/* proposta gerada */
.a8b-prop{display:flex;align-items:flex-start;padding:9px 10px;border-radius:8px;
border:1px solid rgba(148,163,184,.2);background:#0b1222}
.a8b-prop b{display:block;font:700 .7rem/1.2 'Sora',sans-serif;color:#fff}
.a8b-prop small{display:block;margin-top:2px;font-size:.54rem;color:#94a3b8}
.a8b-lk{display:flex;gap:8px;margin-top:4px;font-size:.54rem;color:#60a5fa}
.a8b-bdg{margin-left:auto;padding:2px 7px;border-radius:99px;background:#fcd34d;color:#78350f;
font-size:.5rem;font-weight:700}

/* escurecido + modais */
.a8b-dim{position:absolute;inset:0;background:rgba(2,6,23,.62);opacity:0;transition:opacity .3s}
.a8b-dim.on{opacity:1}
.a8b-md{position:absolute;left:18px;right:18px;padding:11px 12px 12px;border-radius:11px;background:#111827;
border:1px solid rgba(148,163,184,.22);box-shadow:0 24px 50px -18px rgba(0,0,0,.9);opacity:0;
transform:translateY(10px) scale(.97);transition:opacity .3s,transform .35s cubic-bezier(.2,.9,.3,1.1)}
.a8b-md.on{opacity:1;transform:none}
.a8b-md .ttl{display:flex;align-items:center;gap:7px;margin-bottom:4px;font:700 .68rem/1.2 'Sora',sans-serif;color:#fff}
.a8b-md .ttl i{margin-left:auto;font-style:normal;font-weight:400;color:#64748b}
.a8b-md .tr{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
background:rgba(16,185,129,.15);color:#34d399}
.a8b-md .tr svg{width:11px;height:11px}
.a8b-lb{display:block;margin:6px 0 3px;font-size:.54rem;font-weight:700;color:#e2e8f0}
.a8b-in{display:flex;align-items:center;min-height:22px;padding:0 7px;border-radius:6px;background:#1e293b;
border:1px solid rgba(148,163,184,.25);font-size:.58rem;color:#f1f5f9;white-space:nowrap;
transition:border-color .2s,box-shadow .2s}
.a8b-in.foc{border-color:#60a5fa;box-shadow:0 0 0 2px rgba(96,165,250,.25)}
.a8b-in.chg{animation:a8bflash .8s ease}
@keyframes a8bflash{0%{border-color:#60a5fa;box-shadow:0 0 0 2px rgba(96,165,250,.35)}}
.a8b-in .rs{align-self:stretch;display:flex;align-items:center;margin:0 6px 0 -7px;padding:0 6px;
border-right:1px solid rgba(148,163,184,.25);color:#94a3b8}
.a8b-ta{align-items:flex-start;min-height:36px;padding-top:5px;white-space:normal}
.a8b-caret{display:inline-block;width:1px;height:10px;margin-left:1px;background:#93c5fd;
vertical-align:-1px;animation:a8bblink 1s steps(1) infinite}
@keyframes a8bblink{50%{opacity:0}}
.a8b-tg{display:flex;align-items:center;gap:7px;margin:9px 0 10px;font-size:.58rem;font-weight:600}
.a8b-sw{position:relative;flex:0 0 24px;width:24px;height:13px;border-radius:99px;background:#334155;
transition:background .25s}
.a8b-sw::after{content:"";position:absolute;left:2px;top:2px;width:9px;height:9px;border-radius:50%;
background:#fff;transition:transform .25s}
.a8b-sw.on{background:#0ea5e9}
.a8b-sw.on::after{transform:translateX(11px)}
/* parcelas */
.a8b-pg{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.1fr) auto;gap:6px;align-items:end}
.a8b-par{display:grid;grid-template-columns:26px repeat(3,minmax(0,1fr));gap:5px;margin-top:5px;padding:5px 7px;
border-radius:7px;border:1px solid rgba(148,163,184,.18);background:#162032;opacity:0;transform:translateY(6px);
transition:opacity .3s,transform .35s}
.a8b-par.on{opacity:1;transform:none}
.a8b-par .a8b-lb{margin:0 0 2px;font-size:.46rem}
.a8b-par .a8b-in{min-height:18px;padding:0 5px;font-size:.52rem}
.a8b-par .a8b-in .rs{margin:0 4px 0 -5px;padding:0 4px}
.a8b-st{justify-content:space-between}
.a8b-st svg{width:8px;height:8px;color:#94a3b8}
.a8b-md2 .a8b-btns{margin-top:8px}
/* antes de gerar: "Adicionar parcela" e a dica; depois, as linhas crescem no lugar */
.a8b-vazio{display:flex;flex-direction:column;align-items:center;gap:5px;margin-top:10px}
.a8b-vazio small{font-size:.5rem;color:#94a3b8}
.a8b-vazio.off{display:none}
.a8b-pars{max-height:0;overflow:hidden;transition:max-height .6s cubic-bezier(.3,.8,.3,1)}
.a8b-pars.on{max-height:140px}
/* aviso "Proposta gerada" */
.a8b-toast{position:absolute;top:8px;right:8px;z-index:5;width:196px;display:flex;gap:7px;padding:9px 10px;
border-radius:9px;background:#0f172a;border:1px solid rgba(148,163,184,.25);
box-shadow:0 18px 36px -14px rgba(0,0,0,.9);opacity:0;transform:translateY(-8px);
transition:opacity .35s,transform .4s cubic-bezier(.2,.9,.3,1.1)}
.a8b-toast.on{opacity:1;transform:none}
.a8b-toast svg{flex:0 0 13px;width:13px;height:13px;margin-top:1px;color:#2dd4bf}
.a8b-toast b{display:block;font:700 .62rem/1.3 'Sora',sans-serif;color:#fff}
.a8b-toast .x{margin-left:auto;font-style:normal;font-size:.62rem;line-height:1;color:#64748b}
/* cursor */
.a8b-cur,.a8c-cur{position:absolute;top:0;left:0;width:17px;height:17px;z-index:40;opacity:0;
pointer-events:none;transition:transform .45s cubic-bezier(.5,0,.2,1),opacity .28s;
filter:drop-shadow(0 3px 7px rgba(0,0,0,.6))}
.a8b-cur svg,.a8c-cur svg{display:block;width:17px;height:17px}
.a8b-cur.on,.a8c-cur.on{opacity:1}
.a8b-cur::after,.a8c-cur::after{content:"";position:absolute;left:-8px;top:-8px;width:32px;height:32px;
border-radius:50%;border:2px solid var(--tealL);opacity:0;transform:scale(.4)}
.a8b-cur.tap::after,.a8c-cur.tap::after{animation:a8btapc .5s ease both}
@keyframes a8btapc{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(1.4)}}
.a8b-still,.a8b-still *{transition:none!important}

/* ============================================================
   A8.3 — Captação de leads. O visitante preenche o formulário
   público (página clara, botão roxo, caixa verde de sucesso,
   como nos prints) e o negócio aparece no topo da lista de
   Negócios, com a etiqueta de origem. Marcação via JS.
   ============================================================ */
.a8c{position:relative;width:100%;overflow:hidden;background:#f3f4f6}
.a8c-fit{position:relative;width:100%}
.a8c-stage{position:absolute;top:0;left:0;width:360px;transform-origin:top left}
.a8c-win{position:relative;height:264px;overflow:hidden;background:#f3f4f6;text-align:left;
font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;transition:opacity .45s}
.a8c-win.fade{opacity:0}
.a8c-scr{position:absolute;inset:0;transition:opacity .45s,transform .5s cubic-bezier(.3,.8,.3,1)}
.a8c-crm{opacity:0;transform:translateX(24px)}
.a8c-win.crm .a8c-pub{opacity:0;transform:translateX(-24px)}
.a8c-win.crm .a8c-crm{opacity:1;transform:none}

/* página pública do formulário */
.a8c-url{display:flex;align-items:center;gap:5px;height:26px;padding:0 10px;background:#e5e7eb;
border-bottom:1px solid #d1d5db}
.a8c-url i{width:7px;height:7px;border-radius:50%;background:#cbd5e1}
.a8c-url span{flex:1;margin-left:6px;padding:3px 9px;border-radius:99px;background:#fff;font-size:.52rem;
color:#475569;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a8c-card{position:absolute;left:42px;right:42px;top:44px;padding:16px;border-radius:12px;background:#fff;
border:1px solid #e5e7eb;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.a8c-card>b{display:block;margin-bottom:11px;font-size:.84rem;font-weight:700;line-height:1.2;color:#111827}
.a8c-lb{display:block;margin:0 0 3px;font-size:.54rem;font-weight:600;color:#374151}
.a8c-in{display:flex;align-items:center;height:24px;margin-bottom:9px;padding:0 8px;border-radius:6px;
border:1px solid #d1d5db;background:#fff;font-size:.62rem;color:#111827;white-space:nowrap;
transition:border-color .2s,box-shadow .2s}
.a8c-in.foc{border-color:#6366f1;box-shadow:0 0 0 2px rgba(99,102,241,.2)}
.a8c-caret{display:inline-block;width:1px;height:11px;margin-left:1px;background:#111827;
animation:a8cblink 1s steps(1) infinite}
@keyframes a8cblink{50%{opacity:0}}
.a8c-send{display:flex;align-items:center;justify-content:center;height:26px;border-radius:6px;
background:#4f46e5;color:#fff;font-size:.6rem;font-weight:600;transition:transform .15s,filter .2s}
.a8c-send.tap{transform:scale(.97);filter:brightness(1.12)}
.a8c-ok{display:none;padding:10px;border-radius:6px;background:#ecfdf5;border:1px solid #a7f3d0;
color:#065f46;font-size:.6rem;line-height:1.45}
.a8c-card.done .a8c-form{display:none}
.a8c-card.done .a8c-ok{display:block;animation:a8cpop .35s ease both}
@keyframes a8cpop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* CRM: lista de Negócios */
.a8c-crm{background:#070d1c;color:#e2e8f0;font-family:'Plus Jakarta Sans',system-ui,sans-serif}
.a8c-ttl{display:block;padding:14px 12px 10px;font:800 .9rem/1 'Sora',sans-serif;color:#fff}
.a8c-tb{margin:0 10px;border-radius:9px;border:1px solid rgba(148,163,184,.16);background:#0f172a;overflow:hidden}
.a8c-tr{display:grid;grid-template-columns:minmax(0,1fr) 70px 58px 40px;align-items:center;gap:6px;height:40px;
padding:0 10px;border-top:1px solid rgba(148,163,184,.1);font-size:.58rem;color:#e2e8f0;
transition:transform .55s cubic-bezier(.3,.8,.3,1),background .8s,opacity .4s}
.a8c-tr.th{height:28px;border-top:0;background:#111a2d;font-size:.54rem;font-weight:700;color:#fff}
.a8c-tr>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a8c-rows{position:relative;height:200px}
.a8c-rows .a8c-tr{position:absolute;left:0;right:0;top:0}
.a8c-tr.new{background:rgba(19,181,166,.16)}
.a8c-pl{justify-self:start;padding:2px 6px;border-radius:5px;border:1px solid;font-size:.5rem;
font-weight:600;white-space:nowrap}
.a8c-pl.e-novo{color:#cbd5e1;border-color:rgba(203,213,225,.35);background:rgba(203,213,225,.08)}
.a8c-pl.e-qual{color:#7dd3fc;border-color:rgba(14,165,233,.45);background:rgba(14,165,233,.12)}
.a8c-pl.e-prop{color:#93c5fd;border-color:rgba(47,123,255,.5);background:rgba(47,123,255,.14)}
.a8c-pl.o-wa{color:#34d399;border-color:rgba(16,185,129,.4);background:rgba(16,185,129,.12)}
.a8c-pl.o-neu{color:#e2e8f0;border-color:rgba(148,163,184,.35);background:rgba(148,163,184,.1)}
.a8c-pl.pulse{animation:a8cpulse 1s ease 2}
@keyframes a8cpulse{50%{box-shadow:0 0 0 4px rgba(95,227,210,.3)}}
.a8c-still,.a8c-still *{transition:none!important}

@media (prefers-reduced-motion:reduce){
  .a8b *,.a8c *{animation:none!important;transition:none!important}
  .a8b-cur,.a8c-cur{display:none}
}


/* ---- A8.4 a A8.6: base comum dos palcos (360×264, só escala) ---- */
.a8d,.a8e,.a8f{position:relative;width:100%;overflow:hidden;background:#050a18}
.a8d-fit,.a8e-fit,.a8f-fit{position:relative;width:100%}
.a8d-stage,.a8e-stage,.a8f-stage{position:absolute;top:0;left:0;width:360px;transform-origin:top left}
.a8d-win,.a8e-win,.a8f-win{position:relative;height:264px;overflow:hidden;background:#050a18;
font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:#e2e8f0;text-align:left;transition:opacity .45s}
.a8d-win.fade,.a8e-win.fade,.a8f-win.fade{opacity:0}
.a8d-win svg,.a8e-win svg,.a8f-win svg{flex:0 0 auto}
.a8d-cur,.a8e-cur{position:absolute;top:0;left:0;width:17px;height:17px;z-index:40;opacity:0;
pointer-events:none;transition:transform .45s cubic-bezier(.5,0,.2,1),opacity .28s;
filter:drop-shadow(0 3px 7px rgba(0,0,0,.6))}
.a8d-cur svg,.a8e-cur svg{display:block;width:17px;height:17px}
.a8d-cur.on,.a8e-cur.on{opacity:1}
.a8d-cur::after,.a8e-cur::after{content:"";position:absolute;left:-8px;top:-8px;width:32px;height:32px;
border-radius:50%;border:2px solid var(--tealL);opacity:0;transform:scale(.4)}
.a8d-cur.tap::after,.a8e-cur.tap::after{animation:a8btapc .5s ease both}
.a8d-still,.a8d-still *,.a8e-still,.a8e-still *,.a8f-still,.a8f-still *{transition:none!important}

/* ============================================================
   A8.4 — Pipelines e funis. A edição de um funil, bloco
   Estágios: "Criar Estágio" (nome, cor, alerta de parado), o
   estágio novo entra no fim da lista e, com "Reordenar
   Registros", é arrastado para o lugar certo e a ordem é salva.
   ============================================================ */
.a8d-cd{position:absolute;left:8px;right:8px;top:8px;bottom:0;border-radius:10px 10px 0 0;
background:#0f172a;border:1px solid rgba(148,163,184,.16);border-bottom:0}
.a8d-hd{display:flex;align-items:center;height:34px;padding:0 10px;border-bottom:1px solid rgba(148,163,184,.12);
font:700 .68rem/1 'Sora',sans-serif;color:#fff}
.a8d-btn{display:inline-flex;align-items:center;gap:4px;padding:5px 8px;border-radius:6px;background:#3b82f6;
color:#fff;font-size:.56rem;font-weight:600;white-space:nowrap;transition:transform .15s,filter .2s}
.a8d-btn svg{width:10px;height:10px}
.a8d-btn.out{background:transparent;border:1px solid rgba(148,163,184,.3);color:#e2e8f0}
.a8d-btn.tap{transform:scale(.94);filter:brightness(1.15)}
.a8d-hd .a8d-btn{margin-left:auto}
.a8d-tb{display:flex;align-items:center;gap:8px;height:30px;padding:0 10px}
.a8d-sr{display:flex;align-items:center;gap:4px;width:92px;margin-left:auto;padding:4px 7px;border-radius:6px;
border:1px solid rgba(148,163,184,.22);font-size:.52rem;color:#64748b}
.a8d-sr svg{width:9px;height:9px}
.a8d-info{max-height:0;overflow:hidden;padding:0 10px;background:#162033;font-size:.52rem;font-weight:600;
color:#cbd5e1;transition:max-height .35s,padding .35s}
.a8d-cd.ord .a8d-info{max-height:20px;padding:4px 10px}
.a8d-tr{display:grid;grid-template-columns:0 minmax(0,1fr) 62px 36px 42px 50px;align-items:center;gap:0 6px;
height:24px;padding:0 10px;font-size:.56rem;
transition:grid-template-columns .35s,transform .5s cubic-bezier(.3,.8,.3,1),background .4s,box-shadow .3s,opacity .4s}
.a8d-cd.ord .a8d-tr{grid-template-columns:12px minmax(0,1fr) 62px 36px 42px 50px}
.a8d-tr.th{height:22px;background:#162033;border-top:1px solid rgba(148,163,184,.12);font-size:.48rem;
font-weight:700;line-height:1.1;color:#fff}
.a8d-rows{position:relative;height:144px}
.a8d-rows .a8d-tr{position:absolute;left:0;right:0;top:0;border-top:1px solid rgba(148,163,184,.08);background:#0f172a}
.a8d-tr[data-new]{opacity:0}
.a8d-tr[data-new].vis{opacity:1}
.a8d-tr.new{background:#10303a}
.a8d-tr.drag{z-index:2;background:#1e2a44;box-shadow:0 10px 22px -8px rgba(0,0,0,.85)}
.a8d-hdl{display:flex;overflow:hidden;color:#64748b}
.a8d-hdl svg{width:11px;height:11px}
.a8d-pl{justify-self:start;padding:1px 5px;border-radius:4px;border:1px solid;font-size:.48rem;font-weight:700;
white-space:nowrap}
.a8d-pl.c-cinza{color:#e2e8f0;border-color:rgba(203,213,225,.3);background:rgba(203,213,225,.08)}
.a8d-pl.c-azc{color:#7dd3fc;border-color:rgba(14,165,233,.45);background:rgba(14,165,233,.12)}
.a8d-pl.c-azul{color:#93c5fd;border-color:rgba(59,130,246,.45);background:rgba(59,130,246,.14)}
.a8d-pl.c-verde{color:#34d399;border-color:rgba(16,185,129,.45);background:rgba(16,185,129,.12)}
.a8d-pl.c-verm{color:#fca5a5;border-color:rgba(239,68,68,.45);background:rgba(239,68,68,.12)}
.a8d-pl.c-lar{color:#fdba74;border-color:rgba(249,115,22,.5);background:rgba(249,115,22,.14)}
.a8d-ok,.a8d-no{display:flex}
.a8d-ok svg,.a8d-no svg{width:11px;height:11px}
.a8d-ok{color:#10b981}
.a8d-no{color:#ef4444}
/* modal Criar Estágio */
.a8d-dim{position:absolute;inset:0;background:rgba(2,6,23,.62);opacity:0;transition:opacity .3s}
.a8d-dim.on{opacity:1}
.a8d-md{position:absolute;left:14px;right:14px;top:8px;padding:10px 12px 11px;border-radius:11px;background:#111827;
border:1px solid rgba(148,163,184,.22);box-shadow:0 24px 50px -18px rgba(0,0,0,.9);opacity:0;
transform:translateY(10px) scale(.97);transition:opacity .3s,transform .35s cubic-bezier(.2,.9,.3,1.1)}
.a8d-md.on{opacity:1;transform:none}
.a8d-md .ttl{display:flex;align-items:center;margin-bottom:2px;font:700 .66rem/1.2 'Sora',sans-serif;color:#fff}
.a8d-md .ttl i{margin-left:auto;font-style:normal;font-weight:400;color:#64748b}
.a8d-lb{display:block;margin:6px 0 3px;font-size:.52rem;font-weight:700;color:#e2e8f0}
.a8d-lb em{font-style:normal;color:#f87171}
.a8d-in{display:flex;align-items:center;min-height:22px;border-radius:6px;background:#1e293b;
border:1px solid rgba(148,163,184,.25);font-size:.58rem;color:#f1f5f9;white-space:nowrap;overflow:hidden;
transition:border-color .2s,box-shadow .2s}
.a8d-in.foc{border-color:#60a5fa;box-shadow:0 0 0 2px rgba(96,165,250,.25)}
.a8d-in .px,.a8d-in .sx{align-self:stretch;display:flex;align-items:center;padding:0 6px;color:#94a3b8}
.a8d-in .px{margin-right:6px;border-right:1px solid rgba(148,163,184,.25)}
.a8d-in .sx{margin-left:auto;border-left:1px solid rgba(148,163,184,.25);font-size:.52rem}
.a8d-in .px svg{width:9px;height:9px}
.a8d-in .ph{color:#64748b}
.a8d-caret{display:inline-block;width:1px;height:10px;margin-left:1px;background:#93c5fd;vertical-align:-1px;
animation:a8bblink 1s steps(1) infinite}
.a8d-chips{display:flex;flex-wrap:wrap;gap:4px}
.a8d-chip{display:inline-flex;align-items:center;gap:3px;padding:3px 6px;border-radius:5px;
border:1px solid rgba(148,163,184,.28);font-size:.5rem;font-weight:600;color:#e2e8f0;
transition:background .25s,border-color .25s,transform .15s}
.a8d-chip svg{width:8px;height:8px;color:#94a3b8}
.a8d-chip.on{background:#475569;border-color:#64748b}
.a8d-chip.tap{transform:scale(.92)}
.a8d-sec{margin-top:8px;padding-top:2px;border-top:1px solid rgba(148,163,184,.14)}
.a8d-g2{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:10px;align-items:start}
.a8d-sw{display:block;position:relative;width:24px;height:13px;border-radius:99px;background:#334155}
.a8d-sw::after{content:"";position:absolute;left:2px;top:2px;width:9px;height:9px;border-radius:50%;background:#fff}
.a8d-hint{display:block;margin-top:3px;font-size:.46rem;color:#94a3b8}
.a8d-btns{display:flex;gap:5px;margin-top:9px}

/* ============================================================
   A8.5 — Gestão de oportunidades. O card do pipeline abre a
   gaveta do negócio: aba Negócio (funil, status, vendedor,
   origem, valor), Comentários com @menção e o Histórico com
   cada mudança de etapa. Estrutura dos prints da gaveta.
   ============================================================ */
.a8e-pipe{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px}
.a8e-col{min-width:0;border-radius:9px;background:#0b1222;border:1px solid rgba(148,163,184,.14);
border-top:2px solid var(--c)}
.a8e-ch{display:flex;align-items:center;gap:5px;padding:8px 8px 6px;font:700 .58rem/1 'Sora',sans-serif;color:#fff}
.a8e-ch i{width:6px;height:6px;border-radius:50%;background:var(--c)}
.a8e-ch em{padding:1px 5px;border-radius:99px;background:rgba(255,255,255,.1);font-style:normal;font-size:.5rem;color:#cbd5e1}
.a8e-ch small{margin-left:auto;font-size:.5rem;color:#94a3b8}
.a8e-card{display:grid;grid-template-columns:24px minmax(0,1fr);gap:3px 7px;margin:0 7px 7px;padding:8px;
border-radius:9px;background:linear-gradient(165deg,#12295c,#0d1c42);border:1px solid rgba(120,150,210,.16);
transition:border-color .3s,box-shadow .3s}
.a8e-card.focus{border-color:rgba(95,227,210,.65);box-shadow:0 0 0 1px rgba(95,227,210,.5)}
.a8e-av{grid-row:1 / 3;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--av);
font:700 .5rem/1 'Sora',sans-serif;color:#fff}
.a8e-card b{font:700 .6rem/1.25 'Sora',sans-serif;color:#fff}
.a8e-val{justify-self:start;padding:2px 6px;border-radius:5px;background:rgba(19,181,166,.12);
font:700 .54rem/1.2 'Sora',sans-serif;color:var(--tealL)}
.a8e-prop{grid-column:1 / 3;justify-self:start;display:inline-flex;align-items:center;gap:3px;padding:2px 6px;
border-radius:5px;background:#fff7ed;color:#c2410c;font-size:.48rem;font-weight:700}
.a8e-prop svg{width:8px;height:8px}
.a8e-dim{position:absolute;inset:0;background:rgba(2,6,23,.6);opacity:0;transition:opacity .35s}
.a8e-dim.on{opacity:1}
.a8e-dr{position:absolute;top:0;right:0;bottom:0;width:300px;background:#0f172a;
border-left:1px solid rgba(148,163,184,.18);box-shadow:-20px 0 40px -20px rgba(0,0,0,.8);
transform:translateX(102%);transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.a8e-dr.on{transform:none}
.a8e-dh{display:flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-bottom:1px solid rgba(148,163,184,.14);
font:700 .6rem/1 'Sora',sans-serif;color:#fff}
.a8e-dh span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a8e-dh i{margin-left:auto;font-style:normal;font-weight:400;color:#64748b}
.a8e-tabs{margin:8px 10px 0;padding:3px;overflow:hidden;border-radius:9px;border:1px solid rgba(148,163,184,.16);
background:#0b1222}
.a8e-tin{display:inline-flex;gap:2px;transition:transform .5s cubic-bezier(.3,.8,.3,1)}
.a8e-tab{display:flex;align-items:center;gap:4px;padding:5px 7px;border-radius:6px;font-size:.54rem;font-weight:600;
color:#94a3b8;white-space:nowrap;transition:background .3s,color .3s}
.a8e-tab svg{width:9px;height:9px}
.a8e-tab.on{background:rgba(59,130,246,.14);color:#7fb4ff}
.a8e-pane{position:absolute;left:10px;right:10px;top:78px;transition:opacity .3s}
.a8e-pane.off{opacity:0}
.a8e-g2{display:grid;grid-template-columns:1fr 1fr;gap:6px 8px}
.a8e-lb{display:block;margin-bottom:3px;font-size:.5rem;font-weight:700;color:#e2e8f0}
.a8e-in{display:flex;align-items:center;gap:4px;min-height:21px;padding:0 6px;border-radius:6px;background:#1e293b;
border:1px solid rgba(148,163,184,.25);font-size:.54rem;color:#f1f5f9;white-space:nowrap;overflow:hidden}
.a8e-in>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.a8e-in svg{width:8px;height:8px;color:#94a3b8}
.a8e-in svg:first-of-type{margin-left:auto}
.a8e-in .rs{align-self:stretch;display:flex;align-items:center;margin:0 5px 0 -6px;padding:0 5px;
border-right:1px solid rgba(148,163,184,.25);color:#94a3b8}
.a8e-btns{display:flex;gap:5px;margin-top:9px}
.a8e-btn{display:inline-flex;align-items:center;gap:4px;padding:5px 8px;border-radius:6px;background:#3b82f6;color:#fff;
font-size:.54rem;font-weight:600;white-space:nowrap}
.a8e-btn svg{width:9px;height:9px}
.a8e-btn.grn{background:#059669}
.a8e-com{margin-top:8px;padding:8px 9px;border-radius:8px;border:1px solid rgba(148,163,184,.2)}
.a8e-com .hd{display:flex;font-size:.5rem;font-weight:700;color:#e2e8f0}
.a8e-com .hd span{margin-left:auto;font-weight:400;color:#94a3b8}
.a8e-com p{margin:4px 0 5px;font-size:.58rem;line-height:1.4;color:#f1f5f9}
.a8e-men{display:inline-block;padding:1px 6px;border-radius:99px;background:rgba(59,130,246,.18);color:#93c5fd;
font-size:.46rem;font-weight:700}
.a8e-ev{display:flex;align-items:baseline;gap:6px;padding:4px 0;font-size:.58rem;color:#f1f5f9;opacity:0;
transform:translateY(4px);transition:opacity .3s,transform .35s}
.a8e-ev.on{opacity:1;transform:none}
.a8e-ev::before{content:"";flex:0 0 5px;width:5px;height:5px;border-radius:50%;background:#60a5fa;transform:translateY(-1px)}
.a8e-ev small{font-size:.5rem;color:#94a3b8;white-space:nowrap}

/* ============================================================
   A8.6 — Relatórios: Tempo de Resposta. Os indicadores contam e
   as barras do tempo médio por vendedor enchem, verdes dentro
   da meta de 30 min e vermelhas acima dela, como no relatório.
   ============================================================ */
.a8f-ttl{display:block;padding:12px 12px 8px;font:800 .9rem/1 'Sora',sans-serif;color:#fff}
.a8f-kpis{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 10px}
.a8f-kpi{min-width:0;padding:7px 9px;border-radius:9px;background:#0f172a;border:1px solid rgba(148,163,184,.16)}
.a8f-kpi small{display:block;overflow:hidden;font-size:.5rem;color:#94a3b8;white-space:nowrap;text-overflow:ellipsis}
.a8f-kpi b{display:block;margin:2px 0 1px;font:800 .95rem/1.1 'Sora',sans-serif;color:#fff;font-variant-numeric:tabular-nums}
.a8f-kpi span{display:block;overflow:hidden;font-size:.44rem;color:#64748b;white-space:nowrap;text-overflow:ellipsis}
.a8f-win .ok{color:#2dd4a0}
.a8f-win .bad{color:#f43f5e}
.a8f-cd{margin:8px 10px 0;padding:8px 10px 4px;border-radius:9px;background:#0f172a;border:1px solid rgba(148,163,184,.16)}
.a8f-cd>b{display:block;margin-bottom:5px;font:700 .62rem/1.2 'Sora',sans-serif;color:#fff}
.a8f-tr{display:grid;grid-template-columns:12px minmax(0,1fr) 110px 40px;align-items:center;gap:6px;height:21px;
border-top:1px solid rgba(148,163,184,.1);font-size:.56rem;color:#e2e8f0}
.a8f-tr.th{height:16px;border-top:0;font-size:.44rem;font-weight:700;letter-spacing:.04em;color:#64748b}
.a8f-tr>span:first-child{color:#94a3b8}
.a8f-tr>span:last-child{text-align:right;color:#94a3b8}
.a8f-bar{display:flex;align-items:center;gap:6px}
.a8f-bar i{position:relative;flex:0 0 62px;height:4px;overflow:hidden;border-radius:99px;background:rgba(148,163,184,.22)}
.a8f-bar i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:0;border-radius:99px;background:currentColor;
transition:width .8s cubic-bezier(.3,.8,.3,1)}
.a8f-bar em{padding:0 3px;border-radius:4px;font-style:normal;font-size:.52rem;font-weight:700;opacity:0;
transition:opacity .3s .5s}
.a8f-tr.on .a8f-bar i::after{width:var(--w)}
.a8f-tr.on .a8f-bar em{opacity:1}
.a8f-tr.hot .a8f-bar em{animation:a8fhot 1s ease 2}
@keyframes a8fhot{50%{background:rgba(244,63,94,.22)}}

@media (prefers-reduced-motion:reduce){
  .a8d *,.a8e *,.a8f *{animation:none!important;transition:none!important}
  .a8d-cur,.a8e-cur{display:none}
}


/* ============================================================
   A9 — "Do caos ao fechamento em 3 passos". Cada passo ganha
   uma microanimação no topo do card, no mesmo palco dos cards
   do A8 (360×264, só escala) e com o mesmo layout de card
   (a8-grid/a8-card): 01 conecta o WhatsApp, 02 importa os
   contatos, 03 abre o Painel do Gestor. Nada de <p> nos palcos:
   ".sec.light .card p" do site mudaria cor e tamanho.
   ============================================================ */
.a9-steps{margin-bottom:0}
.a9a,.a9b,.a9c{position:relative;width:100%;overflow:hidden;background:#050a18}
.a9a-fit,.a9b-fit,.a9c-fit{position:relative;width:100%}
.a9a-stage,.a9b-stage,.a9c-stage{position:absolute;top:0;left:0;width:360px;transform-origin:top left}
.a9a-win,.a9b-win,.a9c-win{position:relative;height:264px;overflow:hidden;background:#050a18;
font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:#e2e8f0;text-align:left;transition:opacity .45s}
.a9a-win.fade,.a9b-win.fade,.a9c-win.fade{opacity:0}
.a9a-win svg,.a9b-win svg,.a9c-win svg{flex:0 0 auto}
.a9a-cur,.a9b-cur{position:absolute;top:0;left:0;width:17px;height:17px;z-index:40;opacity:0;
pointer-events:none;transition:transform .45s cubic-bezier(.5,0,.2,1),opacity .28s;
filter:drop-shadow(0 3px 7px rgba(0,0,0,.6))}
.a9a-cur svg,.a9b-cur svg{display:block;width:17px;height:17px}
.a9a-cur.on,.a9b-cur.on{opacity:1}
.a9a-cur::after,.a9b-cur::after{content:"";position:absolute;left:-8px;top:-8px;width:32px;height:32px;
border-radius:50%;border:2px solid var(--tealL);opacity:0;transform:scale(.4)}
.a9a-cur.tap::after,.a9b-cur.tap::after{animation:a8btapc .5s ease both}
.a9a-still,.a9a-still *,.a9b-still,.a9b-still *,.a9c-still,.a9c-still *{transition:none!important}

/* peças comuns dos passos 01 e 02: a lista, os botões, o modal */
.a9-cd{position:absolute;left:8px;right:8px;top:8px;bottom:0;overflow:hidden;border-radius:10px 10px 0 0;
background:#0f172a;border:1px solid rgba(148,163,184,.16);border-bottom:0}
.a9-hd{padding:10px 10px 7px}
.a9-hd b{display:block;font:800 .82rem/1.1 'Sora',sans-serif;color:#fff}
.a9-hd small{display:block;margin-top:3px;font-size:.5rem;color:#94a3b8;font-variant-numeric:tabular-nums}
.a9-acts{display:flex;gap:5px;padding:0 10px 9px}
.a9-btn{display:inline-flex;align-items:center;gap:4px;padding:5px 8px;border-radius:6px;background:#3b82f6;
color:#fff;font-size:.54rem;font-weight:600;white-space:nowrap;transition:transform .15s,filter .2s}
.a9-btn svg{width:9px;height:9px}
.a9-btn.grn{background:#059669}
.a9-btn.out{background:transparent;border:1px solid rgba(148,163,184,.3);color:#e2e8f0}
.a9-btn.tap{transform:scale(.94);filter:brightness(1.15)}
.a9-th{background:#162033;border-top:1px solid rgba(148,163,184,.12);font-weight:700}
.a9a-tr.a9-th,.a9b-tr.a9-th{height:20px;font-size:.46rem;color:#fff}
.a9-vazio{position:absolute;left:0;right:0;top:112px;display:flex;flex-direction:column;align-items:center;gap:6px;
font-size:.56rem;color:#64748b;transition:opacity .3s}
.a9-vazio svg{width:20px;height:20px}
.a9-vazio.off{opacity:0}
.a9-dim{position:absolute;inset:0;z-index:5;background:rgba(2,6,23,.62);opacity:0;transition:opacity .3s}
.a9-dim.on{opacity:1}
.a9-md{position:absolute;left:34px;right:34px;top:22px;z-index:6;padding:11px 12px 12px;border-radius:11px;
background:#111827;border:1px solid rgba(148,163,184,.22);box-shadow:0 24px 50px -18px rgba(0,0,0,.9);opacity:0;
transform:translateY(10px) scale(.97);transition:opacity .3s,transform .35s cubic-bezier(.2,.9,.3,1.1)}
.a9-md.on{opacity:1;transform:none}
.a9-mt{display:flex;align-items:center;font:700 .66rem/1.2 'Sora',sans-serif;color:#fff}
.a9-mt i{margin-left:auto;font-style:normal;font-weight:400;color:#64748b}
.a9-lb{display:block;margin:7px 0 3px;font-size:.52rem;font-weight:700;color:#e2e8f0}
.a9-lb em{font-style:normal;color:#f87171}
.a9-in{display:flex;align-items:center;gap:4px;min-height:22px;padding:0 7px;border-radius:6px;background:#1e293b;
border:1px solid rgba(148,163,184,.25);font-size:.56rem;color:#f1f5f9;white-space:nowrap;overflow:hidden;
transition:border-color .2s,box-shadow .2s}
.a9-in.foc{border-color:#60a5fa;box-shadow:0 0 0 2px rgba(96,165,250,.25)}
.a9-in svg{width:8px;height:8px;color:#94a3b8}
.a9-in svg:first-of-type{margin-left:auto}
.a9-ph{color:#64748b}
.a9-hint{display:block;margin-top:3px;font-size:.46rem;line-height:1.4;color:#94a3b8}
.a9-caret{display:inline-block;width:1px;height:10px;margin-left:1px;background:#93c5fd;vertical-align:-1px;
animation:a8bblink 1s steps(1) infinite}
.a9-sw{position:relative;flex:0 0 auto;width:24px;height:13px;border-radius:99px;background:#334155}
.a9-sw::after{content:"";position:absolute;left:2px;top:2px;width:9px;height:9px;border-radius:50%;background:#fff}
.a9-sw.on{background:#3b82f6}
.a9-sw.on::after{left:13px}

/* ============================================================
   A9.1 — Passo 01: conectar o WhatsApp. Estrutura dos prints
   da lista Conexões WhatsApp e do formulário Dados da conexão;
   a janela do QR Code é suposição (o QR é desenho, não lê nada).
   ============================================================ */
.a9a-tr{display:grid;grid-template-columns:minmax(0,1fr) 70px 58px 24px 30px 46px;align-items:center;gap:0 5px;
height:28px;padding:0 10px;font-size:.54rem;color:#f1f5f9}
.a9a-tr>span{min-width:0;white-space:nowrap}
.a9a-row{border-top:1px solid rgba(148,163,184,.08);opacity:0;transform:translateY(-4px);
transition:opacity .4s,transform .4s,background .8s}
.a9a-row.vis{opacity:1;transform:none}
.a9a-row.new{background:#10303a}
.a9a-row .a9-sw{width:20px;height:11px}
.a9a-row .a9-sw::after{width:7px;height:7px}
.a9a-row .a9-sw.on::after{left:11px}
.a9a-st{justify-self:start;padding:1px 5px;border-radius:4px;border:1px solid rgba(239,68,68,.45);
background:rgba(239,68,68,.12);color:#fca5a5;font-size:.44rem;font-weight:700;transition:color .3s,background .3s,border-color .3s}
.a9a-st.ok{border-color:rgba(16,185,129,.45);background:rgba(16,185,129,.12);color:#34d399}
.a9a-st.pulse{animation:a9apulse 1.1s ease 2}
@keyframes a9apulse{50%{box-shadow:0 0 0 4px rgba(16,185,129,.22)}}
.a9a-lk{display:inline-flex;align-items:center;gap:3px;color:#60a5fa;font-weight:600;transition:transform .15s}
.a9a-lk svg{width:8px;height:8px}
.a9a-lk.tap{transform:scale(.92)}
.a9a-ft{display:flex;align-items:center;height:28px;padding:0 10px;border-top:1px solid rgba(148,163,184,.1);
font-size:.5rem;font-weight:600;color:#cbd5e1;opacity:0;transition:opacity .4s}
.a9a-ft.vis{opacity:1}
.a9a-ft span{margin-left:auto;padding:3px 6px;border-radius:5px;border:1px solid rgba(148,163,184,.22);
font-weight:400;color:#94a3b8}
/* formulário: é uma página, entra por cima da lista */
.a9a-form{position:absolute;left:8px;right:8px;top:8px;bottom:0;z-index:3;border-radius:10px 10px 0 0;
background:#0f172a;border:1px solid rgba(148,163,184,.16);border-bottom:0;transform:translateX(104%);
transition:transform .45s cubic-bezier(.2,.8,.3,1)}
.a9a-form.on{transform:none}
.a9a-fh{display:flex;gap:8px;padding:10px 12px 8px;border-bottom:1px solid rgba(148,163,184,.12)}
.a9a-fh>svg{width:13px;height:13px;margin-top:1px;color:#94a3b8}
.a9a-fh b{display:block;font:700 .64rem/1.2 'Sora',sans-serif;color:#fff}
.a9a-fh small{display:block;margin-top:2px;font-size:.46rem;line-height:1.4;color:#94a3b8}
.a9a-fb{padding:2px 12px 0}
.a9a-g2{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
.a9a-tgs{margin-top:9px}
.a9a-tg{display:flex;align-items:center;gap:6px;font-size:.54rem;font-weight:700;color:#e2e8f0}
.a9a-btns{display:flex;gap:5px;margin-top:10px}
/* janela do QR Code */
.a9a-qrw{position:relative;width:96px;height:96px;margin:10px auto 8px}
.a9a-qr{position:absolute;inset:0;overflow:hidden;border-radius:6px;background:#fff;transition:opacity .35s,transform .35s}
.a9a-qr svg{display:block;width:100%;height:100%;shape-rendering:crispEdges}
.a9a-scan{position:absolute;left:0;right:0;top:0;height:2px;background:#10b981;box-shadow:0 0 8px 2px rgba(16,185,129,.7);
opacity:0}
.a9-md.on .a9a-scan{opacity:1;animation:a9ascan 1.5s ease-in-out infinite alternate}
@keyframes a9ascan{to{transform:translateY(94px)}}
.a9a-okq{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
font:700 .6rem/1.2 'Sora',sans-serif;color:#34d399;text-align:center;opacity:0;transform:scale(.85);
transition:opacity .35s .1s,transform .4s .1s cubic-bezier(.2,.9,.3,1.3)}
.a9a-okq svg{width:30px;height:30px}
.a9-md.lido .a9a-qr{opacity:0;transform:scale(.9)}
.a9-md.lido .a9a-okq{opacity:1;transform:none}
.a9a-pp{display:block;font-size:.5rem;line-height:1.45;color:#cbd5e1;text-align:center}
.a9a-wait{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:6px;font-size:.48rem;color:#94a3b8;
transition:opacity .3s}
.a9a-wait i{width:8px;height:8px;border-radius:50%;border:1.5px solid rgba(148,163,184,.35);border-top-color:#60a5fa;
animation:a9aspin .8s linear infinite}
@keyframes a9aspin{to{transform:rotate(360deg)}}
.a9-md.lido .a9a-wait{opacity:0}

/* ============================================================
   A9.2 — Passo 02: importar os contatos. Estrutura dos prints
   da lista Contatos e do modal Importar contatos; o arquivo
   enviado e o aviso de importação concluída são suposição.
   ============================================================ */
.a9b-tr{display:grid;grid-template-columns:minmax(0,1fr) 80px 70px 40px;align-items:center;gap:0 6px;height:22px;
padding:0 10px;font-size:.54rem;color:#f1f5f9}
.a9b-tr>span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.a9b-tr>span:last-child{text-align:center}
.a9b-rows .a9b-tr{border-top:1px solid rgba(148,163,184,.08);opacity:0;transform:translateY(6px);
transition:opacity .35s,transform .4s cubic-bezier(.3,.8,.3,1)}
.a9b-rows .a9b-tr.on{opacity:1;transform:none}
.a9b-nm{display:flex;align-items:center;gap:6px}
.a9b-nm i{flex:0 0 16px;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--av);
font:700 .38rem/1 'Sora',sans-serif;font-style:normal;color:#fff}
.a9b-nm b{min-width:0;overflow:hidden;font-weight:500;text-overflow:ellipsis}
.a9b-pl{justify-self:start;display:inline-flex;align-items:center;gap:3px;padding:1px 5px;border-radius:4px;border:1px solid;
font-size:.44rem;font-weight:700}
.a9b-pl svg{width:7px;height:7px}
.a9b-pl.op{color:#fbbf24;border-color:rgba(245,158,11,.45);background:rgba(245,158,11,.1)}
.a9b-pl.cl{color:#34d399;border-color:rgba(16,185,129,.45);background:rgba(16,185,129,.1)}
.a9b-pl.ct{color:#cbd5e1;border-color:rgba(203,213,225,.3);background:rgba(203,213,225,.06)}
.a9b-rows .a9b-tr>span:nth-child(3){color:#cbd5e1;font-variant-numeric:tabular-nums}
.a9b-md{top:30px}
.a9b-lk{display:block;margin-top:3px;font-size:.52rem;font-weight:600;color:#60a5fa}
.a9b-drop{position:relative;display:grid;place-items:center;height:36px;margin-top:9px;border-radius:8px;background:#1e293b;
border:1px solid rgba(148,163,184,.3);transition:transform .15s,border-color .3s}
.a9b-drop.tap{transform:scale(.98)}
.a9b-dz{font-size:.54rem;color:#cbd5e1;transition:opacity .25s}
.a9b-drop.has .a9b-dz{opacity:0}
.a9b-file{position:absolute;inset:4px;display:flex;align-items:center;gap:6px;overflow:hidden;padding:0 8px;border-radius:6px;
background:#334155;font-size:.52rem;color:#f1f5f9;opacity:0;transition:opacity .25s,background .4s}
.a9b-file svg{width:11px;height:11px;color:#cbd5e1}
.a9b-file b{font-weight:600}
.a9b-file small{margin-left:auto;font-size:.46rem;color:#cbd5e1}
.a9b-file i{position:absolute;left:0;bottom:0;height:2px;width:0;background:#60a5fa;transition:width .9s ease-out}
.a9b-drop.has .a9b-file{opacity:1}
.a9b-drop.has .a9b-file i{width:100%}
.a9b-drop.done .a9b-file{background:#166534}
.a9b-drop.done .a9b-file i{opacity:0}
.a9b-chk{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:.54rem;font-weight:700;color:#e2e8f0}
.a9b-chk i{flex:0 0 10px;width:10px;height:10px;border-radius:3px;border:1px solid rgba(148,163,184,.45);background:#1e293b;
transition:box-shadow .25s}
.a9b-chk.hov i{box-shadow:0 0 0 3px rgba(96,165,250,.25)}
.a9b-btns{display:flex;gap:5px;margin-top:10px}
.a9b-toast{position:absolute;top:12px;right:12px;z-index:8;display:flex;gap:7px;padding:8px 11px 8px 9px;border-radius:9px;
background:#111827;border:1px solid rgba(16,185,129,.35);box-shadow:0 18px 40px -14px rgba(0,0,0,.9);opacity:0;
transform:translateY(-8px);transition:opacity .3s,transform .35s cubic-bezier(.2,.9,.3,1.1)}
.a9b-toast.on{opacity:1;transform:none}
.a9b-toast>svg{width:13px;height:13px;color:#34d399}
.a9b-toast b{display:block;font:700 .58rem/1.2 'Sora',sans-serif;color:#fff}
.a9b-toast small{display:block;margin-top:2px;font-size:.5rem;color:#94a3b8}

/* ============================================================
   A9.3 — Passo 03: o Painel do Gestor. Estrutura dos prints do
   painel (indicadores, mensagens recebidas × enviadas e ranking
   da equipe). Números fictícios e coerentes entre si.
   ============================================================ */
.a9c-pg{transition:transform .8s cubic-bezier(.4,0,.2,1)}
.a9c-ttl{display:block;padding:11px 10px 8px;font:800 .9rem/1.1 'Sora',sans-serif;color:#fff}
.a9c-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:0 10px}
.a9c-kpi{min-width:0;padding:7px 8px;border-radius:9px;background:#0f172a;border:1px solid rgba(148,163,184,.16)}
.a9c-kpi small{display:block;overflow:hidden;font-size:.44rem;color:#cbd5e1;white-space:nowrap;text-overflow:ellipsis}
.a9c-kpi b{display:block;margin:3px 0 2px;font:800 .74rem/1.1 'Sora',sans-serif;color:#fff;white-space:nowrap;
font-variant-numeric:tabular-nums}
.a9c-kpi span{display:block;overflow:hidden;font-size:.42rem;white-space:nowrap;text-overflow:ellipsis}
.a9c-win .c-lar{color:#fb923c}
.a9c-win .c-azl{color:#60a5fa}
.a9c-win .c-ok{color:#34d399}
.a9c-win .c-tl{color:#2dd4bf}
.a9c-cd{margin:8px 10px 0;padding:8px 10px;border-radius:9px;background:#0f172a;border:1px solid rgba(148,163,184,.16)}
.a9c-ch{display:flex;align-items:center;gap:5px;margin-bottom:5px;font:700 .6rem/1.2 'Sora',sans-serif;color:#fff}
.a9c-lg{display:flex;align-items:center;gap:4px;margin-left:auto;font:500 .46rem/1 'Plus Jakarta Sans',sans-serif;color:#94a3b8}
.a9c-lg i{width:7px;height:7px;margin-left:4px;border-radius:2px;border:1px solid}
.a9c-lg i.r{border-color:#3b82f6;background:rgba(59,130,246,.3)}
.a9c-lg i.e{border-color:#14b8a6;background:rgba(20,184,166,.3)}
.a9c-cv{display:block;width:100%;height:74px}
.a9c-cv .ln{fill:none;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;
transition:stroke-dashoffset 1.5s cubic-bezier(.4,0,.2,1)}
.a9c-cv .ar{opacity:0;transition:opacity .8s .7s}
.a9c-cv .gr{stroke:rgba(148,163,184,.12);stroke-width:1}
.a9c-cv.on .ln{stroke-dashoffset:0}
.a9c-cv.on .ar{opacity:1}
.a9c-tr{display:grid;grid-template-columns:14px minmax(0,1fr) 84px 84px;align-items:center;gap:6px;height:27px;
border-top:1px solid rgba(148,163,184,.1);font-size:.56rem;color:#fff}
.a9c-tr.th{height:17px;border-top:0;font-size:.44rem;font-weight:700;color:#94a3b8}
.a9c-rk .a9c-tr:not(.th){opacity:0;transform:translateX(-8px);transition:opacity .35s,transform .4s,background .5s}
.a9c-rk .a9c-tr.on{opacity:1;transform:none}
.a9c-rk .a9c-tr.top{background:rgba(251,191,36,.07)}
.a9c-tr b{display:block;font-weight:700;font-size:.54rem;font-variant-numeric:tabular-nums}
.a9c-tr small{display:block;font-size:.44rem;color:#94a3b8}
.a9c-me{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 -2px 0 rgba(0,0,0,.2)}
.a9c-me.m1{background:#fbbf24}
.a9c-me.m2{background:#cbd5e1}
.a9c-me.m3{background:#d97706}

@media (prefers-reduced-motion:reduce){
  .a9a *,.a9b *,.a9c *{animation:none!important;transition:none!important}
  .a9a-cur,.a9b-cur{display:none}
}

/* ============================================================
   Animações no lugar dos prints das páginas internas. As de card
   (palco 360×264) ganham a moldura dos prints (.shotcol img) e
   crescem até 2× para ocupar a coluna (data-kmax no HTML).
   ============================================================ */
.anim-shot{overflow:hidden;border-radius:18px;border:1px solid rgba(120,150,210,.28);
box-shadow:0 40px 90px -34px rgba(0,0,0,.8)}
.sec.light .anim-shot,.sec.white .anim-shot{border-color:#dde5f2;box-shadow:0 34px 76px -30px rgba(10,26,58,.45)}
.shotcol>.a5-hold,.shot>.a5-hold{margin-top:0}

/* LP, "O que já está incluído no teste": as duas animações empilhadas, cada uma
   com até 880px — lado a lado o A3 cairia no modo estreito e ficaria mais alto que o A6 */
.shots.shots-anim{grid-template-columns:minmax(0,1fr);max-width:880px;margin-left:auto;margin-right:auto}

/* funcionalidades: nos blocos que ganharam animação o título fica numa coluna do
   grid2, e a margem de 44px do .head (feita para uma seção inteira) afastava o texto */
.grid2>div>.head{margin-bottom:10px}

/* bento da home em sequência: o card que está tocando ganha a borda verde-água */
.a8-grid[data-seq] .a8-card.a8-on{border-color:rgba(95,227,210,.55);
box-shadow:0 0 0 1px rgba(95,227,210,.22),0 30px 64px -36px rgba(19,181,166,.6)}

/* ============================================================
   Demo do sistema na home: o espaço reservado (desktop) e a
   prévia com o botão "Explorar a demo" (celular). O resto do
   estilo vem do css/demo.css, que carrega sob demanda.
   ============================================================ */
.dm-host{position:relative;max-width:1152px;margin:0 auto}
.dm-host.dm-on .dm-pre{display:none}
.dm-pre{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.dm-pre-ui{width:100%;max-width:520px;padding:14px;border-radius:18px;background:#050a18;border:1px solid #dde5f2;
box-shadow:0 30px 70px -36px rgba(10,26,58,.55);text-align:left}
.dm-pre-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.dm-pre-top b{font:800 16px/1 'Sora',sans-serif;color:#fff}
.dm-pre-top span{font-size:12px;color:#94a3b8}
.dm-pre-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.dm-pre-cols div{min-width:0;padding:8px;border-radius:10px;background:#0b1222;border-top:3px solid var(--c)}
.dm-pre-cols em{display:block;font:700 11px/1.2 'Sora',sans-serif;font-style:normal;color:#dbe4f7}
.dm-pre-cols i{display:block;margin-top:6px;padding:8px 7px;overflow:hidden;border-radius:8px;background:#131d35;
font:600 11px/1.3 'Plus Jakarta Sans',sans-serif;font-style:normal;color:#fff;white-space:nowrap;text-overflow:ellipsis}
.dm-pre small{font-size:.84rem;color:#6b7a96}
@media (min-width:900px){.dm-host{min-height:660px}}