/*
 * styles.css: tudo o que não é a primeira dobra (essa está inline no index.html).
 * Desenho da ilustração v3, direção A, aprovada em 27/10/2026. Um sistema de forma só: botões em
 * pílula, cartões em 22 px, peças internas em 14 px; sombra neutra; luz só onde a cena pede.
 */
.h2{font-weight:700;font-size:clamp(30px,3.6vw,50px);line-height:1.08;letter-spacing:-.04em;text-wrap:balance}
.btn-s{background:rgba(160,195,255,.06);color:var(--tx);box-shadow:inset 0 0 0 1px var(--line2)}
.btn-s .btn-i{background:rgba(160,195,255,.08);color:var(--cy)}
@media (hover:hover){.btn-s:hover{background:rgba(56,189,248,.1);box-shadow:inset 0 0 0 1px rgba(56,189,248,.45)}}
.btn[disabled]{opacity:.6;cursor:progress}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}
.cartao-p,.caso,.degrau .miolo{border-radius:var(--r);background:linear-gradient(180deg,rgba(17,27,48,.92),rgba(9,15,28,.94));box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(160,195,255,.07)}

/* faixa de prova */
.pf{position:relative;z-index:2;background:linear-gradient(180deg,var(--ink),var(--bg));padding:34px 0 46px}
.pf::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(56,189,248,.45) 30%,rgba(46,108,246,.45) 70%,transparent)}
/* a fileira de clientes corre sozinha: o app.js duplica a lista (a volta não tem emenda) e liga .anda;
   sem isso (movimento reduzido, foto) a lista fica parada, quebrando em linhas e centralizada */
