/* Vidas – Diferencia (About: "¿Qué nos hace diferentes?")
 * Medidas del diseño en proporción a la columna de contenido (1cqw = 1% de la columna; 13.92px a 1392):
 *   etiqueta común (16/26); titular en 2 renglones de 4.6cqw (~64px) con interlineado 1.05, el primero SemiBold y
 *   el segundo Light; párrafo Light 22/32 desde el 58.3% de la columna hasta su borde derecho, a la altura del titular.
 * Debajo, el escenario de la animación de datos (lo dibuja el JS en SVG según su tamaño real):
 *   escritorio 37cqw de alto (horizontal: nube → núcleo → gráfica); tablet 50cqw; móvil 150cqw (vertical).
 * Sin fondo ni espacio vertical propios.
 */

.vdf {
	--vdf-label: #000;
	--vdf-strong: #000;
	--vdf-light: #000;
	--vdf-text: #000;
	--vdf-primary: #4e20e4;
	--vdf-icon: #fff;
	--vdf-second: #a9a0fd;
	--vdf-lines: #000;
	--vdf-bar-top: #aaedff;
	--vdf-bar-bot: #fff;
	--vdf-blob1: #aaedff;
	--vdf-blob2: #a9a0fd;
	--vdf-blob-o: 0.75;
	--vdf-pill-bg: #fff;
	--vdf-pill-text: #000;
	--vdf-max: 1392px;
	--vdf-pad: 60px;

	width: 100%;
	padding: 0 var(--vdf-pad);
	box-sizing: border-box;
	overflow-x: clip;                      /* los difuminados no generan scroll horizontal */
	font-family: "Soleil", sans-serif;
}

.vdf__inner {
	max-width: var(--vdf-max);
	margin: 0 auto;
	container-type: inline-size;
}

/* Con JS el contenido espera oculto a que arranque la animación (si algo fallara, aparece solo a los 2.5 s) */
.vdf.is-pending .vdf__inner {
	visibility: hidden;
	animation: vdf-show 0s linear 2.5s forwards;
}

@keyframes vdf-show {
	to { visibility: visible; }
}

/* ---------- Cabecera: etiqueta + titular a la izquierda, párrafo a la derecha ---------- */
.vdf__head {
	display: grid;
	grid-template-columns: var(--vdf-text-x, 58.3%) minmax(0, 1fr);
	align-items: start;
}

.vdf__title-col {
	display: contents;
}

.vdf__label {
	grid-column: 1;
	grid-row: 1;
	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(--vdf-label);
}

.vdf__asterisk {
	display: block;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	transform-origin: 50% 50%;
}

.vdf__label-text {
	display: block;
}

