/* ============================================================
   INFOBR — interações com o mouse (versão 2, 23/10/2026)
   Par do interacoes.js. Usado no site institucional e na Área do Colaborador.
   O JS marca <html class="ix-mouse"> quando há mouse e "ix-movimento" quando o
   sistema não pediu menos movimento. Sem essas classes, tudo fica como antes.
   ============================================================ */

.ix-camada{position:absolute;inset:0;pointer-events:none}

/* ---------- 1 · holofote ---------- */
/* no .hero, as camadas repetem em repouso os dois brilhos fixos do style.css */
.ix-luz{z-index:1;background:radial-gradient(var(--ix-raio,450px) circle at var(--mx,50%) var(--my,50%),var(--ix-cor-luz,rgba(37,99,201,.42)) 0%,rgba(37,99,201,0) 66%)}
.ix-verde{z-index:1;background:radial-gradient(320px circle at var(--gx,10%) var(--gy,100%),rgba(61,220,151,.16) 0%,rgba(61,220,151,0) 68%)}
.ix-pontos{z-index:1;opacity:0;transition:opacity .45s ease;
  background-image:radial-gradient(var(--ix-cor-pontos,rgba(127,178,255,.55)) 1px,transparent 1.7px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(230px circle at var(--mx,50%) var(--my,50%),#000 0%,transparent 100%);
          mask-image:radial-gradient(230px circle at var(--mx,50%) var(--my,50%),#000 0%,transparent 100%)}
.ix-holofote .ix-luz,.ix-holofote .ix-verde,.ix-holofote .ix-pontos,.ix-solto .ix-camada{display:none}
.ix-holofote.ix-ligado .ix-luz,.ix-holofote.ix-ligado .ix-verde,.ix-holofote.ix-ligado .ix-pontos,
.ix-solto.ix-ligado .ix-camada{display:block}
.ix-holofote.ix-ligado::before,.ix-holofote.ix-ligado::after{display:none}
.ix-dentro>.ix-pontos{opacity:1}
/* barra da Área do Colaborador: o brilho só aparece com o mouse em cima */
.ix-solto{position:relative;overflow:hidden;--ix-raio:260px;--ix-cor-luz:rgba(77,141,232,.45);--ix-cor-pontos:rgba(143,179,216,.5)}
.ix-solto>:not(.ix-camada){position:relative;z-index:2}
.ix-solto .ix-luz{opacity:0;transition:opacity .35s ease}
.ix-solto.ix-dentro .ix-luz{opacity:1}

/* ---------- 2 · cartões que inclinam ---------- */
.ix-mouse .ix-cartao{position:relative}
.ix-mouse .ix-cartao::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:3;
  opacity:0;transition:opacity .3s;
  background:radial-gradient(260px circle at var(--gx,50%) var(--gy,50%),var(--ix-borda,rgba(37,99,201,.95)),rgba(37,99,201,0) 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.ix-mouse .ix-cartao.ix-aceso::before{opacity:1}
.ix-mouse.ix-movimento .ix-cartao:not(.sobe),.ix-mouse.ix-movimento .ix-cartao.on{
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));
  transition:transform .55s cubic-bezier(.2,.7,.3,1),box-shadow .25s ease,border-color .25s ease,opacity .7s ease}
.ix-mouse.ix-movimento .ix-cartao.ix-aceso{--ty:-4px}
.ix-mouse.ix-movimento .ix-cartao.ix-mexendo{transition:transform .1s linear,box-shadow .25s ease,border-color .25s ease,opacity .7s ease}
.ix-mouse.ix-movimento .ix-cartao::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;opacity:0;transition:opacity .3s;
  background:radial-gradient(380px circle at var(--gx,50%) var(--gy,50%),var(--ix-reflexo,rgba(127,178,255,.2)),transparent 60%)}
.ix-mouse.ix-movimento .ix-cartao.foto{--ix-reflexo:rgba(255,255,255,.2)}
.ix-mouse.ix-movimento .ix-cartao.ix-aceso::after{opacity:1}
.ix-mouse.ix-movimento .ix-cartao .ico,.ix-mouse.ix-movimento .ix-cartao .icone,.ix-mouse.ix-movimento .ix-cartao .ic{
  transform:translate(calc(var(--px,0) * 7px),calc(var(--py,0) * 7px));transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.ix-mouse.ix-movimento .ix-cartao.foto img{transform:scale(1.06) translate(calc(var(--px,0) * -6px),calc(var(--py,0) * -6px));transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.ix-mouse.ix-movimento .ix-cartao.ix-mexendo .ico,.ix-mouse.ix-movimento .ix-cartao.ix-mexendo .icone,
.ix-mouse.ix-movimento .ix-cartao.ix-mexendo .ic,.ix-mouse.ix-movimento .ix-cartao.ix-mexendo img{transition:transform .1s linear}
.ix-mouse .cartao.ix-cartao{--ix-borda:rgba(11,79,158,.9);--ix-reflexo:rgba(11,79,158,.08)}

/* ---------- 3 · rede viva ---------- */
.ix-rede-host{position:relative;overflow:hidden}
.ix-rede-host>:not(.ix-camada){position:relative;z-index:2}
.ix-rede{z-index:0;width:100%;height:100%;display:block}
/* na faixa escura, o texto fica no centro: escurece o meio para a leitura */
/* no topo da página inicial, o texto fica à esquerda */
.ix-vela-lado{background:linear-gradient(90deg,rgba(8,14,26,.6) 0%,rgba(8,14,26,.25) 40%,rgba(8,14,26,0) 62%)!important}
@media(max-width:980px){.ix-vela-lado{background:linear-gradient(180deg,rgba(8,14,26,.55) 0%,rgba(8,14,26,.3) 55%,rgba(8,14,26,.1) 100%)!important}}
.ix-rede-host>.ix-pontos{display:none!important}
.ix-vela{z-index:1;background:radial-gradient(ellipse 60% 70% at 50% 50%,rgba(8,14,26,.82) 0%,rgba(8,14,26,.45) 60%,rgba(8,14,26,0) 100%)}
/* na tela de entrada da equipe (fundo claro), a rede some nas bordas */
main.ix-rede-host>.ix-rede{-webkit-mask-image:radial-gradient(ellipse 75% 80% at 50% 45%,#000 45%,transparent 100%);
                                  mask-image:radial-gradient(ellipse 75% 80% at 50% 45%,#000 45%,transparent 100%)}

/* ---------- 4 · botões magnéticos ---------- */
html body .bt.bt.ix-ima{transform:translate(var(--tx,0px),var(--ty,0px));transition:transform .14s ease-out,background .2s,box-shadow .3s}
html body .bt.bt.ix-solta{transition:transform .6s cubic-bezier(.2,1.5,.35,1),background .2s,box-shadow .3s}
html body .bt.bt-1.ix-ima{box-shadow:0 10px 34px rgba(37,99,201,.5)}

/* ---------- 5 · parallax em camadas ---------- */
.ix-mouse.ix-movimento .ix-par:not(.sobe),.ix-mouse.ix-movimento .ix-par.on{
  transform:perspective(1000px) rotateX(var(--ix-rx,0deg)) rotateY(var(--ix-ry,0deg))}
.ix-mouse.ix-movimento .ix-par.ix-anda{transition:opacity .7s ease}
.ix-mouse.ix-movimento .moldura.ix-par img{transform:scale(1.08) translate(calc(var(--ix-nx,0) * -10px),calc(var(--ix-ny,0) * -10px))}
.ix-mouse.ix-movimento .ix-par [data-ix-prof]{transform:translate(calc(var(--ix-nx,0) * var(--p,-20) * 1px),calc(var(--ix-ny,0) * var(--p,-20) * 1px))}
/* "Como funciona" (página inicial): relatório de horas no lugar da foto, com selos flutuando */
.moldura{position:relative}
.duo .moldura.ix-rel{overflow:visible;box-shadow:none;border-radius:0}
.rel{background:#fff;border:1px solid var(--linha);border-radius:var(--raio-g);box-shadow:var(--sombra-f);overflow:hidden;font-size:14px;line-height:1.4;color:var(--tinta)}
.rel-topo{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--escuro-2);color:rgba(255,255,255,.66);padding:16px 22px;font-size:13px}
.rel-topo b{display:block;color:#fff;font-size:15.5px;letter-spacing:-.01em;margin-bottom:2px}
.rel-topo i{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--neon);
  border:1px solid rgba(61,220,151,.4);border-radius:100px;padding:3px 9px}
.rel-saldo{padding:18px 22px 6px}
.rel-num{display:flex;align-items:baseline;gap:6px;color:var(--tinta-2);font-size:14px;margin-bottom:10px}
.rel-num b{font-size:28px;font-weight:800;letter-spacing:-.04em;color:var(--tinta)}
.rel-num span{margin-left:auto}
.rel-num span b{font-size:17px;color:var(--azul-marca)}
.rel-barra{height:9px;border-radius:9px;background:var(--azul-clr);overflow:hidden}
.rel-barra i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--azul) 0%,#4f8de6 70%,var(--neon) 100%)}
.rel-lista{list-style:none;margin:8px 0 0;padding:0 22px}
.rel-lista li{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:start;padding:11px 0;border-top:1px solid var(--linha)}
.rel-lista time,.rel-lista b{font:600 12.5px/1.6 ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:var(--tinta-2);font-variant-numeric:tabular-nums}
.rel-lista b{color:var(--tinta)}
.rel-lista span{font-weight:650;font-size:14px;min-width:0}
.rel-lista small{display:block;font-weight:500;font-size:12.5px;color:var(--tinta-2);margin-top:2px}
.rel-lista .rel-mais{display:block;color:var(--tinta-2);font-size:13px;font-weight:600}
.rel-pe{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--fundo);border-top:1px solid var(--linha);padding:14px 22px;font-size:13px;color:var(--tinta-2)}
.rel-pe em{font-style:normal;font-weight:700;color:#fff;background:var(--azul);border-radius:9px;padding:8px 13px;box-shadow:0 3px 12px rgba(37,99,201,.3)}
@media(max-width:760px){.rel-topo,.rel-saldo,.rel-pe{padding-left:16px;padding-right:16px}.rel-lista{padding:0 16px}
  .ix-rel .ix-selo{right:8px!important}}
@media(max-width:980px){.ix-rel{margin-bottom:14px}}
/* holofote claro na seção do relatório */
.ix-solto.ix-claro{--ix-raio:420px;--ix-cor-luz:rgba(37,99,201,.13);--ix-cor-pontos:rgba(37,99,201,.3)}
.ix-selo{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;padding:9px 13px;border-radius:12px;
  background:rgba(8,14,26,.76);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.16);
  box-shadow:0 14px 34px rgba(0,0,0,.4);font-size:13px;font-weight:650;color:#fff;line-height:1.3;max-width:calc(100% - 44px)}
.ix-selo small{display:block;font-weight:500;color:rgba(255,255,255,.66);font-size:11.5px}
.ix-selo .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none}
.ix-selo .ic svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:760px){.ix-selo{font-size:12px;padding:7px 10px;gap:8px}.ix-selo .ic{width:24px;height:24px}.ix-selo small{font-size:10.5px}}

/* ---------- 6 · raio-x da instalação ---------- */
.rx-sec{background:var(--escuro);color:#fff;position:relative;overflow:hidden}
.rx-sec::before{content:"";position:absolute;width:900px;height:900px;left:-300px;top:-420px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(37,99,201,.3) 0%,rgba(37,99,201,0) 66%)}
.rx-sec .wrap{position:relative}
.rx-sec .olho{color:var(--neon)}
.rx-sec h2{color:#fff}
.rx-sec .tit p{color:rgba(255,255,255,.72)}
.rx-palco{background:#e9eef5;border-radius:var(--raio-g);padding:clamp(10px,2vw,22px);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.rx{position:relative;width:100%;aspect-ratio:960/580;border-radius:12px;overflow:hidden;user-select:none;-webkit-user-select:none;
  box-shadow:0 10px 40px rgba(13,20,32,.12);touch-action:pan-y}
.rx img{position:absolute;inset:0;width:100%;height:100%;display:block}
/* sem JavaScript: metade da planta já mostra a instalação */
.rx .rx-infra{position:absolute;inset:0;clip-path:inset(0 50% 0 0)}
.rx .rx-borda{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:var(--neon);box-shadow:0 0 18px rgba(61,220,151,.7);pointer-events:none}
.rx.rx-lente .rx-borda,.rx.rx-tudo .rx-borda{display:none}
.rx.rx-lente{cursor:none}
.rx.rx-tudo .rx-infra{clip-path:none}
.rx .rx-mira,.rx .rx-leitura,.rx .rx-dica{position:absolute;left:0;top:0;pointer-events:none}
.rx .rx-mira{border-radius:50%;opacity:0;transition:opacity .2s;border:1.5px solid rgba(61,220,151,.95);
  box-shadow:0 0 0 1px rgba(7,12,22,.35),0 0 36px rgba(61,220,151,.28),inset 0 0 0 1px rgba(7,12,22,.25)}
.rx .rx-mira::before,.rx .rx-mira::after{content:"";position:absolute;background:rgba(61,220,151,.95)}
.rx .rx-mira::before{left:50%;top:-7px;bottom:-7px;width:1.5px;margin-left:-.75px;
  -webkit-mask:linear-gradient(#000 0 0) top/100% 14px no-repeat,linear-gradient(#000 0 0) bottom/100% 14px no-repeat,linear-gradient(#000 0 0) center/100% 9px no-repeat;
          mask:linear-gradient(#000 0 0) top/100% 14px no-repeat,linear-gradient(#000 0 0) bottom/100% 14px no-repeat,linear-gradient(#000 0 0) center/100% 9px no-repeat}
.rx .rx-mira::after{top:50%;left:-7px;right:-7px;height:1.5px;margin-top:-.75px;
  -webkit-mask:linear-gradient(#000 0 0) left/14px 100% no-repeat,linear-gradient(#000 0 0) right/14px 100% no-repeat,linear-gradient(#000 0 0) center/9px 100% no-repeat;
          mask:linear-gradient(#000 0 0) left/14px 100% no-repeat,linear-gradient(#000 0 0) right/14px 100% no-repeat,linear-gradient(#000 0 0) center/9px 100% no-repeat}
.rx .rx-leitura{opacity:0;transition:opacity .2s;background:rgba(7,12,22,.88);color:#dfe8f5;white-space:nowrap;
  font:500 11.5px/1.45 ui-monospace,"SF Mono",Menlo,Consolas,monospace;padding:6px 9px;border-radius:7px;border:1px solid rgba(61,220,151,.35)}
.rx .rx-leitura b{color:var(--neon);font-weight:600}
.rx.rx-dentro .rx-mira,.rx.rx-dentro .rx-leitura{opacity:1}
.rx .rx-dica{left:12px;top:12px;background:rgba(13,20,32,.82);color:#fff;font-size:12.5px;font-weight:650;padding:7px 11px;border-radius:8px;transition:opacity .3s}
.rx .rx-dica:empty,.rx.rx-dentro .rx-dica,.rx.rx-tudo .rx-dica{opacity:0}
.rx-ferr{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:14px}
.rx-legenda{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:0;list-style:none;font-size:13.5px;font-weight:600;color:var(--tinta-2)}
.rx-legenda li{display:flex;align-items:center;gap:8px}
.rx-legenda i{width:9px;height:9px;border-radius:50%;display:block}
.rx-ferr button{margin-left:auto;font:inherit;font-size:14.5px;font-weight:700;color:var(--azul-marca);background:#fff;border:1px solid #cddcf3;
  border-radius:11px;padding:10px 16px;cursor:pointer;transition:.2s}
.rx-ferr button:hover{border-color:var(--azul)}
.rx-ferr button:focus-visible,.rx-cortina input:focus-visible{outline:3px solid rgba(37,99,201,.45);outline-offset:2px}
.rx-ferr button[aria-pressed="true"]{background:var(--azul-marca);color:#fff;border-color:var(--azul-marca)}
.rx-cortina{display:flex;align-items:center;gap:12px;width:100%;font-size:14.5px;font-weight:650;color:var(--tinta-2)}
.rx-cortina input{flex:1;accent-color:var(--azul)}
.rx-cortina[hidden]{display:none}
@media(max-width:760px){.rx-ferr button{margin-left:0}}