/* Ilustração do topo de /solucoes/aplicativos (origem: site/_plano/solucoes/apps). Cena: aplicativos.js.
   Aparelhos em HTML e CSS 3D; posições aqui (a CSP do site não aceita style inline). Classes com prefixo ap- onde o site já usa o nome. */
.il-aplicativos .luzes { position: absolute; inset: 0; pointer-events: none; isolation: isolate; background: var(--grafite); }
.il-aplicativos .luzes i { position: absolute; border-radius: 50%; will-change: transform; }
.il-aplicativos .luzes .l1 { width: 1100px; height: 1100px; left: 50%; top: 50%; margin: -550px 0 0 -150px; background: radial-gradient(closest-side, rgba(48,52,58,.78), rgba(48,52,58,.32) 55%, rgba(48,52,58,0)); }
.il-aplicativos .luzes::after { content: ""; position: absolute; inset: 0; opacity: .6; mix-blend-mode: overlay; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E"); }
.il-aplicativos .luzes .l2 { width: 760px; height: 760px; left: 50%; top: 50%; margin: -120px 0 0 -520px; background: radial-gradient(closest-side, rgba(31,34,38,.9), rgba(31,34,38,0)); }

.il-aplicativos .cena { position: absolute; z-index: 1; top: 72px; bottom: 16px; left: 46%; right: 40px; }
.il-aplicativos .cena canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.il-aplicativos .ap-palco { position: absolute; left: 50%; top: 50%; width: 840px; height: 660px; margin: -330px 0 0 -420px; transform: translateX(var(--dx, 0px)) scale(var(--s, 1)); perspective: 1900px; perspective-origin: 45% 42%; }
.il-aplicativos .grupo { position: absolute; inset: 0; transform-style: preserve-3d; }

/* aparelhos: frente + fatias atrás (perfil fino que aparece quando o conjunto gira) */
.il-aplicativos .ap { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); transform-style: preserve-3d; transform: translateZ(var(--z)); }
.il-aplicativos .ap-nav { --x: 156px; --y: 40px; --w: 560px; --h: 408px; --z: 0px; --r: 12px; }
.il-aplicativos .ap-tab { --x: 590px; --y: 331px; --w: 236px; --h: 318px; --z: 70px; --r: 20px; }
.il-aplicativos .ap-cel { --x: 30px; --y: 212px; --w: 206px; --h: 418px; --z: 130px; --r: 34px; }
.il-aplicativos .ap .fa { position: absolute; inset: 0; border-radius: var(--r); background: var(--fio-escuro); }
.il-aplicativos .ap .fa:last-of-type { box-shadow: 0 46px 90px -24px rgba(0,0,0,.6); }
.il-aplicativos .corpo { position: absolute; inset: 0; border-radius: var(--r); background: var(--superficie-escura); box-shadow: inset 0 1px 0 rgba(242,243,241,.07); }
.il-aplicativos .tela { position: absolute; overflow: hidden; background: var(--superficie); color: var(--grafite); }
.il-aplicativos .tela .r { font: 500 8.5px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--aco); }
.il-aplicativos .rola { display: flex; flex-direction: column; }
.il-aplicativos .rola span { display: block; height: 1em; }
.il-aplicativos .num { height: 1em; overflow: hidden; line-height: 1; }