.vdf__heading {
	grid-column: 1;
	grid-row: 2;
	margin: var(--vdf-gap-label, 2.4cqw) 0 0;
	padding: 0 4cqw 0 0;
	font-family: inherit;
	font-size: 4.6cqw;
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.vdf__strong,
.vdf__light {
	position: relative;
	display: block;
}

.vdf__strong {
	font-weight: 600;
	color: var(--vdf-strong);
}

.vdf__light {
	font-weight: 300;
	color: var(--vdf-light);
}

.vdf__text {
	grid-column: 2;
	grid-row: 2;
	margin: calc(var(--vdf-gap-label, 2.4cqw) + 0.2cqw) 0 0;
	padding: 0;
	font-family: inherit;
	font-weight: 300;
	font-size: 22px;
	line-height: 32px;
	letter-spacing: -0.005em;
	color: var(--vdf-text);
}

/* Renglones (los crea el JS): máscara con holgura para acentos y descendentes.
 * El contenedor repartido es flex para que los márgenes negativos no se colapsen. */
.vdf .is-split {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.vdf__line {
	position: relative;
	display: block;
	align-self: stretch;
	overflow: hidden;
	padding: 0.18em 0 0.24em;
	margin: -0.18em 0 -0.24em;
}

.vdf__line-in {
	position: relative;
	display: block;
	width: max-content;
	max-width: none;
	padding: 0.18em 0 0.24em;
	margin: -0.18em 0 -0.24em;
	white-space: nowrap;
}

.vdf__w {
	display: inline-block;
}

/* ---------- Escenario de datos ---------- */
.vdf__stage {
	position: relative;
	height: var(--vdf-stage-h, 37cqw);
	margin-top: var(--vdf-gap-stage, 4.3cqw);
	pointer-events: none;
}

.vdf__svg,
.vdf__svg svg,
.vdf__pills {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.vdf__svg svg {
	display: block;
}

/* Difuminados (posición y tamaño en % del escenario) */
.vdf__blob {
	position: absolute;
	display: block;
	border-radius: 50%;
	opacity: var(--vdf-blob-o);
	filter: blur(70px);
	will-change: transform;
}

.vdf__blob--1 {
	left: 4%;
	top: 34%;
	width: 26%;
	height: 52%;
	background: var(--vdf-blob1);
}

.vdf__blob--2 {
	left: 38%;
	top: 26%;
	width: 18%;
	height: 50%;
	background: var(--vdf-blob2);
}

.vdf__blob--3 {
	left: 70%;
	top: 30%;
	width: 24%;
	height: 50%;
	background: var(--vdf-blob1);
}

/* Elementos del SVG (los colores salen de las variables, así responden a los controles) */
.vdf__grid {
	stroke: var(--vdf-lines);
	stroke-opacity: 0.12;
	stroke-width: 0.75;
}

.vdf__tick {
	stroke: var(--vdf-lines);
	stroke-opacity: 0.3;
	stroke-width: 0.75;
}

.vdf__axis {
	fill: var(--vdf-lines);
	fill-opacity: 0.45;
	font-size: 11px;
	letter-spacing: 0.04em;
}

.vdf__dot--p { fill: var(--vdf-lines); fill-opacity: 0.75; }
.vdf__dot--o { fill: none; stroke: var(--vdf-lines); stroke-opacity: 0.4; stroke-width: 0.75; }
.vdf__dot--l { fill: var(--vdf-second); }
.vdf__dot--v { fill: var(--vdf-primary); fill-opacity: 0.85; }
.vdf__dot--s { fill: var(--vdf-primary); }
.vdf__ring   { fill: none; stroke: var(--vdf-primary); stroke-opacity: 0.6; stroke-width: 0.75; }

.vdf__curve,
.vdf__out,
.vdf__pin,
.vdf__hub-ring,
.vdf__axis-line {
	fill: none;
	stroke: var(--vdf-lines);
	stroke-opacity: 0.35;
	stroke-width: 0.75;
}

.vdf__streak {
	fill: none;
	stroke: var(--vdf-primary);
	stroke-width: 2;
	stroke-linecap: round;
}

.vdf__hub      { fill: var(--vdf-primary); }
.vdf__hub-dash { fill: none; stroke: var(--vdf-primary); stroke-opacity: 0.55; stroke-width: 1; stroke-dasharray: 2 7; }
.vdf__pulse    { fill: none; stroke: var(--vdf-primary); stroke-width: 1; }
.vdf__sat      { fill: var(--vdf-primary); }
.vdf__icon     { stroke: var(--vdf-icon); stroke-width: 1.4; }
.vdf__flow     { fill: var(--vdf-primary); }

.vdf__bar-top  { stop-color: var(--vdf-bar-top); }
.vdf__bar-bot  { stop-color: var(--vdf-bar-bot); }
.vdf__bar      { stroke: var(--vdf-lines); stroke-opacity: 0.12; stroke-width: 0.75; }
.vdf__area-top { stop-color: var(--vdf-primary); stop-opacity: 0.11; }
.vdf__area-bot { stop-color: var(--vdf-primary); stop-opacity: 0; }
.vdf__scan-a   { stop-color: var(--vdf-primary); stop-opacity: 0; }
.vdf__scan-b   { stop-color: var(--vdf-primary); stop-opacity: 0.16; }
.vdf__scan-line { stroke: var(--vdf-primary); stroke-width: 1.5; }

.vdf__line-path {
	fill: none;
	stroke: var(--vdf-primary);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.vdf__point {
	fill: var(--vdf-pill-bg);
	stroke: var(--vdf-primary);
	stroke-width: 2;
}

/* Etiquetas de la gráfica (las coloca el JS) */
.vdf__pill {
	position: absolute;
	left: 0;
	top: 0;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 13px 6px 10px;
	border-radius: 999px;
	background: var(--vdf-pill-bg);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
	font-family: inherit;
	font-weight: 400;
	font-size: 13px;
	line-height: 18px;
	color: var(--vdf-pill-text);
	white-space: nowrap;
	visibility: hidden;                   /* hasta que el JS las coloca */
	will-change: transform;
}

.vdf__pill.is-placed {
	visibility: visible;
}

.vdf__pill.is-off {
	display: none;
}

.vdf__pill-dot {
	display: block;
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--vdf-primary);
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
	.vdf__heading {
		font-size: 5.6cqw;
	}

	.vdf__text {
		font-size: 18px;
		line-height: 27px;
	}

	.vdf__stage {
		height: var(--vdf-stage-h, 50cqw);
		margin-top: var(--vdf-gap-stage, 6cqw);
	}

	.vdf__blob {
		filter: blur(56px);
	}
}

/* ---------- Móvil: textos apilados y animación en vertical ---------- */
@media (max-width: 767px) {
	.vdf {
		--vdf-pad: 20px;
	}

	.vdf__head {
		display: block;
	}

	.vdf__title-col {
		display: block;
	}

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

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

	.vdf__heading {
		margin-top: var(--vdf-gap-label, 3cqw);
		padding: 0;
		font-size: 10.6cqw;
		line-height: 1.06;
	}

	.vdf__text {
		margin-top: 6cqw;
		padding-left: var(--vdf-text-x, 0%);
		font-size: 17px;
		line-height: 25px;
	}

	.vdf__stage {
		height: var(--vdf-stage-h, 150cqw);
		margin-top: var(--vdf-gap-stage, 10cqw);
	}

	.vdf__blob {
		filter: blur(40px);
	}

	.vdf__blob--1 { left: 6%;  top: 3%;  width: 60%; height: 20%; }
	.vdf__blob--2 { left: 32%; top: 31%; width: 36%; height: 18%; }
	.vdf__blob--3 { left: 30%; top: 66%; width: 62%; height: 22%; }

	.vdf__axis {
		font-size: 10px;
	}

	.vdf__pill {
		gap: 6px;
		padding: 5px 10px 5px 8px;
		font-size: 11px;
		line-height: 15px;
	}

	.vdf__pill-dot {
		width: 5px;
		height: 5px;
	}
}

/* --- Ajustes del visual simplificado (segunda referencia) --- */
.vdf__dot--p { fill: var(--vdf-lines); fill-opacity: 0.92; }
.vdf__dot--s { fill: var(--vdf-primary); }
.vdf__curve { stroke-opacity: 0.46; stroke-width: 0.8; }
.vdf__connector { stroke-opacity: 0.48; }
.vdf__streak { stroke-width: 1.1; stroke-linecap: round; }
.vdf__bar { stroke: none; }
.vdf__line-path { stroke-width: 1.8; }
.vdf__point { stroke-width: 1.75; }