.pf-l{text-align:center;font-size:14px;color:var(--tx2);margin-bottom:22px}
.pf-trilho.anda{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.pf-correr{display:flex}
.pf-trilho.anda .pf-correr{width:max-content;animation:pf-anda 70s linear infinite}
@media (hover:hover){.pf-trilho.anda:hover .pf-correr{animation-play-state:paused}}
@keyframes pf-anda{to{transform:translateX(-50%)}}
.pf-fila{list-style:none;display:flex;align-items:center;gap:22px 52px;flex-wrap:wrap;justify-content:center;max-width:var(--w);margin:0 auto;padding:0 var(--gut)}
.pf-trilho.anda .pf-fila{flex-wrap:nowrap;max-width:none;margin:0;padding:0 52px 0 0}
/* os segmentos correm na faixa de baixo, no sentido contrário (terceira revisão: "muita informação carregada") */
.pf-trilho-n.anda .pf-correr{animation-duration:90s;animation-direction:reverse}
.pf-trilho.anda .pf-nichos{flex-wrap:nowrap;max-width:none;margin:0;padding:0 8px 0 0}
.pf-nichos li{white-space:nowrap}
.pf-fila li{flex:none;display:flex;align-items:center}
.pf-fila img{height:30px;width:auto;filter:grayscale(1) brightness(0) invert(1);opacity:.78}
.pf-fila img.alto{height:42px}
.pf-fila img.quad{height:40px}
/* selo e logo com desenho (Posto, FLY) um pouco maiores; o nome de quem não tem logo, cada um numa fonte,
   com a altura acertada a olho para todos parecerem do mesmo tamanho (style="--h:…" no index.html) */
.pf-fila img.desenho{height:46px}
.pf-fila img.nome{height:var(--h,22px)}
.pf-fila span{font-family:var(--disp);font-weight:700;font-size:18px;letter-spacing:-.03em;color:#fff;opacity:.72;white-space:nowrap}
.pf-nichos-t{text-align:center;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3);margin:24px 0 12px}
.pf-nichos{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:980px;margin:0 auto}
.pf-nichos li{font-size:13px;line-height:1.2;color:var(--tx2);padding:7px 12px;border-radius:999px;background:rgba(160,195,255,.03);box-shadow:inset 0 0 0 1px var(--line2)}

/* seções */
.sec{position:relative;padding:clamp(80px,8.5vw,124px) 0}
.sec-cab{display:grid;gap:20px;max-width:780px;margin-bottom:clamp(44px,5vw,68px)}
.sec-cab .sub{max-width:640px}
.tom{background:linear-gradient(180deg,var(--bg),#060C19 50%,var(--bg))}
.cta-l{margin-top:clamp(40px,4.5vw,56px);display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}

/* dor */
#dor .sec-cab{max-width:900px}   /* a headline do problema em três linhas, não quatro */
.dor-t em{font-style:normal;background:linear-gradient(180deg,#FFC9CE,var(--red));-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
/* sexta revisão (#107): depois da lista, o "Isso não é normal!" e o gráfico dos três horários (medido no SIC) */
.anormal{margin-top:clamp(64px,8vw,112px)}
.anormal-t{font:700 clamp(38px,5.2vw,76px)/1.04 var(--disp);letter-spacing:-.045em;color:var(--tx)}
.anormal-t em{font-style:normal;background:linear-gradient(180deg,#FFC9CE,var(--red));-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.anormal-l{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(28px,3.4vw,44px)}
.anormal-l li{display:grid;gap:14px;align-content:start;padding-top:20px;border-top:1px solid rgba(255,122,134,.28);font-size:clamp(17px,1.45vw,21px);line-height:1.4;color:#E6EDF8;text-wrap:pretty}
.anormal-i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:#FFB4BB;background:rgba(255,122,134,.1);box-shadow:inset 0 0 0 1px rgba(255,122,134,.3)}
.anormal-i .ic{font-size:17px}
.horarios{margin-top:clamp(72px,9vw,128px)}
.horarios-cab{max-width:760px}
.horarios-cab h3{font:700 clamp(26px,2.8vw,40px)/1.12 var(--disp);letter-spacing:-.035em;color:var(--tx);text-wrap:balance}
.horarios-cab p{margin-top:14px;font-size:clamp(16px,1.35vw,19px);line-height:1.55;color:var(--tx2);max-width:640px}
/* #123 a #125: o horário nobre é o ouro do lead (dourado); conforme o gráfico sobe na tela, o ouro vira vermelho e
   aparece "É aqui que você está perdendo." --nob e --nob2 (r, g, b) vêm do nobre() do app.js; sem JavaScript, ouro */
.horarios{--nob:245,196,81;--nob2:255,227,161}
.gh{position:relative;margin:clamp(70px,7vw,88px) 0 0}
.gh-perde{position:absolute;right:calc(100% / 24);bottom:calc(100% + 14px);display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;font:600 14.5px/1.2 var(--sans);letter-spacing:-.01em;color:#FFE1E4;white-space:nowrap;background:rgba(255,122,134,.16);box-shadow:inset 0 0 0 1.5px rgba(255,122,134,.85),0 0 26px -4px rgba(255,122,134,.6);opacity:0;translate:0 10px;transition:opacity .45s var(--saida),translate .6s var(--mola);pointer-events:none}
.gh-perde::after{content:"";position:absolute;right:30px;top:100%;width:2px;height:14px;background:linear-gradient(rgba(255,122,134,.9),rgba(255,122,134,0))}
.horarios.perdendo .gh-perde{opacity:1;translate:0 0}
.gh-area{position:relative;height:clamp(200px,22vw,280px);border-bottom:1px solid var(--line2)}
.gh-faixa{position:absolute;top:0;bottom:0;left:calc(var(--de) / 24 * 100%);width:calc((var(--ate) - var(--de)) / 24 * 100%);border-radius:10px 10px 0 0}
.gh-faixa b{position:absolute;top:12px;left:10px;font:600 12px/1.2 var(--mono);letter-spacing:.02em;white-space:nowrap}
.gh-com{background:linear-gradient(180deg,rgba(46,108,246,.17),rgba(46,108,246,.04));box-shadow:inset 0 1px 0 rgba(46,108,246,.55)}
.gh-com b{color:#9CC2FF}
.gh-nob{background:linear-gradient(180deg,rgba(var(--nob),.24),rgba(var(--nob),.05));box-shadow:inset 0 1px 0 rgba(var(--nob),.75)}
.gh-nob b{left:auto;right:8px;color:rgb(var(--nob2))}
.gh-b{position:absolute;inset:46px 0 0;display:grid;grid-template-columns:repeat(24,minmax(0,1fr));align-items:end;gap:3px;padding:0 2px}
.gh-b i{display:block;height:calc(var(--v) * 100%);min-height:2px;border-radius:4px 4px 0 0;transform-origin:bottom;background:#4A5B7A}
.gh-b i.c{background:linear-gradient(180deg,#6E9BFF,var(--blue))}
.gh-b i.n{background:linear-gradient(180deg,rgb(var(--nob2)),rgb(var(--nob)))}
.gh-b i.m{background:#2A3550}
.gh.sobe .gh-b i{transform:scaleY(0);transition:transform 1s var(--mola) .25s}
.gh.sobe.ja .gh-b i{transform:scaleY(1)}
.gh-eixo{position:relative;height:18px;margin-top:9px}
.gh-eixo span{position:absolute;left:calc(var(--h) / 24 * 100%);font:500 11.5px/1 var(--mono);color:var(--tx3)}
.gh-eixo span:last-child{left:auto;right:0}   /* o 23h encostado na borda não corta */
.gh-util{position:relative;height:34px;margin-top:6px}
.gh-util::before{content:"";position:absolute;top:0;left:calc(var(--de) / 24 * 100%);width:calc((var(--ate) - var(--de)) / 24 * 100%);height:9px;border:1px solid rgba(139,216,255,.5);border-top:0;border-radius:0 0 7px 7px}
.gh-util span{position:absolute;top:15px;left:calc(var(--de) / 24 * 100% + 10px);font:500 12px/1.2 var(--mono);color:var(--cy2);white-space:nowrap}
.gh figcaption{margin-top:12px;font-size:14px;line-height:1.5;color:var(--tx3)}
.horarios-l{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(32px,4vw,48px)}
.horarios-l li{display:grid;gap:6px;align-content:start;padding-top:18px;border-top:2px solid var(--line2)}
.horarios-l .h-com{border-top-color:var(--blue)}
.horarios-l .h-util{border-top-color:rgba(139,216,255,.65)}
.horarios-l .h-nob{border-top-color:rgb(var(--nob))}
.horarios-l b{font:700 17px/1.2 var(--disp);letter-spacing:-.01em;color:var(--tx)}
.horarios-l span{font:500 12.5px/1.35 var(--mono);color:var(--tx3)}
.horarios-l strong{margin-top:8px;font:700 clamp(40px,4.4vw,60px)/1 var(--disp);letter-spacing:-.04em}
.h-com strong{color:#9CC2FF}
.h-util strong{color:var(--cy2)}
.h-nob strong{background:linear-gradient(180deg,rgb(var(--nob2)),rgb(var(--nob)));-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.04em}
.horarios-l small{font-size:15px;line-height:1.5;color:var(--tx2)}
.horarios-fonte{margin-top:28px;font-size:13px;line-height:1.5;color:var(--tx3);max-width:720px}
/* #109: a conclusão do problema, com a barra vermelha da página da Full Sales */
.conclusao{margin-top:clamp(56px,7vw,96px);max-width:860px;padding:clamp(24px,3vw,36px) clamp(24px,3.2vw,40px);border-radius:0 var(--r) var(--r) 0;background:linear-gradient(100deg,rgba(255,122,134,.1),rgba(255,122,134,.03) 70%);box-shadow:inset 3px 0 0 var(--red)}
.conclusao p{font-size:clamp(17px,1.5vw,21px);line-height:1.55;color:#E6EDF8;text-wrap:pretty}
.conclusao p+p{margin-top:14px}
.conclusao em{font-style:normal;font-weight:600;color:#FF9AA4}
.conclusao strong{display:block;margin-top:10px;font:700 clamp(21px,2vw,27px)/1.25 var(--disp);letter-spacing:-.02em;color:#fff}
.conclusao strong em{font-weight:700;background:linear-gradient(180deg,#FFC9CE,var(--red));-webkit-background-clip:text;background-clip:text;color:transparent}
.dor-lista{list-style:none;border-top:1px solid var(--line)}
.dor-lista li{display:grid;grid-template-columns:132px 46px minmax(0,1fr) auto;gap:22px;align-items:center;padding:26px 8px;border-bottom:1px solid var(--line)}
.dor-hora{font-family:var(--mono);font-size:12.5px;color:var(--tx3)}
.dor-lista .ic{width:46px;height:46px;padding:11px;border-radius:14px;color:#FFB4BB;background:rgba(255,122,134,.08);box-shadow:inset 0 0 0 1px rgba(255,122,134,.2)}
.dor-lista p{font-size:clamp(16px,1.35vw,19px);line-height:1.5;color:#DCE6F4;max-width:640px}
.dor-lista q{quotes:"\201C" "\201D";color:#fff;font-weight:600}
.dor-st{font-family:var(--mono);font-size:12px;color:#FF9AA4;white-space:nowrap;padding:6px 11px;border-radius:999px;background:rgba(255,122,134,.07);box-shadow:inset 0 0 0 1px rgba(255,122,134,.22)}
.dor-st::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);margin-right:8px;vertical-align:1px}
.ruptura{margin-top:clamp(48px,6vw,80px);padding:clamp(36px,5vw,64px);border-radius:var(--r);background:radial-gradient(80% 120% at 0% 0%,rgba(255,122,134,.13),transparent 55%),linear-gradient(160deg,#0E1426,#080D1A);box-shadow:inset 0 0 0 1px var(--line),inset 0 1px 0 rgba(255,255,255,.05)}
.ruptura p{font-size:clamp(16px,1.4vw,19px);color:var(--tx2);max-width:640px}
.ruptura blockquote{margin-top:18px;font-weight:700;font-size:clamp(28px,3.4vw,48px);line-height:1.15;letter-spacing:-.035em;color:#fff;text-wrap:balance}

/* mecanismo */
/* sexta revisão (#110 e #112): as mentiras chegam legíveis e são riscadas quando passam do meio da tela, uma por
   vez. O risco é um fundo que cresce da esquerda (vale também para o item que quebra em duas linhas) e roda com
   "reduzir movimento" ligado, como as faixas e os vídeos da página (o aparelho da direção usa esse modo) */
.mec-t em{font-style:normal;background:linear-gradient(180deg,#FFC9CE,var(--red));-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.mec-sub{font:600 clamp(19px,1.9vw,26px)/1.35 var(--disp);letter-spacing:-.02em;color:var(--tx2)}
.mec-sub b{color:var(--tx)}
.tentativas{list-style:none;display:grid;max-width:900px;margin:0 0 36px;border-top:1px solid var(--line)}
.tentativas li{display:flex;align-items:center;gap:16px;padding:clamp(14px,1.6vw,20px) 0;border-bottom:1px solid var(--line);font:600 clamp(19px,2.2vw,30px)/1.25 var(--disp);letter-spacing:-.02em;color:var(--tx)}
.tentativas .ic{flex:none;width:clamp(30px,2.6vw,38px);height:clamp(30px,2.6vw,38px);padding:clamp(7px,.6vw,9px);border-radius:50%;color:var(--tx3);box-shadow:inset 0 0 0 1px var(--line2);transition:color .5s,background-color .5s,box-shadow .5s}
.tentativas li p{margin:0}
.tentativas li span{background:linear-gradient(var(--red),var(--red)) no-repeat 0 58% / 0% .09em;transition:background-size .9s var(--mola),color .6s ease-out}   /* em linha (dentro do p): o risco atravessa as duas linhas do item que quebra */
.tentativas li.riscado span{background-size:100% .09em;color:var(--tx3)}
.tentativas li.riscado .ic{color:#FFB4BB;background-color:rgba(255,122,134,.12);box-shadow:inset 0 0 0 1px rgba(255,122,134,.45)}
.mec-p{font-size:clamp(16px,1.35vw,19px);line-height:1.65;color:var(--tx2);max-width:760px}
.mec-soco{margin-top:clamp(48px,6vw,80px);font-weight:700;font-size:clamp(34px,4.6vw,66px);line-height:1.06;letter-spacing:-.05em;max-width:1000px;text-wrap:balance}
.mec-soco span{color:var(--cy)}
.solucao{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(40px,6vw,88px);align-items:center;margin-top:clamp(72px,9vw,120px)}
.sol-t h3{font-weight:700;font-size:clamp(30px,3.4vw,46px);line-height:1.06;letter-spacing:-.04em;margin-bottom:22px}
.sol-t h3 span{display:block;color:var(--tx2);font:600 18px/1.4 var(--sans);letter-spacing:-.01em;margin-bottom:10px}
.sol-t p{font-size:16.5px;line-height:1.7;color:var(--tx2)}
.sol-t p+p{margin-top:16px}
.sol-t .btn{margin-top:32px}
/* sexta revisão (#114 a #116): a solução que se vê. No topo, uma frase e três números (as camadas ao lado contam o
   resto); depois, o que a Estrutura Comercial com IA não é e o que ela é; no fim, as três frentes de agentes */
.sol-t .sol-lead{font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:#DCE6F4;max-width:520px}
.sol-nums{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.sol-nums li{display:grid;gap:6px;align-content:start}
.sol-nums b{font:700 clamp(30px,3vw,42px)/1 var(--disp);letter-spacing:-.04em;background:linear-gradient(180deg,#fff,var(--cy2));-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.04em}
.sol-nums span{font-size:13.5px;line-height:1.4;color:var(--tx2)}
.enao{margin-top:clamp(72px,9vw,120px)}
.enao-t{font:700 clamp(28px,3.2vw,44px)/1.08 var(--disp);letter-spacing:-.04em;color:var(--tx);text-align:center;text-wrap:balance}
.enao-t span{background:linear-gradient(180deg,#fff,var(--cy2));-webkit-background-clip:text;background-clip:text;color:transparent}
.enao-g{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(14px,2vw,24px);margin-top:clamp(28px,3.4vw,44px);align-items:stretch}
.enao-c{border-radius:var(--r);padding:clamp(24px,2.8vw,36px)}
.enao-nao{background:linear-gradient(180deg,rgba(255,122,134,.06),rgba(255,122,134,.015));box-shadow:inset 0 0 0 1px rgba(255,122,134,.16)}
.enao-sim{background:radial-gradient(90% 120% at 100% 0%,rgba(46,108,246,.24),transparent 60%),linear-gradient(180deg,rgba(17,27,48,.95),rgba(9,15,28,.95));box-shadow:inset 0 0 0 1px rgba(56,189,248,.35),0 30px 80px -40px rgba(46,108,246,.6)}
.enao-r{display:block;font:600 12.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-bottom:20px}
.enao-nao .enao-r{color:#FF9AA4}
.enao-sim .enao-r{color:var(--cy)}
.enao ul{list-style:none;display:grid;gap:16px}
.enao li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:14px;align-items:start;font-size:clamp(16px,1.35vw,19px);line-height:1.45}
.enao li .ic{width:30px;height:30px;padding:7px;border-radius:50%}
.enao-nao li{color:var(--tx3)}
.enao-nao li .ic{color:#FF9AA4;background:rgba(255,122,134,.1)}
.enao-sim li{color:#EAF1FF}
.enao-sim li .ic{color:#fff;background:var(--blue)}
.agentes{margin-top:clamp(88px,11vw,150px)}
.agentes-cab{max-width:780px}
.agentes-cab .olho{font:600 12.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cy)}
.agentes-cab h3{margin-top:14px;font:700 clamp(32px,4vw,56px)/1.05 var(--disp);letter-spacing:-.045em;color:var(--tx);text-wrap:balance}
.agentes-cab h3 em{font-style:normal;background:linear-gradient(180deg,#fff,var(--cy2));-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.agentes-cab p{margin-top:16px;font-size:clamp(16px,1.4vw,19px);line-height:1.55;color:var(--tx2);max-width:620px}
.agentes-l{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,22px);margin-top:clamp(32px,4vw,52px)}
.ag{position:relative;display:flex;flex-direction:column;gap:10px;padding:14px 14px clamp(24px,2.6vw,30px);border-radius:var(--r);background:linear-gradient(180deg,rgba(17,27,48,.92),rgba(9,15,28,.94));box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(160,195,255,.09)}
.ag-vis{position:relative;height:196px;margin-bottom:12px;border-radius:14px;overflow:hidden;background:radial-gradient(80% 90% at 50% 0%,rgba(46,108,246,.22),transparent 70%),#070C17;box-shadow:inset 0 0 0 1px rgba(160,195,255,.08)}
.ag-n{margin:4px 10px 0;font:600 12.5px/1 var(--mono);color:var(--cy)}
.ag h4{margin:0 10px;font:700 clamp(19px,1.6vw,23px)/1.2 var(--disp);letter-spacing:-.025em;color:#fff;text-wrap:balance}
.ag p{margin:0 10px;font-size:15px;line-height:1.55;color:var(--tx2)}
.agb{position:absolute;max-width:76%;padding:9px 12px;border-radius:14px;font-size:13px;line-height:1.35}
.agb-l{left:16px;top:18px;background:#E9EEF5;color:#0B1220;border-top-left-radius:4px}
.agb-ia{right:16px;top:68px;background:linear-gradient(180deg,#3A78FF,#2257D6);color:#fff;border-top-right-radius:4px;box-shadow:0 10px 30px -10px rgba(46,108,246,.8)}
.ag-canais{position:absolute;left:16px;bottom:14px;display:flex;gap:8px}
.ag-canais .ic{width:30px;height:30px;padding:7px;border-radius:9px;color:#D6E4F5;background:rgba(160,195,255,.08);box-shadow:inset 0 0 0 1px rgba(160,195,255,.14)}
.agk{position:absolute;left:14px;right:14px;top:16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.agk-c{display:grid;gap:6px;align-content:start;padding:8px;border-radius:10px;background:rgba(160,195,255,.05);box-shadow:inset 0 0 0 1px rgba(160,195,255,.1)}
.agk-c i{font:600 10.5px/1 var(--mono);font-style:normal;color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agk-c em{display:block;height:16px;border-radius:5px;background:rgba(160,195,255,.12)}
.agk-on{background:rgba(46,108,246,.16);box-shadow:inset 0 0 0 1px rgba(56,189,248,.45)}
.agk-on i{color:var(--cy)}
.agk-on em{height:auto;padding:5px 6px;font:600 10.5px/1.2 var(--sans);font-style:normal;color:#fff;background:var(--blue)}
.ag-chip{position:absolute;left:14px;display:flex;align-items:center;gap:8px;padding:7px 11px;border-radius:999px;font-size:12.5px;color:#DCE6F4;background:rgba(160,195,255,.07);box-shadow:inset 0 0 0 1px rgba(160,195,255,.14)}
.ag-chip .ic{font-size:15px;color:var(--grn)}
.ag-vis-2 .ag-chip:nth-of-type(2){bottom:52px}
.ag-vis-2 .ag-chip:nth-of-type(3){bottom:14px}
.ag-score{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:110px;height:110px;border-radius:50%;display:grid;place-content:center;text-align:center;background:radial-gradient(closest-side,#070C17 79%,transparent 80% 100%),conic-gradient(var(--cy) calc(var(--s) * 360deg),rgba(160,195,255,.12) 0)}
.ag-score b{font:700 34px/1 var(--disp);color:#fff;letter-spacing:-.03em}
.ag-score small{margin-top:4px;font:600 10px/1.2 var(--mono);color:var(--tx3)}
.ag-rot{position:absolute;left:146px;right:16px;top:50%;transform:translateY(-50%);display:grid;gap:9px;padding:12px;border-radius:12px;background:rgba(160,195,255,.05);box-shadow:inset 0 0 0 1px rgba(160,195,255,.12)}
.ag-rot b{font:600 11px/1 var(--mono);color:var(--cy);letter-spacing:.04em;text-transform:uppercase}
.ag-rot i{display:block;width:var(--w);height:7px;border-radius:4px;background:rgba(220,230,244,.28)}
.agentes-pe{margin-top:26px;max-width:760px;font-size:14.5px;line-height:1.55;color:var(--tx3)}
.agentes .cta-l{margin-top:28px}
.pilha{position:relative;width:100%;max-width:620px;margin-left:auto}
.pilha svg{width:100%;height:auto;overflow:visible}
.pilha-r{position:absolute;left:56%;transform:translateY(-50%);display:flex;align-items:center;gap:10px;font-size:13.5px;line-height:1.35;color:#D6E4F5;width:46%}
.pilha-r .ic{width:30px;height:30px;padding:6px;border-radius:10px;color:var(--cy);background:rgba(56,189,248,.1);box-shadow:inset 0 0 0 1px rgba(56,189,248,.25)}
.pilha-r.topo{color:#fff}
.pilha-r.topo .ic{color:#fff;background:var(--blue);box-shadow:none}

/* dez funis */
.funis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.funil{position:relative;text-align:left;display:flex;flex-direction:column;gap:12px;padding:20px 18px 22px;border:0;border-radius:18px;cursor:pointer;font:inherit;color:inherit;background:linear-gradient(180deg,rgba(17,27,48,.75),rgba(9,15,28,.85));box-shadow:inset 0 0 0 1px var(--line),inset 0 1px 0 rgba(255,255,255,.04);transition:transform .5s var(--mola),box-shadow .4s var(--saida),background .4s}
.funil>.ic{width:40px;height:40px;padding:9px;border-radius:12px;color:var(--cy);background:rgba(56,189,248,.08);box-shadow:inset 0 0 0 1px rgba(56,189,248,.18)}
.funil b{font-size:15.5px;line-height:1.3;letter-spacing:-.01em;color:#fff}
.funil .ft{display:grid;gap:6px}
.funil .ft span{font-size:13.5px;line-height:1.5;color:var(--tx2)}
.funil i{position:absolute;right:14px;top:14px;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(160,195,255,.55);display:grid;place-items:center;color:transparent;font-size:13px;transition:background .3s,box-shadow .3s,color .3s}
@media (hover:hover){.funil:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(56,189,248,.35),0 20px 40px -24px rgba(0,0,0,.8)}}
.funil:active{transform:scale(.98)}
.funil[aria-pressed="true"]{background:linear-gradient(180deg,rgba(32,70,150,.55),rgba(12,24,52,.9));box-shadow:inset 0 0 0 1px rgba(56,189,248,.65),0 24px 50px -26px rgba(0,0,0,.85)}
.funil[aria-pressed="true"] i{background:var(--cy);box-shadow:none;color:#031024}
/* #117: depois da primeira marca, o que não está funcionando fica vermelho ("parado"). A cor vem por cima do fundo
   (::before, abaixo do conteúdo) e a palavra no canto (::after), em onda a partir do cartão tocado (--i, posto pelo
   app.js). Só opacidade: aparece também com "reduzir movimento" */
.funil{isolation:isolate}
.funil::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(180deg,rgba(255,122,134,.14),rgba(58,12,20,.58));box-shadow:inset 0 0 0 1px rgba(255,122,134,.5);opacity:0;transition:opacity .45s var(--saida);pointer-events:none}
.funil::after{content:"parado";position:absolute;right:44px;top:19px;font:600 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#FF9AA4;opacity:0;transition:opacity .45s var(--saida);pointer-events:none}
.funil b,.funil>.ic{transition:color .45s var(--saida),background .45s var(--saida),box-shadow .45s var(--saida)}
.funis.marcou .funil[aria-pressed="false"]::before,.funis.marcou .funil[aria-pressed="false"]::after{opacity:1;transition-delay:calc(var(--i,0) * 90ms)}
.funis.marcou .funil[aria-pressed="false"]>.ic{color:#FFB4BB;background:rgba(255,122,134,.1);box-shadow:inset 0 0 0 1px rgba(255,122,134,.3);transition-delay:calc(var(--i,0) * 90ms)}
.funis.marcou .funil[aria-pressed="false"] b{color:#FFD6DA;transition-delay:calc(var(--i,0) * 90ms)}
.funis.marcou .funil[aria-pressed="false"] i{box-shadow:inset 0 0 0 1.5px rgba(255,122,134,.7)}
/* o diagnóstico ao lado do botão: dez tracinhos (azul o que funciona, vermelho o que está parado) e a frase */
.funis-diag{display:flex;align-items:center;gap:18px;flex:1 1 440px;min-width:0}
.funis-med{flex:none;display:grid;grid-template-columns:repeat(10,1fr);gap:3px;width:118px}
.funis-med i{height:8px;border-radius:2px;background:rgba(160,195,255,.16);transition:background .35s var(--saida)}
.funis-med i.on{background:var(--cy)}
.funis-med i.off{background:#FF7A86}
.funis-pe p em{font-style:normal;color:#FF9AA4;font-family:var(--mono);font-weight:500;font-size:16px}
.funis-pe{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;padding:14px 14px 14px 24px;border-radius:22px;background:rgba(160,195,255,.04);box-shadow:inset 0 0 0 1px var(--line)}
.funis-pe p{font-size:15px;line-height:1.5;color:var(--tx2)}
.funis-pe p b{font-family:var(--mono);font-weight:500;color:var(--cy);font-size:16px}

/* benefícios */
/* #118: a semana de 168 horas. As células acendem em três tempos (classes f1, f2 e f3, postas pelo app.js quando a
   semana aparece): o horário comercial do time, depois a IA nas outras horas, em varredura pela hora (--h) e pelo dia
   (--d), depois as cenas reais. Só cor e opacidade: com "reduzir movimento" acende igual, sem o salto dos pontos */
.vida-cab .sub{max-width:720px}
.vida-t em{font-style:normal;background:linear-gradient(180deg,#CFF0FF,var(--cy));-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.semana{margin:clamp(36px,4.5vw,56px) 0 0;padding:clamp(18px,2.6vw,32px);border-radius:var(--r);background:linear-gradient(180deg,rgba(13,22,40,.72),rgba(7,12,24,.86));box-shadow:inset 0 0 0 1px var(--line)}
.sem-g,.sem-hs{display:grid;grid-template-columns:40px repeat(24,minmax(0,1fr));column-gap:4px}
.sem-g{row-gap:5px;align-items:center}
.sem-d{font:500 12.5px/1 var(--mono);color:var(--tx3)}
.sem-g i{position:relative;height:clamp(18px,2.2vw,30px);border-radius:5px;background:rgba(160,195,255,.055);transition:background .55s var(--saida),box-shadow .55s var(--saida)}
.semana.f1 .sem-g i.c{background:rgba(46,108,246,.55);box-shadow:inset 0 0 0 1px rgba(130,175,255,.5)}
.semana.f2 .sem-g i:not(.c){background:rgba(56,189,248,.3);box-shadow:inset 0 0 0 1px rgba(120,215,255,.2);transition-delay:calc(var(--h,0) * 26ms + var(--d,0) * 30ms)}
.semana.f2 .sem-g i.c{box-shadow:inset 0 0 0 1px rgba(130,175,255,.5),0 0 0 1.5px rgba(56,189,248,.55)}
.sem-g i.x b{position:absolute;left:50%;top:50%;z-index:1;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;display:grid;place-items:center;font:700 12.5px/1 var(--mono);color:#031024;background:var(--cy);box-shadow:0 0 0 4px rgba(56,189,248,.2),0 0 20px rgba(56,189,248,.6);opacity:0;transform:scale(.4);transition:opacity .45s var(--saida),transform .7s var(--mola),background .3s,box-shadow .3s;transition-delay:calc(var(--k,0) * 110ms)}
.semana.f3 .sem-g i.x b{opacity:1;transform:none}
.sem-g i.x.foco b{background:#fff;box-shadow:0 0 0 6px rgba(56,189,248,.32),0 0 28px rgba(56,189,248,.85);transition-delay:0s}
.semana.sem-ja .sem-g i,.semana.sem-ja .sem-g i.x b{transition:none}
.sem-hs{margin-top:10px;font:500 11.5px/1 var(--mono);color:var(--tx3)}
.sem-hs span{grid-row:1;white-space:nowrap}
.sem-hs .fim{justify-self:end}
.sem-leg{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:22px;font-size:13.5px;color:var(--tx2)}
.sem-l{display:inline-flex;align-items:center;gap:9px}
.sem-l i{flex:none;width:14px;height:14px;border-radius:4px;font-style:normal}
.sem-l b{color:#fff;font-weight:600}
.sem-l-c i{background:rgba(46,108,246,.55);box-shadow:inset 0 0 0 1px rgba(130,175,255,.5)}
.sem-l-ia i{background:rgba(56,189,248,.36);box-shadow:inset 0 0 0 1px rgba(120,215,255,.3)}
.sem-l-x i{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font:700 10px/1 var(--mono);color:#031024;background:var(--cy)}
/* as seis cenas, abertas (sem caixa): o número é o ponto da semana; passar o mouse acende o ponto */
.cenas{list-style:none;margin:clamp(30px,3.6vw,46px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(30px,3.2vw,42px) clamp(22px,2.8vw,38px)}
.cena{display:flex;flex-direction:column;gap:10px;padding-top:18px;border-top:1px solid var(--line2);transition:border-color .3s}
.cena:hover,.cena:focus-within{border-top-color:rgba(56,189,248,.7)}
.cena-q{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:13px;color:var(--tx3)}
.cena-n{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:700 11px/1 var(--mono);color:#031024;background:var(--cy)}
.cena-q time{font-family:var(--mono);font-size:13px;color:#CFE6FF}
.cena h3{font-weight:700;font-size:clamp(19px,1.55vw,22px);line-height:1.22;letter-spacing:-.02em;color:#fff}
.cena p{font-size:15px;line-height:1.55;color:var(--tx2)}
.cena p.cena-r{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-size:13.5px;line-height:1.3;color:#8AF0B4;padding:6px 12px 6px 9px;border-radius:999px;background:rgba(74,222,128,.08);box-shadow:inset 0 0 0 1px rgba(74,222,128,.28)}
.cena-r .ic{flex:none;font-size:15px;color:var(--grn)}
.cena-ver{align-self:flex-start;margin-top:auto;display:inline-flex;align-items:center;gap:8px;padding:4px 0;border:0;background:none;font:inherit;font-size:14px;font-weight:600;color:var(--cy);cursor:pointer}
.cena-ver .ic{font-size:15px;transition:transform .4s var(--mola)}
@media (hover:hover){.cena-ver:hover .ic{transform:translateX(3px)}}
.cena-ver:focus-visible{outline:2px solid var(--cy);outline-offset:4px;border-radius:6px}
/* o que muda: para você e para a sua equipe, em duas colunas abertas */
.vida-pe{margin-top:clamp(52px,6vw,84px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line2)}
.vida-col{padding:clamp(26px,3vw,38px) clamp(20px,3vw,44px) 0 0}
.vida-col+.vida-col{padding-left:clamp(20px,3vw,44px);box-shadow:inset 1px 0 0 var(--line2)}
.vida-col h3{font:600 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tx3)}
.vida-col ul{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:16px}
.vida-col li{display:flex;gap:12px;font-size:clamp(17px,1.4vw,19.5px);line-height:1.45;letter-spacing:-.01em;color:#E6EEF9}
.vida-col li .ic{flex:none;margin-top:2px;font-size:21px;color:var(--cy)}

/* provas por funil, logo depois dos logos (o molde da "prova por setor" da Full Sales): números do
   sistema, filtro, e o mural de vídeos e prints dos clientes. O app.js distribui os itens em colunas
   de altura parecida; no celular é uma coluna só (em trilho de deslizar, a altura seguia o print
   mais comprido e sobrava um vão embaixo de cada vídeo). */
.provas{padding-top:clamp(64px,7vw,96px)}
/* os cartões de número: a pergunta, o caso do cliente numa frase com o resultado em destaque, e a marca do
   cliente embaixo (revisão da direção na mesa, 27/10: "jogar o peso do resultado pro caso do cliente") */
.m-numeros{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:clamp(40px,5vw,60px)}
.m-num{padding:26px 26px 20px;display:flex;flex-direction:column;gap:14px}
.m-num em{font-style:normal;font-family:var(--mono);font-size:12.5px;letter-spacing:.01em;color:var(--cy2)}
/* a frase em texto normal e só o resultado em negrito (terceira revisão: "tá tudo em bold"; o nome do cliente sem destaque) */
.m-num p{font-family:var(--sans);font-weight:400;font-size:clamp(19px,1.6vw,22px);line-height:1.45;color:#B9C8DC;text-wrap:pretty}
.m-num p strong{font-weight:700;background:linear-gradient(180deg,#fff,var(--cy2));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* #119 a #122: o cartão sobe ao passar o mouse (no celular, ao tocar) e a pergunta acende em neon. A subida usa a
   propriedade translate, que não briga com o transform do .sobe; o neon é sombra e cor, e aparece também com
   "reduzir movimento". A pergunta já tem o espaço da pílula (padding com margem negativa): acender não mexe no texto */
.js .m-num.sobe,.m-num{transition:opacity .9s var(--saida),transform 1.1s var(--mola),filter .9s var(--saida),translate .5s var(--mola),box-shadow .5s var(--mola)}
.m-num em{align-self:flex-start;margin:-5px -11px;padding:5px 11px;border-radius:999px;transition:color .4s var(--saida),background .4s var(--saida),box-shadow .4s var(--saida),text-shadow .4s var(--saida),translate .5s var(--mola)}
@media (hover:hover){.m-num:hover{translate:0 -6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 0 1px rgba(56,189,248,.3),0 0 0 6px rgba(56,189,248,.07),0 0 0 7px rgba(56,189,248,.45),0 30px 60px -28px rgba(0,0,0,.9),0 0 46px -8px rgba(56,189,248,.3)}.m-num:hover em{translate:0 -3px;color:#fff;background:rgba(56,189,248,.14);box-shadow:0 0 0 1.5px rgba(56,189,248,.9),0 0 18px 2px rgba(56,189,248,.55),0 0 44px 8px rgba(56,189,248,.22);text-shadow:0 0 10px rgba(139,216,255,.9)}}
.m-num.ergue{translate:0 -6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 0 1px rgba(56,189,248,.3),0 0 0 6px rgba(56,189,248,.07),0 0 0 7px rgba(56,189,248,.45),0 30px 60px -28px rgba(0,0,0,.9),0 0 46px -8px rgba(56,189,248,.3)}
.m-num.ergue em{translate:0 -3px;color:#fff;background:rgba(56,189,248,.14);box-shadow:0 0 0 1.5px rgba(56,189,248,.9),0 0 18px 2px rgba(56,189,248,.55),0 0 44px 8px rgba(56,189,248,.22);text-shadow:0 0 10px rgba(139,216,255,.9)}
.m-num small{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;line-height:1.4;color:var(--tx3)}
.m-num small img{height:15px;width:auto;opacity:.75;filter:grayscale(1) brightness(0) invert(1)}
.m-num small img.larga{height:11px}
.m-filtrar{margin-bottom:20px}
.m-filtros-t{font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--tx3);margin-bottom:10px}
.m-filtros{display:flex;flex-wrap:wrap;gap:8px}
.m-filtros .ic{font-size:16px;color:var(--tx3);transition:color .3s}
.m-filtros button[aria-pressed="true"] .ic{color:var(--cy)}
.m-filtros button{display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 16px;border:0;border-radius:999px;font:inherit;font-size:14px;font-weight:500;color:var(--tx2);background:rgba(160,195,255,.04);box-shadow:inset 0 0 0 1px var(--line2);cursor:pointer;white-space:nowrap;transition:background .3s,box-shadow .3s,color .3s}
.m-filtros button[aria-pressed="true"]{color:var(--tx);background:rgba(56,189,248,.1);box-shadow:inset 0 0 0 1px rgba(56,189,248,.5)}
@media (hover:hover){.m-filtros button:hover{color:var(--tx);box-shadow:inset 0 0 0 1px rgba(56,189,248,.35)}}
.m-filtros i{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--cy2)}
.m-mural{position:relative;display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:14px;align-items:start;padding-top:6px}
.m-col{display:grid;gap:14px;min-width:0}
.m-mural.fechado{max-height:var(--corte,1200px);overflow:hidden}
.m-mural.fechado::after{content:"";position:absolute;left:0;right:0;bottom:0;height:240px;background:linear-gradient(180deg,rgba(4,8,16,0),var(--bg) 88%);pointer-events:none}
.m-item{position:relative;margin:0;min-width:0;border-radius:18px;overflow:hidden;background:rgba(160,195,255,.03)}
.m-item::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line2);pointer-events:none}
.m-abre{display:block;width:100%;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:inherit;cursor:zoom-in}
.m-abre img{display:block;width:100%;height:auto}
.m-item figcaption{padding:14px 16px 16px;display:grid;gap:8px;border-top:1px solid var(--line)}
.m-item figcaption p,.zoom-t p{font-size:14.5px;line-height:1.5;color:#DCE6F4;text-wrap:pretty}
.m-de{font-size:12.5px;line-height:1.4;color:var(--tx3)}
.m-de b{color:var(--tx2);font-weight:600}
.m-tag{justify-self:start;font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--cy2);padding:4px 9px;border-radius:999px;background:rgba(56,189,248,.08);box-shadow:inset 0 0 0 1px rgba(56,189,248,.24)}
.m-tag.venda{color:var(--grn);background:rgba(74,222,128,.08);box-shadow:inset 0 0 0 1px rgba(74,222,128,.3)}
/* o print do mural: a etiqueta no canto e a legenda num fade sobreposto ao pé do print, como nos vídeos (terceira
   revisão da direção: "estilo nos vídeos… e não um box sólido abaixo"). A legenda não repete o print nem afirma o
   que ele não prova; o print ganha 30 px de fundo escuro embaixo, para o texto tapar o mínimo da prova. */
.m-print>.m-tag{position:absolute;left:12px;top:12px;z-index:3;background:rgba(6,10,20,.9);pointer-events:none}
.m-print>.m-tag.venda{background:rgba(6,20,12,.9)}
.m-print .m-abre{position:relative;padding-bottom:30px;background:#060B15}
.m-print figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:64px 16px 12px;gap:2px;border-top:0;pointer-events:none;background:linear-gradient(180deg,rgba(6,11,21,0),rgba(6,11,21,.82) 52%,rgba(6,11,21,.96))}
.m-print figcaption p{font-size:13px;line-height:1.4;color:rgba(226,240,255,.9)}
.m-print figcaption .m-de{font-size:12px;color:rgba(163,179,202,.95)}
.m-mais{display:flex;justify-content:center;margin-top:-30px;position:relative;z-index:2}
.m-cta{justify-content:center}

/* os vídeos, iguais aos do skyaigroup.com: tocam sem som quando aparecem, o botão liga o som de um só */
.vcard{position:relative;background:none}
.vcard::after{display:none}
.v-frame{position:relative;overflow:hidden;border-radius:18px;background:#0B1322;box-shadow:inset 0 0 0 1px var(--line2),0 30px 60px -30px rgba(0,0,0,.8);transition:transform .3s cubic-bezier(.25,.9,.3,1),box-shadow .3s;cursor:pointer}
.v-el{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.v-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(6,10,20,.1) 0%,transparent 20%,transparent 40%,rgba(6,10,20,.62) 74%,rgba(6,10,20,.92) 100%)}
.v-frame .m-tag{position:absolute;left:12px;top:15px;z-index:3;background:rgba(6,10,20,.9)}
.v-frame .m-tag.venda{background:rgba(6,20,12,.9)}
.v-by{position:absolute;left:18px;right:18px;bottom:16px;z-index:3}
.v-by b{display:block;font-family:var(--disp);font-weight:700;font-size:16px;line-height:1.25;color:#fff;letter-spacing:-.01em;text-shadow:rgba(0,0,0,.5) 0 2px 12px}
.v-by span{display:block;margin-top:3px;font-size:12.5px;font-weight:500;color:rgba(226,240,255,.9);line-height:1.35;text-wrap:pretty}
.v-sound{position:absolute;top:12px;right:12px;z-index:4;width:38px;height:38px;border-radius:50%;cursor:pointer;display:grid;place-items:center;color:#fff;background:rgba(6,10,20,.5);border:1px solid rgba(255,255,255,.25);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:.18s}
.v-sound svg{width:18px;height:18px}
.v-sound .unmute{display:none}
.v-sound.on{background:linear-gradient(120deg,var(--blue),var(--cy));border-color:transparent}
.v-sound.on .mute{display:none}
.v-sound.on .unmute{display:block}
@media (hover:hover){
  .v-sound:hover{background:rgba(6,10,20,.8);transform:scale(1.08)}
  .v-sound.on:hover{background:linear-gradient(120deg,var(--blue),var(--cy))}
  .vcard:hover .v-frame{transform:translateY(-4px);box-shadow:rgba(56,189,248,.55) 0 0 0 1px,rgba(56,189,248,.5) 0 24px 54px -18px,rgba(56,189,248,.32) 0 0 30px -6px}
}

/* as conversas reais da IA, num trilho; tocar abre a conversa inteira */
.m-conversas{margin-top:clamp(56px,7vw,88px)}
.m-conversas-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px}
.m-conversas-cab h3{font-weight:700;font-size:clamp(22px,2.2vw,30px);line-height:1.1;letter-spacing:-.03em}
.m-conversas-cab p{color:var(--tx2);max-width:470px;font-size:15px}
/* sexta revisão (28/10, #97 a #104): em cima de cada print, só o que a IA faz de diferente ali, com um ícone por
   categoria; a fileira de categorias leva até o cartão e acende o que está à vista */
.m-cats{display:flex;gap:8px;margin:0 0 22px;overflow-x:auto;scrollbar-width:none}
.m-cats::-webkit-scrollbar{display:none}
.m-cats button{flex:none;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 15px 0 11px;border:0;border-radius:999px;font:inherit;font-size:13.5px;font-weight:500;color:var(--tx2);background:rgba(160,195,255,.04);box-shadow:inset 0 0 0 1px var(--line2);cursor:pointer;white-space:nowrap;transition:background .3s,box-shadow .3s,color .3s,transform .2s var(--mola)}
.m-cats .ic{font-size:17px;color:var(--cy)}
.m-cats button[aria-current="true"]{color:#fff;background:rgba(46,108,246,.16);box-shadow:inset 0 0 0 1px rgba(46,108,246,.7)}
.m-cats button:active{transform:scale(.98)}
@media (hover:hover){.m-cats button:hover{color:var(--tx);box-shadow:inset 0 0 0 1px rgba(56,189,248,.45)}}
/* retorno da Full Sales na v2 (#5): três conversas à vista, as outras nove atrás do "Ver mais" (no menu e no
   trilho); m-extra e data-ver-mais, porque m-mais e data-mais já são o "Ver todas as provas" do mural */
.m-conversas:not(.aberto) .m-extra{display:none}
.m-cats .m-ver{color:var(--cy);background:transparent;box-shadow:inset 0 0 0 1px rgba(56,189,248,.38)}
.m-cats .m-ver .ic{transition:transform .35s var(--mola)}
.m-cats .m-ver[aria-expanded="true"] .ic{transform:rotate(45deg)}
/* no computador, as 12 categorias numa fileira davam três linhas de pílulas: viram um menu ao lado do trilho,
   da altura dos cartões; abaixo de 1100 px, uma linha só que rola */
@media (min-width:1101px){
  .m-conversas{display:grid;grid-template-columns:268px minmax(0,1fr);column-gap:24px;align-items:start}
  .m-conversas-cab,.m-unica{grid-column:1 / -1}
  .m-cats{flex-direction:column;gap:6px;margin:0;overflow:visible}
  .m-cats button{width:100%;height:40px;padding:0 14px 0 12px;white-space:normal;text-align:left;line-height:1.2}
}
.m-trilho{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,1fr);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px;scrollbar-width:thin}
.m-conversa{position:relative;display:flex;flex-direction:column;margin:0;scroll-snap-align:start;height:560px;border-radius:18px;overflow:hidden;background:#EFEAE2;box-shadow:inset 0 0 0 1px var(--line)}
.m-cat{flex:none;position:relative;z-index:2;display:flex;align-items:center;gap:11px;min-height:66px;margin:0;padding:12px 16px 12px 12px;background:linear-gradient(180deg,#0E1830,#0A1222);box-shadow:inset 0 -1px 0 rgba(143,217,255,.14);font:700 16px/1.2 var(--disp);letter-spacing:-.015em;color:#fff;text-wrap:balance}
.m-cat-i{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:#BFE6FF;background:linear-gradient(150deg,rgba(46,108,246,.42),rgba(56,189,248,.1));box-shadow:inset 0 0 0 1px rgba(56,189,248,.34),0 6px 18px -8px rgba(46,108,246,.8)}
.m-cat-i .ic{font-size:21px}
.m-conversa .m-abre{flex:1;min-height:0}
.m-conversa img{width:100%;height:100%;object-fit:cover;object-position:top}
.m-conversa .m-abre::after{content:"";position:absolute;left:0;right:0;bottom:0;height:150px;background:linear-gradient(180deg,rgba(239,234,226,0),#EFEAE2 70%)}
.m-conversa .ler{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;height:46px;padding:0 7px 0 18px;border-radius:999px;background:#0F1521;color:#fff;font-size:14px;font-weight:600;transition:background .3s}
.m-conversa .ler span{width:32px;height:32px;border-radius:50%;background:var(--blue);display:grid;place-items:center;font-size:15px;transition:transform .5s var(--mola)}
@media (hover:hover){.m-conversa .m-abre:hover .ler{background:#16203A}.m-conversa .m-abre:hover .ler span{transform:translate(2px,-1px) scale(1.05)}}
/* #105: o fecho dos prints */
.m-unica{max-width:780px;margin:clamp(52px,6.5vw,80px) auto 0;text-align:center}
.m-unica::before{content:"";display:block;width:64px;height:2px;margin:0 auto 24px;background:linear-gradient(90deg,rgba(56,189,248,0),var(--cy),rgba(56,189,248,0))}
.m-unica-t{font:700 clamp(30px,3.4vw,46px)/1.08 var(--disp);letter-spacing:-.04em;color:var(--tx);text-wrap:balance}
.m-unica-t em{font-style:normal;background:linear-gradient(180deg,#fff,var(--cy2));-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.m-unica p+p{margin-top:14px;font-size:clamp(16px,1.3vw,18px);line-height:1.6;color:var(--tx2);text-wrap:pretty}
/* a voz da IA da Lex Vita (pedido #84): no cartão, o botão em cima do "Ler a conversa inteira"; a barra de baixo
   anda com o áudio (--p, de 0 a 1) */
.m-ouvir{position:absolute;left:12px;right:12px;bottom:66px;z-index:2;display:flex;align-items:center;gap:11px;height:46px;padding:0 18px 0 7px;border:0;border-radius:999px;background:#0F1521;color:#fff;font:inherit;font-size:14px;font-weight:600;cursor:pointer;overflow:hidden;transition:background .3s}
.m-ouvir-i{flex:none;position:relative;width:32px;height:32px;border-radius:50%;background:#25D366}
.m-ouvir-i::before{content:"";position:absolute;left:12px;top:10px;border-left:11px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent}
.m-ouvir.toca .m-ouvir-i::before,.zv.toca .zv-i::before{left:11px;top:10px;width:3px;height:12px;border:0;background:#fff;box-shadow:7px 0 0 #fff}
.m-ouvir-t{margin-left:auto;font-weight:500;color:#9FB0C8;font-variant-numeric:tabular-nums}
.m-ouvir::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:#25D366;transform:scaleX(var(--p,0));transform-origin:left}
@media (hover:hover){.m-ouvir:hover{background:#16203A}}
/* na leitura, um botão sobre cada balão de voz do print: a camada cobre a imagem e os botões ficam em % dela */
.zoom-g{position:relative}
.zoom-voz{position:absolute;pointer-events:none}
.zv{position:absolute;padding:0;border:0;border-radius:12px;background:none;cursor:pointer;pointer-events:auto;box-shadow:0 0 0 0 rgba(37,211,102,0);transition:box-shadow .3s}
.zv:hover,.zv:focus-visible,.zv.toca{box-shadow:0 0 0 3px rgba(37,211,102,.8);outline:0}
.zv-p{position:absolute;left:31.3%;top:20.3%;width:64.9%;height:37.7%;border-radius:4px;background:rgba(46,108,246,.28);transform:scaleX(var(--p,0));transform-origin:left}
.zv-i{position:absolute;left:25.2%;top:39.1%;width:32px;height:32px;margin:-16px 0 0 -16px;border-radius:50%;background:#54656F;opacity:0;transition:opacity .2s}
.zv.toca .zv-i{opacity:1}
.zv-i::before{content:"";position:absolute}

/* prova */
.casos{display:grid;gap:14px}
.caso{padding:clamp(26px,3vw,38px);display:flex;flex-direction:column;gap:20px}
.caso-cab{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
/* o logo do case é o original, colorido (quarta revisão): sem o filtro de silhueta da faixa */
.caso-cab img{height:38px;width:auto}
.caso-cab img.selo-cor{height:64px}
.caso-cab img.alto{height:48px}
.selo{font-family:var(--mono);font-size:12px;color:var(--cy2);padding:6px 11px;border-radius:999px;background:rgba(56,189,248,.08);box-shadow:inset 0 0 0 1px rgba(56,189,248,.28)}
.caso blockquote{font-size:clamp(17px,1.45vw,20px);line-height:1.55;color:#DCE6F4;letter-spacing:-.01em;flex:1}
.quem{display:flex;align-items:center;gap:14px;padding-top:18px;border-top:1px solid var(--line)}
.quem img{width:46px;height:46px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(56,189,248,.35)}
.quem b{display:block;font-size:15px}
.quem span{font-size:13px;color:var(--tx2)}
/* os dois grandes clientes: o vídeo deles ao lado da frase, um à esquerda e o outro à direita. Vem
   depois de .caso de propósito: antes, o display:flex do .caso ganhava e o vídeo ficava com largura 0 */
.caso.caso-v{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(28px,4.5vw,64px);align-items:center}
.caso.caso-v.inv{grid-template-columns:minmax(0,1fr) minmax(0,300px)}
/* sem caixa (quarta revisão: "tem que ficar sem box e deixar um pedacinho do video invadindo o espaço do box"):
   onde era a caixa fica só uma faixa de luz sem borda nenhuma (some em cima, embaixo e para o lado de fora),
   e o vídeo cobre o começo dela: o último quarto do vídeo invade o espaço que era da caixa */
.caso.caso-v{position:relative;padding:0;background:none;box-shadow:none;border-radius:0}
.caso.caso-v::before{content:"";position:absolute;z-index:0;top:4%;bottom:4%;left:225px;right:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(46,108,246,.16),rgba(46,108,246,.06) 55%,rgba(46,108,246,0));
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 24%,#000 76%,transparent);mask-image:linear-gradient(180deg,transparent,#000 24%,#000 76%,transparent)}
.caso.caso-v.inv::before{left:0;right:225px;background:linear-gradient(270deg,rgba(46,108,246,.16),rgba(46,108,246,.06) 55%,rgba(46,108,246,0))}
.caso.caso-v>*{position:relative;z-index:1}
.caso.caso-v .caso-t{padding-block:clamp(26px,3vw,40px)}
.caso.caso-v:not(.inv) .caso-t{padding-right:clamp(20px,3vw,44px)}
.caso.caso-v.inv .caso-t{padding-left:clamp(20px,3vw,44px)}
.casos:has(.caso-v){gap:clamp(40px,5vw,72px)}
.casos-t em{display:block;font-style:normal;background:linear-gradient(180deg,#fff,var(--cy2));-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.caso-nums.duas{grid-template-columns:repeat(2,minmax(0,1fr))}
.caso-v.inv .caso-video{order:2}
.caso-video{margin:0}
.caso-t{display:flex;flex-direction:column;gap:22px;min-width:0}
.caso-v .caso-t blockquote{font-size:clamp(16px,1.35vw,19px);line-height:1.55}
/* o case sem frase do cliente (Posto das Bebidas) fala pelos números */
.caso-nome{font-weight:700;font-size:clamp(22px,2vw,28px);letter-spacing:-.03em;line-height:1.1;color:#fff}
.caso-frase{font-size:clamp(18px,1.75vw,24px);line-height:1.5;color:#DCE6F4;letter-spacing:-.01em;text-wrap:pretty}
.caso-nums{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding-top:20px;border-top:1px solid var(--line)}
.caso-nums li{display:grid;gap:6px;align-content:start}
.caso-nums b{font-family:var(--disp);font-weight:700;font-size:clamp(26px,2.4vw,34px);line-height:1;letter-spacing:-.04em;background:linear-gradient(180deg,#fff,var(--cy2));-webkit-background-clip:text;background-clip:text;color:transparent}
.caso-nums span{font-size:14px;line-height:1.45;color:var(--tx2);text-wrap:pretty}
.caso-fonte{font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--tx3)}

/* oferta */
.oferta{padding:clamp(28px,4vw,56px)}
.passos{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px);position:relative}
.passos::before{content:"";position:absolute;left:0;right:0;top:27px;height:1px;background:linear-gradient(90deg,var(--cy),rgba(46,108,246,.5),rgba(160,195,255,.1))}
.passos li{position:relative}
.passos .n{position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;font-family:var(--mono);font-size:15px;color:#fff;background:#0B1730;box-shadow:inset 0 0 0 1px rgba(56,189,248,.5);margin-bottom:22px}
.passos li:first-child .n{background:var(--blue);box-shadow:0 0 0 6px rgba(46,108,246,.18)}
.passos h3{font-size:18px;line-height:1.3;letter-spacing:-.02em;margin-bottom:8px}
.passos p{font-size:15px;line-height:1.6;color:var(--tx2)}
.oferta-pe{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px;margin-top:clamp(36px,4.5vw,56px);padding-top:clamp(28px,3.5vw,40px);border-top:1px solid var(--line)}
.oferta-pe p{max-width:560px;font-size:14.5px;line-height:1.6;color:var(--tx2)}
.oferta-pe p .ic{display:inline-block;vertical-align:-3px;margin-right:6px;font-size:18px;color:var(--cy)}

/* quem somos */
.quem-g{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(40px,6vw,96px);align-items:center}
.retrato{position:relative;aspect-ratio:4/5;border-radius:28px;overflow:hidden;isolation:isolate;background:radial-gradient(90% 70% at 50% 30%,#123274,#071229 60%,#050A16);box-shadow:inset 0 0 0 1px var(--line2),0 50px 100px -50px rgba(0,0,0,.9)}
.retrato .marca-r{position:absolute;width:120%;left:-10%;top:-6%;color:var(--blue);opacity:.5;z-index:-1;-webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent 95%);mask-image:radial-gradient(closest-side,#000 40%,transparent 95%)}
.retrato img{position:absolute;top:5%;left:50%;transform:translateX(-50%);height:158%;width:auto;max-width:none}
.retrato figcaption{position:absolute;left:22px;bottom:20px;right:22px}
.retrato figcaption b{display:block;font-size:17px}
.retrato figcaption span{font-family:var(--mono);font-size:12px;color:var(--tx2)}
.manif{font-size:clamp(19px,1.8vw,24px);line-height:1.45;color:var(--tx2);letter-spacing:-.015em;margin-top:24px}
.manif b{color:#fff}
.feitos{list-style:none;display:grid;gap:14px;margin:34px 0 36px}
.feitos li{display:grid;grid-template-columns:28px 1fr;gap:14px;align-items:start;font-size:15.5px;color:var(--tx2);line-height:1.45}
.feitos .ic{font-size:26px;color:var(--cy)}
.feitos b{display:block;font-size:22px;font-weight:700;letter-spacing:-.03em;color:#fff;line-height:1.15}

/* escada */
.escada{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:end}
.degrau{display:flex;flex-direction:column;border-radius:var(--r)}
.degrau .miolo{flex:1;padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column;gap:12px}
.escada>:nth-child(1){min-height:300px}.escada>:nth-child(2){min-height:370px}.escada>:nth-child(3){min-height:440px}
.degrau .grau{font-family:var(--mono);font-size:12px;color:var(--tx3)}
.degrau h3{font-size:clamp(21px,2vw,26px);letter-spacing:-.03em;line-height:1.18}
.degrau .d{font-size:15.5px;line-height:1.55;color:#D2DEEE}
.degrau .f{padding-top:16px;border-top:1px solid var(--line);font-size:14.5px;line-height:1.55;color:var(--tx2)}
/* #126: os números do degrau e as camadas de IA que entram nele, empilhadas de baixo para cima (a primeira do HTML
   fica embaixo); a camada que o degrau acrescenta ao anterior acende e leva "novo". A pilha cresce de degrau em
   degrau (2, 3 e 5 camadas), e é ela que desenha a escada */
.dg-nums{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.dg-nums li{font-size:13px;line-height:1;color:var(--tx2);padding:7px 11px;border-radius:999px;background:rgba(160,195,255,.05);box-shadow:inset 0 0 0 1px var(--line2)}
.dg-nums b{font-family:var(--mono);font-weight:600;color:#fff}
.camadas{list-style:none;margin:auto 0 0;padding:14px 0 0;display:flex;flex-direction:column-reverse;gap:7px}
.camadas li{position:relative;display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:13px;background:linear-gradient(180deg,rgba(46,108,246,.2),rgba(46,108,246,.07));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(56,189,248,.24)}
.camadas li>.ic{flex:none;width:32px;height:32px;padding:7px;border-radius:10px;color:var(--cy);background:rgba(56,189,248,.1);box-shadow:inset 0 0 0 1px rgba(56,189,248,.2)}
.camadas span{display:grid;gap:3px;min-width:0;font-size:12.5px;line-height:1.35;color:var(--tx2)}
.camadas b{font-size:14px;font-weight:600;line-height:1.25;color:#fff}
.camadas li.novo{background:linear-gradient(180deg,rgba(56,189,248,.24),rgba(46,108,246,.1));box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1.5px rgba(56,189,248,.75),0 0 26px -8px rgba(56,189,248,.7)}
.camadas li.novo::after{content:"novo";position:absolute;top:-8px;right:12px;padding:4px 8px;border-radius:999px;font:700 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#031024;background:var(--cy)}
.camadas+.f{margin-top:16px}
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.degrau.on{padding:1.5px;background:conic-gradient(from var(--ang),rgba(56,189,248,.05) 0deg,rgba(56,189,248,.9) 60deg,rgba(46,108,246,.2) 120deg,rgba(56,189,248,.05) 200deg,rgba(56,189,248,.05) 360deg);box-shadow:0 40px 90px -40px rgba(0,0,0,.9);animation:gira 6s linear infinite}
.degrau.on .miolo{background:linear-gradient(180deg,#132B5E,#0A1530 70%);border-radius:calc(var(--r) - 1.5px)}
@keyframes gira{to{--ang:360deg}}

/* pra ser direto */
.direto{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-radius:var(--r);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.direto>div{padding:clamp(28px,3.6vw,48px)}
.direto>div+div{box-shadow:inset 1px 0 0 var(--line)}
.direto .sim{background:radial-gradient(90% 70% at 0% 0%,rgba(74,222,128,.08),transparent 60%)}
.direto .nao{background:radial-gradient(90% 70% at 100% 0%,rgba(255,122,134,.07),transparent 60%)}
.direto h3{font-size:22px;letter-spacing:-.025em;margin-bottom:22px}
.direto ul{list-style:none;display:grid;gap:14px}
.direto li{display:grid;grid-template-columns:22px 1fr;gap:12px;font-size:16px;line-height:1.5;color:#D6E1F0}
.direto li .ic{font-size:20px;margin-top:2px}
.direto .sim .ic{color:var(--grn)}.direto .nao .ic{color:var(--red)}
.direto .alt{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);font-size:15px;color:var(--tx2)}

/* perguntas */
.faq-g{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,96px);align-items:start}
.faq-t{position:sticky;top:110px}
.faq-t .btn{margin-top:28px}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:20px;padding:24px 4px;font-weight:600;font-size:clamp(16px,1.35vw,18.5px);line-height:1.4;letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{margin-left:auto;width:32px;height:32px;padding:8px;border-radius:50%;color:var(--cy);box-shadow:inset 0 0 0 1px var(--line2);transition:transform .5s var(--mola),background .3s}
.faq details[open] summary .ic{transform:rotate(45deg);background:rgba(56,189,248,.1)}
.faq details p{padding:0 56px 26px 4px;font-size:16px;line-height:1.7;color:var(--tx2)}
.faq details::details-content{block-size:0;overflow:hidden;transition:block-size .5s var(--mola),content-visibility .5s allow-discrete}
.faq details[open]::details-content{block-size:auto}
:root{interpolate-size:allow-keywords}

/* convite final */
.final{position:relative;overflow:hidden;isolation:isolate;text-align:center;padding:clamp(110px,12vw,170px) 0 clamp(96px,10vw,140px);background:radial-gradient(70% 60% at 50% 0%,#0C2050,#050B18 60%,var(--ink))}
.final .luz-f{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.final .marca-f{position:absolute;left:50%;top:-110px;width:640px;height:640px;transform:translateX(-50%);z-index:-1;opacity:.55;color:var(--blue);-webkit-mask-image:radial-gradient(closest-side,#000 30%,transparent 100%);mask-image:radial-gradient(closest-side,#000 30%,transparent 100%)}
.pilula{display:inline-block;max-width:720px;padding:10px 18px;border-radius:999px;font-size:14px;color:#B9C7DA;background:rgba(4,9,20,.78);box-shadow:inset 0 0 0 1px var(--line2)}
.final h2{margin:30px auto 40px;max-width:1040px;font-size:clamp(28px,3.3vw,46px);line-height:1.16;letter-spacing:-.04em;text-wrap:balance}
.final .sob{margin:18px auto 0;color:#A5B3C8}

/* rodapé */
.rodape{background:var(--ink);padding:64px 0 120px;box-shadow:inset 0 1px 0 var(--line)}
.rod-g{display:flex;flex-wrap:wrap;justify-content:space-between;gap:36px;margin-bottom:40px}
.rodape img{height:22px;width:auto;margin-bottom:16px}
.rodape p{font-size:14px;color:var(--tx3);max-width:340px;line-height:1.6}
.rodape h2{font:500 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--tx3);margin-bottom:12px}
.rodape a,.rodape span{display:block;font-size:14px;color:var(--tx2);padding:3px 0}
@media (hover:hover){.rodape a:hover{color:#fff}}
.rodape .rod-b{max-width:none;padding-top:22px;box-shadow:inset 0 1px 0 var(--line);font-size:12.5px}
@media (min-width:1101px){.rodape{padding-bottom:56px}}

/* ------------------------------------------------ o formulário em camada (ilustração v3: formulario.html) */
dialog[open]{display:block}
.aplica{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:auto;overscroll-behavior:contain;color:var(--tx);background:radial-gradient(80% 70% at 18% 20%,#0B1D45,#050A16 60%,var(--ink))}
.aplica::backdrop{background:rgba(2,5,11,.75)}
.aplica[open]{animation:abre .5s var(--mola)}
@keyframes abre{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.ap-cena{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.ap-cena svg{position:absolute;left:-180px;top:50%;width:760px;height:760px;transform:translateY(-50%);color:var(--blue);opacity:.22;-webkit-mask-image:radial-gradient(closest-side,#000 30%,transparent 100%);mask-image:radial-gradient(closest-side,#000 30%,transparent 100%)}
.ap{position:relative;width:min(100% - 32px,1120px);margin:0 auto;min-height:100%;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(32px,5vw,72px);align-items:center;padding:40px 0}
.fechar{position:fixed;top:16px;right:16px;z-index:3;width:46px;height:46px;border:0;border-radius:50%;display:grid;place-items:center;font-size:20px;color:var(--tx);cursor:pointer;background:rgba(6,11,22,.7);box-shadow:inset 0 0 0 1px var(--line2)}
@media (hover:hover){.fechar:hover{box-shadow:inset 0 0 0 1px rgba(56,189,248,.5)}}
.rota img{height:22px;width:auto;margin-bottom:40px}
.estado{font-family:var(--mono);font-size:12.5px;color:var(--tx2);margin-bottom:22px}
.estado b{color:#fff;font-weight:500}
.rota ol{list-style:none;display:grid;gap:4px;counter-reset:p}
.rota li{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:center;font-size:14.5px;color:var(--tx3);padding:7px 0;transition:color .4s}
.rota li::before{counter-increment:p;content:counter(p,decimal-leading-zero);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-family:var(--mono);font-size:12px;box-shadow:inset 0 0 0 1px var(--line2);transition:background .4s,box-shadow .4s,color .4s}
.rota li.feito{color:var(--tx2)}
.rota li.feito::before{content:"";box-shadow:inset 0 0 0 1px rgba(56,189,248,.4);background:rgba(56,189,248,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%2338BDF8' d='M228.24,76.24l-128,128a6,6,0,0,1-8.48,0l-56-56a6,6,0,0,1,8.48-8.48L96,191.51,219.76,67.76a6,6,0,0,1,8.48,8.48Z'/%3E%3C/svg%3E") center/14px no-repeat}
.rota li.agora{color:#fff;font-weight:500}
.rota li.agora::before{background:var(--blue);color:#fff;box-shadow:0 0 0 5px rgba(46,108,246,.2)}
.confia{margin-top:36px;display:flex;gap:12px;font-size:14px;line-height:1.55;color:var(--tx2);max-width:400px;padding-top:24px;box-shadow:inset 0 1px 0 var(--line)}
.confia .ic,.confia8 .ic{font-size:22px;color:var(--grn);margin-top:1px}
.cartao{width:100%;max-width:600px;justify-self:end;padding:clamp(24px,3.4vw,44px)}
.cab-m{display:none}
.barra-p{height:4px;border-radius:2px;background:rgba(160,195,255,.1);overflow:hidden;margin-bottom:28px}
.barra-p i{display:block;height:100%;width:12.5%;border-radius:2px;background:linear-gradient(90deg,var(--blue),var(--cy));transition:width .7s var(--mola)}
.tela{border:0;min-width:0;animation:entra .6s var(--mola)}
@keyframes entra{from{opacity:0;transform:translateY(14px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.tela h2,.tela legend{display:block;font-weight:700;font-size:clamp(24px,2.4vw,32px);line-height:1.18;letter-spacing:-.035em;margin-bottom:10px;text-wrap:balance;font-family:var(--disp)}
.tela .ctx{font-size:15px;color:var(--tx2);margin-bottom:24px}
.grupo{border:0;margin:0;padding:0;min-width:0}
.grupo+.grupo{margin-top:22px}
/* ".tela legend" (o título da pergunta) vencia ".gl" e o rótulo do grupo saía do tamanho do título */
.gl,.tela legend.gl{padding:0;font:400 12px/1.4 var(--mono);letter-spacing:.04em;color:var(--tx3);margin-bottom:10px;text-wrap:initial}
.grupo>.msg-erro{margin-top:8px;font-size:13.5px;color:#FF9AA4}
.ops{display:grid;gap:8px}
.ops.duas{grid-template-columns:repeat(2,minmax(0,1fr))}
.op{position:relative;display:flex;align-items:center;gap:12px;min-height:52px;padding:12px 14px;border-radius:14px;cursor:pointer;font-size:15px;line-height:1.35;color:#E3EBF6;background:rgba(160,195,255,.035);box-shadow:inset 0 0 0 1px var(--line2);transition:background .3s,box-shadow .3s,transform .4s var(--mola)}
.op input{position:absolute;opacity:0;pointer-events:none}
.op>.ic{font-size:20px;color:var(--cy)}
.op .k{margin-left:auto;flex:none;width:22px;height:22px;border-radius:7px;box-shadow:inset 0 0 0 1.5px rgba(160,195,255,.55);display:grid;place-items:center;color:transparent;font-size:13px;transition:background .3s,box-shadow .3s}
.op.r .k{border-radius:50%}
@media (hover:hover){.op:hover{background:rgba(56,189,248,.07);box-shadow:inset 0 0 0 1px rgba(56,189,248,.4)}}
.op:active{transform:scale(.99)}
.op:has(input:checked){background:rgba(46,108,246,.16);box-shadow:inset 0 0 0 1px rgba(56,189,248,.75)}
.op:has(input:checked) .k{background:var(--cy);box-shadow:none;color:#031024}
.op:has(input:focus-visible){outline:2px solid var(--cy);outline-offset:2px}
/* #117: a tela 1 do formulário repete o vermelho da seção dos funis; a frase vem do mesmo fraseFunis() do app.js */
.grupo.parados:has(input:checked) .op:not(:has(input:checked)){background:rgba(255,122,134,.07);box-shadow:inset 0 0 0 1px rgba(255,122,134,.42);color:#FFD6DA}
.grupo.parados:has(input:checked) .op:not(:has(input:checked))>.ic{color:#FF9AA4}
.grupo.parados:has(input:checked) .op:not(:has(input:checked)) .k{box-shadow:inset 0 0 0 1.5px rgba(255,122,134,.6)}
.parados-n{margin-top:12px;font-size:14px;line-height:1.5;color:var(--tx2)}
.parados-n:empty{display:none}
.parados-n b{font-family:var(--mono);font-weight:500;color:var(--cy)}
.parados-n em{font-style:normal;font-family:var(--mono);font-weight:500;color:#FF9AA4}
/* a escala de 0 a 10: onze botões curtos, o escolhido em azul cheio; no celular, duas linhas */
.escala .ops{grid-template-columns:repeat(11,minmax(0,1fr));gap:6px}
.escala .op{justify-content:center;min-height:58px;padding:0;font:700 17px/1 var(--disp);letter-spacing:-.02em}
.escala .op .k{display:none}
.escala .op:has(input:checked){background:var(--blue);box-shadow:inset 0 0 0 1px var(--cy);color:#fff}
.escala-pontas{display:flex;justify-content:space-between;gap:12px;margin-top:12px;font:12px/1.3 var(--mono);color:var(--tx3)}
@media (max-width:600px){.escala .ops{grid-template-columns:repeat(6,minmax(0,1fr))}}
.erros{display:none;margin-bottom:20px;padding:14px 16px;border-radius:14px;font-size:14.5px;line-height:1.5;color:#FFD3D8;background:rgba(255,122,134,.08);box-shadow:inset 0 0 0 1px rgba(255,122,134,.35)}
.erros.on{display:block}
.erros ul{list-style:none;display:grid;gap:4px;margin-top:4px}
.erros a{text-decoration:underline;text-underline-offset:3px}
.acoes{display:flex;align-items:center;gap:16px;margin-top:28px}
.acoes .btn{flex:1;justify-content:space-between}
.voltar{background:none;border:0;color:var(--tx2);font:500 14.5px var(--sans);cursor:pointer;padding:12px 6px;border-radius:10px}
@media (hover:hover){.voltar:hover{color:#fff}}
.confia8{display:flex;gap:14px;padding:16px 18px;border-radius:16px;margin-bottom:22px;font-size:14.5px;line-height:1.55;color:#D7E3F2;background:rgba(74,222,128,.06);box-shadow:inset 0 0 0 1px rgba(74,222,128,.25)}
.campos{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}
.campos .campo:nth-child(n+3){grid-column:1/-1}
.campo label{display:block;font-size:13.5px;font-weight:500;color:#E3EBF6;margin-bottom:7px}
.campo label .ob{color:var(--cy)}
.campo label .op-t{color:var(--tx3);font-weight:400}
.campo input{width:100%;height:52px;padding:0 16px;border-radius:14px;border:0;outline:none;font:400 16px var(--sans);color:#fff;background:rgba(160,195,255,.05);box-shadow:inset 0 0 0 1px rgba(160,195,255,.5);transition:box-shadow .3s}
.campo input::placeholder{color:#8A9BB4}
.campo input:focus{box-shadow:inset 0 0 0 1px var(--cy),0 0 0 4px rgba(56,189,248,.16)}
.campo input[aria-invalid="true"]{box-shadow:inset 0 0 0 1.5px var(--red)}
.campo .msg-erro{margin-top:7px;font-size:13.5px;color:#FF9AA4}
.ddi{display:grid;grid-template-columns:86px 1fr;gap:8px}
.ddi span{display:grid;place-items:center;border-radius:14px;font-size:15px;color:#E3EBF6;background:rgba(160,195,255,.05);box-shadow:inset 0 0 0 1px rgba(160,195,255,.5)}
.priv{margin-top:16px;font-size:13px;color:var(--tx3);display:flex;gap:8px;align-items:center}
.revisar{margin-top:18px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line)}
.revisar summary{cursor:pointer;padding:12px 16px;font-size:14px;color:var(--tx2)}
.revisar ol{list-style:none;display:grid;gap:2px;padding:0 10px 10px}
.revisar li{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:8px 6px;font-size:13.5px;border-top:1px solid var(--line)}
.revisar li span{color:var(--tx3)}
.revisar li b{display:block;font-weight:500;color:#E3EBF6}
.revisar button{background:none;border:0;color:var(--cy);font:500 13.5px var(--sans);cursor:pointer;padding:6px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.fim h2 .ic{display:inline-block;vertical-align:-.12em;margin-right:.28em;color:var(--grn)}
.fim p{font-size:16px;line-height:1.65;color:var(--tx2);margin-top:14px}
.fim .reforco{color:#DDE8F6;padding:14px 16px;border-radius:14px;background:rgba(56,189,248,.06)}
.fim .acoes{flex-wrap:wrap}
.fim .acoes .btn{flex:0 1 auto}
.wpp{background:#15803D;color:#fff;box-shadow:0 16px 32px -16px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.22)}
.wpp .btn-i{background:rgba(255,255,255,.18)}
.retomar{display:grid;gap:14px}
.retomar .acoes{margin-top:8px}

/* o print ou a conversa em tamanho de leitura: o print cabe na altura da tela; a conversa, que é
   comprida, rola dentro da camada com a legenda parada ao lado */
.zoom{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:auto;overscroll-behavior:contain;color:var(--tx);background:rgba(2,5,11,.94)}
.zoom::backdrop{background:rgba(2,5,11,.8)}
.zoom[open]{animation:abre .4s var(--mola)}
.zoom-g{min-height:100%;display:grid;grid-template-columns:auto minmax(0,340px);grid-template-areas:"img txt";justify-content:center;align-items:center;gap:clamp(24px,4vw,56px);padding:clamp(56px,6vw,72px) clamp(16px,4vw,48px)}
.zoom-g img{grid-area:img;max-height:calc(100svh - 2 * clamp(56px,6vw,72px));width:auto;max-width:100%;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.zoom-t{grid-area:txt;display:grid;gap:12px;justify-items:start}
.zoom-t p{font-size:clamp(16px,1.4vw,19px)}
.zoom.longo .zoom-g{align-items:start}
.zoom.longo .zoom-g img{width:min(560px,100%);max-height:none}
.zoom.longo .zoom-t{position:sticky;top:clamp(56px,6vw,72px)}
/* na leitura de uma conversa, os detalhes que saíram do cartão: a categoria, a história, os fatos e a legenda */
.zoom-t .m-cat-z{display:flex;align-items:center;gap:13px;font:700 clamp(21px,1.9vw,26px)/1.15 var(--disp);letter-spacing:-.02em;color:#fff}
.zoom-t .m-cat-z .m-cat-i{width:46px;height:46px;border-radius:14px}
.zoom-t .m-cat-z .m-cat-i .ic{font-size:24px}
.zoom-t .m-fatos{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 0;padding:0}
.zoom-t .m-fatos li{font-size:13px;line-height:1.3;padding:6px 11px;border-radius:999px;color:#DCEBFF;background:rgba(143,217,255,.07);box-shadow:inset 0 0 0 1px rgba(143,217,255,.16)}
.zoom-t p.m-leg{display:flex;gap:10px;margin-top:4px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;line-height:1.5;color:var(--tx3)}
.zoom-t p.m-leg::before{content:"";flex:none;width:3px;border-radius:2px;background:var(--blue)}

/* responsivo */
@media (max-width:1100px){
  .funis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .solucao,.quem-g,.faq-g{grid-template-columns:1fr}
  .pilha{margin:0 auto}
  .faq-t{position:static}
  .cenas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .passos{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
  .passos::before{display:none}
}
@media (max-width:900px){
  .agentes-l{grid-template-columns:1fr;max-width:560px}
  .ap{grid-template-columns:1fr;align-items:start;align-content:start;padding:64px 0 32px;gap:18px}
  .rota ol,.rota .confia,.rota .estado{display:none}
  .rota img{margin:0;height:18px}
  .ap-cena svg{left:50%;top:-200px;transform:translateX(-50%);width:600px;height:600px}
  .cartao{margin:0 -8px;width:auto;max-width:none;justify-self:stretch}
  .cab-m{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:12px;color:var(--tx2);margin-bottom:12px}
  .cab-m b{color:#fff;font-weight:500}
  .ops.duas,.campos{grid-template-columns:1fr}
  .acoes{position:sticky;bottom:0;margin:24px -4px 0;padding:12px 4px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(180deg,transparent,rgba(9,15,28,.96) 30%)}
  .fim .acoes{position:static;background:none}
}
@media (max-width:760px){
  .dor-lista li{grid-template-columns:46px minmax(0,1fr);gap:8px 16px;padding:22px 0}
  .dor-hora{grid-column:2;order:-1}
  .dor-lista .ic{grid-row:1 / span 2;align-self:start}
  .dor-st{grid-column:2;justify-self:start}
  .casos,.escada,.direto,.caso.caso-v,.caso.caso-v.inv{grid-template-columns:1fr}
  .caso-v.inv .caso-video{order:0}
  /* no celular o vídeo fica em cima: a luz nasce embaixo dele e some antes dos lados */
  .caso.caso-v::before{display:none}
  .caso.caso-v .caso-video{z-index:2}
  .caso.caso-v .caso-t::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:-72px;bottom:0;pointer-events:none;
    background:radial-gradient(farthest-side at 50% 0,rgba(46,108,246,.17),rgba(46,108,246,.06) 50%,rgba(46,108,246,0))}
  .caso.caso-v .caso-t,.caso.caso-v.inv .caso-t,.caso.caso-v:not(.inv) .caso-t{padding:0 18px 24px}
  /* as duas métricas do Posto ficam lado a lado também no celular, o número em cima do texto */
  .caso-nums.duas{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .caso-nums.duas li{grid-template-columns:none}
  .caso-nums{grid-template-columns:1fr;gap:16px}
  .caso-nums li{grid-template-columns:96px 1fr;align-items:baseline;gap:12px}
  .escada>*{min-height:0!important}
  .direto>div+div{box-shadow:inset 0 1px 0 var(--line)}
  .cenas{grid-template-columns:1fr;gap:30px}
  .semana{padding:16px 12px 18px}
  .sem-g,.sem-hs{grid-template-columns:28px repeat(24,minmax(0,1fr));column-gap:2px}
  .sem-g{row-gap:4px}
  .sem-d{font-size:10.5px}
  .sem-g i{height:17px;border-radius:3px}
  .sem-g i.x b{width:20px;height:20px;margin:-10px 0 0 -10px;font-size:10.5px;box-shadow:0 0 0 3px rgba(56,189,248,.2),0 0 14px rgba(56,189,248,.6)}
  .sem-hs{font-size:10px}
  .vida-pe{grid-template-columns:1fr}
  .vida-col{padding-right:0}
  .vida-col+.vida-col{padding-left:0;margin-top:30px;box-shadow:inset 0 1px 0 var(--line2)}
  .vida-cta .btn{width:100%;justify-content:space-between}
  .passos{grid-template-columns:1fr}
  .funis{grid-template-columns:1fr}
  .funil{flex-direction:row;align-items:flex-start;gap:14px;padding:16px 50px 16px 16px}
  .funil::after{right:8px;top:46px;font-size:9.5px;letter-spacing:.04em}
  .funis-diag{flex-basis:100%;gap:14px}
  .funis-med{width:92px}
  .pilha{display:grid;gap:10px}
  .pilha svg{width:78%;margin:0 auto -6px}
  .pilha .guias{display:none}
  .pilha-r{position:static;transform:none;width:auto;font-size:14.5px;gap:12px}
  .funis-pe{border-radius:22px;padding:16px}
  .funis-pe .btn{width:100%;justify-content:space-between}
  .m-numeros{grid-template-columns:1fr;gap:10px}
  .m-num{padding:20px 18px 16px;gap:10px}
  .m-num p{font-size:19px}
  .m-filtros{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(var(--gut) * -1) 14px;padding:0 var(--gut);scrollbar-width:none}
  .m-filtros::-webkit-scrollbar,.m-trilho::-webkit-scrollbar{display:none}
  .m-cta .btn{width:100%;justify-content:space-between}
  .m-conversas-cab{display:grid;gap:8px}
  .m-trilho{grid-auto-columns:80%;margin:0 calc(var(--gut) * -1);padding:0 var(--gut) 4px;scroll-padding-inline:var(--gut);scrollbar-width:none}
  .m-conversa{height:500px}
  .m-cats{margin:0 calc(var(--gut) * -1) 16px;padding:0 var(--gut)}
  /* fechado, as três e o "Ver mais" quebram em duas linhas, todos à vista; aberto, volta a fileira que rola */
  .m-conversas:not(.aberto) .m-cats{flex-wrap:wrap;overflow:visible}
  .anormal-l,.horarios-l{grid-template-columns:1fr}
  .sol-nums{gap:12px}
  .sol-nums b{font-size:28px}
  .sol-nums span{font-size:12.5px}
  .enao-g,.agentes-l{grid-template-columns:1fr}
  .enao-t{text-align:left}
  .gh-b{gap:2px;padding:0}
  .gh-faixa b,.gh-eixo span,.gh-util span{font-size:10.5px}
  .gh-faixa b{left:6px;max-width:calc(100% - 10px);white-space:normal}
  .gh-nob b{left:auto;right:5px;text-align:right}   /* a faixa nobre é estreita: o rótulo quebra em duas linhas */
  .m-cat{min-height:62px;font-size:15.5px}
  .m-unica{text-align:left}
  .m-unica::before{margin-left:0}
  .zoom-g{grid-template-columns:minmax(0,1fr);grid-template-areas:"txt" "img";align-items:start;padding:72px 16px 32px;gap:18px}
  .zoom-g img,.zoom.longo .zoom-g img{width:100%;max-height:none}
  .zoom.longo .zoom-t{position:static}
}
/* celular estreito (até 420 px): o botão de chamada ocupa a largura e, se ainda não couber, quebra em duas linhas
   dentro dele, em vez de passar da borda (o "Ver se a minha operação se qualifica" passava 11 px da tela em 375) */
@media (max-width:420px){
  .cta-l .btn{width:100%;justify-content:space-between;gap:12px;height:auto;min-height:var(--h);padding:8px 8px 8px 22px;font-size:15px;line-height:1.25;white-space:normal;text-align:left}
  .cta-l .btn .btn-i{flex:none}
}
@media (prefers-reduced-motion:reduce){
  .gh.sobe .gh-b i{transform:none;transition:none}
  .gh-perde{translate:none}
  .degrau.on,.aplica[open],.zoom[open],.tela{animation:none}
  .sem-g i.x b{transform:none}
  .v-frame,.v-sound{transition:none}
  .faq details::details-content{transition:none}
}

/* ── versão 2 (28/10/2026), sobre o retorno da Full Sales: "fazer o empresário reconhecer o problema, ver a IA
   resolvendo a situação e entender o próximo passo" ── */
/* a frase da solução abre as provas: a ponte entre a dor e a IA resolvendo (".solucao" é a grade do mecanismo da v1) */
.ponte{max-width:720px;font-size:clamp(16px,1.35vw,19px);line-height:1.6;color:var(--tx2);text-wrap:pretty}
.ponte b{display:block;margin-bottom:8px;font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--cy)}
/* na prova, as conversas vêm primeiro; depois os prints e vídeos dos clientes; por último, os cases */
#prova .m-conversas{margin-top:0}
.m-clientes{margin-top:clamp(56px,7vw,88px)}
.prova-casos{margin-top:clamp(64px,8vw,104px)}
/* o próximo passo em três */
@media (min-width:1101px){.passos{grid-template-columns:repeat(3,minmax(0,1fr))}}