/* Vidas – Titular, texto y enlace ("Nuestro trabajo no termina en la conexión")
 * 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); a ~1cqw, titular de 4.6cqw (~64px) con interlineado 1.03, negrita y fina en la misma
 *   frase, cortado en 2 renglones (ancho máx. 45cqw); a su altura, desde el 58.3% de la columna, párrafo Light 22/30
 *   y, a ~43px, enlace 16px con cuadrado de 21px a 15px.
 * Tablet: titular 5.6cqw, párrafo 18/27 desde el 50%. Móvil: todo apilado, titular 10.6cqw, párrafo 17/25.
 * Sin fondo ni espacio vertical propios.
 */

.vte {
	--vte-label: #fff;
	--vte-strong: #fff;
	--vte-light: #fff;
	--vte-text: #fff;
	--vte-link: #fff;
	--vte-sq: #fff;
	--vte-arrow: #000;
	--vte-max: 1392px;
	--vte-pad: 60px;
	--vte-sq-size: 21px;
	--vte-sq-gap: 15px;

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

.vte__inner {
	max-width: var(--vte-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) */
.vte.is-pending .vte__inner {
	visibility: hidden;
	animation: vte-show 0s linear 2.5s forwards;
}

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

/* ---------- Etiqueta (la de siempre) ---------- */
.vte__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(--vte-label);
}

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

.vte__label-text {
	display: block;
}

/* ---------- Fila: titular | párrafo + enlace ---------- */
.vte__row {
	display: grid;
	grid-template-columns: var(--vte-text-x, 58.3%) minmax(0, 1fr);
	align-items: start;
	margin-top: var(--vte-gap-label, 1.1cqw);
}

.vte__inner > .vte__row:first-child {
	margin-top: 0;
}

.vte__heading {
	grid-column: 1;
	max-width: 45cqw;
	margin: 0;
	padding: 0 3cqw 0 0;
	font-family: inherit;
	font-size: 4.6cqw;
	line-height: 1.03;
	letter-spacing: -0.02em;
}

.vte__strong {
	font-weight: 600;
	color: var(--vte-strong);
}

.vte__light {
	font-weight: 300;
	color: var(--vte-light);
}

.vte__side {
	grid-column: 2;
	min-width: 0;
}

.vte__text {
	margin: 0.3cqw 0 0;
	padding: 0;
	font-family: inherit;
	font-weight: 300;
	font-size: 22px;
	line-height: 30px;
	letter-spacing: -0.005em;
	color: var(--vte-text);
}

/* Renglones y palabras (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. */
.vte .is-split {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

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

.vte__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;
}

.vte__w {
	display: inline-block;
}

/* ---------- Enlace con cuadrado y flecha (como Titular CTA) ---------- */
.vte__cta {
	margin-top: var(--vte-gap-link, 43px);
}

.vte__text:empty + .vte__cta,
.vte__side > .vte__cta:first-child {
	margin-top: 0;
}

.vte .vte__link,
.vte .vte__link:hover,
.vte .vte__link:focus,
.vte .vte__link:visited {
	color: var(--vte-link);
	text-decoration: none;
	background: none;
}

.vte .vte__link {
	display: inline-flex;
	align-items: baseline;               /* el cuadrado apoya en la línea base del texto */
	gap: var(--vte-sq-gap);
	padding: 0;
	font-family: inherit;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: -0.005em;
	transition: color 0.3s ease;
}

.vte .vte__link:hover,
.vte .vte__link:focus-visible {
	color: var(--vte-link-h, var(--vte-link));
}

.vte .vte__link:focus-visible {
	outline: 2px solid var(--vte-sq);
	outline-offset: 4px;
}

.vte__sq {
	position: relative;
	display: inline-block;
	flex: 0 0 auto;
	width: var(--vte-sq-size);
	height: var(--vte-sq-size);
	top: 0.27em;                         /* en el diseño asoma un poco por debajo de la línea base */
	border-radius: 3px;
	overflow: hidden;
	background: var(--vte-sq);
	transition: transform 0.45s cubic-bezier(0.34, 1.8, 0.64, 1), background-color 0.3s ease;
}

/* la flecha es una máscara: su color sale del control "Flecha" */
.vte__sq::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--vte-arrow);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2.5 8H13.2M9 3.8L13.2 8L9 12.2' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E") center / 76% 76% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2.5 8H13.2M9 3.8L13.2 8L9 12.2' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E") center / 76% 76% no-repeat;
	transition: background-color 0.3s ease;
}

/* Hover: la flecha sale por la derecha y entra por la izquierda, y el cuadrado crece */
@keyframes vte-arrow {
	0%   { transform: translateX(0); }
	40%  { transform: translateX(110%); }
	41%  { transform: translateX(-110%); }
	100% { transform: translateX(0); }
}

.vte .vte__link:hover .vte__sq,
.vte .vte__link:focus-visible .vte__sq {
	transform: scale(1.12);
	background: var(--vte-sq-h, var(--vte-sq));
}

.vte .vte__link:hover .vte__sq::before,
.vte .vte__link:focus-visible .vte__sq::before {
	background: var(--vte-arrow-h, var(--vte-arrow));
	animation: vte-arrow 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

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

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

	.vte__cta {
		margin-top: var(--vte-gap-link, 36px);
	}
}

/* ---------- Móvil: todo apilado ---------- */
@media (max-width: 767px) {
	.vte {
		--vte-pad: 20px;
		--vte-sq-size: 20px;
		--vte-sq-gap: 13px;
	}

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

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

	.vte__row {
		display: block;
		margin-top: var(--vte-gap-label, 3cqw);
	}

	.vte__heading {
		padding: 0;
		font-size: 10.6cqw;
		line-height: 1.06;
	}

	.vte__br {
		display: none;                       /* en móvil los renglones se reparten solos */
	}

	.vte__side {
		margin-top: 6cqw;
		padding-left: var(--vte-text-x, 0%);
	}

	.vte__text {
		margin-top: 0;
		font-size: 17px;
		line-height: 25px;
	}

	.vte__cta {
		margin-top: var(--vte-gap-link, 30px);
	}

	.vte .vte__link {
		font-size: 15px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vte__sq,
	.vte__sq::before {
		transition: none;
		animation: none !important;
	}
}