/*
 * Lo poco que la muestra le suma al formulario de reserva cuando corre dentro del teléfono de una landing
 * (view/muestra.php). Los valores son los del formulario (su :root): acá no se inventa ninguno.
 */
.agdt-muestra { overflow: hidden; }
/* Dentro del teléfono no se ven las barras de desplazamiento. */
.agdt-muestra * { scrollbar-width: none; }
.agdt-muestra *::-webkit-scrollbar { display: none; }

/* El toque: el punto que muestra dónde se está tocando cuando la muestra se reproduce sola. */
.dedo { position: fixed; left: 0; top: 0; z-index: 50; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--azul); opacity: 0; pointer-events: none; transform: translate(195px, 620px) scale(1); transition: transform 520ms var(--cajon), opacity 220ms ease; box-shadow: 0 0 0 0 var(--azul); }
.dedo.visto { opacity: .28; }
.dedo.aprieta { opacity: .5; animation: muestra-onda 620ms var(--sale); }
@keyframes muestra-onda {
  0% { box-shadow: 0 0 0 0 var(--azul); }
  100% { box-shadow: 0 0 0 26px transparent; }
}

/* Entre una vuelta y la siguiente la pantalla se funde. */
.agdt-muestra-sola .escena { transition: opacity 420ms ease; }
.agdt-muestra-sola.se-va .escena { opacity: 0; }
/* Sola no se toca: los enlaces del formulario (la cuenta, «Mis reservas») no llevan a ningún lado. */
.agdt-muestra-sola { pointer-events: none; }

/* Quieta (los recortes de la landing): no se toca, y aparece recién cuando llegó a su paso. */
.agdt-muestra-quieta { pointer-events: none; }
.agdt-muestra-quieta .dedo { display: none; }
.agdt-muestra-quieta .escena { opacity: 0; }
.agdt-muestra-quieta.lista .escena { opacity: 1; transition: opacity 320ms ease; }

@media (prefers-reduced-motion: reduce) {
  .dedo { display: none; }
}