/* Vidas – Casos (carrusel)
 * Escritorio (Figma "VidasPrime Home 67", sección 1512): tarjeta 1142×575 (75.53% del ancho) centrada, vecinas a 131px (8.67%).
 * Todas las medidas internas en cqw de la tarjeta (1cqw = 11.42px a 1142px), así escala exacta a cualquier ancho.
 * Tablet (≤1024) y móvil (≤767): una cara cada vez; tap para voltear y ver el diagrama.
 * El carrusel se coloca en un contenedor a ancho completo y sin padding lateral (las vecinas asoman por los bordes).
 * Esfera: el JS la pinta en un lienzo con WebGL y la hace girar (misma textura que Esfera Tech); el degradado CSS
 * queda de respaldo sin WebGL. Cada tarjeta lleva su paleta (clases .vc-pal--*), con las variables --vc-s1…s4.
 */

.vidas-casos {
	--vc-label-color: #000;
	--vc-card-bg: #fff;
	--vc-text: #000;
	--vc-tag-bg: #4e20e4;
	--vc-tag-text: #fff;
	--vc-panel-top: #d9d9d9;
	--vc-panel-bottom: #eee;
	--vc-lines: #000;
	--vc-diag-text: #6f6f6f;
	--vc-badge-bg: #d9d9d9;
	--vc-caption: #000;
	--vc-s1: #f2c6f3;
	--vc-s2: #b0ecfb;
	--vc-s3: #86bdf9;
	--vc-s4: #c0d0f6;
	--vc-grain: 0.06;
	--vc-max: 1392px;
	--vc-label-pad: 60px;
	--vc-label-gap: 80px;
	--vc-gap: 8.67%;
	--vc-flip-dur: 0.6s;

	position: relative;
	width: 100%;
	box-sizing: border-box;
	font-family: "Soleil", sans-serif;
	color: var(--vc-text);
}

/* Testigo invisible para detectar cambios de separación (lo crea el JS) */
.vidas-casos__probe {
	position: absolute;
	left: 0;
	top: 0;
	width: var(--vc-gap);
	height: 0;
	visibility: hidden;
	pointer-events: none;
}

/* ---------- Etiqueta de sección (común: 16/26, icono 18, gap 10; móvil 11/18, icono 14, gap 8) ----------
 * Alineada con la columna de contenido: 1392px centrada con márgenes laterales (60 / 60 / 20), igual que Journey.
 */
.vidas-casos__label {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: calc(var(--vc-max) + 2 * var(--vc-label-pad));
	margin: 0 auto var(--vc-label-gap);
	padding: 0 var(--vc-label-pad);
	box-sizing: border-box;
	font-family: inherit;
	font-weight: 400;
	font-size: 16px;
	line-height: 26px;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--vc-label-color);
}

.vidas-casos__asterisk {
	display: block;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}

/* ---------- Núcleo de Swiper (propio, para no depender de la hoja de estilos de Elementor) ---------- */
.vidas-casos .swiper {
	position: relative;
	overflow: hidden;
	margin: 0;
	padding: 0;
	list-style: none;
	z-index: 1;
}

.vidas-casos .swiper-wrapper {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: stretch;
	width: 100%;
	box-sizing: content-box;
	transition-property: transform;
}

.vidas-casos .swiper-slide {
	position: relative;
	flex-shrink: 0;
	height: auto;
	margin: 0;
	transition-property: transform;
}

/* Solo si Swiper no está disponible: desplazamiento nativo con imán */
.vidas-casos.is-static .swiper {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.vidas-casos.is-static .swiper-wrapper {
	gap: 20px;
}

.vidas-casos.is-static .swiper-slide {
	scroll-snap-align: center;
}

/* ---------- Tarjeta (escritorio) ----------
 * La separación entre tarjetas va dentro de cada diapositiva (padding lateral = gap/2),
 * así el control funciona en vivo y no depende de la versión de Swiper.
 * Los % se calculan sobre el ancho del carrusel. cqw se mide sobre la tarjeta (caja de contenido).
 */
.vidas-casos .vidas-casos__slide.swiper-slide {
	width: calc(75.53% + var(--vc-gap));
	padding: 0 calc(var(--vc-gap) / 2);
	box-sizing: border-box;
	container-type: inline-size;
}

.vidas-casos__card {
	height: 100%;
}

.vidas-casos__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	aspect-ratio: 1142 / 575;
	width: 100%;
}

.vidas-casos__face {
	position: relative;
	min-width: 0;
	overflow: hidden;
	box-sizing: border-box;
}

.vidas-casos__front {
	display: flex;
	flex-direction: column;
	padding: 3.692cqw 3cqw 3.519cqw 4.792cqw;
	border-radius: var(--vc-r-tl, 1.93cqw) 0 0 var(--vc-r-bl, 1.93cqw);   /* control "Radio del borde" o 25px del diseño */
	background: var(--vc-card-bg);
}

