/* Todos os roteiros usam o mesmo ponteiro, com a ponta no canto superior esquerdo. */
.cadastro-demo-cursor,.tour-pointer,.sequence-cursor{width:22px;height:28px;background:url("assets/demo-cursor.svg") center/contain no-repeat;filter:drop-shadow(0 2px 2px rgba(15,23,42,.45))}
.tour-pointer:before,.sequence-cursor:before{display:none}
.tour-pointer.is-clicking{animation:demoCursorPress .5s ease-out;transform-origin:0 0}
.cadastro-demo-click{width:20px;height:20px}
@keyframes demoCursorPress{20%,45%{transform:scale(.85)}100%{transform:scale(1)}}

/* Cada parada aponta para um controle visível na captura correspondente. */
.sequence-cursor:after{left:-10px;top:-10px;width:20px;height:20px;border:2px solid #2563eb;animation:sequenceClickTwo 10s linear infinite}
.sequence-frame.three .sequence-cursor:after{animation:sequenceClickThree 15s linear infinite}
.sequence-frame:hover .sequence-cursor:after{animation-play-state:paused}
.sequence-frame.cursor-crm .sequence-cursor{animation-name:cursorCrm}
.sequence-frame.cursor-alt .sequence-cursor{animation-name:cursorNetwork}
.sequence-frame.cursor-finance .sequence-cursor{animation-name:cursorFinance}
.sequence-frame.cursor-provision .sequence-cursor{animation-name:cursorProvisionPrecise}
.sequence-frame.cursor-map .sequence-cursor{animation-name:cursorMap}
.sequence-frame.cursor-support .sequence-cursor{animation-name:cursorSupport}

@keyframes sequenceClickTwo{
  0%,23%,30%,75%,82%,100%{opacity:0;transform:scale(.35)}
  25%,77%{opacity:1;transform:scale(.55)}
  29%,81%{opacity:0;transform:scale(1.45)}
}
@keyframes sequenceClickThree{
  0%,17%,22%,43%,48%,71%,76%,89%,94%,100%{opacity:0;transform:scale(.35)}
  19%,45%,73%,91%{opacity:1;transform:scale(.55)}
  21%,47%,75%,93%{opacity:0;transform:scale(1.45)}
}

@keyframes cursorCrm{
  0%,8%,25%,44%{left:25%;top:42%}
  51%,65%{left:34%;top:49%}75%,94%{left:34%;top:59%}
  100%{left:25%;top:42%}
}
@keyframes cursorNetwork{
  0%,8%{left:28%;top:34%}25%,44%{left:9%;top:58%}
  51%,65%{left:31%;top:70%}75%,94%{left:86%;top:71%}
  100%{left:28%;top:34%}
}
@keyframes cursorFinance{
  0%,7%,19%,30%{left:92%;top:14%}
  35%,48%,57%,64%{left:90%;top:28%}
  69%,81%{left:94%;top:11%}88%,96%{left:32%;top:48%}
  100%{left:92%;top:14%}
}
@keyframes cursorProvisionPrecise{
  0%,8%{left:27%;top:34%}24%,44%{left:37%;top:62%}
  51%,65%,75%,94%{left:94%;top:11%}
  100%{left:27%;top:34%}
}
@keyframes cursorMap{
  0%,8%{left:45%;top:91%}24%,44%{left:70%;top:54%}
  51%,65%{left:56%;top:55%}75%,94%{left:94%;top:11%}
  100%{left:45%;top:91%}
}
@keyframes cursorSupport{
  0%,8%,24%,44%{left:25%;top:41%}
  51%,65%{left:94%;top:11%}75%,94%{left:54%;top:47%}
  100%{left:25%;top:41%}
}