/* 04 serviços (agente FLUXO). Grade bento de vidro com seis peças vivas.
   Prefixo sv- nesta seção; fx-icv é o ícone de vidro líquido (também definido em processo.css). */

/* ---------- ícone de vidro líquido (máscara Phosphor duotone) ----------
   brilho: cópia borrada e parada (rasteriza uma vez); corpo: translúcido respirando (opacidade);
   borda: gradiente neon com reflexo que corre por transform (sem repintar a cada quadro). */
.fx-icv{position:relative;display:inline-block;flex:none;width:var(--tam,64px);height:var(--tam,64px)}
.fx-icv::before{content:"";position:absolute;inset:-38%;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(255,77,36,.22),rgba(255,77,36,.07) 55%,transparent);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.fx-icv-m{position:absolute;inset:0;display:block}
.fx-icv-brilho,.fx-icv-corpo,.fx-icv-borda{position:absolute;inset:0;display:block;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.fx-icv-brilho{-webkit-mask-image:var(--icv-borda);mask-image:var(--icv-borda);background:var(--tang);filter:blur(5px);opacity:.75;will-change:transform;transition:opacity .45s var(--ease)}
.fx-icv-corpo{-webkit-mask-image:var(--icv-corpo);mask-image:var(--icv-corpo);background:linear-gradient(160deg,rgba(255,196,174,.62),rgba(255,77,36,.42) 48%,rgba(168,42,14,.3));will-change:opacity;animation:fx-respira 4.2s var(--ease-io) infinite var(--atraso,0s)}
.fx-icv-borda{-webkit-mask-image:var(--icv-borda);mask-image:var(--icv-borda);overflow:hidden;background:linear-gradient(180deg,#FFD2C2 0%,#FF8D63 24%,#FF4D24 54%,#E23A12 76%,#A82A0E 100%)}
.fx-icv-borda::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:60%;background:linear-gradient(105deg,transparent 0,rgba(255,244,238,.95) 45%,rgba(255,200,180,.4) 55%,transparent 100%);will-change:transform;animation:fx-reflexo 6.5s var(--ease-io) infinite var(--atraso,0s)}
.fx-icv-simples{color:var(--tang)}
.fx-icv-simples svg{width:100%;height:100%}
@keyframes fx-reflexo{0%,58%{transform:translateX(0)}100%{transform:translateX(370%)}}
@keyframes fx-respira{0%,100%{opacity:.72}50%{opacity:1}}

/* ---------- grade ---------- */
.sv-grade{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(276px,auto);gap:16px}
.sv-site{grid-column:1/8;grid-row:1/3}
.sv-whats{grid-column:8/13;grid-row:1}
.sv-crm{grid-column:8/13;grid-row:2}
.sv-calc{grid-column:1/4;grid-row:3}
.sv-traf{grid-column:4/9;grid-row:3}
.sv-posts{grid-column:9/13;grid-row:3}

/* ---------- peça ---------- */
.sv-peca{
  --tam:60px;
  position:relative;overflow:hidden;isolation:isolate;min-width:0;
  display:grid;gap:18px 22px;padding:28px;
  background:
    radial-gradient(160px circle at 58px 58px,rgba(255,77,36,.11),transparent 70%),
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.016) 42%,rgba(255,255,255,.008));
  -webkit-backdrop-filter:none;backdrop-filter:none;
  background-color:#0A0A0C;
  transition:transform 1s var(--ease) var(--d,0ms),border-color .4s var(--ease);
}
.sv-peca::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(440px circle at var(--mx,50%) var(--my,0%),rgba(255,77,36,.085),transparent 58%);opacity:0;transition:opacity .45s var(--ease)}
.sv-peca::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:radial-gradient(280px circle at var(--mx,50%) var(--my,0%),rgba(255,122,77,.85),rgba(255,77,36,.25) 40%,transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity .45s var(--ease)}
@media (hover:hover){
  .sv-peca:hover::before,.sv-peca:hover::after{opacity:1}
  .sv-peca:hover .fx-icv::before{transform:scale(1.25)}
  .sv-peca:hover .fx-icv-brilho{opacity:1}
}
.sv-ic{grid-area:ic}
.sv-vivo{grid-area:vivo;position:relative;min-width:0;min-height:0}
.sv-txt{grid-area:txt;align-self:end;min-width:0}
.sv-tit{font:500 clamp(20px,1.65vw,24px)/1.12 var(--sans);letter-spacing:-.028em;color:var(--osso);text-wrap:balance}
.sv-linha{margin-top:8px;font:400 15px/1.45 var(--sans);color:var(--osso-2);text-wrap:pretty;max-width:34ch}

