/* Vidas – Hero Growth
 * Medidas del vídeo VIDAS-ANIMACION-GROWTH (1920×1080): el contenido va de x 40 a x 1878 (1838px = 100cqw)
 * y el escenario de y 140 (borde superior del círculo) a y 1012 (último renglón del subtítulo).
 * Escritorio: círculos 334px → 18.17cqw · palabra ~305px → 16.57cqw · subtítulo 62/74.5 → 3.37/4.05cqw.
 * Móvil (sin vídeo): misma animación en vertical; círculo + palabra en fila arriba y subtítulo abajo.
 * El ancho lo da el contenedor; sin espacio arriba ni abajo (lo ponen los espaciadores de Elementor).
 */

.vhg {
	--vhg-word: #000;
	--vhg-sub: #000;
	--vhg-c1-bg: #4e20e4;
	--vhg-c1-arrow: #fff;
	--vhg-c2-bg: #aaedff;
	--vhg-c2-arrow: #000;

	/* geometría (escritorio) */
	--vhg-h: 47.44cqw;          /* alto del escenario */
	--vhg-top: 7.62cqw;         /* zona extra por arriba por donde sale el círculo cian */
	--vhg-bottom: 6cqw;         /* margen por abajo: en el 3er empujón el cian baja más que el subtítulo */
	--vhg-d: 18.17cqw;          /* diámetro de los círculos */
	--vhg-f: 16.57cqw;          /* tamaño de la palabra */
	--vhg-sub-x: 2.6cqw;
	--vhg-sub-y: 35.53cqw;
	--vhg-sub-f: 3.37cqw;
	--vhg-sub-lh: 4.05cqw;
	--vhg-word-x: 50%;          /* composición final sin JS */
	--vhg-word-tx: -50%;
	--vhg-word-y: 2.34cqw;

	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 (nunca se corta) */
.vhg__stage {
	position: relative;
	min-height: var(--vhg-h);
	padding-top: var(--vhg-sub-y);
	box-sizing: border-box;
}

/* Capa recortada: se extiende por arriba para que el círculo cian salga como en el vídeo */
.vhg__clip {
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(-1 * var(--vhg-bottom));
	top: calc(-1 * var(--vhg-top));
	overflow: hidden;
	pointer-events: none;
}

.vhg__circle {
	position: absolute;
	z-index: 2;                 /* por encima de la palabra: en móvil el cian la atraviesa al salir */
	left: 0;
	top: var(--vhg-top);
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--vhg-d);
	height: var(--vhg-d);
	border-radius: 50%;
	will-change: transform;
}

.vhg__circle--a {
	background: var(--vhg-c1-bg);
	color: var(--vhg-c1-arrow);
}

.vhg__circle--b {
	background: var(--vhg-c2-bg);
	color: var(--vhg-c2-arrow);
	opacity: 0;                 /* en la composición final no está */
}

.vhg__arrow {
	display: block;
	width: 46%;
	height: 46%;
	transform: rotate(135deg); /* ↓ en la composición final */
	will-change: transform;
}

.vhg__word {
	position: absolute;
	left: var(--vhg-word-x);
	top: calc(var(--vhg-top) + var(--vhg-word-y));
	transform: translateX(var(--vhg-word-tx));
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-weight: 600;
	font-size: var(--vhg-f);
	line-height: 1;
	letter-spacing: -0.015em;
	white-space: nowrap;
	color: var(--vhg-word);
	will-change: transform;
}

.vhg__sub {
	position: relative;         /* en el flujo: el widget crece con el texto */
	z-index: 1;
	margin: 0 0 0 var(--vhg-sub-x);
	padding: 0;
	font-family: inherit;
	font-weight: 600;
	font-size: var(--vhg-sub-f);
	line-height: var(--vhg-sub-lh);
	letter-spacing: -0.02em;
	color: var(--vhg-sub);
}

.vhg__line {
	display: block;
}

/* Con JS la animación coloca todo (x/y/escala); se anulan las posiciones estáticas */
.vhg.is-ready .vhg__word {
	left: 0;
	top: var(--vhg-top);
	transform: none;
}

.vhg.is-ready .vhg__arrow {
	transform: none;
}

/* ---------- Móvil: composición vertical ---------- */
/* Subtítulo de móvil (cortes distintos): solo en móvil */
.vhg__sub--mob {
	display: none;
}

@media (max-width: 767px) {
	/* Móvil (vídeo VIDAS-ANIMACION-GROWTH-MOB 1080×1920: contenido de x 44 a 1036 = 100cqw; escenario desde y 152):
	 * círculos 402px → 40.5cqw · palabra ~292px → 29.4cqw debajo del círculo · subtítulo 67/75 → 6.75/7.56cqw. */
	.vhg {
		--vhg-h: 141.9cqw;
		--vhg-top: 15.4cqw;
		--vhg-bottom: 26cqw;        /* en el 2º empujón el cian baja por debajo del subtítulo */
		--vhg-d: 40.5cqw;
		--vhg-f: 29.4cqw;
		--vhg-sub-x: 1.9cqw;
		--vhg-sub-y: 119.3cqw;
		--vhg-sub-f: 6.75cqw;
		--vhg-sub-lh: 7.56cqw;
		--vhg-word-x: 0.9cqw;       /* "G" alineada con el borde del círculo, como en el vídeo */
		--vhg-word-tx: -0.05em;     /* compensa el margen interno de la G */
		--vhg-word-y: 53.93cqw;
	}

	.vhg.has-sub-mob .vhg__sub--desk {
		display: none;
	}

	.vhg.has-sub-mob .vhg__sub--mob {
		display: block;
	}
}