/* Perguntas do diagrama do topo (hero-perguntas.js): um botão invisível sobre cada caixa e um balão. */
.hero-visual .prancha>.hp-camada{position:absolute;inset:0;z-index:3;pointer-events:none}
.hp-ponto{position:absolute;padding:0;border:0;border-radius:4px;background:transparent;cursor:help;pointer-events:auto;
  box-shadow:0 0 0 0 transparent;transition:box-shadow .2s,background .2s}
.hp-ponto::after{content:"";position:absolute;right:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--prancha-tinta);opacity:.55;transition:opacity .2s}
.hp-ponto:hover::after,.hp-ponto.is-ativo::after{opacity:1}
.hp-ponto:is(:hover,.is-ativo){background:rgba(255,255,255,.06);box-shadow:0 0 0 1px rgba(231,232,231,.55)}
.hp-ponto:focus-visible{outline:2px solid var(--prancha-tinta);outline-offset:2px}
.hp-balao{position:absolute;left:0;top:0;max-width:230px;padding:10px 14px;border-radius:8px;pointer-events:none;
  background:var(--papel-1);color:var(--tinta);font:500 14px/1.4 var(--font);text-wrap:balance;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.45);opacity:0;transform:translateY(4px);transition:opacity .18s,transform .22s cubic-bezier(.22,1,.36,1)}
.hp-balao.is-visivel{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.hp-balao{transition:none;transform:none}}
/* a mira do topo trava no ponto; a etiqueta de coordenadas sai para não cobrir a pergunta */
.portfolio-v5>.header-crosshair.is-pergunta :is(.crosshair-label,.crosshair-label-bg){display:none}