/*
 * Conqr Touch (widget). Port exacto de site.css: .screen, .stage, .stage>img.hand, .drop, .drop img,
 * .drop.lit img, .spark y sus @media. La <img> c01 de la gota es una vista del motor 3D (.cq-drop__fig,
 * caja cuadrada del ancho de la gota).
 */

.cq-touch {
	height: 100vh;
	height: 100svh;
	position: relative;
	overflow: hidden;
}

.cq-stage {
	position: absolute;
	left: 50%;
	top: 50%;
	width: max(100vw, 177.78vh);
	height: max(56.25vw, 100vh);
	transform: translate(-50%, -50%);
}
/*
 * WP · móvil vertical (no está en el original): con el escenario centrado la yema y la gota caían justo
 * después del borde derecho (gota en x ≈ 100vw a 390 px) y no se podía tocar. Mismo escenario 16:9,
 * encuadrado para que la yema (59.6 %) quede al 34 % del ancho y la gota entera dentro.
 */
@media (max-aspect-ratio: 4/5) {
	.cq-stage {
		left: calc(34vw - 214.56vw);
		width: 360vw;
		height: 202.5vw;
		transform: translateY(-50%);
	}
}
/* WP · 2.5D: el canvas de js/depth.js ocupa el lugar de la mano (misma caja y máscara) */
.cq-stage > canvas.cq-depth {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0;
	pointer-events: none;
	-webkit-mask-image: radial-gradient(58% 68% at 42% 52%, #000 35%, transparent 100%);
	mask-image: radial-gradient(58% 68% at 42% 52%, #000 35%, transparent 100%);
}
.cq-stage.has-depth > img.cq-hand {
	visibility: hidden;
}
.cq-stage > img.cq-hand {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	opacity: 0;
	-webkit-mask-image: radial-gradient(58% 68% at 42% 52%, #000 35%, transparent 100%);
	mask-image: radial-gradient(58% 68% at 42% 52%, #000 35%, transparent 100%);
}

/* Figura jugable (no está en el original): capa a todo el escenario que solo mueve touch.js. */
.cq-drop-play {
	position: absolute;
	inset: 0;
	pointer-events: none;
	will-change: transform;
}
.cq-touch {
	touch-action: pan-y;
}
.cq-touch.is-play .cq-drop {
	pointer-events: auto;
	cursor: grab;
	touch-action: none;
}
.cq-touch.is-grab .cq-drop {
	cursor: grabbing;
}
.cq-spark--play {
	transform: scale(.2);
}

.cq-drop {
	position: absolute;
	pointer-events: none;
	left: 63%;
	top: 6%;
	width: 15%;
	will-change: transform;
	opacity: 0;
}
.cq-drop .cq-drop__fig {
	position: relative;
	inset: auto;
	width: 100%;
	aspect-ratio: 1;
	transition: filter .6s;
}
.cq-drop.is-lit .cq-drop__fig {
	filter: drop-shadow(0 0 28px rgba(80, 130, 255, .85));
}

.cq-spark {
	position: absolute;
	left: 59.6%;
	top: 22.4%;
	width: 14px;
	height: 14px;
	margin: -7px;
	border-radius: 50%;
	background: #cfdcff;
	box-shadow: 0 0 30px 12px rgba(120, 160, 255, .9);
	opacity: 0;
	transform: scale(.2);
}

@media (prefers-reduced-motion: reduce) {
	.cq-stage > img.cq-hand,
	.cq-drop {
		opacity: 1 !important;
		filter: none !important;
		transform: none !important;
	}
}

/* Editor de Elementor: sin escena, la mano y la gota en su sitio. */
.elementor-editor-active .cq-stage > img.cq-hand,
.elementor-editor-active .cq-drop {
	opacity: 1;
}