/* Vidas – Hero Tech
 * Escritorio/tablet (vídeo VIDAS-ANIMACION-TECH 1920×1080: contenido de x 40 a 1878 = 100cqw; escenario desde y 132):
 *   cian 335px → 18.25cqw · morado final 340px → 18.5cqw (grande 765px) · palabra ~305px → 16.57cqw
 *   subtítulo 62/70.5 → 3.4/3.84cqw a 36.9cqw.
 * Móvil (vídeo VIDAS-ANIMACION-TECH-MOB 1224×1920: contenido de x 69 a 1155 = 100cqw; escenario desde y 222):
 *   cian 436px → 40.15cqw · morado final 466px → 42.9cqw (grande 934px) · palabra → 28.1cqw · subtítulo 67/74 → 6.17/6.81cqw.
 * Sin fondo ni espacio vertical: los pone el contenedor y los espaciadores de Elementor.
 */

.vht {
	--vht-word: #000;
	--vht-sub: #000;
	--vht-p-bg: #4e20e4;
	--vht-p-icon: #fff;
	--vht-c-bg: #aaedff;
	--vht-c-icon: #000;

	/* geometría (escritorio) */
	--vht-h: 49.5cqw;
	--vht-top: 2cqw;
	--vht-bottom: 3cqw;
	--vht-bleed: 0px;                    /* en móvil los círculos entran/salen por el borde de la pantalla */
	--vht-c-d: 18.25cqw;
	--vht-p-d: 18.5cqw;
	--vht-f: 16.57cqw;
	--vht-sub-x: 1.95cqw;
	--vht-sub-y: 36.89cqw;
	--vht-sub-f: 3.4cqw;
	--vht-sub-lh: 3.84cqw;
	/* composición final (sin JS / movimiento reducido) */
	--vht-p-x: 81.6cqw;
	--vht-p-y: 31cqw;
	--vht-word-x: 0.05cqw;
	--vht-word-y: 2.07cqw;

	container-type: inline-size;
	font-family: "Soleil", sans-serif;
}

/* El escenario mide como mínimo lo del vídeo y crece si el subtítulo necesita más */
.vht__stage {
	position: relative;
	min-height: var(--vht-h);
	padding-top: var(--vht-sub-y);
	box-sizing: border-box;
}

.vht__clip {
	position: absolute;
	top: calc(-1 * var(--vht-top));
	bottom: calc(-1 * var(--vht-bottom));
	left: calc(-1 * var(--vht-bleed));
	right: calc(-1 * var(--vht-bleed));
	overflow: hidden;
	pointer-events: none;
}

/* ---------- Círculo morado con "+" ---------- */
.vht__purple {
	position: absolute;
	z-index: 1;
	left: calc(var(--vht-bleed) + var(--vht-p-x));
	top: calc(var(--vht-top) + var(--vht-p-y));
	width: var(--vht-p-d);
	height: var(--vht-p-d);
	border-radius: 50%;
	background: var(--vht-p-bg);
	color: var(--vht-p-icon);
	will-change: transform;
}

.vht__plus {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* ---------- Círculo cian con rayos (solo durante la animación) ---------- */
.vht__cyan {
	position: absolute;
	z-index: 3;
	left: var(--vht-bleed);
	top: var(--vht-top);
	width: var(--vht-c-d);
	height: var(--vht-c-d);
	color: var(--vht-c-icon);
	opacity: 0;
	visibility: hidden;
	will-change: transform;
}

.vht__cyan-bg {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--vht-c-bg);
}

.vht__rays {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.vht__rays-g {
	transform-box: view-box;
	transform-origin: 50% 50%;
}

.vht__ray {
	stroke: currentColor;
	stroke-width: 0.9;
	stroke-linecap: butt;
}

/* ---------- Palabra ---------- */
.vht__word {
	position: absolute;
	z-index: 2;
	left: calc(var(--vht-bleed) + var(--vht-word-x));
	top: calc(var(--vht-top) + var(--vht-word-y));
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-weight: 600;
	font-size: var(--vht-f);
	line-height: 1;
	letter-spacing: -0.015em;
	white-space: nowrap;
	color: var(--vht-word);
	will-change: transform;
}

/* ---------- Subtítulo (en el flujo: el widget crece si el texto es mayor) ---------- */
.vht__sub {
	position: relative;
	z-index: 2;
	margin: 0 0 0 var(--vht-sub-x);
	padding: 0;
	font-family: inherit;
	font-weight: 600;
	font-size: var(--vht-sub-f);
	line-height: var(--vht-sub-lh);
	letter-spacing: -0.02em;
	color: var(--vht-sub);
}

.vht__line {
	display: block;
}

.vht__sub--mob {
	display: none;
}

/* Con JS la animación coloca todo con transformaciones desde el origen del escenario */
.vht.is-ready .vht__purple,
.vht.is-ready .vht__word {
	left: var(--vht-bleed);
	top: var(--vht-top);
}

/* ---------- Móvil ---------- */
@media (max-width: 767px) {
	.vht {
		--vht-h: 133.1cqw;
		--vht-top: 2cqw;
		--vht-bottom: 12cqw;            /* el morado grande baja más que el subtítulo al principio */
		--vht-bleed: 20px;
		--vht-c-d: 40.15cqw;
		--vht-p-d: 42.9cqw;
		--vht-f: 28.1cqw;
		--vht-sub-x: 1cqw;
		--vht-sub-y: 112.6cqw;
		--vht-sub-f: 6.17cqw;
		--vht-sub-lh: 6.81cqw;
		--vht-p-x: 0.46cqw;
		--vht-p-y: 56.63cqw;
		--vht-word-x: 0cqw;
		--vht-word-y: 8.1cqw;
	}

	.vht.has-sub-mob .vht__sub--desk {
		display: none;
	}

	.vht.has-sub-mob .vht__sub--mob {
		display: block;
	}
}