/* navegador */
.il-aplicativos .cromo { position: absolute; left: 0; right: 0; top: 0; height: 34px; display: flex; align-items: center; gap: 7px; padding-left: 16px; }
.il-aplicativos .cromo i { width: 8px; height: 8px; border-radius: 50%; background: var(--fio-escuro); }
.il-aplicativos .cromo span { position: absolute; left: 50%; top: 7px; width: 200px; margin-left: -100px; height: 20px; border-radius: 5px; background: var(--grafite); font: 500 9px/1 var(--font-mono); letter-spacing: .04em; color: var(--aco-claro); display: grid; place-items: center; }
.il-aplicativos .tela-nav { left: 4px; right: 4px; top: 34px; bottom: 4px; border-radius: 0 0 9px 9px; display: flex; }
.il-aplicativos .lateral { width: 52px; background: var(--gelo); display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 16px; }
.il-aplicativos .lateral b { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--aco); }
.il-aplicativos .lateral b.ativo { background: var(--grafite); color: var(--texto-claro); }
.il-aplicativos .lateral svg { width: 17px; height: 17px; }
.il-aplicativos .principal { position: relative; flex: 1; padding: 20px 24px 0; }
.il-aplicativos .topo-p { display: flex; justify-content: space-between; align-items: flex-end; }
.il-aplicativos .ap-tit { font-weight: 500; font-size: 21px; letter-spacing: -.02em; margin-top: 6px; line-height: 1.1; }
.il-aplicativos .data { font: 500 9px/1.2 var(--font-mono); color: var(--aco); letter-spacing: .04em; }
.il-aplicativos .kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.il-aplicativos .kpis > div { background: var(--gelo); border-radius: 6px; padding: 11px 12px 12px; }
.il-aplicativos .kpis .num { margin-top: 10px; font-weight: 500; font-size: 27px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.il-aplicativos .lista-r { margin-top: 18px; }
.il-aplicativos .lista { position: relative; margin-top: 10px; overflow: hidden; }
.il-aplicativos .lista-nav { height: 190px; }
.il-aplicativos .linha { position: absolute; left: 0; right: 0; top: 0; height: 38px; border-radius: 6px; background: var(--gelo); display: grid; grid-template-columns: 50px 1fr 64px 96px; align-items: center; padding: 0 12px; font-size: 12.5px; }
.il-aplicativos .cod { font: 500 10px/1.2 var(--font-mono); letter-spacing: .02em; color: var(--aco); }
.il-aplicativos .nome { font-weight: 500; }
.il-aplicativos .qtd { color: var(--aco); font-size: 11.5px; }
.il-aplicativos .st { justify-self: end; font: 500 8.5px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--aco); }
.il-aplicativos .tela .verm { background: var(--vermelho-sinal); color: var(--on-signal); }
.il-aplicativos .verm .cod, .il-aplicativos .verm .qtd { color: var(--on-signal); }
.il-aplicativos .etq { justify-self: end; font: 500 8px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; background: var(--on-signal); color: var(--vermelho-tinta); border-radius: 2px; padding: 3px 5px 2px; }
.il-aplicativos .nova { z-index: 2; }
.il-aplicativos .alvo { position: absolute; width: 2px; height: 2px; margin: -1px 0 0 -1px; }
.il-aplicativos #alvoNav { left: 292px; top: 19px; }
.il-aplicativos #alvoTab { left: 20px; top: 17px; }

