/* O painel por dentro: pílula que desliza, tela que entra suave, progresso da aba. */
.tour-pilula { will-change: transform, width; }
.tour-tela.entra { animation: tela-entra 420ms var(--ease-smooth-out, cubic-bezier(.22,1,.36,1)) both; }
.tour-tela.entra .tour-img { animation: tela-img 520ms var(--ease-smooth-out, cubic-bezier(.22,1,.36,1)) both; }
@keyframes tela-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes tela-img { from { opacity: 0; transform: translateY(10px) scale(.99); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
/* a "câmera": a captura em alta dentro de uma janela fixa; o JS move e aproxima (transform) e anda o cursor */
.tour-camera { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0b0c0e; touch-action: pan-y; }
.tour-palco { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
.tour-palco img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.tour-cursor { position: absolute; left: 0; top: 0; z-index: 3; width: 24px; height: 24px; margin: -3px 0 0 -5px; pointer-events: none; opacity: 0;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.55)); transition: opacity 300ms ease; will-change: transform; }
.tour-camera.rodando .tour-cursor { opacity: 1; }
.tour-cursor svg { display: block; transition: transform 120ms var(--sai); transform-origin: 6px 4px; }
.tour-cursor.clica svg { animation: cursor-clica 340ms var(--sai); }
@keyframes cursor-clica { 30% { transform: scale(.82); } 100% { transform: scale(1); } }
.tour-onda { position: absolute; z-index: 2; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; pointer-events: none; opacity: 0;
  border: 2px solid rgba(153,200,255,.9); box-shadow: 0 0 18px rgba(90,162,255,.6); }
.tour-onda.on { animation: onda 620ms var(--sai) both; }
@keyframes onda { from { opacity: .9; transform: scale(.25); } to { opacity: 0; transform: scale(1.5); } }
.tour-legenda { position: absolute; z-index: 4; left: var(--x, 50%); top: var(--y, 50%); max-width: min(78%, 300px); padding: 8px 12px; border-radius: 10px;
  background: rgba(12,13,15,.94); border: 1px solid var(--azul-borda); box-shadow: 0 16px 40px -12px rgba(0,0,0,.9), 0 0 24px -8px rgba(42,92,240,.6);
  font-size: 14px; line-height: 1.3; color: var(--t1); white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translate(-50%, 30px) scale(.97); transition: opacity 220ms var(--sai), transform 260ms var(--sai); }
.tour-legenda.acima { transform: translate(-50%, calc(-100% - 22px)) scale(.97); }
.tour-legenda.on { opacity: 1; transform: translate(-50%, 34px) scale(1); }
.tour-legenda.acima.on { transform: translate(-50%, calc(-100% - 18px)) scale(1); }
.tour-estrela { position: absolute; z-index: 1; font-size: 1.6%; width: 0; height: 0; color: #ffd66b; pointer-events: none; opacity: 0;
  font-size: clamp(10px, 1.6vw, 20px); text-shadow: 0 0 12px rgba(255,214,107,.8); transform: scale(.3) rotate(-40deg); transition: opacity 260ms ease, transform 420ms var(--ease-bounce, cubic-bezier(.34,1.36,.64,1)); }
.tour-estrela.on { opacity: 1; transform: scale(1) rotate(0deg); }
@media (max-width: 600px) { .tour-legenda { font-size: 12.5px; padding: 6px 10px; white-space: normal; width: max-content; max-width: 70%; } }
.tour-telas { touch-action: pan-y; }
@media (prefers-reduced-motion: reduce) { .tour-tela.entra, .tour-tela.entra .tour-img { animation: none; } }
/* celular: as 4 abas cabem inteiras, número em cima e nome embaixo */
@media (max-width: 600px) {
  .tour-abas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; overflow: visible; }
  .tour-aba { flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 54px; padding: 8px 2px; font-size: 11px; letter-spacing: -.01em; }
  .tour-aba small { font-size: 10px; }
  .tour-progresso { left: 10px; right: 10px; bottom: 4px; }
}