/* Vidas – Esfera Tech
 * Escritorio (Figma, frame 1512 / contenido 1392): esfera 382px (27.47% de la columna) centrada en la pantalla;
 *   su centro es la línea base de las ondas. Izquierda: una joroba (coseno) de 1.477·D de ancho y 0.711·D de alto
 *   que acaba en el borde de la esfera. Derecha: ondas de 0.491·D de periodo y 0.236·D de alto hasta el borde.
 *   Etiqueta común; 131px hasta la cresta de la onda; 116px de la esfera al párrafo (Light 36/47).
 * Móvil (captura, contenido 353): esfera 181px (51.3%); joroba 0.717·D × 0.337·D; ondas 0.234·D × 0.106·D;
 *   85px etiqueta → esfera; 82px esfera → párrafo (Light 18.5/25.2). Sin manchas.
 * Sin fondo ni espacio vertical propios.
 */

.ves {
	--ves-label: #000;
	--ves-text: #000;
	--ves-lines: #000;
	--ves-s1: #f2c6f3;
	--ves-s2: #b0ecfb;
	--ves-s3: #86bdf9;
	--ves-s4: #c0d0f6;
	--ves-grain: 0.06;
	--ves-blob-left: #aaedff;
	--ves-blob-right: #a9a0fd;
	--ves-blob-blur: 100px;
	--ves-blob-opacity: 1;
	--ves-max: 1392px;
	--ves-pad: 60px;

	/* geometría (escritorio). Factores respecto al diámetro de la esfera (D); el JS los lee para dibujar las ondas */
	--ves-dk: 0.2747;                    /* D = 27.47% de la columna */
	--ves-lw-k: 1.477;                   /* joroba izquierda: ancho */
	--ves-lh-k: 0.711;                   /* joroba izquierda: alto */
	--ves-rp-k: 0.491;                   /* ondas derechas: periodo */
	--ves-rh-k: 0.236;                   /* ondas derechas: alto */
	--ves-top-k: 0.211;                  /* la joroba sobresale por encima de la esfera */

	position: relative;
	width: 100%;
	container-type: inline-size;
	overflow-x: clip;
	overflow-y: visible;
	font-family: "Soleil", sans-serif;
}

.ves > * {
	--ves-cw: min(var(--ves-max), 100cqw - 2 * var(--ves-pad));
	--ves-d: calc(var(--ves-cw) * var(--ves-dk));
}

/* Columna de contenido (etiqueta y párrafo), alineada con el resto de secciones */
.ves__col {
	position: relative;
	z-index: 2;
	max-width: calc(var(--ves-max) + 2 * var(--ves-pad));
	margin: 0 auto;
	padding: 0 var(--ves-pad);
	box-sizing: border-box;
}

.ves__label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-weight: 400;
	font-size: 16px;
	line-height: 26px;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--ves-label);
}

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

/* ---------- Escenario a ancho completo ---------- */
.ves__stage {
	position: relative;
	height: calc(var(--ves-d) * (1 + var(--ves-top-k)));
	margin: var(--ves-gap-top, 131px) 0 var(--ves-gap-bottom, 116px);
}

.ves__waves {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	overflow: visible;
}

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

.ves__sphere {
	position: absolute;
	z-index: 2;
	left: 50%;
	bottom: 0;
	width: var(--ves-d);
	height: var(--ves-d);
	margin-left: calc(var(--ves-d) / -2);
	border-radius: 50%;
}

/* Esfera estática (sin WebGL o movimiento reducido): mismos colores que Casos + grano */
.ves__sphere-static {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	overflow: hidden;
	background:
		radial-gradient(circle at 22% 22%, var(--ves-s1) 0%, transparent 55%),
		radial-gradient(circle at 18% 70%, var(--ves-s1) 0%, transparent 40%),
		radial-gradient(circle at 82% 22%, var(--ves-s2) 0%, transparent 55%),
		radial-gradient(circle at 45% 95%, var(--ves-s2) 0%, transparent 40%),
		radial-gradient(circle at 80% 82%, var(--ves-s3) 0%, transparent 55%),
		var(--ves-s4);
}

.ves__sphere-static::after {
	content: "";
	position: absolute;
	inset: 0;
	opacity: calc(var(--ves-grain) * 6);
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.ves__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	opacity: 0;
}

/* con WebGL funcionando, se ve el lienzo y se oculta la versión estática */
.ves.is-gl .ves__canvas { opacity: 1; }
.ves.is-gl .ves__sphere-static { visibility: hidden; }

/* ---------- Manchas difuminadas (a la altura de la esfera) ---------- */
.ves__blob {
	position: absolute;
	z-index: 0;
	bottom: calc(var(--ves-d) / 2 - 248px);
	width: 505px;
	height: 497px;
	border-radius: 50%;
	filter: blur(var(--ves-blob-blur));
	opacity: var(--ves-blob-opacity);
	pointer-events: none;
}

.ves__blob--left {
	left: calc((100% - var(--ves-cw)) / 2 - 30px - 252px);     /* centrada 30px por fuera de la columna */
	background: var(--ves-blob-left);
}

.ves__blob--right {
	left: calc((100% + var(--ves-cw)) / 2 + 10px - 252px);     /* centrada 10px por fuera de la columna */
	background: var(--ves-blob-right);
}

/* ---------- Párrafo ---------- */
.ves__text {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-weight: 300;
	font-size: 36px;
	line-height: 47px;
	letter-spacing: -0.02em;
	color: var(--ves-text);
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
	.ves__stage {
		margin: var(--ves-gap-top, 100px) 0 var(--ves-gap-bottom, 90px);
	}

	.ves__text {
		font-size: 28px;
		line-height: 38px;
	}

	.ves__blob {
		width: 380px;
		height: 374px;
		bottom: calc(var(--ves-d) / 2 - 187px);
	}

	.ves__blob--left  { left: calc((100% - var(--ves-cw)) / 2 - 30px - 190px); }
	.ves__blob--right { left: calc((100% + var(--ves-cw)) / 2 + 10px - 190px); }
}

/* ---------- Móvil ---------- */
@media (max-width: 767px) {
	.ves {
		--ves-pad: 20px;
		--ves-dk: 0.513;
		--ves-lw-k: 0.717;
		--ves-lh-k: 0.337;
		--ves-rp-k: 0.2337;
		--ves-rh-k: 0.1055;
		--ves-top-k: 0;
	}

	.ves__label {
		gap: 8px;
		font-size: 11px;
		line-height: 18px;
	}

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

	.ves__stage {
		margin: var(--ves-gap-top, 85px) 0 var(--ves-gap-bottom, 82px);
	}

	.ves__blob {
		display: none;
	}

	.ves__text {
		font-size: 18.5px;
		line-height: 25.2px;
	}
}