/* Traction Digital — camada visual (ilustrações, animações e interações)
   Depende de style.css. Respeita prefers-reduced-motion e funciona sem JavaScript. */

:root{--amber:#9a6a12;--amber-line:#d38f1f;--amber-soft:#fbf0d9;--amber-edge:#ecd29a;
  --green:#1f8a63;--green-bright:#2fa77a;--green-soft:#dff2e8;--green-edge:#a9d8c1}

/* ---------- Base dos blocos visuais ---------- */
.hero>.wrap,.page-hero>.wrap{position:relative;z-index:1}
.hero-grid>*{min-width:0}
.viz{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:1.25rem;box-shadow:0 12px 30px rgba(12,35,64,.06);position:relative}
.viz .flow-cap{margin:1rem 0 0}
.hero-viz{width:100%;max-width:580px;justify-self:end;padding:1.4rem}
.body>.viz{margin:0 0 1.75rem}
.body>p+.viz{margin-top:.5rem}
.viz+p{margin-top:1.5rem}
[data-v] svg{width:100%;height:auto;display:block;overflow:visible}
.head-art{margin-top:1.5rem;max-width:22rem;background:var(--tint);border-radius:14px;padding:1rem .75rem}
.head-art svg{max-height:290px}

/* Vocabulário gráfico do SVG */
[data-v] .ln{fill:none;stroke:#c5d6ee;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
[data-v] .ln-b{stroke:var(--blue)}
[data-v] .ln-a{stroke:var(--amber-line)}
[data-v] .ln-n{stroke:var(--navy)}
[data-v] .ln-g{stroke:var(--green-bright)}
[data-v] .ln-w{stroke:#fff}
[data-v] .ln-thick{stroke-width:3}
[data-v] .ln-d{stroke-dasharray:3 7;animation:vdash 1.6s linear infinite}
@keyframes vdash{to{stroke-dashoffset:-20}}
[data-v] .bx{fill:var(--paper);stroke:var(--line);stroke-width:1.5}
[data-v] .bx-t{fill:var(--tint);stroke:#c5d6ee}
[data-v] .bx-n{fill:var(--navy);stroke:var(--navy)}
[data-v] .bx-b{fill:var(--blue);stroke:var(--blue)}
[data-v] .bx-a{fill:var(--amber-soft);stroke:var(--amber-edge)}
[data-v] .bx-g{fill:var(--green-soft);stroke:var(--green-edge)}
[data-v] .badge-g{fill:var(--green-bright)}
[data-v] .faded{opacity:.75;stroke-dasharray:5 5}
[data-v] .fill-t{fill:#dbe6f6}
[data-v] .fill-t2{fill:#e9f0fa}
[data-v] .fill-am{fill:#d9a645}
[data-v] .fill-bl{fill:#8fb0e3}
[data-v] .fill-gr{fill:#8fd0b0}
[data-v] .fill-w{fill:rgba(255,255,255,.85)}
[data-v] .fill-w2{fill:rgba(255,255,255,.45)}
[data-v] .tx{font:600 13px var(--sans);fill:var(--navy)}
[data-v] .tx-s2{font-size:12.5px}
[data-v] .tx-s{font:400 11.5px var(--sans);fill:var(--muted)}
[data-v] .tx-w{fill:#fff}
[data-v] .tx-mu{fill:var(--muted)}
[data-v] .ic{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
[data-v] .c-blue{color:var(--blue)}
[data-v] .c-white{color:#fff}
[data-v] .c-amber{color:var(--amber-line)}
[data-v] .c-green{color:var(--green)}
[data-v] .c-navy{color:var(--navy)}
[data-v] .c-muted{color:#8a98aa}
[data-v] .pk{fill:var(--blue)}
[data-v] .pk-a{fill:var(--amber-line)}
[data-v] .pk-g{fill:var(--green-bright)}
[data-v] .pk-am{fill:#f3b44a}
[data-v] .pk-cta{fill:#fff}
[data-v] .warn{fill:var(--amber-line)}
.rm [data-v] .pk{display:none}
.rm [data-v] .ln-d{stroke-dasharray:none}

/* Links dentro de ilustrações */
[data-v] a.vl{cursor:pointer;text-decoration:none}
[data-v] .vn{transition:transform .3s ease}
[data-v] a.vl:hover .vn,[data-v] a.vl:focus-visible .vn{transform:translateY(-3px)}
[data-v] a.vl:hover .bx,[data-v] a.vl:focus-visible .bx{stroke:var(--blue);stroke-width:2.5}
[data-v] a.vl:focus-visible{outline:none}
[data-v] .hub-core{fill:var(--navy);transform-box:fill-box;transform-origin:center;animation:corepulse 3.2s ease-in-out infinite}
@keyframes corepulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* ---------- Revelação ao rolar ---------- */
.js .rv{transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js .rv:not(.in){opacity:0;transform:translateY(16px)}

/* ---------- Barra de progresso de leitura ---------- */
.scroll-bar{position:absolute;left:0;right:0;bottom:-1px;height:3px;pointer-events:none}
.scroll-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--blue) 0%,var(--blue) 55%,var(--green-bright) 100%);transform:scaleX(0);transform-origin:left;transition:transform .12s linear}

/* ---------- Fundo sutil dos heróis ---------- */
.hero,.page-hero{position:relative;overflow:hidden}
.hero::before,.page-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,#c4d3e8 1.2px,transparent 1.5px);background-size:24px 24px;opacity:.6;
  -webkit-mask-image:linear-gradient(100deg,transparent 38%,#000 100%);mask-image:linear-gradient(100deg,transparent 38%,#000 100%);animation:gridmove 60s linear infinite}
@keyframes gridmove{to{background-position:240px 0}}

/* ---------- Botões e cartões ---------- */
.btn{transition:background-color .2s,border-color .2s,color .2s,transform .2s,box-shadow .2s}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(27,95,196,.28)}
.btn-secondary:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.pcard{transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.pcard:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(12,35,64,.1)}
.pcard .icobox{transition:background .3s,color .3s,transform .3s}
.pcard:hover .icobox{background:var(--blue);color:#fff;transform:scale(1.06)}
.pcard .go{background:linear-gradient(currentColor,currentColor) left bottom/0 2px no-repeat;transition:background-size .3s ease;padding-bottom:2px}
.pcard:hover .go{background-size:100% 2px}
.nav a{transition:background-color .2s,color .2s}

/* ---------- Listas com ícone ---------- */
.rows>li{position:relative;isolation:isolate}
.rows>li::before{content:"";position:absolute;inset:0 -.75rem;z-index:-1;border-radius:8px;background:linear-gradient(90deg,var(--tint),rgba(238,243,250,0));opacity:0;transition:opacity .3s}
.rows>li:hover::before,.rows>li.hot::before{opacity:1}
.icobox{transition:background .3s,color .3s,transform .3s}
.rows>li:hover .icobox,.rows>li.hot .icobox{background:var(--blue);color:#fff;transform:scale(1.06)}

/* ---------- Checks animados ---------- */
.checks li{padding-left:1.9rem}
.checks li::before{top:.55rem;width:1.15rem;height:1.15rem;border-radius:50%;border:1px solid var(--green-edge);
  background:var(--green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f8a63' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 12.5 4 4 9-9.5'/%3E%3C/svg%3E") center/68% no-repeat;
  transition:transform .45s cubic-bezier(.3,1.7,.5,1) .15s}
.js .checks li.rv:not(.in)::before{transform:scale(0)}

/* ---------- Etapas em linha do tempo ---------- */
.steps{position:relative}
.steps>li{position:relative}
.steps>li{border-top:0;border-bottom:0;padding:1.25rem 0;grid-template-columns:2.4rem 1fr;gap:1.1rem}
.steps>li:last-child{border-bottom:0}
.steps>li::before{content:counter(s);display:flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;border-radius:50%;
  background:var(--paper);border:1.5px solid #c5d6ee;font:500 1.1rem var(--serif);color:var(--blue);position:relative;z-index:1;
  transition:background .4s,color .4s,border-color .4s,transform .4s}
.steps>li:not(:last-child)::after{content:"";position:absolute;left:1.2rem;margin-left:-1px;width:2px;top:3.65rem;bottom:-1.25rem;background:var(--line);transition:background .4s}
.steps>li.pass:not(:last-child)::after{background:var(--green-bright)}
.steps>li.on::before{background:var(--green);border-color:var(--green);color:#fff;transform:scale(1.08)}
.steps h3{margin-top:.35rem}

/* ---------- Fluxo vertical animado ---------- */
.vflow ol{position:relative}
.vflow li{transition:transform .3s}
.vflow li:last-of-type::before{display:none}
.vflow li:not(:last-of-type)::after{content:"";position:absolute;left:21px;top:46px;bottom:2px;width:2px;background:var(--green-bright);transform:scaleY(0);transform-origin:top;transition:transform .7s ease}
.vflow li.done:not(:last-of-type)::after{transform:scaleY(1)}
.vflow .icobox{transition:background .35s,color .35s,transform .35s}
.vflow li.on .icobox{background:var(--blue);color:#fff;transform:scale(1.1)}
.vflow li.done .icobox{background:var(--green-soft);color:var(--green)}
.vflow li strong{transition:color .3s}
.vflow li.on strong{color:var(--blue-dark)}
.vf-pk{position:absolute;left:17px;top:0;width:10px;height:10px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 5px rgba(27,95,196,.18);
  transition:transform .8s cubic-bezier(.6,0,.2,1),opacity .3s;pointer-events:none;opacity:0;z-index:2}
.vflow.live .vf-pk{opacity:1}
.vflow li{cursor:default}

/* ---------- FAQ ---------- */
.faq summary::after{content:"+";transition:transform .3s ease}
.faq details[open] summary::after{content:"+";transform:rotate(45deg)}
.faq details{transition:background .3s}
.faq summary:hover{color:var(--blue)}
.faq details p{overflow:hidden}

/* ---------- Chips ---------- */
.chips li{transition:transform .25s,border-color .25s,background .25s,color .25s}
.chips li:hover{transform:translateY(-2px);border-color:var(--blue);background:var(--tint);color:var(--navy)}

/* ---------- Números ---------- */
.stats{list-style:none;margin:1.5rem 0;padding:0;display:flex;flex-wrap:wrap;gap:1rem}
.stats li{flex:1 1 190px;max-width:260px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:1rem 1.25rem;display:flex;flex-direction:column;gap:.15rem;border-left:3px solid var(--blue)}
.stats b{font:500 clamp(2.1rem,4vw,2.9rem)/1.05 var(--serif);color:var(--blue);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stats span{color:var(--muted);font-size:.95rem}
.stats li.st1{border-left-color:var(--amber-line)}.stats li.st1 b{color:var(--amber)}

/* ---------- Comparação ligada ao cenário ---------- */
.cmp{transition:opacity .45s,transform .45s}
.compare[data-state="before"] .cmp-after{opacity:.45}
.compare[data-state="after"] .cmp-before{opacity:.5}

/* ---------- Controle segmentado ---------- */
.sw-ctl{display:none;flex-wrap:wrap;gap:.25rem;background:var(--tint);border:1px solid #c5d6ee;border-radius:999px;padding:.25rem;margin:0 0 1rem;width:max-content;max-width:100%}
.js .sw-ctl{display:flex}
.sw-ctl button{font:600 .9rem var(--sans);border:0;background:transparent;color:var(--graphite);padding:.5rem 1rem;border-radius:999px;cursor:pointer;min-height:40px;transition:background .25s,color .25s}
.sw-ctl button[aria-pressed="true"]{background:var(--navy);color:#fff}
.sw-ctl button:not([aria-pressed="true"]):hover{background:#fff;color:var(--blue)}

/* ---------- Cena antes/depois ---------- */
.sc .sc-svg,.sc .psw-svg{max-width:560px;margin:0 auto}
.sc .bf,.sc .af,.sc .st{transition:opacity .5s ease}
.sc[data-state="before"] .af,.sc[data-state="after"] .bf{opacity:0;pointer-events:none}
.psw[data-state="simple"] .st-erp,.psw[data-state="erp"] .st-simple{opacity:0;pointer-events:none}
[data-v] .draw{stroke-dasharray:100;stroke-dashoffset:0;transition:stroke-dashoffset 1s ease .15s}
.js .rv:not(.in) .draw{stroke-dashoffset:100}
.sc[data-state="before"] .draw{stroke-dashoffset:100}
.cn-b,.cn-a{transition:transform .4s}
.erp-ok{transform-box:fill-box;transform-origin:center;animation:okpop 3s ease-in-out infinite}
@keyframes okpop{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}

/* ---------- Pilha de camadas ---------- */
.stack .pl{transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.js .rv .stack .pl{transition:transform .7s cubic-bezier(.2,.9,.3,1.2) calc(var(--i)*110ms),opacity .5s ease calc(var(--i)*110ms)}
.js .rv:not(.in) .stack .pl{opacity:0;transform:translateY(-34px)}
.stack .pl.hot,.stack .pl:hover{transform:translateY(-9px);transition-delay:0s}
.js .rv.in .stack .pl.hot{transition-delay:0s}

/* ---------- Módulos ---------- */
.modules .tl{transition:transform .35s ease}
.js .rv .modules .tl{transition:transform .8s cubic-bezier(.2,.8,.2,1) calc(var(--i)*90ms),opacity .6s ease calc(var(--i)*90ms)}
.js .rv:not(.in) .modules .tl{opacity:0;transform:translate(var(--dx),var(--dy))}
.modules .tl.hot,.modules .tl:hover{transform:translateY(-5px);transition-delay:0s}
.modules .tl.hot .bx,.modules .tl:hover .bx{stroke:var(--blue)}
.hub-dot{fill:var(--blue)}

/* ---------- Diagnóstico: documento com varredura ---------- */
.scan .tick{stroke-dasharray:24;stroke-dashoffset:0;animation:tick 8s ease-in-out infinite;animation-delay:var(--del)}
@keyframes tick{0%,6%{stroke-dashoffset:24}16%,86%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:24}}
.scan .scanline{animation:scan 4.5s ease-in-out infinite alternate}
@keyframes scan{from{transform:translateY(0)}to{transform:translateY(184px)}}
.scanband{fill:rgba(211,143,31,.12)}
.scanbar{fill:var(--amber-line);opacity:.8}
.lens{animation:lens 7s ease-in-out infinite}
@keyframes lens{0%,100%{transform:translate(0,0)}35%{transform:translate(-92px,-118px)}65%{transform:translate(-40px,-46px)}}
.lens-c{fill:rgba(255,255,255,.5);stroke:var(--navy);stroke-width:3}

/* ---------- Rota (etapas) ---------- */
.route-base{stroke:var(--line);stroke-width:3}
.route-fill{stroke:var(--green-bright);stroke-width:3;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p,0));transition:stroke-dashoffset .25s linear}
.route .nd-c{fill:#fff;stroke:#c5d6ee;stroke-width:2;transition:fill .4s,stroke .4s}
.route .nd-d{fill:#c5d6ee;transition:fill .4s}
.route .nd.on .nd-c{fill:var(--green);stroke:var(--green)}
.route .nd.on .nd-d{fill:#fff}
.route .mk{transform:translateX(calc(var(--p,0) * var(--span)));transition:transform .25s ease-out}
.mk-ring{fill:rgba(27,95,196,.16)}

/* ---------- Radar ---------- */
.ring{fill:none;stroke:#c9d8ee;stroke-width:1.5}
.rdata{fill:rgba(27,95,196,.15);stroke:var(--blue);stroke-width:2;stroke-linejoin:round;transform-origin:160px 126px;transition:transform 1s cubic-bezier(.2,.8,.2,1) .2s,opacity .6s .2s}
.js .rv:not(.in) .rdata{transform:scale(.15);opacity:0}
.sweep{transform-origin:160px 126px;animation:sweep 7s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}
.sweepw{fill:rgba(211,143,31,.2)}
.rdot{fill:#fff;stroke:var(--blue);stroke-width:2.5;transform-box:fill-box;transform-origin:center;transition:transform .3s,fill .3s}
.rdot.hot{fill:var(--amber-line);stroke:var(--amber-line);transform:scale(1.7)}

/* ---------- Fichas (entregáveis) ---------- */
.docs .sh{transform-origin:160px 238px;transform:rotate(var(--a));transition:transform .35s ease}
.js .rv .docs .sh{transition:transform .9s cubic-bezier(.2,.8,.2,1) calc(var(--i)*70ms)}
.js .rv:not(.in) .docs .sh{transform:rotate(0deg)}
.sh-h{fill:#b9cdea;transition:fill .3s}
.sh-h.h1{fill:#efd29a}
.sh-h.h2{fill:#a9d8c1}
.docs .sh.hot .sh-h{fill:var(--blue)}
.docs .sh.hot .sh-h.h1{fill:var(--amber-line)}
.docs .sh.hot .sh-h.h2{fill:var(--green-bright)}
.docs .sh.hot .sh-r{stroke:var(--blue);stroke-width:2.5}

/* ---------- Hub de integração ---------- */
.hub .hb{transition:transform .3s;transform-box:fill-box;transform-origin:center}
.hub .hb.hot{transform:scale(1.18)}
.hub .hb.hot .bx{stroke:var(--blue);stroke-width:2.5}

/* ---------- Funil de automação ---------- */
.funnel{fill:var(--tint);stroke:#c5d6ee;stroke-width:2;stroke-linejoin:round}
.chip{transform-box:fill-box;transform-origin:center;animation:fall 5.2s ease-in infinite;animation-delay:calc(var(--i)*.55s)}
@keyframes fall{0%{transform:translate(0,0);opacity:0}8%{opacity:1}52%{transform:translate(var(--x),90px) scale(.7);opacity:1}60%,100%{transform:translate(var(--x),104px) scale(.35);opacity:0}}
.out{animation:pop 5.2s ease-out infinite;animation-delay:calc(var(--i)*.7s + 2.4s)}
@keyframes pop{0%{opacity:0;transform:translateY(-14px)}12%,80%{opacity:1;transform:none}100%{opacity:0;transform:none}}

/* ---------- Bifurcação e portas ---------- */
.js .rv:not(.in) .fk{opacity:0;transform:translateX(16px)}
.fk{transition:opacity .6s ease calc(.5s + var(--i)*.18s),transform .6s ease calc(.5s + var(--i)*.18s)}
.door-main rect{animation:glow 2.6s ease-in-out infinite}
@keyframes glow{0%,100%{filter:drop-shadow(0 0 0 rgba(27,95,196,0))}50%{filter:drop-shadow(0 0 9px rgba(27,95,196,.5))}}

/* ---------- Sobre: de um site a um canal conectado ---------- */
.sat-l{transition-delay:calc(.5s + var(--i)*.3s)}
.js .rv:not(.in) .sat{opacity:0}
.sat{transition:opacity .6s ease calc(.7s + var(--i)*.3s)}

/* ---------- Chat (contato) ---------- */
.bub{animation:bub 9s ease-in-out infinite}
.bub.b2{animation-delay:1.2s}.bub.b3{animation-delay:2.6s}.bub.b4{animation-delay:4.2s}
@keyframes bub{0%{opacity:0;transform:translateY(12px)}6%,78%{opacity:1;transform:none}90%,100%{opacity:0;transform:none}}
.dotty{fill:#e2b05a;animation:blink 1.2s ease-in-out infinite}
.dotty.d2{animation-delay:.2s}.dotty.d3{animation-delay:.4s}
@keyframes blink{0%,100%{opacity:.3}50%{opacity:1}}

/* ---------- 404 ---------- */
.pl-l{animation:plugl 3.4s ease-in-out infinite}
.pl-r{animation:plugr 3.4s ease-in-out infinite}
@keyframes plugl{0%,100%{transform:translateX(0)}50%{transform:translateX(14px)}}
@keyframes plugr{0%,100%{transform:translateX(0)}50%{transform:translateX(-14px)}}
.spark{animation:spark 3.4s ease-in-out infinite}
@keyframes spark{0%,40%,100%{opacity:0}50%{opacity:1}}

/* ---------- Faixa final (CTA) ---------- */
.cta-band{position:relative;overflow:hidden}
.cta-band>.wrap{position:relative;z-index:1}
.cta-art{display:none;position:absolute;right:clamp(1rem,3vw,3rem);top:62%;transform:translateY(-50%);width:min(30vw,380px);pointer-events:none}
.cta-ln{fill:none;stroke:rgba(143,176,227,.55);stroke-width:2;stroke-dasharray:3 7;animation:vdash 1.6s linear infinite}
.cta-node{fill:rgba(47,167,122,.35);stroke:#6fd0a6;stroke-width:2}
.cta-ln.cta-am{stroke:rgba(243,180,74,.65)}
.cta-ck{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:1120px){.cta-art{display:block}.cta-band p{max-width:58ch}}

/* ---------- Esqueleto (conteúdos) ---------- */
.skel{display:grid;gap:.9rem;background:transparent;border:0;box-shadow:none;padding:0}
.sk-card{display:grid;grid-template-columns:104px 1fr;grid-template-rows:auto auto auto;gap:.55rem 1rem;align-items:center;padding:1rem;background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 24px rgba(12,35,64,.05)}
.sk-card:nth-child(2){margin-left:1.5rem}.sk-card:nth-child(3){margin-left:3rem}
.shimmer{display:block;border-radius:6px;background:linear-gradient(100deg,#e3eaf5 30%,#f4f7fc 50%,#e3eaf5 70%);background-size:220% 100%;animation:shim 1.9s linear infinite;animation-delay:calc(var(--i,0)*.25s)}
@keyframes shim{from{background-position:120% 0}to{background-position:-120% 0}}
.sk-img{grid-row:1/4;height:76px;border-radius:8px}
.sk-l1{height:13px;width:88%}.sk-l2{height:10px;width:68%}.sk-l3{height:10px;width:44%}

/* ---------- Perfis de acesso (fabricantes) ---------- */
.access .acc-top{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.access .acc-ic{width:30px;height:30px;color:var(--blue);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.access .acc-ctl{margin:0}
.access[data-p="1"] .acc-ctl button[aria-pressed="true"]{background:var(--amber)}
.access[data-p="2"] .acc-ctl button[aria-pressed="true"]{background:var(--green)}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin-top:1.1rem}
.tile{aspect-ratio:1.15;display:flex;align-items:center;justify-content:center;border:1px solid #c5d6ee;border-radius:10px;background:var(--tint);color:var(--blue);transition:opacity .4s,transform .4s,background .4s,filter .4s}
.tile .ti{width:42%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.access[data-p="1"] .tile{background:var(--amber-soft);border-color:var(--amber-edge);color:var(--amber-line)}
.access[data-p="2"] .tile{background:var(--green-soft);border-color:var(--green-edge);color:var(--green)}
.tile.off{opacity:.3;background:var(--bg);color:#9fb0c6;filter:grayscale(1);transform:scale(.94)}

/* ---------- Catálogo interativo (portal) ---------- */
.cat-search{display:flex;gap:.6rem;align-items:center;border:1.5px solid #9aa8b8;border-radius:8px;padding:.6rem .85rem;color:var(--muted);margin-bottom:.9rem;background:#fff;font-size:.95rem}
.cat-search .ico{width:20px;height:20px;color:var(--blue)}
.cat-search span::after{content:"";display:inline-block;width:1.5px;height:1em;background:var(--blue);margin-left:.15rem;vertical-align:-.15em;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.cat-ctl{border-radius:12px}
.pcs{list-style:none;margin:1rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:.7rem}
.pc{display:grid;grid-template-columns:42px 1fr;gap:.1rem .7rem;align-items:center;padding:.7rem;border:1px solid var(--line);border-radius:10px;background:var(--bg);transition:opacity .35s,transform .35s,filter .35s,border-color .35s}
.pc-img{grid-row:1/3;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:9px;background:var(--tint);color:var(--blue)}
.pc-img .ti{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pc b{font-size:.86rem;color:var(--navy);line-height:1.25;font-weight:600}
.pc small{color:var(--muted);font-size:.76rem;line-height:1.3;grid-column:2}
.pc.off{opacity:.22;transform:scale(.95);filter:grayscale(1)}
.pc:not(.off){border-color:#c5d6ee}
.pc.c-b .pc-img{background:var(--amber-soft);color:var(--amber-line)}
.pc.c-c .pc-img{background:var(--green-soft);color:var(--green)}

/* ---------- Mock do portal: animações ---------- */
.mock-row{animation:rowlit 7.2s ease-in-out infinite}
.mock-head+.mock-row{animation-delay:0s}
.mock-row:nth-of-type(3){animation-delay:1.6s}
.mock-row:nth-of-type(4){animation-delay:3.2s}
.mock-row:nth-of-type(5){animation-delay:4.8s}
@keyframes rowlit{0%,24%,100%{background:transparent}6%,18%{background:var(--tint)}}
.mock-btn{animation:btnpulse 3.2s ease-in-out infinite}
@keyframes btnpulse{0%,100%{box-shadow:0 0 0 0 rgba(27,95,196,0)}50%{box-shadow:0 0 0 7px rgba(27,95,196,.22)}}
.mock-cart .ico{animation:bump 7.2s ease-in-out infinite}
@keyframes bump{0%,5%,100%{transform:none}2.5%{transform:translateY(-3px) scale(1.15)}}

/* ---------- Pipes e sync: pacotes em movimento ---------- */
.pipe-arrow{position:relative;overflow:visible}
.pipe-arrow::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--blue);opacity:0;animation:pipex 1.9s ease-in-out infinite}
.pipe>.pipe-arrow:nth-of-type(2)::after{animation-delay:.9s;background:var(--green-bright)}
@keyframes pipex{0%{transform:translateX(-26px);opacity:0}25%,75%{opacity:1}100%{transform:translateX(26px);opacity:0}}
@keyframes pipey{0%{transform:translateY(-16px);opacity:0}25%,75%{opacity:1}100%{transform:translateY(16px);opacity:0}}
@media (max-width:759px){.pipe-arrow::after{animation-name:pipey}}
.pipe-col li{animation:lit 7s ease-in-out infinite;animation-delay:calc(var(--c,0)*1.6s + var(--k,0)*.18s)}
.pipe-col:nth-child(1){--c:0}.pipe-col:nth-child(3){--c:1}.pipe-col:nth-child(5){--c:2}
.pipe-col li:nth-child(2){--k:1}.pipe-col li:nth-child(3){--k:2}.pipe-col li:nth-child(4){--k:3}.pipe-col li:nth-child(5){--k:4}.pipe-col li:nth-child(6){--k:5}
@keyframes lit{0%,26%,100%{box-shadow:0 0 0 0 rgba(27,95,196,0)}8%,18%{box-shadow:0 0 0 3px rgba(27,95,196,.2)}}
.sync-arrow{position:relative;overflow:visible}
.sync-arrow::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--blue);opacity:0;animation:syncx 2.2s ease-in-out infinite;animation-delay:calc(var(--r,0)*.35s)}
.sync-row:nth-child(2){--r:0}.sync-row:nth-child(3){--r:1}.sync-row:nth-child(4){--r:2}.sync-row:nth-child(5){--r:3}.sync-row:nth-child(6){--r:4}
.sync-row:nth-child(3) .sync-arrow::after{background:var(--amber-line)}
.sync-row:nth-child(5) .sync-arrow::after{background:var(--green-bright)}
@keyframes syncx{0%{transform:translateX(-16px);opacity:0}20%,80%{opacity:1}100%{transform:translateX(16px);opacity:0}}
.pill-b{transition:transform .3s}
.sync-row:hover .pill-b{transform:translateX(3px)}

/* ---------- Formulário: progresso ---------- */
.fprog{height:6px;border-radius:99px;background:var(--tint);overflow:hidden;border:1px solid #d3dff0}
.fprog span{display:block;height:100%;width:100%;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .4s ease;border-radius:99px}
.field input,.field select,.field textarea{transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(27,95,196,.18);outline:none}

/* ---------- Responsivo ---------- */
@media (max-width:979px){
  .head-art{max-width:20rem}
  .head-art svg{max-height:200px}
  .hero-viz{justify-self:stretch;max-width:none}
}
@media (max-width:560px){
  .sw-ctl{border-radius:14px;width:100%}
  .sw-ctl button{flex:1 1 100%;text-align:left}
  .access .acc-ctl button{flex:1 1 auto;text-align:center}
  .tiles{grid-template-columns:repeat(4,1fr);gap:.45rem}
  .sk-card:nth-child(2),.sk-card:nth-child(3){margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  .js .rv:not(.in){opacity:1;transform:none}
  [data-v] .draw{stroke-dashoffset:0!important}
  .js .rv:not(.in) .stack .pl,.js .rv:not(.in) .modules .tl,.js .rv:not(.in) .fk,.js .rv:not(.in) .sat{opacity:1;transform:none}
  .vflow li:last-of-type::before{display:none}
.vflow li:not(:last-of-type)::after{transform:scaleY(1)}
}

/* =====================================================================
   V2: perfil de cliente ideal, casos reais, priorização
   ===================================================================== */
.icp{border:0;margin:0;padding:0;min-width:0}
.icp-legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.icp-list{list-style:none;margin:0 0 1rem;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}
.icp-it{display:grid;grid-template-columns:auto 1fr;gap:.2rem .85rem;align-items:start;position:relative;background:var(--paper);border:1.5px solid var(--line);border-radius:12px;padding:1rem 1rem 1rem 1rem;cursor:pointer;height:100%;transition:border-color .25s,background .25s,box-shadow .25s,transform .25s}
.icp-it:hover{border-color:#9db9e2;transform:translateY(-2px)}
.icp-it input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.icp-it:focus-within{outline:3px solid rgba(27,95,196,.35);outline-offset:2px}
.icp-ic{grid-row:1/3;display:inline-flex;align-items:center;justify-content:center;width:2.6rem;height:2.6rem;border-radius:10px;background:var(--tint);color:var(--blue);transition:background .25s,color .25s}
.icp-ic .ico{width:1.3rem;height:1.3rem}
.icp-tx{display:flex;flex-direction:column;gap:.2rem;padding-right:1.7rem}
.icp-tx strong{color:var(--navy);font-size:1rem;line-height:1.3}
.icp-tx small{color:var(--muted);font-size:.88rem;line-height:1.45}
.icp-ck{position:absolute;top:.75rem;right:.75rem;width:1.35rem;height:1.35rem;border-radius:50%;border:1.5px solid #b9c7da;background:#fff;display:flex;align-items:center;justify-content:center;color:#fff;transition:background .25s,border-color .25s,transform .35s cubic-bezier(.3,1.7,.5,1)}
.icp-ck .ico{width:.85rem;height:.85rem;stroke-width:3;opacity:0;transition:opacity .2s}
.icp-it:has(input:checked){border-color:var(--green-bright);background:linear-gradient(180deg,#fff,var(--green-soft))}
.icp-it:has(input:checked) .icp-ck{background:var(--green);border-color:var(--green);transform:scale(1.08)}
.icp-it:has(input:checked) .icp-ck .ico{opacity:1}
.icp-it:has(input:checked) .icp-ic{background:var(--green);color:#fff}
.icp-res{display:none;align-items:center;gap:1rem;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:.9rem 1.1rem;margin-bottom:1rem}
.js .icp-res{display:flex}
.icp-meter{display:flex;gap:.3rem;flex:none}
.icp-meter i{display:block;width:2rem;height:.55rem;border-radius:99px;background:var(--line);transition:background .3s,transform .3s}
.icp[data-n="1"] .icp-meter i:nth-child(-n+1),.icp[data-n="2"] .icp-meter i:nth-child(-n+2){background:var(--amber-line)}
.icp[data-n="3"] .icp-meter i:nth-child(-n+3){background:var(--blue)}
.icp[data-n="4"] .icp-meter i{background:var(--green-bright);transform:scaleY(1.25)}
.icp-msg{margin:0;color:var(--navy);font-weight:500;line-height:1.45}
@media (max-width:700px){.icp-list{grid-template-columns:1fr}.icp-res{flex-direction:column;align-items:flex-start}}

.cases{display:grid;gap:1.25rem;margin:1.5rem 0}
.case{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:1.4rem 1.5rem;box-shadow:0 10px 26px rgba(12,35,64,.05);transition:transform .3s,box-shadow .3s}
.case:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(12,35,64,.09)}
.case-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.8rem}
.tag{font:600 .72rem var(--sans);letter-spacing:.04em;text-transform:uppercase;padding:.25rem .65rem;border-radius:99px;background:var(--tint);color:var(--blue-dark);border:1px solid #c5d6ee}
.tag.t-amber{background:var(--amber-soft);color:var(--amber);border-color:var(--amber-edge)}
.tag.t-green{background:var(--green-soft);color:var(--green);border-color:var(--green-edge)}
.case h3{margin:.1rem 0 .15rem}
.case-who{color:var(--muted);font-size:.95rem;margin:0 0 1rem}
.case-flow{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0 0 1.1rem;padding:.85rem;background:var(--bg);border:1px dashed #c5d6ee;border-radius:10px}
.fc{font:600 .82rem var(--sans);color:var(--navy);background:var(--paper);border:1px solid #c5d6ee;border-radius:8px;padding:.4rem .7rem}
.fc-out{background:var(--green-soft);border-color:var(--green-edge);color:var(--green)}
.fa{position:relative;display:inline-flex;color:var(--blue);width:1.6rem}
.fa .ico{width:1.6rem;height:1.6rem}
.fa::after{content:"";position:absolute;left:0;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--green-bright);opacity:0;animation:syncx 2s ease-in-out infinite}
.case dl{display:grid;grid-template-columns:minmax(9rem,13rem) 1fr;gap:.65rem 1.25rem;margin:0}
.case dt{font-weight:600;color:var(--navy);font-size:.93rem}
.case dd{margin:0;color:var(--graphite)}
@media (max-width:640px){.case dl{grid-template-columns:1fr;gap:.15rem}.case dd{margin-bottom:.7rem}.case{padding:1.1rem}}

/* priorização */
.priority .dt{transform-box:fill-box;transform-origin:center;transition:transform .6s cubic-bezier(.3,1.5,.5,1) calc(var(--i)*.25s + .3s),opacity .4s ease calc(var(--i)*.25s + .3s)}
.js .rv:not(.in) .priority .dt{opacity:0;transform:scale(.2)}
.quad{fill:rgba(47,167,122,.13);stroke:var(--green-edge);stroke-width:1.5}
.dot-g{fill:var(--green)}.dot-b{fill:var(--blue)}.dot-a{fill:var(--amber-line)}