/* Soluções prontas: o mesmo bloco da home (cards + mini-cenas), para usar em outras páginas.
   Gerado a partir de home.css; a classe .prx substitui o escopo .hm. */
.prx{--bg-2:#0E0E11;--surface:#141419;--surface-2:#191A20;--text:#F4F5F6;--dim:#9EA0A7;--line:rgba(255,255,255,.08);--accent:#2F6BFF;--accent-2:#6C99FF;--accent-soft:rgba(47,107,255,.13);--ease:cubic-bezier(.22,1,.36,1);--disp:"General Sans","Satoshi",-apple-system,sans-serif;--sans:"Satoshi",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.prx{position:relative;padding:clamp(80px,10vw,138px) 0;background:var(--bg-2);color:var(--text)}
.prx:before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 80% 0%,rgba(47,107,255,.14),transparent 70%);pointer-events:none}
.prx svg.i{width:1em;height:1em;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;display:block}
.prx .pr-head{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,72px);align-items:end;margin-bottom:clamp(36px,4.5vw,56px)}
.prx .pr-head .eyebrow{margin-left:0;margin-right:0}
.prx .pr-head .kicker{max-width:16ch;color:#fff}
.prx .pr-head .body{max-width:52ch;padding-bottom:6px;color:var(--dim)}
@media (max-width:900px){.prx .pr-head{grid-template-columns:1fr;gap:14px}.prx .pr-head .kicker{max-width:none}.prx .pr-head .body{padding-bottom:0}}
.prx .ucard-bar{display:block;height:24px;background:#F2F4F8;border-bottom:1px solid rgba(11,25,45,.08);position:relative}
.prx .ucard-bar:before{content:"";position:absolute;left:11px;top:9px;width:6px;height:6px;border-radius:50%;background:#CBD2DD;box-shadow:10px 0 0 #CBD2DD,20px 0 0 #CBD2DD}
.prx .ucard-bar:after{content:"";position:absolute;left:50%;top:7px;width:34%;height:10px;transform:translateX(-50%);border-radius:5px;background:#E4E8EF}
.prx .pr-grid{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(150px,auto);gap:14px}
.prx .pr-tile,.prx .pr-feat{display:flex;flex-direction:column;border-radius:18px;background:var(--surface);border:1px solid var(--line);color:var(--text);text-decoration:none;transition:border-color .25s,transform .35s var(--ease),background .25s}
.prx .pr-tile:hover,.prx .pr-feat:hover{border-color:rgba(108,153,255,.45);transform:translateY(-3px);background:var(--surface-2)}
.prx .pr-tile{padding:clamp(18px,1.8vw,24px);gap:8px;justify-content:flex-end}
.prx .pr-tile .pr-ic{margin-bottom:auto}
.prx .pr-tile b{font-family:var(--disp);font-weight:500;font-size:clamp(16px,1.25vw,19px);line-height:1.2}
.prx .pr-tile i{font-style:normal;font-size:13px;color:var(--dim)}
.prx .pr-ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:var(--accent-2);background:var(--accent-soft);border:1px solid rgba(108,153,255,.28)}
.prx .pr-ic .i{width:19px;height:19px}
.prx .pr-ic-lg{width:52px;height:52px;border-radius:14px}
.prx .pr-ic-lg .i{width:25px;height:25px}
.prx .pr-feat{grid-column:span 2;grid-row:span 2;padding:clamp(24px,2.6vw,36px);gap:10px;background:linear-gradient(160deg,#182338,#0f1526);border-color:rgba(108,153,255,.32);overflow:hidden}
.prx .pr-feat:before{content:"";position:absolute;right:-20%;top:-30%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(47,107,255,.35),transparent 65%);pointer-events:none}
.prx .pr-feat{position:relative}
.prx .pr-feat>*{position:relative}
.prx .pr-feat-tag{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2);padding:6px 11px;border-radius:999px;background:var(--accent-soft);border:1px solid rgba(108,153,255,.3);margin-bottom:8px}
.prx .pr-feat b{font-family:var(--disp);font-weight:500;font-size:clamp(24px,2.4vw,34px);line-height:1.1;letter-spacing:-.01em;margin-top:6px}
.prx .pr-feat em{font-style:normal;font-size:14px;font-weight:600;color:var(--accent-2)}
.prx .pr-feat p{margin-top:8px;font-size:15px;line-height:1.6;color:var(--dim);max-width:52ch}
.prx .pr-cta{margin-top:auto;padding-top:18px;display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:14.5px;color:#fff}
.prx .pr-cta .i{width:15px;height:15px;color:var(--accent-2);transition:transform .25s var(--ease)}
.prx .pr-feat:hover .pr-cta .i{transform:translateX(4px)}
.prx .pr-foot{position:relative;margin-top:22px;font-size:14px;color:var(--dim);max-width:70ch}
.prx .pr-foot a{color:var(--accent-2);font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media (max-width:1000px){.prx .pr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.prx .pr-feat{grid-column:span 2;grid-row:auto}}
@media (max-width:560px){.prx .pr-grid{grid-template-columns:1fr;grid-auto-rows:auto}.prx .pr-feat{grid-column:auto}.prx .pr-tile{display:grid;grid-template-columns:40px 1fr;column-gap:14px;row-gap:3px;align-items:center;padding:16px 18px}.prx .pr-tile .pr-ic{grid-row:1/span 2;margin:0}.prx .pr-tile b{font-size:16px}}

/* tela real do Vendor (comparação de ofertas) encenada no card em destaque */
.prx .pr-feat.com-tela{min-height:440px}
.prx .pr-feat.com-tela p{max-width:27ch}
.prx .pr-shot{position:absolute;right:-3%;bottom:-3%;width:56%;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 40px 90px -40px rgba(0,0,0,.8);border:1px solid rgba(255,255,255,.14);transition:transform .6s var(--ease)}
.prx .pr-shot img{display:block;width:100%;height:auto}
.prx .pr-feat:hover .pr-shot{transform:translate(-6px,-6px)}
@media (max-width:1000px){.prx .pr-feat.com-tela{min-height:0;padding-bottom:46%}.prx .pr-shot{width:60%;right:-4%;bottom:-4%}}
@media (max-width:560px){.prx .pr-feat.com-tela{padding-bottom:60%}.prx .pr-shot{width:80%}}
.prx .pr-tile-info{cursor:default}
.prx .pr-tile-info:hover{transform:none;border-color:var(--line);background:var(--surface)}
/* ===== soluções prontas: mini-cenas animadas nos cards informativos (10/10) ===== */
.prx .pr-tile-info{position:relative;overflow:hidden}
.prx .pr-tile-info .pa{position:absolute;top:clamp(18px,1.8vw,24px);right:clamp(18px,1.8vw,24px);width:calc(100% - 2*clamp(18px,1.8vw,24px) - 54px);height:clamp(78px,7.6vw,104px);overflow:visible;pointer-events:none}
.prx .pa *{transform-box:fill-box}
.prx .pa text{font-family:var(--sans);font-size:8.5px;font-weight:600;letter-spacing:.02em;fill:#8C8F98}
.prx .pa .pa-chip rect,.prx .pa .pa-cols rect{fill:rgba(255,255,255,.025);stroke:rgba(255,255,255,.08)}
.prx .pa .pa-chip rect{fill:#1C1D24}
.prx .pa .pa-chip circle{fill:rgba(108,153,255,.32)}
.prx .pa path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.prx .pa .pa-chip path{stroke:rgba(255,255,255,.16);stroke-width:3}
/* o elemento que conta a história: azul da marca */
.prx .pa .pa-move rect{fill:rgba(47,107,255,.2);stroke:#6C99FF}
.prx .pa .pa-move circle{fill:#6C99FF}
.prx .pa .pa-move path{stroke:rgba(255,255,255,.6);stroke-width:3}
.prx .pa .pa-num text{fill:#6C99FF;font-weight:700}
/* animações: paradas até o card estar na tela */
.prx .pa *{animation-duration:8s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.65,0,.35,1);animation-play-state:paused}
.prx .pr-grid.pa-on .pa *{animation-play-state:running}
.prx .pr-tile-info.d2 .pa *{animation-delay:-2s}
.prx .pr-tile-info.d3 .pa *{animation-delay:-4s}
.prx .pr-tile-info.d4 .pa *{animation-delay:-6s}
/* CRM: o cartão anda Lead > Proposta > Ganho e o contador sobe */
.prx .pa-crm .pa-move{animation-name:pa-crm}
@keyframes pa-crm{0%{transform:translate(0,0);opacity:0}6%,18%{transform:translate(0,0);opacity:1}30%,46%{transform:translate(69px,0);opacity:1}58%,88%{transform:translate(138px,0);opacity:1}96%,100%{transform:translate(138px,0);opacity:0}}
.prx .pa-crm .pa-n1{animation-name:pa-n1}.prx .pa-crm .pa-n2{animation-name:pa-n2}
@keyframes pa-n1{0%,57%{opacity:1}59%,94%{opacity:0}97%,100%{opacity:1}}
@keyframes pa-n2{0%,57%{opacity:0}59%,94%{opacity:1}97%,100%{opacity:0}}
.prx .pa-crm .pa-ganho{animation-name:pa-ganho}
@keyframes pa-ganho{0%,55%{stroke:rgba(255,255,255,.08);fill:rgba(255,255,255,.025)}60%{stroke:rgba(108,153,255,.7);fill:rgba(47,107,255,.12)}75%,100%{stroke:rgba(255,255,255,.08);fill:rgba(255,255,255,.025)}}
/* Documentos: escreve, vira v2, recebe o selo e cada passo entra na trilha */
.prx .pa-doc .pa-page{fill:rgba(255,255,255,.03);stroke:rgba(255,255,255,.1)}
.prx .pa-doc .pa-ver rect{fill:rgba(47,107,255,.16);stroke:rgba(108,153,255,.5)}
.prx .pa-doc .pa-ver text{fill:#9DBBFF;font-size:7.5px}
.prx .pa-doc .pa-lines path{stroke:rgba(255,255,255,.2);stroke-width:3;stroke-dasharray:60;stroke-dashoffset:60;animation-name:pa-linha}
.prx .pa-doc .pa-lines path:nth-child(2){animation-name:pa-linha2}.prx .pa-doc .pa-lines path:nth-child(3){animation-name:pa-linha3}.prx .pa-doc .pa-lines path:nth-child(4){animation-name:pa-linha4}.prx .pa-doc .pa-lines path:nth-child(5){animation-name:pa-linha5}
@keyframes pa-linha{0%,2%{stroke-dashoffset:60}9%,92%{stroke-dashoffset:0}98%,100%{stroke-dashoffset:60}}
@keyframes pa-linha2{0%,7%{stroke-dashoffset:60}14%,92%{stroke-dashoffset:0}98%,100%{stroke-dashoffset:60}}
@keyframes pa-linha3{0%,12%{stroke-dashoffset:60}19%,92%{stroke-dashoffset:0}98%,100%{stroke-dashoffset:60}}
@keyframes pa-linha4{0%,17%{stroke-dashoffset:60}24%,92%{stroke-dashoffset:0}98%,100%{stroke-dashoffset:60}}
@keyframes pa-linha5{0%,40%{stroke-dashoffset:60}47%,92%{stroke-dashoffset:0}98%,100%{stroke-dashoffset:60}}
.prx .pa-doc .pa-v1{animation-name:pa-v1}.prx .pa-doc .pa-v2{animation-name:pa-v2}
@keyframes pa-v1{0%,38%{opacity:1}40%,95%{opacity:0}98%,100%{opacity:1}}
@keyframes pa-v2{0%,38%{opacity:0}40%,95%{opacity:1}98%,100%{opacity:0}}
.prx .pa-doc .pa-stamp circle{fill:rgba(34,198,126,.14);stroke:#22C67E;stroke-width:1.6}
.prx .pa-doc .pa-stamp path{stroke:#22C67E;stroke-width:2.2}
.prx .pa-doc .pa-stamp{transform-origin:center;animation-name:pa-selo}
@keyframes pa-selo{0%,58%{opacity:0;transform:scale(1.6) rotate(-14deg)}63%{opacity:1;transform:scale(.94) rotate(-8deg)}66%,92%{opacity:1;transform:scale(1) rotate(-8deg)}97%,100%{opacity:0;transform:scale(1) rotate(-8deg)}}
.prx .pa-doc .pa-rail{stroke:rgba(255,255,255,.1);stroke-width:1.5}
.prx .pa-doc .pa-row circle{fill:#141419;stroke:#6C99FF;stroke-width:2}
.prx .pa-doc .pa-row path{stroke:rgba(255,255,255,.14);stroke-width:3}
.prx .pa-doc .pa-row text{fill:#C9CBD1}
.prx .pa-doc .pa-r3 circle{stroke:#22C67E}
.prx .pa-doc .pa-row{opacity:.18;animation-name:pa-r1}.prx .pa-doc .pa-r2{animation-name:pa-r2}.prx .pa-doc .pa-r3{animation-name:pa-r3}
@keyframes pa-r1{0%,24%{opacity:.18;transform:translateX(-4px)}28%,92%{opacity:1;transform:none}98%,100%{opacity:.18}}
@keyframes pa-r2{0%,41%{opacity:.18;transform:translateX(-4px)}45%,92%{opacity:1;transform:none}98%,100%{opacity:.18}}
@keyframes pa-r3{0%,62%{opacity:.18;transform:translateX(-4px)}66%,92%{opacity:1;transform:none}98%,100%{opacity:.18}}
/* Estoque: o item cai abaixo do mínimo, a reposição entra e ele volta a encher */
.prx .pa-est .pa-base{stroke:rgba(255,255,255,.12);stroke-width:1}
.prx .pa-est .pa-bars rect{fill:rgba(255,255,255,.07)}
.prx .pa-est .pa-min{stroke:rgba(245,181,68,.55);stroke-width:1;stroke-dasharray:3 4}
.prx .pa-est .pa-mintx{fill:#C9A25A;font-size:7.5px}
.prx .pa-est .pa-bar{fill:#6C99FF;transform-origin:50% 100%;animation-name:pa-barra}
@keyframes pa-barra{0%,6%{transform:scaleY(1);fill:#6C99FF}36%{transform:scaleY(.3);fill:#6C99FF}40%,58%{transform:scaleY(.3);fill:#F5B544}74%,100%{transform:scaleY(1);fill:#6C99FF}}
.prx .pa-est .pa-rep rect{fill:rgba(47,107,255,.2);stroke:#6C99FF}
.prx .pa-est .pa-rep path{stroke:#9DBBFF;stroke-width:1.4}
.prx .pa-est .pa-rep text{fill:#DCE6FF;font-size:7.5px}
.prx .pa-est .pa-rep{animation-name:pa-rep}
@keyframes pa-rep{0%,42%{opacity:0;transform:translate(30px,0)}52%,68%{opacity:1;transform:translate(0,0)}78%,100%{opacity:0;transform:translate(0,6px)}}
/* RH: o pedido sobe da pessoa ao gestor e volta aprovado */
.prx .pa-rh .pa-tree{stroke:rgba(255,255,255,.12);stroke-width:1.5}
.prx .pa-rh .pa-gest{fill:rgba(47,107,255,.14);stroke:rgba(108,153,255,.55);stroke-width:1.5;transform-origin:center;animation-name:pa-gest}
@keyframes pa-gest{0%,38%{transform:scale(1);stroke:rgba(108,153,255,.55)}44%{transform:scale(1.14);stroke:#6C99FF}52%,100%{transform:scale(1);stroke:rgba(108,153,255,.55)}}
.prx .pa-rh .pa-pess circle{fill:rgba(255,255,255,.04);stroke:rgba(255,255,255,.14);stroke-width:1.5}
.prx .pa-rh .pa-head,.prx .pa-rh .pa-head *{fill:none;stroke:#8C8F98;stroke-width:1.4}
.prx .pa-rh circle.pa-head{stroke:#9DBBFF}.prx .pa-rh path.pa-head{stroke:#9DBBFF}
.prx .pa-rh .pa-okring{fill:none;stroke:#22C67E;stroke-width:2;opacity:0;animation-name:pa-okring}
@keyframes pa-okring{0%,80%{opacity:0}84%,93%{opacity:1}98%,100%{opacity:0}}
.prx .pa-rh .pa-req rect{fill:#1A2540;stroke:#6C99FF}
.prx .pa-rh .pa-req text{fill:#DCE6FF;font-size:7.5px}
.prx .pa-rh .pa-ok rect{fill:#10261D;stroke:#22C67E}
.prx .pa-rh .pa-ok path{stroke:#22C67E;stroke-width:1.6}
.prx .pa-rh .pa-ok text{fill:#BFF0D8;font-size:7.5px}
.prx .pa-rh .pa-req,.prx .pa-rh .pa-ok{transform-box:view-box}
.prx .pa-rh .pa-req{animation-name:pa-req}
@keyframes pa-req{0%{transform:translate(40px,64px);opacity:0}6%,12%{transform:translate(40px,64px);opacity:1}22%{transform:translate(40px,48px);opacity:1}32%{transform:translate(100px,48px);opacity:1}40%{transform:translate(100px,40px);opacity:1}46%,100%{transform:translate(100px,40px);opacity:0}}
.prx .pa-rh .pa-ok{animation-name:pa-ok}
@keyframes pa-ok{0%,46%{transform:translate(100px,40px);opacity:0}52%{transform:translate(100px,40px);opacity:1}60%{transform:translate(100px,48px)}70%{transform:translate(40px,48px)}78%,90%{transform:translate(40px,64px);opacity:1}96%,100%{transform:translate(40px,64px);opacity:0}}
/* tablet: os cards ficam baixos, dá mais altura para a cena; celular: card compacto, sem cena */
@media (max-width:1000px){.prx .pr-tile-info{min-height:210px}.prx .pr-tile-info .pa{height:96px}}
@media (max-width:560px){.prx .pr-tile-info{min-height:0}.prx .pr-tile-info .pa{display:none}}
@media (prefers-reduced-motion:reduce){.prx .pa *{animation:none!important}.prx .pa-doc .pa-lines path{stroke-dashoffset:0}.prx .pa-doc .pa-row{opacity:1}.prx .pa-crm .pa-n2,.prx .pa-doc .pa-v2,.prx .pa-est .pa-rep,.prx .pa-rh .pa-ok,.prx .pa-rh .pa-okring{opacity:0}.prx .pa-rh .pa-req{transform:translate(40px,64px)}.prx .pa-doc .pa-stamp{transform:rotate(-8deg)}}
@media (min-width:1001px) and (max-width:1399px){.prx .pr-shot{width:46%}}