/* Vidas – Lista con iconos
 * Escritorio (capturas ×1.5 = frame 1512 / contenido 1392): etiqueta común; introducción Light 31/44 (máx. 645px)
 *   a 69px; lista a 111px: círculo 50px a 9px de la columna, texto Light 52/62 a 95px; filas cada 77px (15px entre filas).
 * Móvil (captura, contenido 353): introducción 19/27 a 31px; lista a 64px: círculo 24px, texto 26/32 a 41px;
 *   14px entre filas; el círculo siempre centrado con la primera línea.
 * Sin fondo ni espacio vertical propios.
 */

.vls {
	--vls-label: #000;
	--vls-intro: #000;
	--vls-item: #000;
	--vls-circle: #4e20e4;
	--vls-icon: #fff;
	--vls-icon-k: 0.52;                  /* tamaño del icono respecto al círculo */
	--vls-max: 1392px;
	--vls-pad: 60px;

	/* geometría (escritorio) */
	--vls-circle-d-def: 50px;
	--vls-circle-x: 9px;
	--vls-text-x: 95px;                  /* sangría del texto desde la columna */
	--vls-item-lh: 62px;

	width: 100%;
	padding: 0 var(--vls-pad);
	box-sizing: border-box;
	font-family: "Soleil", sans-serif;
}

.vls__inner {
	max-width: var(--vls-max);
	margin: 0 auto;
}

/* ---------- Etiqueta (igual que Partner) ---------- */
.vls__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(--vls-label);
}

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

/* ---------- Introducción ---------- */
.vls__intro {
	max-width: 645px;
	margin: var(--vls-gap-intro, 69px) 0 0;
	padding: 0;
	font-family: inherit;
	font-weight: 300;
	font-size: 31px;
	line-height: 44px;
	letter-spacing: -0.01em;
	color: var(--vls-intro);
}

.vls__label + .vls__intro {
	margin-top: var(--vls-gap-intro, 69px);
}

.vls__inner > .vls__intro:first-child {
	margin-top: 0;
}

/* ---------- Lista ---------- */
.vls__list {
	display: flex;
	flex-direction: column;
	gap: var(--vls-gap-rows, 15px);
	margin: var(--vls-gap-list, 111px) 0 0;
	padding: 0;
	list-style: none;
}

.vls__item {
	margin: 0;
	padding: 0;
}

.vls .vls__row,
.vls .vls__row:hover,
.vls .vls__row:focus,
.vls .vls__row:visited {
	color: var(--vls-item);
	text-decoration: none;
}

.vls .vls__row {
	display: flex;
	align-items: flex-start;
	gap: calc(var(--vls-text-x) - var(--vls-circle-x) - var(--vls-circle-d, var(--vls-circle-d-def)));
	width: fit-content;
	max-width: 100%;
}

.vls__circle {
	display: block;
	flex: 0 0 var(--vls-circle-d, var(--vls-circle-d-def));
	width: var(--vls-circle-d, var(--vls-circle-d-def));
	height: var(--vls-circle-d, var(--vls-circle-d-def));
	margin: calc((var(--vls-item-lh) - var(--vls-circle-d, var(--vls-circle-d-def))) / 2) 0 0 var(--vls-circle-x);
}

.vls__circle-in {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
	background: var(--vls-circle);
	color: var(--vls-icon);
	transition: background-color 0.35s ease, color 0.35s ease;
	will-change: transform;
}

.vls__icon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: auto;
	width: calc(var(--vls-circle-d, var(--vls-circle-d-def)) * var(--vls-icon-k));
	height: calc(var(--vls-circle-d, var(--vls-circle-d-def)) * var(--vls-icon-k));
	font-size: calc(var(--vls-circle-d, var(--vls-circle-d-def)) * var(--vls-icon-k));
	line-height: 1;
	color: inherit;
}

.vls__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* iconos de la biblioteca / SVG subidos: se pintan con el color del icono */
.vls__icon svg:not([fill="none"]),
.vls__icon svg:not([fill="none"]) path {
	fill: currentColor;
}

.vls__icon i {
	font-size: inherit;
	line-height: 1;
}

.vls__icon--b {
	visibility: hidden;                  /* segunda copia para el hover (la mueve el JS) */
}

/* máscara del texto para la entrada (con holgura para acentos y descendentes) */
.vls__text-mask {
	display: block;
	min-width: 0;
	overflow: hidden;
	padding: 0.1em 0 0.16em;
	margin: -0.1em 0 -0.16em;
}

.vls__text {
	display: block;
	font-family: inherit;
	font-weight: 300;
	font-size: 52px;
	line-height: var(--vls-item-lh);
	letter-spacing: -0.02em;
	color: inherit;
	transition: color 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------- Hover (escritorio) ---------- */
@media (hover: hover) {
	.vls[data-hover="1"] .vls__row:hover .vls__text {
		transform: translateX(8px);
		color: var(--vls-item-h, var(--vls-item));
	}

	.vls[data-hover="1"] .vls__row:hover .vls__circle-in {
		background: var(--vls-circle-h, var(--vls-circle));
		color: var(--vls-icon-h, var(--vls-icon));
	}
}

.vls .vls__row:focus-visible {
	outline: 2px solid var(--vls-circle);
	outline-offset: 6px;
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
	.vls {
		--vls-circle-d-def: 40px;
		--vls-text-x: 76px;
		--vls-item-lh: 48px;
	}

	.vls__intro {
		font-size: 26px;
		line-height: 36px;
	}

	.vls__list {
		margin-top: var(--vls-gap-list, 80px);
	}

	.vls__text {
		font-size: 40px;
	}
}

/* ---------- Móvil ---------- */
@media (max-width: 767px) {
	.vls {
		--vls-pad: 20px;
		--vls-circle-d-def: 24px;
		--vls-circle-x: -2px;
		--vls-text-x: 41px;
		--vls-item-lh: 32px;
	}

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

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

	.vls__intro,
	.vls__label + .vls__intro {
		max-width: none;
		margin-top: var(--vls-gap-intro, 31px);
		font-size: 19px;
		line-height: 27px;
	}

	.vls__list {
		gap: var(--vls-gap-rows, 14px);
		margin-top: var(--vls-gap-list, 64px);
	}

	.vls__text {
		font-size: 26px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vls__text,
	.vls__circle-in {
		transition: none;
	}
}