/* ================= Deyel · sistema de páginas do site ================= */
:root{
 --ink:#0B0B0C;--ink-2:#101116;--ink-3:#171921;
 --paper:#FFFFFF;--mist:#F2F4F8;
 --text:#0E1B33;--dim:#54637C;--faint:#636E7E;
 --line:rgba(11,25,45,.10);
 --wire:rgba(255,255,255,.09);--wire-2:rgba(255,255,255,.16);
 --accent:#2F6BFF;--accent-lo:#1B49C8;--accent-hi:#7FA5FF;
 --ok:#12A66A;--ok-hi:#3ad19a;--bad:#D42340;--bad-hi:#FF8593;--warn:#C98A12;
 /* versoes escuras: os tons vivos nao passam 4.5:1 em fundo claro */
 --ok-lo:#0A7047;--bad-lo:#A8182F;--warn-lo:#8A5E08;
 --sans:"Satoshi",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 --disp:"General Sans","Satoshi",-apple-system,sans-serif;
 --maxw:1480px;--pad:32px;
 /* superficie de card: precisa contrastar com o fundo da SECAO, nao ser sempre branca */
 --surf:#FFFFFF;--surf-b:rgba(11,25,45,.10);
 --e:cubic-bezier(.22,1,.36,1)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
.w{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.sec{position:relative;padding:clamp(72px,9vw,132px) 0}
.s-paper{background:var(--paper);--surf:#F4F6FA;--surf-b:rgba(11,25,45,.11)}
.s-mist{background:var(--mist);--surf:#FFFFFF;--surf-b:rgba(11,25,45,.09)}
.s-deep{background:var(--ink-2);color:#fff;--surf:rgba(255,255,255,.038);--surf-b:rgba(255,255,255,.10)}
.s-dark{background:var(--ink);color:#fff;--surf:rgba(255,255,255,.038);--surf-b:rgba(255,255,255,.10)}

/* --faint escuro serve fundo claro; em fundo escuro ele volta a clarear,
   pra mesma variavel passar contraste nos dois contextos */
.s-deep,.s-dark,.phero,.painel{--faint:#9AA3B2}

/* tipografia */
.eyebrow{display:flex;align-items:center;gap:11px;font-size:11px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:var(--accent-lo);margin-bottom:18px}
.eyebrow:before{content:"";width:26px;height:1px;background:currentColor;opacity:.75}
.s-deep .eyebrow,.s-dark .eyebrow,.phero .eyebrow{color:var(--accent-hi)}
h1,h2,h3{margin:0;font-family:var(--disp);font-weight:500;line-height:1.08;letter-spacing:-.015em}
.big{font-size:clamp(32px,4.4vw,54px);text-wrap:balance}
.kicker{font-size:clamp(26px,3.3vw,42px);text-wrap:balance}
.body{font-size:17px;line-height:1.62;color:var(--dim);max-width:64ch}
.s-deep .body,.s-dark .body,.phero .body{color:#9AA3B2}
p{margin:0}
em{font-style:normal;color:var(--accent-lo)}
.s-deep em,.s-dark em,.phero em{color:var(--accent-hi)}

/* reveal */
.rvl{opacity:0;transform:translateY(16px)}
.rvl.go{opacity:1;transform:none;transition:opacity .7s var(--e),transform .7s var(--e)}
.d1.go{transition-delay:.08s}.d2.go{transition-delay:.16s}.d3.go{transition-delay:.24s}.d4.go{transition-delay:.32s}.d5.go{transition-delay:.4s}
@media(prefers-reduced-motion:reduce){.rvl{opacity:1;transform:none}}

/* botões */
.cta{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#fff;font-weight:600;font-size:14.5px;letter-spacing:.02em;padding:14px 24px;border-radius:10px;border:1px solid var(--accent);box-shadow:0 12px 34px -14px rgba(47,107,255,.55);transition:background .25s,transform .12s;cursor:pointer}
.cta:hover{background:var(--accent-lo);border-color:var(--accent-lo)}
.cta:active{transform:translateY(1px)}
.cta svg{flex:0 0 auto;transition:transform .25s var(--e)}
.cta:hover svg{transform:translateX(3px)}
.cta-ghost{background:transparent;color:var(--text);border-color:var(--line);box-shadow:none}
.cta-ghost:hover{background:var(--mist)}
.s-deep .cta-ghost,.s-dark .cta-ghost,.phero .cta-ghost{color:#fff;border-color:var(--wire-2)}
.s-deep .cta-ghost:hover,.s-dark .cta-ghost:hover,.phero .cta-ghost:hover{background:rgba(255,255,255,.06)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent-hi);outline-offset:3px}

/* ===== header do site (6 itens) ===== */
.nav{position:sticky;top:0;z-index:80;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.nav.on{background:rgba(11,11,12,.84);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav-in{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:70px;gap:20px}
.brand{display:inline-flex;align-items:center}
.brand img{height:24px;width:auto}
.nav-menu{display:flex;gap:4px;justify-content:center}
.nav-menu a{font-size:14px;font-weight:500;color:#9EA0A7;padding:8px 13px;border-radius:8px;white-space:nowrap;transition:color .2s,background .2s}
.nav-menu a:hover{color:#F4F5F6;background:rgba(255,255,255,.05)}
.nav-menu a[aria-current]{color:#F4F5F6;background:rgba(47,107,255,.15)}
.nav-end{display:flex;justify-content:flex-end;align-items:center;gap:12px}
.nav-wa{flex:0 0 auto;width:38px;height:38px;border-radius:9px;border:1px solid rgba(255,255,255,.15);display:grid;place-items:center;color:#F4F5F6;transition:border-color .2s,color .2s}
.nav-wa:hover{border-color:var(--accent);color:var(--accent)}
.nav-wa svg{width:18px;height:18px}
.nav .btn-solid{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:14px;padding:12px 20px;border-radius:9px;border:1px solid var(--accent);background:var(--accent);color:#fff;box-shadow:0 8px 30px -10px rgba(47,107,255,.55);transition:background .25s}
.nav .btn-solid:hover{background:var(--accent-lo);border-color:var(--accent-lo)}
.nav .btn-solid svg{width:15px;height:15px;transition:transform .25s var(--e)}
.nav .btn-solid:hover svg{transform:translateX(3px)}
.menu-btn{display:none;background:none;border:0;padding:0;color:#F4F5F6;cursor:pointer}
.menu-btn svg{width:26px;height:26px;stroke:currentColor;stroke-width:1.6;fill:none}
.menu-btn[aria-expanded="true"]{color:var(--accent)}
.nav-mob{display:none}
/* o header vive sobre o hero escuro; quando a pagina abre em fundo claro, garante contraste */
.nav.on .nav-menu a{color:#9EA0A7}
@media(max-width:1000px){
 .w-nav{padding:0 20px}
 .nav-menu{display:none}
 .nav-in{grid-template-columns:1fr auto}
 .menu-btn{display:grid;place-items:center}
 .nav-mob.on{display:grid;position:absolute;top:100%;left:0;right:0;background:#0E0E11;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.15);padding:6px 20px 14px;max-height:84vh;overflow-y:auto;overscroll-behavior:contain;z-index:90}
 .nav-mob a{padding:13px 2px;font-size:15px;font-weight:500;color:#F4F5F6;border-bottom:1px solid rgba(255,255,255,.08)}
 .nav-mob a:last-child{border-bottom:0}
 .nav-mob b{display:block;padding:15px 2px 7px;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#63656C}
}
@media(max-width:560px){.nav .btn-solid{padding:11px 14px;font-size:13px}.nav-wa{width:36px;height:36px}}
.w-nav{max-width:1480px;margin:0 auto;padding:0 32px}

/* ===== hero das páginas internas ===== */
.phero{position:relative;background:var(--ink);color:#fff;overflow:clip;padding:clamp(48px,6vw,86px) 0 clamp(56px,6.5vw,90px);margin-top:-70px;padding-top:calc(clamp(48px,6vw,86px) + 70px)}
.phero:before{content:"";position:absolute;left:-6%;top:-30%;width:64%;height:120%;background:radial-gradient(44% 42% at 50% 50%,rgba(47,107,255,.2),transparent 72%);filter:blur(26px);pointer-events:none}
.phero-in{position:relative;z-index:2;max-width:74ch}
.phero h1{color:#fff}
.phero .body{color:#AEB6C4;margin-top:20px;max-width:60ch}
.phero-act{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.crumbs{display:flex;gap:8px;align-items:center;font-size:12.5px;color:#767E8C;margin-bottom:20px}
.crumbs a{color:#8E96A5}.crumbs a:hover{color:#fff}
.crumbs span{opacity:.5}

/* grade de cards */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:960px){.grid3,.grid4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid2,.grid3,.grid4{grid-template-columns:1fr}}
.card{background:var(--surf);border:1px solid var(--surf-b);border-radius:16px;padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column;gap:9px}
.card .ic{width:42px;height:42px;border-radius:11px;background:rgba(47,107,255,.09);color:var(--accent-lo);display:grid;place-items:center;margin-bottom:6px}
.s-deep .card .ic,.s-dark .card .ic{background:rgba(47,107,255,.18);color:var(--accent-hi)}
.card .ic svg{width:20px;height:20px}
.card h3{font-size:18px;font-weight:600}
.card p{font-size:14.5px;color:var(--dim);line-height:1.58}
.s-deep .card p,.s-dark .card p{color:#9AA3B2}
.card .num{font-family:var(--disp);color:var(--accent-lo);font-size:13px;font-weight:600;letter-spacing:.1em}
.s-deep .card .num,.s-dark .card .num{color:var(--accent-hi)}

/* lista com check */
.checks{display:grid;gap:11px;margin-top:8px}
.checks li{list-style:none;display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;font-size:15px;color:var(--text);line-height:1.5}
.s-deep .checks li,.s-dark .checks li{color:#D7DBE2}
.checks .ck{width:24px;height:24px;border-radius:7px;background:rgba(18,166,106,.13);color:var(--ok);display:grid;place-items:center;margin-top:1px}
.checks .ck svg{width:13px;height:13px}
ul{margin:0;padding:0}

/* passos numerados */
.steps{display:grid;gap:12px;margin-top:8px}
.step{display:grid;grid-template-columns:48px 1fr;gap:18px;align-items:start;padding:clamp(18px,2.2vw,26px);border-radius:15px;background:var(--surf);border:1px solid var(--surf-b)}
.step-n{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;font-family:var(--disp);font-size:18px;font-weight:600;color:#fff;background:var(--accent)}
.step h3{font-size:18px;margin-bottom:6px}
.step p{font-size:14.5px;color:var(--dim);line-height:1.58}
.s-deep .step p,.s-dark .step p{color:#9AA3B2}
@media(max-width:560px){.step{grid-template-columns:1fr;gap:12px}.step-n{width:42px;height:42px}}

/* faixa CTA */
.band{margin-top:clamp(30px,3.6vw,46px);display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:22px 26px;border-radius:16px;background:var(--ink);color:#fff}
.band b{font-family:var(--disp);font-weight:500;font-size:clamp(17px,1.9vw,22px)}
.band span{font-size:13.5px;color:#8E96A5;display:block;margin-top:3px}
.band .cta{margin-left:auto}
@media(max-width:700px){.band .cta{margin-left:0;width:100%;justify-content:center}}

/* tabela / specs */
.wrapx{overflow-x:auto;border:1px solid var(--line);border-radius:14px}
table{border-collapse:collapse;width:100%;min-width:520px;background:var(--paper)}
th,td{text-align:left;padding:14px 20px;border-bottom:1px solid var(--line);font-size:14.5px}
th{font-family:var(--disp);font-weight:600;font-size:13px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;background:var(--mist)}
td b{font-weight:600}
tr:last-child td{border-bottom:0}
.specs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:820px){.specs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.specs{grid-template-columns:1fr}}
.spec{background:var(--surf);border:1px solid var(--surf-b);border-radius:13px;padding:20px 22px}
.spec b{display:block;font-family:var(--disp);font-weight:500;font-size:clamp(20px,2vw,26px);color:var(--text)}
.s-deep .spec b,.s-dark .spec b{color:#fff}
.spec span{font-size:12.5px;color:var(--faint);line-height:1.5;display:block;margin-top:6px}

/* rodapé */
.pe{background:var(--ink);color:#fff;padding:clamp(46px,5vw,68px) 0 26px}
.pe-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(24px,3vw,48px);padding-bottom:34px;border-bottom:1px solid var(--wire)}
.pe-grid>*{min-width:0}
.pe-b img{height:24px;width:auto;margin-bottom:15px}
.pe-b p{font-size:14px;color:#7D8593;line-height:1.6;max-width:34ch}
.fc b{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8E96A5;margin-bottom:14px}
.fc a{display:block;font-size:14px;color:#AEB4C0;padding:5px 0;transition:color .2s}
.fc a:hover{color:#fff}
.pe-id{margin-top:clamp(28px,3vw,40px);font-size:12px;line-height:1.6;color:var(--faint);max-width:90ch}
.pe-end{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:22px;font-size:12.5px;color:#767E8C}
@media(max-width:860px){.pe-grid{grid-template-columns:1fr 1fr}.pe-b{grid-column:1/-1}}
@media(max-width:500px){.pe-grid{grid-template-columns:1fr}}

/* utilidades */
.center{text-align:center}
.center .eyebrow{justify-content:center}
.center>.kicker,.center>.body,.center>h2,.center>p{margin-left:auto;margin-right:auto}
.center .body{margin-left:auto;margin-right:auto}
.lead-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:start}
@media(max-width:900px){.lead-row{grid-template-columns:1fr;gap:30px}}
.pill-soft{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-lo);background:rgba(47,107,255,.09);padding:6px 12px;border-radius:7px;margin-bottom:16px}
/* a mesma pilula aparece em secao escura: o accent-lo la da 2,54 */
.s-deep .pill-soft,.s-dark .pill-soft,.phero .pill-soft{color:var(--accent-hi);background:rgba(47,107,255,.16)}

/* ===== pilares: cards largos, sem fio separando ===== */
.pilares{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:820px){.pilares{grid-template-columns:1fr}}
.pilar{background:var(--surf);border:1px solid var(--surf-b);border-radius:18px;padding:clamp(24px,2.8vw,36px);display:flex;flex-direction:column}
.s-mist .pilar{background:var(--paper)}
.s-deep .pilar,.s-dark .pilar{background:rgba(255,255,255,.03);border-color:var(--wire)}
.pilar-n{font-family:var(--disp);font-size:13px;font-weight:700;letter-spacing:.16em;color:var(--accent-lo);margin-bottom:14px}
.s-deep .pilar-n,.s-dark .pilar-n{color:var(--accent-hi)}
.pilar h3{font-size:clamp(19px,2.1vw,24px);margin-bottom:11px;max-width:26ch}
.pilar p{font-size:15.5px;color:var(--dim);line-height:1.62}
.s-deep .pilar p,.s-dark .pilar p{color:#9AA3B2}
.prova{margin-top:auto;padding-top:18px;display:flex;flex-wrap:wrap;gap:7px}
.prova b{font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--accent-lo);background:rgba(47,107,255,.08);border:1px solid rgba(47,107,255,.16);padding:5px 11px;border-radius:6px}
.s-deep .prova b,.s-dark .prova b{color:var(--accent-hi);background:rgba(47,107,255,.14);border-color:rgba(127,165,255,.24)}

/* ===== dupla: contraste lado a lado, em cards ===== */
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:700px){.dupla{grid-template-columns:1fr}}
.dupla>div{border-radius:16px;padding:clamp(22px,2.6vw,32px);border:1px solid var(--surf-b);background:var(--surf)}
/* o lado "antes" e deliberadamente apagado, mas ainda precisa se ver */
.dupla .frio{background:transparent;border-style:dashed;border-color:rgba(11,25,45,.18)}
.s-deep .dupla .frio,.s-dark .dupla .frio{border-color:rgba(255,255,255,.2)}
.dupla .frio h3,.dupla .frio p{color:var(--faint)}
.dupla .quente{background:var(--paper);border-color:rgba(47,107,255,.32);box-shadow:0 20px 50px -30px rgba(47,107,255,.5)}
.dupla small{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:11px;color:var(--faint)}
.dupla .quente small{color:var(--accent-lo)}
.dupla h3{font-size:19px;margin-bottom:9px}
.dupla p{font-size:14.5px;color:var(--dim);line-height:1.6}

/* ===== biblioteca: itens compactos com rótulo ===== */
.biblio{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:900px){.biblio{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.biblio{grid-template-columns:1fr}}
.bi{display:flex;gap:13px;align-items:flex-start;padding:18px 20px;border-radius:13px;background:var(--surf);border:1px solid var(--surf-b)}
.s-mist .bi{background:var(--paper)}
.s-deep .bi,.s-dark .bi{background:rgba(255,255,255,.03);border-color:var(--wire)}
.bi span{flex:0 0 auto;width:30px;height:30px;border-radius:9px;background:rgba(47,107,255,.09);color:var(--accent-lo);display:grid;place-items:center}
.s-deep .bi span,.s-dark .bi span{background:rgba(47,107,255,.18);color:var(--accent-hi)}
.bi span svg{width:15px;height:15px}
.bi b{display:block;font-family:var(--disp);font-weight:600;font-size:15.5px;margin-bottom:3px}
.bi i{font-style:normal;font-size:13.5px;color:var(--dim);line-height:1.5}
.s-deep .bi i,.s-dark .bi i{color:#9AA3B2}

/* ===== FAQ ===== */
.faq{max-width:860px}
.faq details{border:1px solid var(--surf-b);border-radius:13px;background:var(--surf);margin-bottom:9px;overflow:hidden}
.s-deep .faq details,.s-dark .faq details{background:rgba(255,255,255,.03);border-color:var(--wire)}
.faq summary{cursor:pointer;list-style:none;padding:18px 22px;font-family:var(--disp);font-weight:600;font-size:16.5px;display:flex;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"";margin-left:auto;flex:0 0 auto;width:9px;height:9px;border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);transform:rotate(45deg);transition:transform .25s var(--e)}
.faq details[open] summary:after{transform:rotate(-135deg)}
.faq .rp{padding:0 22px 20px;font-size:15px;color:var(--dim);line-height:1.65;max-width:70ch}
.s-deep .faq .rp,.s-dark .faq .rp{color:#9AA3B2}

/* ===== destaque de fechamento de seção ===== */
.destaque{margin-top:clamp(28px,3.4vw,42px);font-family:var(--disp);font-weight:500;font-size:clamp(19px,2.3vw,27px);line-height:1.32;letter-spacing:-.012em;max-width:30ch}
.s-deep .destaque,.s-dark .destaque{color:#fff}

/* ===== setor: card com nomes de referência ===== */
.setor{background:var(--surf);border:1px solid var(--surf-b);border-radius:16px;padding:clamp(22px,2.5vw,30px)}
.s-mist .setor{background:var(--paper)}
.setor h3{font-size:19px;margin-bottom:8px}
.setor p{font-size:14.5px;color:var(--dim);line-height:1.58}
.setor .refs{margin-top:14px;padding-top:13px;border-top:1px solid var(--line);font-size:12.5px;color:var(--faint)}
.setor .refs b{color:var(--text);font-weight:600}

/* ================== PAINEIS DE PRODUTO ==================
   Cada pagina ganha um painel que mostra o mecanismo em vez de afirmar. */
.painel{color:#B4BAC6;background:linear-gradient(168deg,#191C25,#0D0E13);border:1px solid var(--wire-2);border-radius:18px;overflow:hidden;box-shadow:0 48px 100px -52px rgba(0,0,0,.8)}
.s-paper .painel,.s-mist .painel{box-shadow:0 40px 90px -50px rgba(14,27,51,.45)}
.pn-h{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--wire);font-size:12px;color:#8E96A5}
.pn-h b{color:#E4E7EC;font-weight:600;font-size:12.5px}
.pn-dot{width:7px;height:7px;border-radius:50%;background:var(--ok-hi);box-shadow:0 0 0 4px rgba(58,209,154,.16);flex:0 0 auto}
.pn-st{margin-left:auto;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-hi)}
.pn-b{padding:16px 18px}
.pn-cols{display:grid;grid-template-columns:1fr 1fr;gap:0}
.pn-cols>*{padding:16px 18px;min-width:0}
.pn-cols>*+*{border-left:1px solid var(--wire)}
@media(max-width:760px){.pn-cols{grid-template-columns:1fr}.pn-cols>*+*{border-left:0;border-top:1px solid var(--wire)}}
.pn-lb{display:block;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8E96A5;margin-bottom:10px}

/* requisito digitado */
.pn-req{padding:16px 18px;border-bottom:1px solid var(--wire)}
.pn-req p{font-size:14.5px;color:#D7DBE2;line-height:1.5}
.pn-cur{display:inline-block;width:2px;height:15px;background:var(--accent-hi);margin-left:2px;vertical-align:-2px;animation:pncur 1s step-end infinite}
@keyframes pncur{50%{opacity:0}}

/* artefatos gerados */
.pn-art{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 18px;font-size:13.5px;color:#B4BAC6;opacity:0;transform:translateY(6px)}
.pn-art.on{opacity:1;transform:none;transition:opacity .45s var(--e),transform .45s var(--e)}
.pn-art .ai{width:22px;height:22px;border-radius:6px;background:rgba(47,107,255,.16);color:var(--accent-hi);display:grid;place-items:center}
.pn-art .ai svg{width:12px;height:12px}
.pn-art code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:#8E96A5}
.pn-art .tg{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8A92A0;white-space:nowrap}

/* porteira de revisao */
.pn-gate{margin:12px 18px 16px;padding:13px 15px;border-radius:11px;border:1px dashed rgba(201,138,18,.5);background:rgba(201,138,18,.08);font-size:13px;color:#E8C97A;display:flex;align-items:center;gap:10px;opacity:0;transition:opacity .4s}
.pn-gate.on{opacity:1}
.pn-gate.ok{border-style:solid;border-color:rgba(58,209,154,.45);background:rgba(18,166,106,.1);color:#8FE3BE}
.pn-gate svg{width:15px;height:15px;flex:0 0 auto}

/* codigo / json */
.pn-code{margin:0;padding:14px 18px;overflow-x:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.7;color:#B4BAC6;white-space:pre}
.pn-code .k{color:#7FA5FF}.pn-code .s{color:#8FE3BE}.pn-code .c{color:#8A92A0}.pn-code .m{color:#E8C97A}

/* campos de entidade */
.pn-fields{display:grid;gap:6px}
.pn-f{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 11px;border-radius:8px;background:rgba(255,255,255,.035);font-size:13px;color:#C3C9D4}
.pn-f i{font-style:normal;font-family:ui-monospace,monospace;font-size:11px;color:#8A92A0}

/* linha do tempo comparativa */
.tl{display:grid;gap:14px}
.tl-r{display:grid;grid-template-columns:132px 1fr;gap:14px;align-items:center}
.tl-r>span:first-child{font-size:12.5px;font-weight:600;color:var(--faint)}
.tl-bar{position:relative;height:34px;border-radius:9px;background:var(--mist);overflow:hidden;display:flex}
.s-deep .tl-bar,.s-dark .tl-bar{background:rgba(255,255,255,.05)}
.tl-seg{height:100%;display:grid;place-items:center;font-size:11px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;width:0;transition:width .9s var(--e)}
.tl-r.go .tl-seg{width:var(--w)}
.tl-tot{font-size:12.5px;font-weight:700;white-space:nowrap;color:var(--text)}
.s-deep .tl-tot,.s-dark .tl-tot{color:#fff}
.tl-leg{display:flex;flex-wrap:wrap;gap:14px;margin-top:16px;font-size:12px;color:var(--faint)}
.tl-leg span{display:inline-flex;align-items:center;gap:7px}
.tl-leg i{width:10px;height:10px;border-radius:3px;display:inline-block}
@media(max-width:620px){.tl-r{grid-template-columns:1fr;gap:6px}}

/* trilha de auditoria */
.trilha{display:grid;gap:7px}
.tr{display:grid;grid-template-columns:16px 1fr;gap:13px;padding:12px 14px;border-radius:11px;background:rgba(255,255,255,.035);border:1px solid var(--wire);opacity:0;transform:translateY(6px)}
.tr.on{opacity:1;transform:none;transition:opacity .4s var(--e),transform .4s var(--e)}
.tr-i{width:16px;height:16px;border-radius:5px;display:grid;place-items:center;margin-top:2px;background:rgba(47,107,255,.2);color:var(--accent-hi)}
.tr-i svg{width:9px;height:9px}
.tr b{display:block;font-size:13.5px;font-weight:600;color:#E4E7EC;margin-bottom:3px}
.tr span{font-size:12px;color:#8A92A0;font-family:ui-monospace,monospace}
.tr em{font-style:normal;color:#8FE3BE}

/* esteira de processo */
.esteira{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;position:relative}
@media(max-width:820px){.esteira{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.esteira{grid-template-columns:1fr}}
.et{padding:14px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid var(--wire);transition:border-color .4s,background .4s}
.et.on{border-color:rgba(127,165,255,.45);background:rgba(47,107,255,.1)}
.et.done{border-color:rgba(58,209,154,.35);background:rgba(18,166,106,.08)}
.et b{display:block;font-size:13px;font-weight:600;color:#E4E7EC;margin-bottom:5px}
.et span{font-size:11.5px;color:#8A92A0;line-height:1.45;display:block}
.et .et-sla{margin-top:9px;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#8A92A0}
.et.on .et-sla{color:var(--accent-hi)}
.et.done .et-sla{color:#8FE3BE}

/* economia de unidade */
.econ{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:700px){.econ{grid-template-columns:1fr}}
.ec{border-radius:16px;padding:clamp(22px,2.6vw,30px);border:1px solid var(--surf-b);background:var(--surf)}
.ec.b{border-color:rgba(47,107,255,.32);box-shadow:0 20px 50px -30px rgba(47,107,255,.45)}
.ec small{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:14px}
.ec.b small{color:var(--accent-lo)}
/* o bloco antigo usava border-bottom por linha (layout de fio, vetado).
   A versao em capsula esta mais abaixo nesta folha. */
.ec-l b{color:var(--text);font-weight:600;white-space:nowrap}
.ec.b .ec-f{color:var(--accent-lo)}

/* pilha de camadas */
.pilha-c{display:grid;gap:7px}
.pc{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid var(--wire);transition:border-color .3s,background .3s;cursor:default}
.pc:hover{border-color:rgba(127,165,255,.4);background:rgba(47,107,255,.08)}
.pc b{display:block;font-size:14px;font-weight:600;color:#E4E7EC;margin-bottom:3px}
.pc span{font-size:12.5px;color:#8A92A0;line-height:1.45}
.pc code{font-family:ui-monospace,monospace;font-size:11px;color:var(--accent-hi);background:rgba(47,107,255,.14);padding:4px 9px;border-radius:6px;white-space:nowrap}

/* ===== menu suspenso do header (grupo Plataforma / Soluções) ===== */
.nav-g{position:relative}
.nav-t{appearance:none;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
 font-family:var(--sans);font-size:14px;font-weight:500;color:#9EA0A7;padding:8px 13px;border-radius:8px;
 white-space:nowrap;transition:color .2s,background .2s}
.nav-t svg{width:13px;height:13px;transition:transform .25s var(--e);opacity:.8}
.nav-g:hover .nav-t,.nav-g:focus-within .nav-t{color:#F4F5F6;background:rgba(255,255,255,.05)}
.nav-g:hover .nav-t svg,.nav-g:focus-within .nav-t svg{transform:rotate(180deg)}
.nav-g[data-ativo] .nav-t{color:#F4F5F6;background:rgba(47,107,255,.15)}
.nav-l{font-size:14px;font-weight:500;color:#9EA0A7;padding:8px 13px;border-radius:8px;white-space:nowrap;
 transition:color .2s,background .2s}
.nav-l:hover{color:#F4F5F6;background:rgba(255,255,255,.05)}
.nav-l[aria-current]{color:#F4F5F6;background:rgba(47,107,255,.15)}
.nav-d{position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,-6px);
 width:min(340px,86vw);padding:8px;border-radius:14px;background:#111318;
 border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 70px -30px #000;
 display:grid;gap:2px;opacity:0;visibility:hidden;pointer-events:none;
 transition:opacity .22s var(--e),transform .22s var(--e),visibility .22s}
.nav-g:hover .nav-d,.nav-g:focus-within .nav-d{opacity:1;visibility:visible;pointer-events:auto;
 transform:translate(-50%,0)}
.nav-d:before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nav-d a{display:block;padding:11px 13px;border-radius:10px;transition:background .2s}
.nav-d a:hover{background:rgba(255,255,255,.06)}
.nav-d a[aria-current]{background:rgba(47,107,255,.16)}
.nav-d b{display:block;font-family:var(--disp);font-size:14px;font-weight:600;color:#F4F5F6;margin-bottom:2px}
.nav-d b i{font-style:normal;font-size:11px;color:#8A92A0;margin-left:3px}
.nav-d span{display:block;font-size:12.5px;color:#8A92A0;line-height:1.4}
@media(max-width:1000px){.nav-g,.nav-l{display:none}}

/* ===== conserto de layout quando um ativo ainda nao chegou =====
   melhor um layout que se recompõe do que um buraco no meio da seção. */
.ph2-in.so-texto{grid-template-columns:minmax(0,1fr)!important;max-width:52rem}
.ph2-in.so-texto .lead{max-width:56ch}
.poucos{grid-template-columns:repeat(auto-fit,minmax(280px,380px))!important;justify-content:center}

/* ===== economia de unidade: linha virou cápsula, não fio =====
   Renan veta seção montada com fio; a estrutura passa a ser a própria cápsula. */
.ec-l{display:grid;gap:7px}
.ec-l>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;
 font-size:14px;color:var(--dim);padding:11px 14px;border-radius:10px;
 background:rgba(11,25,45,.035);border:0}
.s-deep .ec-l>div,.s-dark .ec-l>div{background:rgba(255,255,255,.05)}
.ec-l>div:last-child{padding-bottom:11px}
.ec.b .ec-l>div{background:rgba(47,107,255,.07)}
.ec-f{margin-top:16px;padding-top:0;border-top:0;font-family:var(--disp);font-size:16px;
 font-weight:500;color:var(--text)}

/* ===== conserto de texto esmagado em coluna estreita =====
   Detectado medindo: rotulo caindo em coluna de 67px vira uma letra por linha. */
@media(max-width:1100px){
 /* biblioteca dentro de lead-row ficava com celula de 200px */
 .lead-row .biblio{grid-template-columns:1fr}
}
@media(max-width:600px){
 /* a capsula da economia empilha, senao o rotulo perde a largura pro valor */
 .ec-l>div{grid-template-columns:1fr;gap:3px}
 .ec-l>div b{white-space:normal}
}
/* h1 no telefone nao pode passar de 3 linhas por falta de corpo menor */
@media(max-width:460px){.big{font-size:clamp(27px,8.2vw,34px)}}

/* plano de preco: icone antes do rotulo */
.pn-top{display:flex;align-items:center;gap:11px;margin-bottom:15px}
.pn-top .ic-s{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;
 background:rgba(47,107,255,.09);color:var(--accent-lo)}
.pn.forte .pn-top .ic-s{background:var(--accent);color:#fff}
.pn-top .ic-s svg{width:15px;height:15px}
.pn-top small{margin-bottom:0}

/* ===== FECHO DE PAGINA =====
   Antes era a mesma faixa em 6 das 7 paginas. Agora e cena, com dois caminhos
   reais: ver a demonstracao (que existe) e falar com alguem. */
.fecho{position:relative;overflow:clip;background:var(--ink);color:#fff;
 padding:clamp(56px,7vw,104px) 0}
.fecho:before{content:"";position:absolute;inset:0;pointer-events:none;
 background:radial-gradient(46% 58% at 24% 0%,rgba(47,107,255,.16),transparent 70%)}
.fecho-in{position:relative;z-index:2;display:grid;
 grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(30px,4.4vw,64px);
 align-items:center}
@media(max-width:940px){.fecho-in{grid-template-columns:1fr;gap:30px}}
.fecho h2{color:#fff;font-size:clamp(25px,3.1vw,40px);line-height:1.1;max-width:24ch}
.fecho-in>div>p{margin-top:16px;font-size:16.5px;line-height:1.6;color:#A6AEBC;max-width:50ch}
.fecho-act{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
/* os dois caminhos, cada um dizendo o que entrega */
.fecho-vias{display:grid;gap:10px}
.fecho-via{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:15px;align-items:center;
 padding:18px 20px;border-radius:14px;background:rgba(255,255,255,.04);
 border:1px solid rgba(255,255,255,.1);color:#fff;
 transition:border-color .25s,background .25s,transform .12s}
.fecho-via:hover{border-color:rgba(127,165,255,.45);background:rgba(47,107,255,.1)}
.fecho-via:active{transform:translateY(1px)}
.fecho-via>span:first-child{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
 background:rgba(47,107,255,.2);color:#9FBEFF}
.fecho-via>span:first-child svg{width:18px;height:18px}
.fecho-via b{display:block;font-family:var(--disp);font-size:15.5px;font-weight:600;margin-bottom:2px}
.fecho-via i{font-style:normal;display:block;font-size:13px;color:#8A92A0;line-height:1.45}
.fecho-via em{font-style:normal;color:#7FA5FF;flex:0 0 auto}
.fecho-via em svg{width:16px;height:16px}
.fecho-nota{margin-top:18px;font-size:12.5px;color:#767E8C}

/* ===== PROXIMO PASSO (CTA de meio de pagina) =====
   Medido: nas piores paginas a pessoa rolava 5 telas sem receber nenhuma acao.
   Gramatica DIFERENTE do fecho de propósito: aqui e uma linha compacta e
   contextual, ancorada no que acabou de ser mostrado, nao uma cena. */
.passo-cta{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:18px;align-items:center;
 margin-top:clamp(30px,3.6vw,48px);padding:20px clamp(20px,2.4vw,28px);border-radius:15px;
 background:var(--surf);border:1px solid var(--surf-b);
 transition:border-color .25s,background .25s}
.passo-cta:hover{border-color:rgba(47,107,255,.34)}
.passo-cta>span:first-child{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
 background:rgba(47,107,255,.1);color:var(--accent-lo)}
.s-deep .passo-cta>span:first-child,.s-dark .passo-cta>span:first-child{
 background:rgba(47,107,255,.2);color:var(--accent-hi)}
.passo-cta>span:first-child svg{width:20px;height:20px}
.passo-cta b{display:block;font-family:var(--disp);font-size:16.5px;font-weight:600;
 color:var(--text);margin-bottom:3px}
.s-deep .passo-cta b,.s-dark .passo-cta b{color:#fff}
.passo-cta i{font-style:normal;display:block;font-size:14px;color:var(--dim);line-height:1.5}
.s-deep .passo-cta i,.s-dark .passo-cta i{color:#9AA3B2}
.passo-cta .ir{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
 font-weight:600;font-size:14px;color:var(--accent-lo);
 border:1px solid rgba(47,107,255,.28);border-radius:10px;padding:11px 18px;
 transition:background .25s,border-color .25s}
.s-deep .passo-cta .ir,.s-dark .passo-cta .ir{color:var(--accent-hi);
 border-color:rgba(127,165,255,.35)}
.passo-cta:hover .ir{background:rgba(47,107,255,.09);border-color:rgba(47,107,255,.45)}
.passo-cta .ir svg{width:15px;height:15px;transition:transform .25s var(--e)}
.passo-cta:hover .ir svg{transform:translateX(3px)}
@media(max-width:720px){
 .passo-cta{grid-template-columns:44px minmax(0,1fr);row-gap:14px}
 .passo-cta .ir{grid-column:2;justify-content:center}
}


/* ===== DUAS COLUNAS PARA BLOCO ESTREITO =====
   Secoes em que o conteudo tinha max-width (FAQ, corrente, figura) ficavam
   encostadas a esquerda com metade da tela vazia. Aqui a cabeca (eyebrow,
   titulo, texto) vai para a coluna da esquerda e o bloco (.duas-r) ocupa a
   direita inteira. Abaixo de 900px volta a empilhar. */
.w-duas{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);column-gap:clamp(30px,5vw,80px);align-items:start}
.w-duas>*{grid-column:1;min-width:0}
.w-duas>.duas-r{grid-column:2;grid-row:1/span 8;max-width:none!important;margin-top:0!important}
.w-duas>.duas-r>*{max-width:none!important}
.w-duas>.passo-cta{grid-column:1/-1}
.w-duas>.kicker{max-width:none!important}
.w-duas>.body{max-width:46ch}
.w-duas>.specs{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){.w-duas{display:block}.w-duas>.duas-r{margin-top:clamp(26px,3vw,40px)!important}}


/* ===== QUEBRAS DE LINHA =====
   Titulo nunca deixa uma palavra sozinha na ultima linha: o navegador equilibra
   as linhas (balance). Paragrafo evita orfao na ultima linha (pretty). */
h1,h2,h3,.kicker,.big{text-wrap:balance}
p,li,.lead,.body,dd,figcaption{text-wrap:pretty}


/* ===== STILL DO PRODUTO =====
   Imagem real da plataforma (frames do treinamento, em portugues) no meio de secao
   que antes era so texto. Moldura escura como os paineis. */
.still{margin:clamp(30px,3.6vw,48px) auto 0;max-width:none}
.still img{width:100%;height:auto;display:block;border-radius:16px;border:1px solid var(--wire-2);background:#0d1626;box-shadow:0 40px 90px -50px rgba(0,0,0,.6)}
.s-paper .still img,.s-mist .still img{border-color:var(--line);box-shadow:0 30px 70px -44px rgba(14,27,51,.4)}
.still figcaption{margin:12px auto 0;font-size:12.5px;color:var(--faint);line-height:1.5;max-width:76ch;text-align:center}
.still + *{margin-top:clamp(30px,3.6vw,48px)}
/* cabecalho em duas colunas: titulo a esquerda, paragrafo a direita, alinhados pela base */
.cab-2{align-items:end}
.cab-2>.body{margin:0;padding-bottom:6px}
@media(max-width:1000px){.cab-2>.body{padding-bottom:0}}

/* ===== FAIXA DE VÍDEO (vband) =====
   Vídeo curto do canal Optaris Deyel Brasil no meio da página que fala do mesmo assunto.
   Poster à esquerda (o clique toca aqui mesmo, via youtube-nocookie); capítulos à direita,
   cada um apontando para o ponto exato na página do player em /aprenda/. */
.vband{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(26px,4vw,56px);align-items:center;margin-top:clamp(40px,4.6vw,64px)}
.vband-tela{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#0d1626;border:1px solid var(--wire-2);box-shadow:0 40px 90px -50px rgba(0,0,0,.6)}
.s-paper .vband-tela,.s-mist .vband-tela{border-color:var(--line);box-shadow:0 30px 70px -44px rgba(14,27,51,.4)}
.vband-tela iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.vband-play{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;background:transparent;cursor:pointer;display:block;color:inherit;font:inherit}
.vband-play img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--e)}
.vband-play:hover img{transform:scale(1.03)}
.vband-play .playm{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(255,255,255,.94);color:#0E1B33;display:grid;place-items:center;box-shadow:0 20px 40px -16px rgba(0,0,0,.7);transition:transform .35s var(--e)}
.vband-play:hover .playm{transform:scale(1.08)}
.vband-play .playm svg{width:22px;height:22px;margin-left:3px}
.vband-play .dur{position:absolute;right:14px;top:14px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;border-radius:7px;color:#fff;background:rgba(11,11,12,.55);border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-variant-numeric:tabular-nums}
.vband-play:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.vband-txt .eyebrow{margin-bottom:12px}
.vband-txt h3{font-size:clamp(21px,2vw,27px);line-height:1.15;font-weight:500;text-wrap:balance}
.vband-txt .body{font-size:15.5px;line-height:1.6;margin-top:12px}
.vband-caps{margin:18px 0 0;padding:14px 0 0;border-top:1px solid var(--surf-b);display:grid;gap:2px;list-style:none}
.vband-caps a{display:grid;grid-template-columns:42px minmax(0,1fr);gap:10px;align-items:baseline;padding:6px 0;font-size:14px;line-height:1.3;color:inherit;text-decoration:none;transition:color .2s}
.vband-caps a:hover{color:var(--accent-lo)}
.s-deep .vband-caps a:hover,.s-dark .vband-caps a:hover{color:var(--accent-hi)}
.vband-caps .t{font-size:12.5px;font-weight:700;color:var(--accent-lo);font-variant-numeric:tabular-nums}
.s-deep .vband-caps .t,.s-dark .vband-caps .t{color:var(--accent-hi)}
.vband-mais{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:14px;font-weight:600;color:var(--accent-lo);text-decoration:none}
.s-deep .vband-mais,.s-dark .vband-mais{color:var(--accent-hi)}
.vband-mais svg{width:15px;height:15px;transition:transform .25s var(--e)}
.vband-mais:hover svg{transform:translateX(3px)}
@media(max-width:900px){.vband{grid-template-columns:1fr;gap:22px}}

/* ===== CARTÕES DE NAVEGAÇÃO ASSISTIDA (apontam para o Vendor Management) ===== */
.navcards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,24px);margin-top:clamp(28px,3.4vw,44px)}
.navcard{display:flex;flex-direction:column;padding:clamp(22px,2.6vw,32px);border-radius:18px;background:var(--paper);border:1px solid var(--line);color:var(--text);text-decoration:none;transition:transform .5s var(--e),border-color .3s,box-shadow .5s var(--e)}
.navcard:hover{transform:translateY(-4px);border-color:rgba(47,107,255,.4);box-shadow:0 30px 60px -40px rgba(14,27,51,.4)}
.navcard-k{display:flex;justify-content:space-between;gap:12px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-lo)}
.navcard-k em{font-style:normal;color:var(--faint);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.navcard h3{margin-top:14px;font-size:clamp(19px,1.6vw,23px);line-height:1.2;font-weight:500}
.navcard p{margin-top:10px;font-size:14.5px;line-height:1.6;color:var(--dim)}
.navcard-tiras{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}
.navcard-tiras img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:left top;display:block;border-radius:8px;border:1px solid var(--line);background:#fff}
.navcard-pe{margin-top:auto;padding-top:18px;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12.5px;color:var(--faint)}
.navcard-pe b{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--accent-lo)}
.navcard-pe b svg{transition:transform .25s var(--e)}
.navcard:hover .navcard-pe b svg{transform:translateX(3px)}
.navcards-f{margin-top:16px;font-size:13px;color:var(--faint)}
@media(max-width:800px){.navcards{grid-template-columns:1fr}}

/* =====================================================================
   PADRÃO DA HOME (08/10)
   A home é a referência visual do site. Este bloco faz as páginas internas
   falarem a mesma língua dela sem reescrever cada página:
   rótulo em pílula, título e texto na escala da home, cards da home,
   botões da home e CTA de meio de página sem caixa.
   ===================================================================== */
:root{--mist:#ECF9FF}
.s-mist{background:#ECF9FF}
.s-paper{--surf:#FFFFFF;--surf-b:rgba(11,25,45,.12)}
.s-mist{--surf:#FFFFFF;--surf-b:rgba(11,25,45,.10)}
.s-deep,.s-dark{--surf:linear-gradient(160deg,#141620,#0c0d12);--surf-b:rgba(255,255,255,.15)}

/* rótulo: a pílula da home */
.eyebrow{display:flex;width:fit-content;max-width:100%;align-items:center;gap:8px;font-family:var(--sans);font-weight:600;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:#fff;background:#0B0B0C;border:1px solid transparent;padding:6px 12px;border-radius:7px;margin-bottom:22px;line-height:1.3}
.eyebrow:before{content:"";flex:0 0 6px;width:6px;height:6px;border-radius:2px;background:#2F6BFF;box-shadow:0 0 8px rgba(47,107,255,.55);opacity:1}
.s-deep .eyebrow,.s-dark .eyebrow,.fecho .eyebrow{color:#F4F5F6;background:#000;border-color:rgba(255,255,255,.15)}
.phero .eyebrow{color:#CFE0FF;background:rgba(47,107,255,.12);border-color:rgba(47,107,255,.4)}
.center .eyebrow{margin-left:auto;margin-right:auto}

/* título e texto de seção: a escala da home */
.kicker{font-family:var(--disp);font-weight:400;font-size:clamp(30px,3.8vw,52px);line-height:1.08;letter-spacing:-.02em}
.body{font-size:clamp(15px,1.15vw,18px);line-height:1.6}
@media(max-width:700px){.kicker{font-size:clamp(25px,6.7vw,32px)}}

/* botões: os da home */
.cta{padding:12px 20px;border-radius:9px;font-size:14px;letter-spacing:.01em;box-shadow:0 8px 30px -10px rgba(47,107,255,.55)}
.cta:hover{background:#2560EA;border-color:#2560EA}
.cta-ghost{background:transparent;border-color:rgba(11,25,45,.16);box-shadow:none}
.cta-ghost:hover{background:transparent;border-color:var(--text)}
.s-deep .cta-ghost,.s-dark .cta-ghost,.phero .cta-ghost,.fecho .cta-ghost{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.15)}
.s-deep .cta-ghost:hover,.s-dark .cta-ghost:hover,.phero .cta-ghost:hover,.fecho .cta-ghost:hover{background:rgba(255,255,255,.04);border-color:#fff}

/* cards: claro = branco com fio, escuro = o card escuro da home */
.card,.pilar,.dupla>div,.ec,.setor,.spec,.step,.bi,.navcard{border-radius:18px}
.s-mist .pilar,.s-mist .bi,.s-mist .setor,.s-mist .navcard{background:#fff;border-color:rgba(11,25,45,.10)}
.s-deep .pilar,.s-dark .pilar,.s-deep .bi,.s-dark .bi,.s-deep .faq details,.s-dark .faq details{background:linear-gradient(160deg,#141620,#0c0d12);border-color:rgba(255,255,255,.15)}
.card,.pilar,.navcard{transition:border-color .3s,transform .3s}
a.card:hover,a.navcard:hover{border-color:rgba(47,107,255,.4);transform:translateY(-3px)}

/* CTA de meio de página: a linha da home (texto + botão), sem caixa */
.passo-cta{background:none!important;border:0;border-top:1px solid var(--surf-b);border-radius:0;padding:24px 0 0;grid-template-columns:minmax(0,1fr) auto}
.passo-cta>span:first-child{display:none}
.passo-cta:hover{border-color:var(--surf-b)}
.passo-cta .ir{color:var(--text);border:1px solid rgba(11,25,45,.16);border-radius:9px;padding:12px 20px;background:transparent}
.passo-cta:hover .ir{background:transparent;border-color:var(--text)}
.s-deep .passo-cta .ir,.s-dark .passo-cta .ir{color:#fff;border-color:rgba(255,255,255,.15);background:rgba(255,255,255,.04)}
.s-deep .passo-cta:hover .ir,.s-dark .passo-cta:hover .ir{border-color:#fff;background:rgba(255,255,255,.04)}
@media(max-width:700px){.passo-cta{grid-template-columns:minmax(0,1fr)}.passo-cta .ir{grid-column:1;justify-content:center}}

/* =====================================================================
   COMPONENTES DA HOME, compartilhados (gerados por build_componentes.py)
   ===================================================================== */
/* faixa de logos */
.dz-logos{background:#0B0B0C;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);padding:30px 0 32px;overflow:hidden}
.dz-logos-lbl{display:block;text-align:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8E99AB;font-weight:600;margin-bottom:22px}
.dz-logos-mq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.dz-logos-row{display:flex;width:max-content;animation:dzmq 52s linear infinite}
.dz-logos:hover .dz-logos-row{animation-play-state:paused}
.dz-logos-g{display:flex;align-items:center;gap:64px;padding-right:64px}
.dz-logos-g img{display:block;height:auto;max-height:26px;width:auto;max-width:128px;object-fit:contain;filter:brightness(0) invert(1);opacity:.6;transition:opacity .25s}
.dz-logos-g img:hover{opacity:1}
@keyframes dzmq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.dz-logos-row{animation:none;width:auto}.dz-logos-g{flex-wrap:wrap;justify-content:center;row-gap:26px;padding:0 var(--pad)}.dz-logos-g[aria-hidden]{display:none}}
@media(max-width:700px){.dz-logos-g{gap:44px;padding-right:44px}.dz-logos-g img{max-height:22px;max-width:104px}}

/* régua de números */
.dz-metrics{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid rgba(255,255,255,.08);border-radius:18px;overflow:hidden;background:linear-gradient(180deg,#141419,#0B0B0C)}
.dz-metric{padding:clamp(26px,3vw,40px) clamp(20px,2.4vw,32px);border-right:1px solid rgba(255,255,255,.08)}
.dz-metric:last-child{border-right:0}
.dz-metric-v{display:block;font-family:var(--disp);font-weight:500;font-size:clamp(38px,5vw,64px);line-height:1;letter-spacing:-.02em;color:#fff;background:linear-gradient(180deg,#fff,#a9c2ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.dz-metric-k{display:block;margin-top:12px;font-size:13.5px;line-height:1.5;color:#9EA0A7;font-weight:500;max-width:30ch}
@media(max-width:1020px){.dz-metrics{grid-template-columns:1fr 1fr}.dz-metric:nth-child(2){border-right:0}.dz-metric:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.08)}}
@media(max-width:560px){.dz-metrics{grid-template-columns:1fr}.dz-metric{border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}.dz-metric:last-child{border-bottom:0}}

/* cases com número publicado */
.dz-cases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.dz-case{position:relative;background:linear-gradient(160deg,#141620,#0c0d12);border:1px solid rgba(255,255,255,.15);border-radius:18px;padding:clamp(24px,2.6vw,32px);display:flex;flex-direction:column;min-height:190px;transition:border-color .3s,transform .3s}
.dz-case:hover{border-color:rgba(47,107,255,.4);transform:translateY(-3px)}
.dz-case-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.dz-case-nome{font-family:var(--disp);font-weight:500;font-size:clamp(19px,1.7vw,24px);letter-spacing:-.01em;color:#fff}
.dz-case-tag{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#6C99FF;background:rgba(47,107,255,.13);border:1px solid rgba(47,107,255,.28);padding:5px 10px;border-radius:100px;white-space:nowrap}
.dz-case-nota{color:#9EA0A7;font-size:14.5px;line-height:1.58;margin-bottom:auto}
.dz-case-nota b{color:#fff;font-weight:600}
.dz-case-pe{margin-top:22px}
.dz-case-st{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#22C67E}
.dz-case-st i{width:8px;height:8px;border-radius:50%;background:#22C67E;box-shadow:0 0 10px rgba(34,198,126,.7)}
@media(max-width:1020px){.dz-cases{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.dz-cases{grid-template-columns:1fr}}

/* depoimentos: os cards da home */
.dz-quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.dz-quote{position:relative;margin:0;background:linear-gradient(160deg,#141620,#0c0d12);border:1px solid rgba(255,255,255,.15);border-radius:18px;padding:clamp(24px,2.6vw,34px);overflow:hidden;display:flex;flex-direction:column}
.dz-quote-mk{position:absolute;top:6px;left:20px;font-family:var(--disp);font-size:78px;line-height:1;color:rgba(108,153,255,.16);pointer-events:none}
.dz-quote blockquote{position:relative;margin:0 0 24px;color:#DFE4EE;font-size:clamp(14.5px,1.05vw,16px);line-height:1.62}
.dz-quote figcaption{display:flex;align-items:center;gap:12px;margin-top:auto}
.dz-quote-av{width:42px;height:42px;border-radius:12px;background:linear-gradient(150deg,#2A6BFF,#1B4FD0);color:#fff;display:grid;place-items:center;font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:.02em;flex:0 0 42px}
.dz-quote-who{display:flex;flex-direction:column;gap:2px}
.dz-quote-who b{font-size:14.5px;font-weight:600;color:#fff}
.dz-quote-who span{font-size:12.5px;line-height:1.4;color:#9EA0A7}
.dz-quotes-src{margin-top:14px;font-size:12px;color:#727D8F}
@media(max-width:1020px){.dz-quotes{grid-template-columns:1fr}}

/* espaçamento entre os blocos quando aparecem juntos */
.dz-metrics+.dz-cases,.dz-cases+.dz-quotes,.dz-metrics+.dz-quotes{margin-top:clamp(28px,3.4vw,44px)}

/* cabeçalho de seção empilhado, como na home: pílula, título e texto embaixo */
.dz-cab{max-width:820px;margin-bottom:clamp(40px,5vw,60px)}
.dz-cab .body{margin-top:18px;max-width:62ch}
.dz-cab.center{margin-left:auto;margin-right:auto;text-align:center}

/* abas: lista à esquerda, painel à direita */
.dz-abas{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(24px,3.4vw,52px);align-items:start}
.dz-abas-l{display:grid;gap:8px}
.dz-aba{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:14px;align-items:center;width:100%;text-align:left;padding:14px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:transparent;color:#C9CFD9;cursor:pointer;font:inherit;transition:border-color .25s,background .25s,color .25s}
.dz-aba:hover{border-color:rgba(255,255,255,.18);color:#fff}
.dz-aba[aria-selected="true"]{border-color:rgba(47,107,255,.5);background:rgba(47,107,255,.08);color:#fff}
.dz-aba-ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:rgba(47,107,255,.13);border:1px solid rgba(47,107,255,.22);color:#7FA5FF}
.dz-aba-ic svg{width:19px;height:19px}
.dz-aba b{display:block;font-family:var(--disp);font-weight:500;font-size:16px;line-height:1.25}
.dz-aba small{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#6C99FF}
.dz-aba svg.seta{width:16px;height:16px;opacity:0;transform:translateX(-4px);transition:opacity .25s,transform .25s}
.dz-aba[aria-selected="true"] svg.seta{opacity:1;transform:none}
.dz-painel{position:relative;background:linear-gradient(160deg,#141620,#0c0d12);border:1px solid rgba(255,255,255,.15);border-radius:20px;padding:clamp(28px,3.4vw,46px);min-height:100%;overflow:hidden}
.dz-painel:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#2F6BFF,transparent)}
.dz-painel-f[hidden]{display:none}
.dz-painel-f{animation:dzin .45s var(--e) both}
@keyframes dzin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.dz-painel .dz-case-tag{display:inline-block;margin-bottom:22px}
.dz-painel h3{font-family:var(--disp);font-weight:400;font-size:clamp(24px,2.5vw,34px);line-height:1.12;letter-spacing:-.015em;color:#fff;max-width:22ch}
.dz-painel p{margin-top:16px;font-size:clamp(15px,1.1vw,17px);line-height:1.62;color:#A6AEBC;max-width:54ch}
.dz-painel-pe{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:30px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08)}
.dz-painel-pe a.lk{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:#9EA0A7}
.dz-painel-pe a.lk:hover{color:#fff}
.dz-painel-pe a.lk svg{width:15px;height:15px}
@media(max-width:900px){.dz-abas{grid-template-columns:1fr}.dz-abas-l{grid-template-columns:1fr 1fr}.dz-aba{grid-template-columns:36px minmax(0,1fr);padding:12px}.dz-aba-ic{width:36px;height:36px}.dz-aba svg.seta{display:none}}
@media(max-width:520px){.dz-abas-l{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.dz-painel-f{animation:none}}
.dz-aba-ic svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* hero só de texto: centralizado, como o hero da home */
.dz-hero-c .ph2-in.so-texto{margin-left:auto;margin-right:auto;text-align:center;max-width:58rem}
.dz-hero-c .crumbs,.dz-hero-c .acts{justify-content:center}
.dz-hero-c .lead{margin-left:auto;margin-right:auto}
.dz-painel{display:flex;flex-direction:column}
.dz-painel-f:not([hidden]){display:flex;flex-direction:column;flex:1}
.dz-painel-pe{margin-top:auto}
.dz-painel-f p{margin-bottom:30px}

/* ===== /demo · navegações: uma tela grande e legível por navegação (08/10) =====
   Antes eram duas miniaturas lado a lado, ilegíveis. Agora: texto à esquerda,
   a tela real inteira à direita (sem corte), um card por linha. */
.navcard-l{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.6fr);gap:clamp(24px,3.4vw,52px);align-items:center;padding:clamp(22px,2.6vw,36px)}
.navcard-txt{display:flex;flex-direction:column;align-self:stretch}
.navcard-txt h3{font-family:var(--disp);font-weight:400;font-size:clamp(22px,2.2vw,30px);line-height:1.12;letter-spacing:-.015em}
.navcard-txt p{font-size:clamp(15px,1.05vw,16px)}
.navcard-txt .navcard-pe{padding-top:24px;flex-direction:column;align-items:flex-start;gap:14px}
.navcard-tela{margin:0;border-radius:12px;overflow:hidden;border:1px solid rgba(11,25,45,.12);background:#fff;box-shadow:0 30px 70px -44px rgba(14,27,51,.45)}
.navcard-tela img{display:block;width:100%;height:auto}
@media(max-width:900px){.navcard-l{grid-template-columns:1fr}.navcard-txt .navcard-pe{flex-direction:row;align-items:center}}
.navcards.navcards-l{grid-template-columns:1fr}

/* linha branca no topo: a borda de 1px somava na altura do menu (71px) e o hero, puxado 70px para cima,
   deixava 1px do fundo branco aparecer. A borda vira sombra interna e nao ocupa altura. */
.nav{border-bottom:0;box-shadow:inset 0 -1px 0 transparent;transition:background .3s,box-shadow .3s}
.nav.on{border-bottom:0;box-shadow:inset 0 -1px 0 rgba(255,255,255,.08)}

/* QA 10/10: link para ancora (#fim, #faq...) para abaixo do menu fixo, e nao escondido atras dele.
   A home ja faz isso com scroll-margin nas secoes. */
html{scroll-padding-top:84px}
html:has(main.hm){scroll-padding-top:0}
/* QA 10/10: entre 1001 e 1120px o menu do topo fica justo; o botao nao quebra linha e os itens apertam um pouco */
.nav .btn-solid{white-space:nowrap}
@media(min-width:1001px) and (max-width:1120px){.nav-l,.nav-t{padding-left:9px;padding-right:9px}.nav-in{gap:12px}}
/* QA no ar: contraste. Branco sobre o azul padrao ficava em 4,49:1; o botao usa um tom 4,7:1. No rodape escuro, o texto discreto usava o cinza do fundo claro (3,8:1). */
.nav .btn-solid,.btn-solid{background:#2D68FA;border-color:#2D68FA}.nav .btn-solid:hover,.btn-solid:hover{background:var(--accent-lo);border-color:var(--accent-lo)}
.pe{--faint:#9AA3B2}
.sr-oculto{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* QA no ar: logo do menu nao encolhe no celular */
.brand{flex-shrink:0;min-width:max-content}.brand img{max-width:none;flex-shrink:0}
@media(max-width:1000px){.w-nav{padding:0 20px}.nav-in{grid-template-columns:auto 1fr;gap:12px}}
@media(max-width:420px){.w-nav{padding:0 16px}.nav-end{gap:8px}.nav .btn-solid,.nav .btn{padding:10px 12px;gap:6px;font-size:13px}.nav .btn-solid svg,.nav .btn .ar{display:none}}
@media(max-width:340px){.nav-wa{display:none}}
/* Hero padronizado: subtitulo igual em todas as paginas; no celular, texto centralizado e quebra equilibrada */
.ph2-in>div:first-child>p.lead,.ph2-in>div:first-child>p.body,.ph2-in>div:first-child>p.plh-lead,.phero-in>p.lead,.phero-in>p.body,.phero-in>p.plh-lead,.plh>div:first-child>p.lead,.plh>div:first-child>p.body,.plh>div:first-child>p.plh-lead,.pl-top>.w>p.lead,.pl-top>.w>p.body,.pl-top>.w>p.plh-lead{font-size:17px;line-height:1.62}
@media(max-width:700px){
 .ph2-in>div:first-child,.phero-in,.plh>div:first-child,.pl-top>.w{text-align:center}
 .ph2-in>div:first-child>.crumbs,.phero-in>.crumbs,.plh>div:first-child>.crumbs,.pl-top>.w>.crumbs,.ph2-in>div:first-child>.pl-meta,.phero-in>.pl-meta,.plh>div:first-child>.pl-meta,.pl-top>.w>.pl-meta,.ph2-in>div:first-child>.notas,.phero-in>.notas,.plh>div:first-child>.notas,.pl-top>.w>.notas,.ph2-in>div:first-child>.ok-passos,.phero-in>.ok-passos,.plh>div:first-child>.ok-passos,.pl-top>.w>.ok-passos{justify-content:center}
 .ph2-in>div:first-child>.eyebrow,.phero-in>.eyebrow,.plh>div:first-child>.eyebrow,.pl-top>.w>.eyebrow{margin-left:auto;margin-right:auto}
 .ph2-in>div:first-child>h1,.phero-in>h1,.plh>div:first-child>h1,.pl-top>.w>h1{font-size:32px!important;line-height:1.1!important;text-wrap:balance;margin-left:auto;margin-right:auto}
 .ph2-in>div:first-child>p.lead,.ph2-in>div:first-child>p.body,.ph2-in>div:first-child>p.plh-lead,.phero-in>p.lead,.phero-in>p.body,.phero-in>p.plh-lead,.plh>div:first-child>p.lead,.plh>div:first-child>p.body,.plh>div:first-child>p.plh-lead,.pl-top>.w>p.lead,.pl-top>.w>p.body,.pl-top>.w>p.plh-lead{font-size:15.5px;line-height:1.62;text-wrap:pretty;max-width:36ch;margin-left:auto;margin-right:auto}
 .ph2-in>div:first-child>.acts,.phero-in>.acts,.plh>div:first-child>.acts,.pl-top>.w>.acts,.ph2-in>div:first-child>.plh-act,.phero-in>.plh-act,.plh>div:first-child>.plh-act,.pl-top>.w>.plh-act{flex-direction:column;align-items:stretch;width:100%;max-width:340px;margin-left:auto;margin-right:auto}
 .ph2-in>div:first-child>.acts>a,.phero-in>.acts>a,.plh>div:first-child>.acts>a,.pl-top>.w>.acts>a,.ph2-in>div:first-child>.plh-act>a,.phero-in>.plh-act>a,.plh>div:first-child>.plh-act>a,.pl-top>.w>.plh-act>a{justify-content:center;width:100%}
 .ph2-in>div:first-child>.notas>div,.phero-in>.notas>div,.plh>div:first-child>.notas>div,.pl-top>.w>.notas>div{text-align:center}
 .ph2-in>div:first-child>.plh-nota,.phero-in>.plh-nota,.plh>div:first-child>.plh-nota,.pl-top>.w>.plh-nota{justify-items:center;text-align:center}
 .ph2-in>div:first-child>.fecho-links,.phero-in>.fecho-links,.plh>div:first-child>.fecho-links,.pl-top>.w>.fecho-links{align-items:center;text-align:left;max-width:340px;margin-left:auto;margin-right:auto}
}
/* Rodape: LinkedIn (12/10/2026) */
.pe-in{display:inline-flex;align-items:center;gap:9px;margin-top:20px;padding:8px 13px 8px 10px;border:1px solid var(--wire);border-radius:10px;font-size:13.5px;color:#AEB4C0;transition:color .2s,border-color .2s}
.pe-in:hover{color:#fff;border-color:rgba(255,255,255,.24)}
.pe-in svg{width:18px;height:18px;flex:0 0 18px}