.vidas-casos__back {
	border-radius: 0 var(--vc-r-tr, 1.93cqw) var(--vc-r-br, 1.93cqw) 0;
	background: var(--vc-card-bg);
}

.vidas-casos__head {
	margin: 0;
	padding: 0 0 0 0.486cqw;
	font-family: inherit;
	font-size: 1.226cqw;
	line-height: 2.276cqw;
	letter-spacing: -0.02em;
	color: inherit;
}

.vidas-casos__category {
	font-weight: 600;
}

.vidas-casos__subcategory {
	font-weight: 300;
}

.vidas-casos__question {
	max-width: 40.63cqw;
	margin: 3.428cqw 0 0;
	padding: 0;
	font-family: inherit;
	font-weight: 400;
	font-size: 4.028cqw;
	line-height: 4.378cqw;
	letter-spacing: -0.02em;
	color: inherit;
}

.vidas-casos__foot {
	margin-top: auto;
}

.vidas-casos__tag {
	/* centrado óptico: las mayúsculas de Soleil quedan altas si se centra la línea completa (sobra el hueco de los
	 * descendentes), así que se centra la caja y se baja el texto 0.24em; donde el navegador sabe recortar la línea
	 * a la altura de las mayúsculas (text-box), se centra exacto sin compensar */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: top;
	min-width: 9.214cqw;
	height: 2.421cqw;
	padding: 0.24em 1cqw 0;
	border-radius: 999px;
	box-sizing: border-box;
	background: var(--vc-tag-bg);
	color: var(--vc-tag-text);
	font-family: inherit;
	font-weight: 600;
	font-size: 0.876cqw;
	line-height: 1;
	letter-spacing: 0;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
}

.vidas-casos__tag-text {
	position: relative;                  /* el control "Ajuste vertical del texto" lo desplaza con top */
	top: 0;
}

.vidas-casos__desc {
	max-width: 40.69cqw;
	margin: 2.056cqw 0 0;
	padding: 0;
	font-family: inherit;
	font-weight: 300;
	font-size: 1.926cqw;
	line-height: 2.452cqw;
	letter-spacing: -0.01em;
	color: inherit;
}

/* ---------- Visual (mitad derecha) ---------- */
.vidas-casos__back-head {
	display: none;
}

.vidas-casos__visual {
	display: grid;
	grid-template-rows: 1fr 1fr;
	height: 100%;
}

.vidas-casos__panel {
	position: relative;
	overflow: hidden;
}

.vidas-casos__panel--top {
	background: var(--vc-panel-top);
}

.vidas-casos__panel--bottom {
	background: var(--vc-panel-bottom);
}

/* Imagen propia de la tarjeta en lugar de la gráfica: una caja que ocupa el recuadro (con su margen interior)
 * y, dentro, la imagen con ancho/alto/ajuste/posición/alineación de los controles de Estilo */
.vidas-casos__img-box {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	overflow: hidden;
}

.vidas-casos .vidas-casos__visual-img {
	display: block;
	flex: 0 0 auto;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
	object-position: center center;
}

.vidas-casos__diagram {
	display: block;
}