/* layouts internos */
.sv-site{--tam:76px;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"ic chips" "vivo vivo" "txt txt"}
.sv-site .sv-tit{font-size:clamp(24px,2.3vw,34px);letter-spacing:-.034em}
.sv-site .sv-linha{font-size:16px}
.sv-whats,.sv-crm,.sv-traf{grid-template-columns:minmax(0,.86fr) minmax(0,1.3fr);grid-template-rows:auto 1fr;grid-template-areas:"ic vivo" "txt vivo"}
.sv-calc{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;grid-template-areas:"ic" "vivo" "txt"}
.sv-posts{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"ic vivo" "txt txt"}

/* entrada: só deslocamento curto a partir de visível (peça, ícone e texto nunca somem) */
.sv.anima .sv-peca{transform:translateY(14px)}
.sv.anima .sv-peca.visto{transform:none}

/* ---------- micro-movimentos dos ícones ---------- */
/* entrada, em .fx-icv-m: todo quadro inicial é visível, o ícone só ganha vida */
.sv-peca.visto .fx-icv[data-mov="janela"] .fx-icv-m{animation:fx-e-janela 1s var(--ease) calc(var(--d,0ms) + 120ms) both}
.sv-peca.visto .fx-icv[data-mov="toque"] .fx-icv-m{animation:fx-e-toque .9s cubic-bezier(.34,1.56,.64,1) calc(var(--d,0ms) + 120ms) both}
.sv-peca.visto .fx-icv[data-mov="colunas"] .fx-icv-m{animation:fx-e-colunas 1s var(--ease) calc(var(--d,0ms) + 120ms) both}
.sv-peca.visto .fx-icv[data-mov="tecla"] .fx-icv-m{animation:fx-e-tecla .9s cubic-bezier(.34,1.56,.64,1) calc(var(--d,0ms) + 120ms) both}
.sv-peca.visto .fx-icv[data-mov="mira"] .fx-icv-m{animation:fx-e-mira 1.1s var(--ease) calc(var(--d,0ms) + 120ms) both}
.sv-peca.visto .fx-icv[data-mov="foto"] .fx-icv-m{animation:fx-e-foto 1s var(--ease) calc(var(--d,0ms) + 120ms) both}
@keyframes fx-e-janela{from{clip-path:inset(0 0 38% 0);transform:translateY(6px)}to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes fx-e-toque{from{transform:scale(.82) rotate(-22deg)}to{transform:none}}
@keyframes fx-e-colunas{from{clip-path:inset(0 42% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes fx-e-tecla{0%{transform:translateY(6px) scale(.9)}60%{transform:scale(1.04)}80%{transform:scale(.96)}100%{transform:none}}
@keyframes fx-e-mira{from{transform:rotate(-120deg) scale(.86)}to{transform:none}}
@keyframes fx-e-foto{from{clip-path:circle(46% at 50% 50%);transform:scale(1.1)}to{clip-path:circle(75% at 50% 50%);transform:none}}

/* ao passar o mouse, em .fx-icv */
@media (hover:hover){
  .sv-peca:hover .fx-icv[data-mov="janela"]{animation:fx-h-janela .8s var(--ease)}
  .sv-peca:hover .fx-icv[data-mov="toque"]{animation:fx-h-toque .75s var(--ease)}
  .sv-peca:hover .fx-icv[data-mov="colunas"]{animation:fx-h-colunas .7s var(--ease)}
  .sv-peca:hover .fx-icv[data-mov="tecla"]{animation:fx-h-tecla .45s var(--ease)}
  .sv-peca:hover .fx-icv[data-mov="mira"]{animation:fx-h-mira 1s var(--ease-io)}
  .sv-peca:hover .fx-icv[data-mov="foto"]{animation:fx-h-foto .8s var(--ease)}
  .sv-peca:hover .fx-icv-borda::after{animation-duration:2.2s}
}
@keyframes fx-h-janela{0%{transform:none}35%{transform:translateY(-7px) scale(1.05)}70%{transform:translateY(2px)}100%{transform:none}}
@keyframes fx-h-toque{0%,100%{transform:none}15%{transform:rotate(-14deg) scale(1.06)}35%{transform:rotate(11deg) scale(1.06)}55%{transform:rotate(-7deg)}75%{transform:rotate(4deg)}}
@keyframes fx-h-colunas{0%,100%{transform:none}30%{transform:scale(1.04,.88)}60%{transform:scale(.97,1.07)}}
@keyframes fx-h-tecla{0%,100%{transform:none}40%{transform:scale(.88)}}
@keyframes fx-h-mira{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes fx-h-foto{0%,100%{transform:none}40%{transform:rotate(-7deg) scale(1.07)}}

/* anéis vivos: WhatsApp pulsa para fora, a mira fecha para dentro */
.sv-onda,.sv-anel{position:absolute;inset:-6%;border-radius:50%;border:1.5px solid rgba(255,122,77,.7);opacity:0;pointer-events:none}
.sv-onda{animation:sv-onda 2.6s var(--ease) infinite}
.sv-onda+.sv-onda{animation-delay:1.3s}
@keyframes sv-onda{0%{opacity:.85;transform:scale(.75)}100%{opacity:0;transform:scale(1.75)}}
.sv-anel{inset:6%;animation:sv-anel 2.8s var(--ease-io) infinite}
.sv-anel+.sv-anel{animation-delay:1.4s}
@keyframes sv-anel{0%{opacity:0;transform:scale(2.1)}45%{opacity:.7}100%{opacity:0;transform:scale(.55)}}

/* ---------- 01 site: navegador ---------- */
.sv-chips{grid-area:chips;align-self:center;justify-self:end;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;min-width:0}
.sv-chips .chip{transition:color .4s var(--ease),border-color .4s var(--ease),background-color .4s var(--ease),box-shadow .4s var(--ease)}
.sv-chips .chip .ic{font-size:14px;opacity:.6;transition:opacity .4s}
.sv-chips .chip.on{box-shadow:0 0 18px -4px rgba(255,77,36,.5)}
.sv-chips .chip.on .ic{opacity:1;color:var(--tang)}

.sv-bm{position:relative;height:100%;min-height:300px;border-radius:var(--raio);border:1px solid var(--linha-2);background:linear-gradient(180deg,#0E0E11,#09090B);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 30px 70px -30px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.4);overflow:hidden}
.sv-bm-barra{display:flex;align-items:center;gap:14px;height:38px;padding:0 14px;border-bottom:1px solid var(--linha)}
.sv-bm-pts{display:flex;gap:6px}
.sv-bm-pts i{width:8px;height:8px;border-radius:50%;background:rgba(236,234,228,.16)}
.sv-bm-url{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 12px;border-radius:var(--pill);background:rgba(255,255,255,.04);border:1px solid var(--linha);font:500 11.5px var(--mono);color:var(--osso-3);min-width:0;overflow:hidden;white-space:nowrap}
.sv-bm-url .ic{font-size:12px;color:var(--osso-3)}
.sv-bm-carga{position:absolute;left:0;right:0;top:38px;height:2px;opacity:0;transition:opacity .4s}
.sv-bm-carga i{display:block;height:100%;background:linear-gradient(90deg,var(--tang-escuro),var(--tang),var(--tang-brilho));box-shadow:0 0 10px rgba(255,77,36,.8);transform-origin:left;transform:scaleX(0)}
.sv-bm.carregando .sv-bm-carga{opacity:1}

.sv-bm-pag{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:1fr auto;gap:16px;padding:22px 22px 20px;height:calc(100% - 38px)}
.sv-bm-hero{display:flex;flex-direction:column;justify-content:center;gap:10px;min-width:0}
.sv-bm-rot,.sv-bm-l{display:block;border-radius:var(--pill);background:rgba(236,234,228,.07);transition:background-color .6s var(--ease),box-shadow .6s var(--ease),width .6s var(--ease)}
.sv-bm-rot{width:38%;height:7px}
.sv-bm-l.l1{width:92%;height:15px}
.sv-bm-l.l2{width:70%;height:15px}
.sv-bm-l.l3{width:80%;height:6px;margin-top:4px}
.sv-bm-btn{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin-top:8px;height:30px;padding:0 14px;border-radius:var(--pill);font:500 12px/1 var(--sans);letter-spacing:-.005em;color:transparent;background:rgba(236,234,228,.07);white-space:nowrap;transition:background-color .6s var(--ease),color .6s var(--ease),box-shadow .6s var(--ease),transform .25s var(--ease)}
.sv-bm-btn .ic{font-size:13px}
.sv-bm-foto{position:relative;border-radius:var(--raio-p);background:rgba(236,234,228,.04);overflow:hidden;min-height:0;transition:background-color .7s var(--ease)}
.sv-bm-orbe{position:absolute;left:50%;top:44%;width:46%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) scale(.85);background:radial-gradient(circle at 34% 30%,rgba(236,234,228,.12),rgba(236,234,228,.03) 60%);transition:transform .9s var(--ease),background .7s,box-shadow .7s}
.sv-bm-base{position:absolute;left:50%;bottom:16%;width:56%;height:9%;border-radius:50%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent);opacity:.4;transition:opacity .7s}
.sv-bm-cards{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sv-bm-cards i{height:46px;border-radius:var(--raio-p);background:rgba(236,234,228,.04);border:1px solid var(--linha);transition:background-color .6s var(--ease),border-color .6s var(--ease)}

.sv-bm.carregou .sv-bm-rot{background:rgba(255,77,36,.75);box-shadow:0 0 10px rgba(255,77,36,.45)}
.sv-bm.carregou .sv-bm-l.l1,.sv-bm.carregou .sv-bm-l.l2{background:rgba(236,234,228,.82)}
.sv-bm.carregou .sv-bm-l.l3{background:rgba(236,234,228,.22)}
.sv-bm.carregou .sv-bm-btn{background:var(--tang);color:#160500;box-shadow:inset 0 1px 0 rgba(255,220,205,.5),0 6px 22px -6px rgba(255,77,36,.8)}
.sv-bm.carregou .sv-bm-foto{background:radial-gradient(120% 90% at 50% 100%,rgba(255,77,36,.2),rgba(255,77,36,.03) 60%,transparent)}
.sv-bm.carregou .sv-bm-orbe{transform:translate(-50%,-50%) scale(1);background:radial-gradient(circle at 34% 28%,#FFE3D8 0%,#FF9B75 18%,#FF4D24 46%,#A82A0E 78%,#3A0E04 100%);box-shadow:0 0 34px rgba(255,77,36,.55),inset -8px -10px 24px rgba(0,0,0,.45)}
.sv-bm.carregou .sv-bm-base{opacity:1}
.sv-bm.carregou .sv-bm-cards i{background:rgba(236,234,228,.06);border-color:var(--linha-2)}
.sv-bm.carregou .sv-bm-cards i:nth-child(2){transition-delay:.1s}
.sv-bm.carregou .sv-bm-cards i:nth-child(3){transition-delay:.2s}
.sv-bm.clicou .sv-bm-btn{transform:scale(.96);box-shadow:inset 0 1px 0 rgba(255,220,205,.6),0 0 0 4px rgba(255,77,36,.22),0 8px 30px -4px rgba(255,77,36,1)}

.sv-bm-toast{position:absolute;left:22px;bottom:20px;display:flex;align-items:center;gap:10px;padding:11px 16px 11px 12px;border-radius:var(--raio-p);background:rgba(16,8,6,.92);border:1px solid var(--tang-borda);box-shadow:0 0 30px -6px rgba(255,77,36,.55),0 18px 40px -16px rgba(0,0,0,.9);font:500 13px/1 var(--sans);color:var(--osso);opacity:0;transform:translateY(14px) scale(.96);transition:opacity .45s var(--ease),transform .55s var(--ease)}
.sv-bm-toast .ic{font-size:19px;color:var(--tang)}
.sv-bm.toast .sv-bm-toast{opacity:1;transform:none}

.sv-cursor{position:absolute;left:0;top:0;width:22px;height:22px;opacity:0;will-change:transform;transition:opacity .35s;z-index:3}
.sv-cursor .ic{position:relative;z-index:1;font-size:22px;color:var(--osso);filter:drop-shadow(0 1px 1px rgba(0,0,0,.9)) drop-shadow(0 0 8px rgba(255,77,36,.55))}
.sv-cursor-onda{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--tang-claro);opacity:0}
.sv-bm.cursor .sv-cursor{opacity:1}
.sv-bm.clicou .sv-cursor-onda{animation:sv-clique .7s var(--ease) both}
@keyframes sv-clique{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(1.9)}}

/* ---------- 02 WhatsApp: conversa ---------- */
.sv-chat{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px}
.sv-chat-cab{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.06em;color:var(--osso-3);padding-left:2px}
.sv-pt{width:6px;height:6px;border-radius:50%;background:var(--tang);box-shadow:var(--brilho);animation:sv-pisca 1.8s var(--ease-io) infinite}
@keyframes sv-pisca{0%,100%{opacity:1}50%{opacity:.35}}
.sv-chat-lista{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24px);mask-image:linear-gradient(180deg,transparent 0,#000 24px);transition:opacity .6s var(--ease)}
.sv-chat-lista.limpa{opacity:0}
.sv-bal-w{display:flex;max-height:0;opacity:0;overflow:hidden;transition:max-height .5s var(--ease),opacity .4s var(--ease),margin-top .5s var(--ease)}
.sv-bal-w.on{max-height:64px;opacity:1;margin-top:8px}
.sv-bal-w.ag{justify-content:flex-end}
.sv-bal{max-width:90%;padding:8px 11px;border-radius:var(--raio-p);font:400 13px/1.35 var(--sans);letter-spacing:-.005em;transform:translateY(8px);transition:transform .5s var(--ease)}
.sv-bal-w.on .sv-bal{transform:none}
.sv-bal-w.ele .sv-bal{background:rgba(255,255,255,.055);border:1px solid var(--linha-2);color:var(--osso)}
.sv-bal-w.ag .sv-bal{background:linear-gradient(180deg,rgba(255,77,36,.2),rgba(255,77,36,.1));border:1px solid var(--tang-borda);color:var(--tang-brilho)}
.sv-bal .ic{font-size:13px;margin-left:6px;color:var(--tang-claro);vertical-align:-.15em}
.sv-bal-w.dig .sv-bal{display:flex;gap:4px;padding:11px 12px}
.sv-bal-w.dig i{width:5px;height:5px;border-radius:50%;background:var(--tang-claro);animation:sv-digita 1s var(--ease-io) infinite}
.sv-bal-w.dig i:nth-child(2){animation-delay:.15s}
.sv-bal-w.dig i:nth-child(3){animation-delay:.3s}
@keyframes sv-digita{0%,60%,100%{transform:none;opacity:.45}30%{transform:translateY(-4px);opacity:1}}

/* ---------- 03 CRM: kanban ---------- */
.sv-kb{position:absolute;inset:0;display:flex;flex-direction:column;gap:8px}
.sv-kb-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sv-kb-cols span{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--osso-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:2px}
.sv-kb-cols span:last-child{color:var(--tang-claro)}
.sv-kb-area{position:relative;flex:1;min-height:0}
.sv-kb-trilhas{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sv-kb-trilhas i{border-radius:var(--raio-p);background:rgba(255,255,255,.022);border:1px dashed rgba(236,234,228,.08)}
.sv-kb-trilhas i:last-child{background:rgba(255,77,36,.04);border-color:rgba(255,77,36,.16)}
.sv-kb-card{--c:0;--s:0;position:absolute;left:0;top:0;width:calc((100% - 16px) / 3);height:30px;display:flex;align-items:center;gap:6px;padding:0 8px;border-radius:var(--raio-p);background:#141417;border:1px solid var(--linha-2);font:500 11.5px/1 var(--sans);color:var(--osso);white-space:nowrap;overflow:hidden;transform:translate(calc(var(--c) * (100% + 8px)),calc(var(--s) * 36px + 6px));transition:transform .85s var(--ease),opacity .45s var(--ease),background-color .5s,border-color .5s,box-shadow .5s,scale .5s var(--ease)}
.sv-kb-card>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.sv-kb-card .sv-kb-pt{flex:none;width:6px;height:6px;border-radius:50%;background:var(--osso-3)}
.sv-kb-card .ic{flex:none;font-size:12px;display:none}
.sv-kb-card .sv-kb-ok{color:var(--tang)}
.sv-kb-card .sv-kb-bot{position:absolute;right:6px;color:var(--tang-claro)}
.sv-kb-card.mov{z-index:2;scale:1.06;border-color:var(--tang-borda);box-shadow:0 0 0 1px rgba(255,77,36,.25),0 10px 26px -8px rgba(255,77,36,.6);background:#1A0F0B}
.sv-kb-card.mov .sv-kb-bot{display:block}
.sv-kb-card.mov .sv-kb-pt{background:var(--tang)}
.sv-kb-card.ok{background:linear-gradient(180deg,rgba(255,77,36,.16),rgba(255,77,36,.07));border-color:var(--tang-borda);color:var(--tang-brilho)}
.sv-kb-card.ok .sv-kb-pt{display:none}
.sv-kb-card.ok .sv-kb-ok{display:block}
.sv-kb-card.ok.mov .sv-kb-bot{display:none}
.sv-kb-card.entra{opacity:0;transform:translate(calc(var(--c) * (100% + 8px)),calc(var(--s) * 36px - 10px))}
.sv-kb-card.sai{opacity:0;scale:.9}

/* ---------- 04 cálculo ---------- */
.sv-calc .sv-vivo{position:static;display:flex;flex-direction:column;justify-content:center}
.sv-calc-caixa{display:grid;gap:6px}
.sv-calc-f{display:inline-flex;align-items:center;font-size:12.5px;color:var(--osso-3);transition:color .3s}
.sv-calc-f.pisca{color:var(--tang-claro)}
.sv-caret{display:inline-block;width:7px;height:14px;margin-left:3px;background:var(--tang);opacity:.8;animation:sv-caret 1.05s steps(1) infinite}
@keyframes sv-caret{50%{opacity:0}}
.sv-calc-n{display:flex;align-items:baseline;gap:8px;font:500 clamp(26px,2.3vw,32px)/1 var(--mono);letter-spacing:-.04em;color:var(--tang-brilho);text-shadow:0 0 18px rgba(255,77,36,.55)}
.sv-calc-rs{font-size:.5em;letter-spacing:0;color:var(--tang-claro)}
.sv-odo{display:inline-flex}
.sv-dg{display:inline-block;height:1.1em;line-height:1.1em;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent,#000 13%,#000 87%,transparent);mask-image:linear-gradient(180deg,transparent,#000 13%,#000 87%,transparent)}
.sv-dg>span{display:block;transform:translateY(calc(var(--d,0) * -1.1em));transition:transform 1s var(--ease)}
.sv-dg>span>b{display:block;font-weight:inherit}
.sv-sep{display:inline-block;line-height:1.1em}
.sv-calc .exemplo{position:absolute;top:28px;right:28px;font-size:10px;padding:4px 9px}

/* ---------- 05 tráfego: do anúncio ao direct ---------- */
.sv-tf{position:absolute;inset:0}
.sv-tf-ad{position:absolute;left:0;top:0;width:92px;padding:6px;border-radius:var(--raio-p);background:#121215;border:1px solid var(--linha-2);display:grid;gap:5px}
.sv-tf-img{display:block;height:58px;border-radius:5px;background:radial-gradient(circle at 70% 30%,rgba(255,196,174,.85),rgba(255,77,36,.75) 26%,rgba(168,42,14,.5) 52%,rgba(20,8,4,.9) 80%)}
.sv-tf-l{display:block;height:5px;border-radius:var(--pill);background:rgba(236,234,228,.2)}
.sv-tf-l.c{width:60%;background:rgba(236,234,228,.1)}
.sv-tf-tag{position:absolute;left:11px;top:10px;font-size:8.5px;letter-spacing:.06em;color:rgba(255,240,232,.92);text-shadow:0 1px 3px rgba(0,0,0,.7)}
.sv-tf-clique{position:absolute;left:50%;top:38%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:1.5px solid var(--tang-brilho);opacity:0}
.sv-tf.clique .sv-tf-clique{animation:sv-clique .6s var(--ease) both}
.sv-tf.clique .sv-tf-ad{border-color:var(--tang-borda)}
.sv-tf-fio{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.sv-tf-trilho{fill:none;stroke:rgba(236,234,228,.14);stroke-width:1.2;stroke-dasharray:3 5}
.sv-tf-luz{fill:none;stroke:var(--tang);stroke-width:1.6;stroke-linecap:round}
.sv-tf-ponto{position:absolute;left:0;top:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--tang-brilho);box-shadow:0 0 0 3px rgba(255,77,36,.25),0 0 14px 2px rgba(255,77,36,.85);opacity:0;will-change:transform}
.sv-tf-dm{position:absolute;right:0;bottom:0;width:min(140px,60%);padding:9px 10px 10px;border-radius:var(--raio-p);background:#121215;border:1px solid var(--linha-2);transition:border-color .4s,box-shadow .4s}
.sv-tf-dm.chegou{border-color:var(--tang-borda);box-shadow:0 0 24px -6px rgba(255,77,36,.6)}
.sv-tf-dm-cab{display:flex;align-items:center;gap:6px;font-size:10.5px;letter-spacing:.06em;color:var(--osso-2);margin-bottom:8px}
.sv-tf-dm-cab .ic{font-size:14px;color:var(--tang)}
.sv-tf-conv{display:grid;gap:7px}
.sv-tf-conv li{display:flex;align-items:center;gap:7px;height:18px;animation:sv-conv .55s var(--ease) both}
.sv-tf-conv li i{flex:none;width:16px;height:16px;border-radius:50%;background:linear-gradient(160deg,rgba(255,122,77,.6),rgba(168,42,14,.5))}
.sv-tf-conv li b{flex:1;height:5px;border-radius:var(--pill);background:rgba(236,234,228,.16)}
.sv-tf-conv li:first-child b{background:rgba(236,234,228,.34)}
.sv-tf-conv li s{flex:none;width:6px;height:6px;border-radius:50%;background:var(--tang);box-shadow:0 0 8px rgba(255,77,36,.9)}
.sv-tf-conv li:not(:first-child) s{opacity:.25;box-shadow:none}
@keyframes sv-conv{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---------- 06 conteúdo: grade de posts ---------- */
.sv-posts .sv-vivo{display:grid;justify-items:end;align-content:start;gap:10px}
.sv-pg{display:grid;grid-template-columns:repeat(3,52px);grid-auto-rows:52px;gap:6px}
.sv-pg>i{position:relative;border-radius:var(--raio-p);background:rgba(255,255,255,.035);border:1px solid var(--linha);overflow:hidden;transition:transform .6s var(--ease),border-color .5s}
.sv-pg>i::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease)}
.sv-pg>i::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,240,232,.55) 48%,transparent 62%);transform:translateX(-120%);opacity:0}
.sv-pg>i.on{border-color:rgba(255,77,36,.28)}
.sv-pg>i.on::before{opacity:1}
.sv-pg>i.on::after{animation:sv-brilho .9s var(--ease) both}
@keyframes sv-brilho{0%{opacity:1;transform:translateX(-120%)}100%{opacity:1;transform:translateX(120%)}}
.sv-pt-1::before{background:radial-gradient(circle at 50% 44%,#FFC4AE 0,#FF4D24 22%,#A82A0E 40%,transparent 42%),#160805}
.sv-pt-2::before{background:linear-gradient(rgba(236,234,228,.85),rgba(236,234,228,.85)) 8px 12px/62% 6px no-repeat,linear-gradient(rgba(236,234,228,.85),rgba(236,234,228,.85)) 8px 22px/44% 6px no-repeat,linear-gradient(var(--tang),var(--tang)) 8px 36px/24% 4px no-repeat,linear-gradient(160deg,#A82A0E,#2A0B04)}
.sv-pt-3::before{background:radial-gradient(circle at 70% 70%,transparent 0 9px,rgba(255,122,77,.9) 10px 11.5px,transparent 12.5px),linear-gradient(135deg,#FF4D24 0,#7A1E08 55%,#0C0605)}
.sv-pt-4::before{background:linear-gradient(var(--tang),var(--tang)) 9px 100%/8px 46% no-repeat,linear-gradient(var(--tang-claro),var(--tang-claro)) 22px 100%/8px 70% no-repeat,linear-gradient(var(--tang-brilho),var(--tang-brilho)) 35px 100%/8px 88% no-repeat,#120806}
.sv-pt-5{display:grid;place-items:center}
.sv-pt-5::before{background:radial-gradient(circle at 50% 50%,rgba(255,77,36,.35),transparent 70%),#0E0807}
.sv-pt-5 b{position:relative;z-index:1;font-size:18px;color:var(--osso-3);transition:color .5s}
.sv-pt-5.on b{color:var(--tang-brilho);filter:drop-shadow(0 0 6px rgba(255,77,36,.9))}
.sv-pt-6::before{background:radial-gradient(circle at 50% 36%,#FF8D63 0 7px,transparent 7.5px),linear-gradient(rgba(236,234,228,.6),rgba(236,234,228,.6)) 50% 34px/60% 4px no-repeat,linear-gradient(rgba(236,234,228,.25),rgba(236,234,228,.25)) 50% 42px/40% 4px no-repeat,#151517}
.sv-agendado{opacity:.35;transition:opacity .5s,color .5s,border-color .5s,background-color .5s,box-shadow .5s}
.sv-agendado .ic{font-size:14px}
.sv-agendado.on{opacity:1;border-color:var(--tang-borda);color:var(--tang-brilho);background:var(--tang-fundo);box-shadow:0 0 18px -4px rgba(255,77,36,.5)}

/* animação só com a seção na tela */
.sv:not(.sv-ativo) .sv-grade *,.sv:not(.sv-ativo) .sv-grade *::before,.sv:not(.sv-ativo) .sv-grade *::after{animation-play-state:paused!important}

/* ---------- responsivo ---------- */
@media (max-width:1180px){
  .sv-peca{padding:24px;gap:16px 18px}
}
@media (max-width:1099px){
  .sv-grade{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto}
  .sv-site{grid-column:1/-1;grid-row:auto}
  .sv-whats,.sv-crm,.sv-calc,.sv-posts{grid-column:auto;grid-row:auto}
  .sv-traf{grid-column:1/-1;grid-row:auto}
  .sv-site .sv-vivo{min-height:360px}
  .sv-whats,.sv-crm{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;grid-template-areas:"ic" "vivo" "txt"}
  .sv-whats .sv-vivo{height:210px}
  .sv-crm .sv-vivo{height:150px}
  .sv-traf .sv-vivo{height:200px}
}
@media (max-width:700px){
  .sv-grade{grid-template-columns:minmax(0,1fr);gap:12px}
  .sv-peca{--tam:52px;padding:22px;gap:16px}
  .sv-site,.sv-whats,.sv-crm,.sv-traf,.sv-calc,.sv-posts{grid-column:1/-1}
  .sv-site{--tam:60px;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;grid-template-areas:"ic" "vivo" "txt"}
  .sv-site .sv-chips{display:none}
  .sv-site .sv-vivo{min-height:0;height:250px}
  .sv-bm{min-height:0}
  .sv-bm-pag{padding:16px 16px 14px;gap:12px}
  .sv-bm-cards i{height:34px}
  .sv-bm-hero{gap:8px}
  .sv-bm-l.l1,.sv-bm-l.l2{height:12px}
  .sv-bm-btn{height:26px;padding:0 11px;font-size:11px}
  .sv-bm-toast{left:14px;bottom:14px;padding:9px 13px 9px 10px;font-size:12px}
  .sv-traf{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;grid-template-areas:"ic" "vivo" "txt"}
  .sv-traf .sv-vivo{height:180px}
  .sv-whats .sv-vivo{height:200px}
  .sv-crm .sv-vivo{height:140px}
  .sv-calc{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;grid-template-areas:"ic vivo" "txt txt"}
  .sv-calc .sv-vivo{align-items:flex-end;text-align:right}
  .sv-calc .exemplo{position:static;align-self:flex-end;margin-top:8px}
  .sv-calc-caixa{justify-items:end}
  .sv-pg{grid-template-columns:repeat(3,46px);grid-auto-rows:46px}
  .sv-linha{max-width:none}
}