/* Vidas – Proyecta (seccion con ovalos en growth)
 * Escritorio (capturas, frame 1512 / contenido 1392 → 1cqw = 14px):
 *   título SemiBold 70px girado (se lee de abajo arriba), 12px a la izquierda de la columna, centrado con los óvalos;
 *   óvalos en un SVG de 1292×593 que empieza a 100px de la columna y llega a su borde derecho;
 *   etiqueta a 120px del bloque, párrafo Light 31/44 (máx. 870) a 69px de la etiqueta.
 *   Manchas: cian centrada en el borde izquierdo de la columna y lila 48px por fuera del derecho, a la altura de los óvalos.
 * Móvil (captura, contenido 353): título 42/43 en horizontal; óvalos 353×372 a 59px; etiqueta a 43px; párrafo 19/27 a 28px.
 *   Solo la mancha cian, arriba a la izquierda detrás del título.
 * Sin fondo ni espacio vertical: los pone el contenedor y los espaciadores de Elementor.
 */

.vpy {
	--vpy-title: #000;
	--vpy-lines: #000;
	--vpy-label: #000;
	--vpy-text: #000;
	--vpy-blob-left: #aaedff;
	--vpy-blob-right: #a9a0fd;
	--vpy-blob-blur: 100px;
	--vpy-blob-opacity: 1;
	--vpy-max: 1392px;
	--vpy-pad: 60px;

	position: relative;
	width: 100%;
	padding: 0 var(--vpy-pad);
	box-sizing: border-box;
	overflow-x: clip;                   /* las manchas salen por los lados sin crear scroll horizontal */
	overflow-y: visible;
	font-family: "Soleil", sans-serif;
}

.vpy__inner {
	position: relative;
	max-width: var(--vpy-max);
	margin: 0 auto;
	container-type: inline-size;
}

/* ---------- Escenario: título girado + óvalos ---------- */
.vpy__stage {
	position: relative;
	display: flex;
	align-items: center;
}

.vpy__title {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	margin: 0 0 0 -0.9cqw;
	padding: 0;
	writing-mode: vertical-rl;
	transform: rotate(180deg);          /* se lee de abajo arriba, como en el diseño */
	font-family: inherit;
	font-weight: 600;
	font-size: 5.03cqw;                 /* ~70px a 1392 */
	line-height: 1;
	letter-spacing: -0.02em;
	white-space: nowrap;
	color: var(--vpy-title);
}

.vpy__br {
	display: none;                      /* el corte del título solo actúa en móvil */
}

.vpy__art {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	width: 92.82cqw;                    /* 1292px: desde 100px de la columna hasta su borde derecho */
	margin-left: auto;
}

.vpy__svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.vpy__svg--mob {
	display: none;
}

.vpy__e {
	fill: none;
	stroke: var(--vpy-lines);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

/* ---------- Manchas difuminadas ---------- */
.vpy__blob {
	position: absolute;
	top: 50%;
	width: 505px;
	height: 497px;
	margin-top: -248px;
	border-radius: 50%;
	filter: blur(var(--vpy-blob-blur));
	opacity: var(--vpy-blob-opacity);
	pointer-events: none;
	z-index: 0;
}

.vpy__blob--left {
	left: -252px;                       /* centrada en el borde izquierdo de la columna */
	background: var(--vpy-blob-left);
}

.vpy__blob--right {
	left: calc(100% + 48px - 252px);    /* 48px por fuera del borde derecho */
	background: var(--vpy-blob-right);
}

/* ---------- Etiqueta (igual que Partner) y párrafo ---------- */
.vpy__label {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 120px 0 0;
	padding: 0;
	font-family: inherit;
	font-weight: 400;
	font-size: 16px;
	line-height: 26px;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--vpy-label);
}

.vpy__asterisk {
	display: block;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}

.vpy__text {
	position: relative;
	z-index: 1;
	max-width: 870px;
	margin: 69px 0 0;
	padding: 0;
	font-family: inherit;
	font-weight: 300;
	font-size: 31px;
	line-height: 44px;
	letter-spacing: -0.01em;
	color: var(--vpy-text);
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
	.vpy__label {
		margin-top: 90px;
	}

	.vpy__text {
		margin-top: 50px;
		font-size: 26px;
		line-height: 36px;
	}

	.vpy__blob {
		width: 380px;
		height: 374px;
		margin-top: -187px;
	}

	.vpy__blob--left {
		left: -190px;
	}

	.vpy__blob--right {
		left: calc(100% + 36px - 190px);
	}
}

/* ---------- Móvil: título horizontal y óvalos hacia abajo ---------- */
@media (max-width: 767px) {
	.vpy {
		--vpy-pad: 20px;
	}

	.vpy__stage {
		flex-direction: column;
		align-items: stretch;
	}

	.vpy__title {
		margin: 0;
		writing-mode: horizontal-tb;
		transform: none;
		font-size: 42px;
		line-height: 43px;
		white-space: normal;
	}

	.vpy__br {
		display: inline;
	}

	.vpy__art {
		width: 100%;
		margin: 59px 0 0;
	}

	.vpy__svg--desk {
		display: none;
	}

	.vpy__svg--mob {
		display: block;
	}

	/* solo la mancha cian, arriba a la izquierda detrás del título */
	.vpy__blob {
		top: -174px;
		width: 330px;
		height: 330px;
		margin-top: 0;
		filter: blur(calc(var(--vpy-blob-blur) * 0.7));
	}

	.vpy__blob--left {
		left: -134px;
	}

	.vpy__blob--right {
		display: none;
	}

	.vpy__label {
		gap: 8px;
		margin-top: 43px;
		font-size: 11px;
		line-height: 18px;
	}

	.vpy__asterisk {
		width: 14px;
		height: 14px;
	}

	.vpy__text {
		max-width: none;
		margin-top: 28px;
		font-size: 19px;
		line-height: 27px;
	}
}