/* ============================================================
   A VITRINE VIVA — landing v7 (carrega depois do v4.css)
   Peças do setor flutuando no papel, só a imagem, revezando-se
   uma a uma. Sem maquete, sem lente, sem interruptor.
   ============================================================ */
.pin{cursor:default}
#stage{position:absolute;inset:0;z-index:1;pointer-events:none}
.vv{position:absolute;inset:0;pointer-events:none;--px:0px;--py:0px}
.vv [data-sys="eletrica"]{--c:var(--c-eletrica)}.vv [data-sys="automacao"]{--c:var(--c-automacao)}
.vv [data-sys="hidraulica"]{--c:var(--c-hidraulica)}.vv [data-sys="pead"]{--c:var(--c-pead)}
.vv-3d{position:absolute;inset:0;perspective:1900px}
.vv-grp{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:50% 56%;will-change:transform}

/* vaga: uma caixa que recebe uma peça de cada vez (duas camadas para o fade cruzado) */
.vv-s{position:absolute;left:0;top:0;transform-origin:50% 50%;pointer-events:auto;cursor:pointer;visibility:hidden;opacity:0;will-change:transform;border-radius:14px;z-index:5}
.vv-s:focus-visible{outline-offset:8px}
.vv-l{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;will-change:transform,opacity}
.vv-l img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;
  transform:translate3d(calc(var(--px) * var(--z,1)),calc(var(--py) * var(--z,1)),0);
  filter:drop-shadow(0 14px 16px rgba(var(--shadow),.22));transition:filter .45s}
.vv-s.hot{z-index:40}
.vv-s.hot img{filter:drop-shadow(0 28px 30px rgba(var(--shadow),.36))}

/* ficha do setor (topo da página) */
.vv-ttl{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:flex-start;gap:5px;opacity:0;pointer-events:none;z-index:50}
.vv-ttl.on{opacity:1}.vv-ttl.on>*{pointer-events:auto}
.vv-k{display:inline-flex;align-items:center;gap:9px;color:var(--ink-3);font-size:10.5px}
.vv-k::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c,var(--orange))}
.vv-n{font-weight:500;font-size:clamp(20px,1.8vw,28px);letter-spacing:-.035em;line-height:1.05;color:var(--ink)}
.vv-d{color:var(--ink-2);font-size:14px;line-height:1.4;max-width:46ch}
.vv-b{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-top:1px}
.vv-go{position:absolute;right:0;top:0;display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:99px;font-size:13.5px;font-weight:500;letter-spacing:-.01em;
  border:1px solid var(--line-2);color:var(--ink);background:var(--glass);transition:transform .5s var(--ease),background .3s,color .3s,border-color .3s}
.vv-go:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.vv-go:active{transform:scale(.96)}
.vv-go svg{transition:transform .4s var(--ease)}.vv-go:hover svg{transform:translateY(3px)}

/* abas de setor (só no topo da página) */
.vv-tabs{position:absolute;left:0;top:0;display:flex;align-items:center;gap:4px;padding:5px;border-radius:99px;opacity:0;pointer-events:none;z-index:50;
  background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px var(--glass-line),0 18px 40px -20px rgba(var(--shadow),.45);
  transition:opacity .4s,transform .8s var(--ease);transform:translateY(10px)}
.vv-tabs.on{opacity:1;pointer-events:auto;transform:none}
.vv-tabs button{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:99px;font-size:13px;color:var(--ink-2);transition:color .25s,background .3s,transform .4s var(--ease)}
.vv-tabs button i{width:7px;height:7px;border-radius:50%;background:var(--c);flex-shrink:0}
.vv-tabs button b{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.08em;opacity:.65}
.vv-tabs button:hover{color:var(--ink)}
.vv-tabs button.on{background:var(--c);color:#fff}.vv-tabs button.on i{background:#fff}.vv-tabs button.on b{opacity:.85}
.vv-tabs button:active{transform:scale(.96)}

/* visão geral (quatro setores) */
.vv-q{position:absolute;left:0;top:0;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;gap:2px;opacity:0;pointer-events:none;z-index:50;
  padding:8px 14px;border-radius:14px;text-align:center;transition:opacity .4s,background .3s}
.vv-q.on{opacity:1;pointer-events:auto}
.vv-q i{width:7px;height:7px;border-radius:50%;background:var(--c);margin-bottom:4px}
.vv-q b{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);transition:color .25s}
.vv-q span{font-weight:500;font-size:15px;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.vv-q:hover{background:var(--card-h)}.vv-q:hover b{color:var(--orange)}

/* dica sob o cursor */
.vv-tip{position:absolute;left:0;top:0;z-index:60;transform:translate(-50%,-100%) translateY(6px);opacity:0;pointer-events:none;background:var(--ink);color:var(--paper);padding:7px 12px;border-radius:11px;white-space:nowrap;display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1.2;transition:opacity .22s,transform .45s var(--ease);box-shadow:0 14px 28px -12px rgba(var(--shadow),.55)}
.vv-tip.on{opacity:1;transform:translate(-50%,-100%)}
.vv-tip b{font-weight:500;font-size:13px;letter-spacing:-.01em}
.vv-tip span{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-solid-2)}
.vv-tip span:empty{display:none}
.vv-tip::after{content:"";position:absolute;left:50%;bottom:-4px;width:9px;height:9px;background:var(--ink);transform:translateX(-50%) rotate(45deg);border-radius:2px}

@media (max-width:860px){
  /* o papel só precisa cobrir o texto do topo: a vitrine fica acima dele */
  #hero::before{background:linear-gradient(0deg,var(--paper) 0%,var(--paper) 30%,color-mix(in srgb,var(--paper) 60%,transparent) 36%,transparent 42%)}
  .vv-l img{filter:drop-shadow(0 7px 9px rgba(var(--shadow),.18))}
  .vv-ttl{align-items:center;text-align:center;gap:1px}
  .vv-n{font-size:16px;letter-spacing:-.02em}.vv-d,.vv-b,.vv-go{display:none}
  .vv-k{font-size:9.5px}
  .vv-tabs{display:none}
}
@media (prefers-reduced-motion:reduce){.vv-grp{transform:none!important}}