/* Vidas – Hero animado
 * Escritorio/tablet (vídeo VIDAS-ANIMACION-02-7OCT, contenido 1840): tarjetas 74.8% | gap | círculo 23%,
 *   con las proporciones del hero estático (círculo = ancho de la tarjeta morada, mismos textos y radios).
 *   Cuando aparece el subtítulo la tarjeta se divide: título arriba (58.9% del alto) y subtítulo abajo (35.9%).
 * Móvil (vídeo VIDAS-ANIMACION-02-MOB-FINAL, contenido 990): círculo arriba (42.83cqw), a 4.34cqw las tarjetas
 *   (89.5cqw de alto; título 60.05% · subtítulo 35%). En el segundo estado el círculo pasa abajo.
 * El ancho lo gobierna el contenedor de Elementor; las unidades cqw escalan todo proporcionalmente.
 */

.vidas-ha {
	--vidas-ha-title-color: #000;
	--vidas-ha-subtitle-color: #000;
	--vidas-ha-grad-top: #eeeeee;
	--vidas-ha-grad-bottom: #9ceaff;
	--vidas-ha-circle-bg: #4e20e4;
	--vidas-ha-arrow-color: #fff;
	--vidas-ha-top-h: 58.9%;                 /* tarjeta del título tras dividirse */
	--vidas-ha-sub-h: 35.9%;                 /* tarjeta del subtítulo */
	--vidas-ha-radius: 1.8cqw;               /* 25 */

	container-type: inline-size;
	font-family: "Soleil", sans-serif;
}

.vidas-ha__stage {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 2.8cqw;                             /* 39 */
	height: 50.43cqw;                        /* 333 + 36 + 333 */
	overflow-x: clip;                        /* la tarjeta del subtítulo sale por el borde en el cambio de lado */
	overflow-y: visible;
}

/* Estado intercambiado: el círculo pasa al otro lado */
.vidas-ha__stage.is-swapped .vidas-ha__circle {
	order: -1;
}

/* ---------- Tarjetas ---------- */
.vidas-ha__cards {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	height: 100%;
}

.vidas-ha__card {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: var(--vidas-ha-top-h);
	overflow: hidden;
	border-radius: var(--vidas-ha-radius);
	background: linear-gradient(180deg, var(--vidas-ha-grad-top) 20%, var(--vidas-ha-grad-bottom) 100%);
	will-change: transform;
}

.vidas-ha__card--sub {
	top: auto;
	bottom: 0;
	height: var(--vidas-ha-sub-h);
}

.vidas-ha__title {
	position: absolute;
	left: 3.07cqw;                           /* 42.7 */
	top: 3.12cqw;                            /* 43.4 */
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-weight: 600;
	font-size: 11.2cqw;                      /* 155.94 */
	line-height: 1.0556;
	letter-spacing: -0.03em;
	color: var(--vidas-ha-title-color);
	white-space: nowrap;
	transform-origin: 0 0;
	will-change: transform;
}

.vidas-ha__subtitle {
	position: absolute;
	left: 3.68cqw;                           /* 51.2 */
	bottom: 2.73cqw;                         /* 38 */
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-weight: 600;
	font-size: 3.23cqw;                      /* 45 */
	line-height: 1.111;
	letter-spacing: -0.02em;
	color: var(--vidas-ha-subtitle-color);
	white-space: nowrap;
}

.vidas-ha__line {
	display: block;
}

/* ---------- Círculo (a partir del segundo estado se vuelve cuadrado) ---------- */
.vidas-ha__circle {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24.07cqw;                         /* 335 */
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: var(--vidas-ha-circle-bg);
	color: var(--vidas-ha-arrow-color);
	text-decoration: none;
	will-change: transform;
}

.vidas-ha__arrow {
	display: block;
	width: 46%;                              /* medido en el vídeo: 193/424 */
	height: 46%;
	transform-origin: 50% 50%;
	will-change: transform;
}

/* ---------- Con JS todo empieza oculto y lo muestra la animación (sin JS se ve el primer estado) ---------- */
.vidas-ha.is-ready .vidas-ha__circle,
.vidas-ha.is-ready .vidas-ha__card {
	visibility: hidden;
}

/* ---------- Móvil: círculo arriba y tarjetas debajo (en el segundo estado, al revés) ---------- */
@media (max-width: 767px) {
	.vidas-ha {
		--vidas-ha-top-h: 60.05%;
		--vidas-ha-sub-h: 35%;
		--vidas-ha-radius: 2.83cqw;          /* 10 */
	}

	.vidas-ha__stage {
		flex-direction: column;
		align-items: flex-start;
		gap: 4.34cqw;                        /* 43 / 990 */
		height: auto;
		overflow: visible;
	}

	.vidas-ha__circle {
		order: -1;
		width: 42.83cqw;                     /* 424 / 990 */
	}

	.vidas-ha__stage.is-swapped .vidas-ha__circle {
		order: 1;
	}

	.vidas-ha__cards {
		flex: 0 0 auto;
		width: 100%;
		height: 89.5cqw;                     /* 886 / 990 */
	}

	.vidas-ha__title {
		left: 5.84cqw;
		top: 6.82cqw;
		font-size: 14.08cqw;                 /* "Maximiza" ocupa el 72% del ancho, como en el vídeo */
	}

	.vidas-ha__subtitle {
		left: 7.05cqw;
		bottom: 5.35cqw;
		font-size: 6.95cqw;
	}

	.vidas-ha__arrow path {
		stroke-width: 2;
	}
}

/* ---------- Caber entero en la pantalla (escritorio y tablet) ----------
 * El tamaño del hero sale de su ancho (alto de 50.43cqw). En pantallas bajas se estrecha el widget lo justo para que
 * su altura quepa en la pantalla menos el espacio reservado (menú + márgenes): todo se reduce en proporción
 * y la animación se recalcula sola. Nunca baja del 55% del ancho disponible.
 */
@media (min-width: 768px) {
	.vh-fit-yes .vidas-ha {
		width: min(100%, max(55%, calc((100vh - var(--vh-fit-offset, 200px)) / 0.5043)));
		width: min(100%, max(55%, calc((100svh - var(--vh-fit-offset, 200px)) / 0.5043)));
	}
}