.vidas-casos__diagram--desk {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.vidas-casos__diagram--mob {
	display: none;
}

.vidas-casos__diagram .vc-l {
	fill: none;
	stroke: var(--vc-lines);
	stroke-width: 0.8;
}

.vidas-casos__diagram .vc-badge {
	fill: var(--vc-badge-bg);
}

.vidas-casos__diagram .vc-t {
	fill: var(--vc-diag-text);
	font-family: "Soleil", sans-serif;
	font-weight: 300;
	font-size: 17.85px;
	letter-spacing: -0.54px;
	dominant-baseline: central;
}

.vidas-casos__diagram .vc-bt {
	font-weight: 600;
	font-size: 11.46px;
	letter-spacing: 0;
	text-anchor: middle;
}

.vidas-casos__sphere {
	position: absolute;
	left: 19.695cqw;
	top: 4.13cqw;
	width: 10.528cqw;
	height: 10.528cqw;
	border-radius: 50%;
	background:
		radial-gradient(circle at 22% 22%, var(--vc-s1) 0%, transparent 58%),
		radial-gradient(circle at 82% 22%, var(--vc-s2) 0%, transparent 55%),
		radial-gradient(circle at 80% 82%, var(--vc-s3) 0%, transparent 60%),
		var(--vc-s4);
}

/* Lienzo de la esfera giratoria (lo crea el JS); el degradado de arriba queda de respaldo */
.vidas-casos__sphere-canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.vidas-casos__sphere.is-gl {
	background: none;
}

/* Paletas por tarjeta ("General" = las variables de la sección) */
.vidas-casos .vc-pal--peach  { --vc-s1: #f2c2b4; --vc-s2: #c6a9f1; --vc-s3: #c9a6ee; --vc-s4: #eeb3d1; }
.vidas-casos .vc-pal--aqua   { --vc-s1: #86b4e8; --vc-s2: #8cd4d4; --vc-s3: #c7f4f0; --vc-s4: #bceeeb; }
.vidas-casos .vc-pal--violet { --vc-s1: #c3bbf4; --vc-s2: #8f7bef; --vc-s3: #cba9ee; --vc-s4: #c5a8ef; }
.vidas-casos .vc-pal--blue   { --vc-s1: #c2bbf4; --vc-s2: #739bf9; --vc-s3: #a2d2f9; --vc-s4: #9eccf8; }

.vidas-casos__caption {
	position: absolute;
	left: 50%;
	top: 18.169cqw;
	width: 30.693cqw;
	margin: 0;
	transform: translateX(-50%);
	font-family: inherit;
	font-weight: 300;
	font-size: 1.401cqw;
	line-height: 1.751cqw;
	letter-spacing: -0.03em;
	text-align: center;
	color: var(--vc-caption);
}

/* ============ TABLET Y MÓVIL: tarjeta que se voltea ============ */
@media (max-width: 1024px) {
	.vidas-casos {
		--vc-gap: 24px;
		--vc-label-pad: 60px;
		--vc-label-gap: 64px;
	}

	.vidas-casos .vidas-casos__slide.swiper-slide {
		width: calc(62% + var(--vc-gap));
	}

	.vidas-casos__card {
		perspective: 1800px;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.vidas-casos__inner {
		grid-template-columns: 1fr;
		aspect-ratio: auto;
		min-height: 122.2cqw;
		height: 100%;
		transform-style: preserve-3d;
		transition: transform var(--vc-flip-dur) cubic-bezier(0.25, 0.8, 0.25, 1);
	}

	.vidas-casos__slide.is-flipped .vidas-casos__inner {
		transform: rotateY(180deg);
	}

	.vidas-casos__face {
		grid-area: 1 / 1;
		display: flex;
		flex-direction: column;
		border-radius: var(--vc-r-tl, 5.4cqw) var(--vc-r-tr, 5.4cqw) var(--vc-r-br, 5.4cqw) var(--vc-r-bl, 5.4cqw);
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	}

	.vidas-casos__front {
		padding: 7.5cqw 6cqw 9cqw 8.7cqw;
	}

	.vidas-casos__back {
		transform: rotateY(180deg);
	}

	.vidas-casos__head {
		padding-left: 0.6cqw;
		font-size: 3.75cqw;
		line-height: 4.8cqw;
	}

	.vidas-casos__category,
	.vidas-casos__subcategory {
		display: block;
	}

	.vidas-casos__question {
		max-width: none;
		margin-top: 8.4cqw;
		font-size: 8cqw;
		line-height: 9.3cqw;
	}

	.vidas-casos__question br {
		display: none;
	}

	.vidas-casos__tag {
		min-width: 27cqw;
		height: 6.9cqw;
		padding: 0.24em 3cqw 0;
		font-size: 2.5cqw;
	}

	.vidas-casos__desc {
		max-width: none;
		margin-top: 8.4cqw;
		font-size: 4.8cqw;
		line-height: 5.86cqw;
	}

	/* Cara trasera: cabecera + diagrama */
	.vidas-casos__back-head {
		display: block;
		padding: 7.5cqw 6cqw 6cqw 8.7cqw;
	}

	.vidas-casos__visual {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		height: auto;
	}

	.vidas-casos__panel--top.has-img {
		min-height: 50cqw;                   /* con imagen no hay gráfica que le dé alto */
	}

	.vidas-casos__panel--top {
		flex: 1 1 auto;
		padding: 6.3cqw;
	}

	.vidas-casos__panel--bottom,
	.vidas-casos__diagram--desk {
		display: none;
	}

	.vidas-casos__diagram--mob {
		display: block;
		width: 85cqw;
		max-width: 100%;
		height: auto;
	}
}

@media (max-width: 767px) {
	.vidas-casos {
		--vc-gap: 20px;
		--vc-label-pad: 20px;
		--vc-label-gap: 58px;
	}

	.vidas-casos__label {
		gap: 8px;
		font-size: 11px;
		line-height: 18px;
		letter-spacing: 0;
	}

	.vidas-casos__asterisk {
		width: 14px;
		height: 14px;
	}

	/* La tarjeta arranca a 22px del borde y la siguiente asoma por la derecha */
	.vidas-casos .swiper {
		padding-left: calc(22px - var(--vc-gap) / 2);
	}

	.vidas-casos .vidas-casos__slide.swiper-slide {
		width: calc(100% - 38px + var(--vc-gap) / 2);
	}
}

/* Navegadores que recortan la línea a la altura de las mayúsculas: centrado exacto, sin compensación */
@supports (text-box: trim-both cap alphabetic) {
	.vidas-casos__tag {
		padding-top: 0;
		text-box: trim-both cap alphabetic;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vidas-casos__inner {
		transition: none !important;
	}
}