/* 🎠 Selo do carrossel de prova (`js/carrossel-prova.js`). Arquivo próprio, e não o `css/styles.css`:
   aquele é servido pros 8 funis, e isto só existe nas 2 páginas de teste. */

.prova-selo {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  z-index: 3;
  border: 1px solid rgba(231, 200, 107, .4);
  background: rgba(12, 10, 9, .72);
  backdrop-filter: blur(6px);
  color: #e7c86b;
  font: 600 11.5px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .01em;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  /* 🪤 O selo é botão e mora DENTRO da área de arraste. Sem isto, o pointerdown nele começaria um
     arraste em vez de alternar a pausa, e no meio do gesto ele ainda roubaria o foco. */
  touch-action: manipulation;
  opacity: .82;
  transition: opacity .2s ease, background .2s ease, color .2s ease;
}

.prova-selo:hover { opacity: 1; }

/* pausado precisa ser VISÍVEL de longe: parado sem aviso se lê como página quebrada */
.prova-selo--pausado {
  background: rgba(231, 200, 107, .92);
  color: #16120c;
  border-color: rgba(231, 200, 107, .95);
  opacity: 1;
}

/* o texto do card é o produto aqui — deixar selecionar atrapalha o arraste e não serve pra nada */
.carousel { user-select: none; -webkit-user-select: none; }
.carousel img { -webkit-user-drag: none; user-drag: none; }

/* Quem pediu "menos movimento" no sistema não deve levar card deslizando na cara. O controlador
   continua funcionando no toque e no arraste; o que sai é a animação automática. */
@media (prefers-reduced-motion: reduce) {
  .carousel__track, .carousel__slide { transition: none !important; }
}