/*
 * Conqr Reasons (widget). Port exacto de site.css: .why, .why-pin, .why-in, .why-h, .why-track, .wt, .wtn,
 * .why-win, .wp, .why-desc, .wd, .why-count, .why.static y sus @media (las tres capas del original
 * fusionadas en su valor final). WP: canvas WebGL de las fotos (.cq-why__gl) dentro de la ventana.
 */

.cq-why {
	position: relative;
	z-index: 4;
	margin-top: clamp(40px, 8vh, 100px);
	line-height: normal;
}
.cq-why__pin {
	position: relative;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	background: #000;
	box-shadow: 0 -40px 90px -20px rgba(0, 0, 0, .75);
	will-change: border-radius;
}
.cq-why__in {
	position: absolute;
	inset: 0;
	will-change: transform;
}
.cq-why__h {
	position: absolute;
	left: var(--cq-m);
	top: calc(env(safe-area-inset-top, 0px) + 110px);
	margin: 0;
	font-family: inherit;
	font-size: clamp(46px, 8vw, 150px);
	font-weight: 700;
	letter-spacing: -.06em;
	line-height: .9;
	text-transform: lowercase;
	color: inherit;
	will-change: transform, opacity;
}
.cq-why__track {
	position: absolute;
	left: 0;
	top: 22vh;
	display: flex;
	gap: clamp(40px, 7vw, 140px);
	white-space: nowrap;
	will-change: transform;
}
.cq-why__track .cq-wt {
	font-size: clamp(28px, 3.4vw, 60px);
	font-weight: 700;
	letter-spacing: -.045em;
	line-height: 1;
	color: rgba(255, 255, 255, .18);
}
.cq-why__track .cq-wtn {
	display: inline-block;
	vertical-align: top;
	margin-right: .35em;
	font-size: .38em;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1;
	transform: translateY(.25em);
}
.cq-why__win {
	position: absolute;
	left: 46vw;
	top: calc(22vh + clamp(28px, 3.4vw, 60px) + 22px);
	width: min(44vw, 820px);
	height: min(64vh, 760px);
	overflow: hidden;
	border-radius: 4px;
}
.cq-why__win .cq-wp {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	overflow: hidden;
	background: #020a3a;
	will-change: clip-path;
}
.cq-why__win .cq-wp img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	will-change: transform;
}
/* WP · WebGL: el canvas dibuja las fotos; los .wp quedan como respaldo sin pintarse */
.cq-why__gl {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}
.cq-why__win.has-gl .cq-wp {
	visibility: hidden;
}
/* WP · escena «hands» (motivo 1): la figura 3D del motor sobre el canvas, en toda la ventana para poder
   arrastrarla; la mano de agarrar solo sobre la figura (is-grab lo pone reasons.js) */
.cq-why__fig {
	z-index: 1;
}
.cq-why__fig.cq-chrome__view.is-interactive {
	cursor: default;
}
.cq-why__fig.cq-chrome__view.is-interactive.is-grab {
	cursor: grab;
}
.cq-why__fig.cq-chrome__view.is-interactive.is-grab:active {
	cursor: grabbing;
}
.cq-why__desc {
	position: absolute;
	left: var(--cq-m);
	top: calc(22vh + clamp(28px, 3.4vw, 60px) + 22px);
	width: min(32ch, 34vw);
}
.cq-why__desc .cq-wd {
	position: absolute;
	inset: 0 auto auto 0;
	width: 100%;
}
.cq-why__desc h3 {
	display: none;
}
.cq-why__desc p {
	margin: 0;
	font-size: clamp(16px, 1.25vw, 19px);
	line-height: 1.5;
	color: rgba(255, 255, 255, .86);
}
.cq-why__count {
	position: absolute;
	right: var(--cq-m);
	bottom: calc(env(safe-area-inset-bottom, 0px) + 34px);
	display: flex;
	gap: 18px;
	font-size: 12px;
	color: var(--cq-dim);
}

@media (max-width: 820px) {
	.cq-why__track {
		top: 20vh;
	}
	.cq-why__win {
		left: var(--cq-m);
		right: var(--cq-m);
		width: auto;
		top: calc(20vh + 52px);
		height: 44vh;
	}
	.cq-why__desc {
		top: auto;
		bottom: calc(env(safe-area-inset-bottom, 0px) + 90px);
		width: auto;
		right: var(--cq-m);
		height: 7.5em;
	}
}

/* sin movimiento / sin GSAP: lista simple */
.cq-why.is-static .cq-why__pin {
	height: auto;
	overflow: visible;
	padding: clamp(80px, 14vh, 140px) var(--cq-m);
	display: grid;
	gap: 28px;
}
.cq-why.is-static .cq-why__in {
	position: static;
}
.cq-why.is-static .cq-why__h,
.cq-why.is-static .cq-why__track,
.cq-why.is-static .cq-why__desc,
.cq-why.is-static .cq-why__win,
.cq-why.is-static .cq-why__count {
	position: static;
	transform: none;
	opacity: 1;
}
.cq-why.is-static .cq-why__track,
.cq-why.is-static .cq-why__count,
.cq-why.is-static .cq-why__win {
	display: none;
}
.cq-why.is-static .cq-why__desc {
	width: auto;
	display: grid;
	gap: 28px;
}
.cq-why.is-static .cq-why__desc .cq-wd {
	position: static;
}
.cq-why.is-static .cq-why__desc h3 {
	display: block;
	margin: 0 0 10px;
	font-size: clamp(26px, 2.4vw, 40px);
	letter-spacing: -.04em;
}

/* Editor de Elementor: la lista simple (sin pin). */
.elementor-editor-active .cq-why .cq-why__pin {
	height: auto;
	overflow: visible;
	padding: clamp(80px, 14vh, 140px) var(--cq-m);
	display: grid;
	gap: 28px;
}
.elementor-editor-active .cq-why .cq-why__in,
.elementor-editor-active .cq-why .cq-why__h,
.elementor-editor-active .cq-why .cq-why__desc,
.elementor-editor-active .cq-why .cq-why__desc .cq-wd {
	position: static;
}
.elementor-editor-active .cq-why .cq-why__track,
.elementor-editor-active .cq-why .cq-why__count,
.elementor-editor-active .cq-why .cq-why__win {
	display: none;
}
.elementor-editor-active .cq-why .cq-why__desc {
	width: auto;
	display: grid;
	gap: 28px;
}
.elementor-editor-active .cq-why .cq-why__desc h3 {
	display: block;
	margin: 0 0 10px;
}
/* WP · escena «holo» (motivo 2): sobre la mesa el cursor indica que se puede tocar */
.cq-why__win.is-table {
	cursor: pointer;
}
/* WP · escena «cubes» (motivo 3): los bloques 3D del motor sobre el canvas; el puntero lo lee la ventana */
.cq-why__cubes {
	z-index: 1;
	pointer-events: none;
}