/* tablet */
.il-aplicativos .tela-tab { left: 12px; right: 12px; top: 12px; bottom: 12px; border-radius: 9px; padding: 16px 14px 0; }
.il-aplicativos .cam { position: absolute; left: 50%; top: 4px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--fio-escuro); }
.il-aplicativos .tab-topo { display: flex; justify-content: space-between; align-items: baseline; }
.il-aplicativos .tab-topo .ap-tit { font-size: 17px; }
.il-aplicativos .tab-topo .num { font: 500 15px/1 var(--font-mono); color: var(--grafite); }
.il-aplicativos .lista-tab { height: 250px; margin-top: 14px; }
.il-aplicativos .card { position: absolute; left: 0; right: 0; top: 0; height: 52px; border-radius: 6px; background: var(--gelo); padding: 9px 11px 0; font-size: 12px; }
.il-aplicativos .card p { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.il-aplicativos .card p + p { margin-top: 8px; justify-content: space-between; }
.il-aplicativos .card .qtd { font-size: 11px; }
.il-aplicativos .passos { display: flex; gap: 3px; }
.il-aplicativos .passos i { width: 9px; height: 9px; border-radius: 2px; background: var(--trilho); }
.il-aplicativos .passos i.ok { background: var(--grafite); }

/* celular */
.il-aplicativos .tela-cel { left: 8px; right: 8px; top: 8px; bottom: 8px; border-radius: 27px; padding: 0 14px; }
.il-aplicativos .barra-cel { display: flex; justify-content: space-between; align-items: center; height: 34px; padding: 4px 6px 0; font-size: 10.5px; font-weight: 500; }
.il-aplicativos .barra-cel svg { width: 30px; height: 10px; }
.il-aplicativos .furo { position: absolute; left: 50%; top: 11px; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: var(--grafite); }
.il-aplicativos .tela-cel .ap-tit { font-size: 19px; margin-top: 4px; }
.il-aplicativos .tela-cel .r { margin-top: 10px; }
.il-aplicativos .tela-cel .ap-tit + .r { margin-top: 16px; }
.il-aplicativos .campo { position: relative; height: 34px; margin-top: 6px; border-radius: 4px; background: var(--gelo); display: flex; align-items: center; padding: 0 10px; font-size: 12.5px; font-weight: 500; }
.il-aplicativos .campo .ph { color: var(--aco); font-weight: 400; }
.il-aplicativos .campo.vazio .cursor { order: -1; margin: 0 1px 0 0; }
.il-aplicativos .cursor { display: inline-block; width: 1.5px; height: 15px; background: var(--grafite); margin-left: 1px; }
.il-aplicativos .ap-itens { margin-top: 8px; display: grid; gap: 7px; }
.il-aplicativos .ap-item { display: flex; justify-content: space-between; align-items: center; height: 38px; }
.il-aplicativos .ap-item b { display: block; font-weight: 500; font-size: 12px; white-space: nowrap; }
.il-aplicativos .ap-item small { display: block; font-size: 10px; color: var(--aco); margin-top: 2px; }
.il-aplicativos .ap-passo { display: flex; align-items: center; height: 26px; border-radius: 6px; background: var(--gelo); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.il-aplicativos .ap-passo i { width: 24px; text-align: center; font-style: normal; color: var(--aco); }
.il-aplicativos .ap-passo span { width: 20px; text-align: center; }
.il-aplicativos .total { display: flex; justify-content: space-between; margin-top: 12px; font-size: 11.5px; color: var(--aco); }
.il-aplicativos .total span:last-child { font: 500 10.5px/1.2 var(--font-mono); color: var(--grafite); }
.il-aplicativos .conf { position: absolute; left: 14px; right: 14px; bottom: 14px; height: 42px; border-radius: 6px; background: var(--grafite); color: var(--texto-claro); overflow: hidden; }
.il-aplicativos .conf .btx { position: absolute; inset: auto 0 0; height: 42px; display: grid; place-items: center; font-size: 13px; font-weight: 500; }
.il-aplicativos .conf .cc { position: absolute; left: 0; right: 0; bottom: 0; height: 86px; padding: 12px 13px; }
.il-aplicativos .conf .cc .r { margin: 0; color: inherit; opacity: .9; }
.il-aplicativos .conf .cc b { display: block; margin-top: 6px; font-weight: 500; font-size: 16px; letter-spacing: -.015em; }
.il-aplicativos .conf .cc p:last-child { position: absolute; left: 13px; right: 13px; bottom: 11px; display: flex; justify-content: space-between; align-items: center; font-size: 11px; }
.il-aplicativos .conf .verm { position: absolute; }
.il-aplicativos .conf #celEscuro .etq { background: var(--texto-claro); color: var(--grafite); }
.il-aplicativos .etq svg { display: inline-block; width: 8px; height: 8px; vertical-align: -1px; margin-right: 3px; }
.il-aplicativos .toque { position: absolute; left: 0; top: 0; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; background: rgba(22,24,27,.16); opacity: 0; pointer-events: none; }

/* tablet e celular: texto em cima, aparelhos embaixo (a cena volta ao fluxo) */
@media (max-width: 1023px) {
  .il-aplicativos .texto { width: auto; }
  .il-aplicativos .cena { position: relative; left: auto; right: auto; top: auto; bottom: auto; height: min(84vw, 560px); margin-top: -8px; }
}