/* Vidas – Equipo ("Conoce al equipo")
 * 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 SemiBold 4.6cqw (~64px) a ~1.9cqw; párrafo Light 22/30 (máx. 640px) a ~2.7cqw;
 *   fotos a ~6.5cqw: 5 columnas de 17.33% (241px) con 20px entre ellas, proporción 241×300, radio 20px;
 *   nombre sobre la foto (SemiBold 9.2% del ancho de la tarjeta, abajo a la izquierda) y cargo debajo (4.6%).
 *   Estado inicial: foto desenfocada y oscura; al pasar el ratón (o en la tarjeta activa del carrusel) se aclara,
 *   se enfoca y aparece el cargo. Opción de nombre debajo de la foto (Medium 24px a 15px).
 * Tablet / móvil (por defecto, tablet y móvil): carrusel deslizable con puntos (tarjetas al 34% / 72% de la columna,
 *   que asoman por el borde de la pantalla).
 * Sin fondo ni espacio vertical propios.
 */

.vtm {
	--vtm-label: #000;
	--vtm-heading: #000;
	--vtm-text: #000;
	--vtm-name: #000;
	--vtm-card: #fff;
	--vtm-scan1: #4e20e4;
	--vtm-scan2: #aaedff;
	--vtm-name-over: #fff;
	--vtm-role: rgba(255, 255, 255, 0.85);
	--vtm-dot: rgba(0, 0, 0, 0.2);
	--vtm-dot-on: #4e20e4;
	--vtm-blur: 6px;
	--vtm-dim: 0.4;
	--vtm-dur: 0.7s;
	--vtm-shade: 0.45;
	--vtm-max: 1392px;
	--vtm-pad: 60px;

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

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

/* Con JS las fotos esperan ocultas a que arranque la entrada (si algo fallara, aparecen solas a los 2.5 s) */
.vtm.is-pending .vtm__reveal {
	visibility: hidden;
	animation: vtm-show 0s linear 2.5s forwards;
}

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

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

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

.vtm__label-text {
	display: block;
}

/* ---------- Titular y párrafo ---------- */
.vtm__heading {
	margin: var(--vtm-gap-label, 1.9cqw) 0 0;
	padding: 0;
	font-family: inherit;
	font-weight: 600;
	font-size: 4.6cqw;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--vtm-heading);
}

.vtm__text {
	max-width: 640px;
	margin: var(--vtm-gap-text, 2.7cqw) 0 0;
	padding: 0;
	font-family: inherit;
	font-weight: 300;
	font-size: 22px;
	line-height: 30px;
	letter-spacing: -0.005em;
	color: var(--vtm-text);
}

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

/* ---------- Cuadrícula ---------- */
.vtm__viewport {
	position: relative;
	margin-top: var(--vtm-gap-grid, 6.5cqw);
}

.vtm__inner > .vtm__viewport:first-child {
	margin-top: 0;
}

.vtm__grid {
	display: grid;
	grid-template-columns: repeat(var(--vtm-cols, 5), minmax(0, var(--vtm-card-w, 17.33%)));
	column-gap: var(--vtm-gap-x, 1.44cqw);
	row-gap: var(--vtm-gap-y, 3.8cqw);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vtm__item {
	margin: 0;
	padding: 0;
	min-width: 0;
}

.vtm .vtm__card,
.vtm .vtm__card:hover,
.vtm .vtm__card:focus,
.vtm .vtm__card:visited {
	display: block;
	color: var(--vtm-name);
	text-decoration: none;
	background: none;
}

.vtm .vtm__card:focus-visible {
	outline: 2px solid var(--vtm-scan1);
	outline-offset: 4px;
	border-radius: var(--vtm-radius, 20px);
}

/* Foto */
.vtm__media {
	position: relative;
	display: block;
	aspect-ratio: 241 / 300;
	border-radius: var(--vtm-radius, 20px);
}

.vtm__reveal {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
	border-radius: inherit;
	background: var(--vtm-card);
	isolation: isolate;
	transform: translateZ(0);            /* recorte redondeado estable durante las animaciones */
}

.vtm .vtm__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	object-fit: cover;
	object-position: 50% 30%;
	transform-origin: 50% 50%;
	will-change: transform;
}

/* ---------- Estado inicial (desenfocada y oscura) → hover / tarjeta activa (nítida, con el cargo) ---------- */
.vtm__media {
	container-type: inline-size;          /* nombre y cargo se miden en % del ancho de la tarjeta (cqw) */
}

.vtm__media:not(.is-empty) .vtm__reveal {
	background: #07070c;                  /* bajo el desenfoque no asoma el blanco */
}

.vtm.has-reveal .vtm__media:not(.is-empty) .vtm__img {
	filter: blur(var(--vtm-blur)) brightness(var(--vtm-dim)) saturate(0.85);
	transform: scale(1.1);                /* el desenfoque no deja bordes claros */
	transition: filter var(--vtm-dur) cubic-bezier(0.33, 1, 0.68, 1), transform calc(var(--vtm-dur) * 1.5) cubic-bezier(0.22, 1, 0.36, 1);
}

.vtm.has-reveal .vtm__card.is-on .vtm__media:not(.is-empty) .vtm__img,
.vtm.has-reveal:not(.is-js) .vtm__card:hover .vtm__media:not(.is-empty) .vtm__img {
	filter: blur(0) brightness(1) saturate(1);
	transform: scale(1.02);
}

/* mientras GSAP hace la entrada, sin transiciones CSS en la foto */
.vtm.is-entering .vtm__img {
	transition: none !important;
}

/* sombra inferior para leer el nombre cuando la foto se aclara */
.vtm__shade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	display: block;
	height: 55%;
	background: linear-gradient(to top, rgba(0, 0, 0, var(--vtm-shade)) 0%, rgba(0, 0, 0, 0) 100%);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--vtm-dur) ease;
}

.vtm__media.is-empty .vtm__shade {
	display: none;
}

.vtm .vtm__card.is-on .vtm__shade,
.vtm:not(.is-js) .vtm__card:hover .vtm__shade,
.vtm:not(.has-reveal) .vtm__shade {
	opacity: 1;
}

/* nombre y cargo, abajo a la izquierda (el cargo reserva su sitio: el nombre no se mueve) */
.vtm__info {
	position: absolute;
	left: 7.5cqw;
	right: 7.5cqw;
	bottom: 8.3cqw;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	pointer-events: none;
}

.vtm .vtm__name.vtm__name--over {
	display: block;
	margin: 0;
	font-family: inherit;
	font-weight: 600;
	font-size: max(9.2cqw, 15px);
	line-height: 1.22;
	letter-spacing: -0.01em;
	color: var(--vtm-name-over);
}

.vtm__role {
	display: block;
	max-width: 100%;
	margin-top: 4cqw;
	font-family: inherit;
	font-weight: 400;
	font-size: max(4.6cqw, 10px);
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--vtm-role);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity calc(var(--vtm-dur) * 0.6) ease, transform var(--vtm-dur) cubic-bezier(0.22, 1, 0.36, 1);
}

.vtm .vtm__card.is-on .vtm__role,
.vtm:not(.is-js) .vtm__card:hover .vtm__role,
.vtm:not(.has-reveal) .vtm__role {
	opacity: 1;
	transform: none;
	transition-delay: calc(var(--vtm-dur) * 0.25);
}

/* tarjeta sin foto: textos oscuros sobre el blanco */
.vtm .vtm__media.is-empty .vtm__name--over { color: var(--vtm-name); }
.vtm .vtm__media.is-empty .vtm__role { color: var(--vtm-name); opacity: 0.6; }
.vtm .vtm__card.is-on .vtm__media.is-empty .vtm__role { opacity: 0.6; }

/* con el nombre sobre la foto, entre filas la misma separación que entre columnas */
.vtm.is-name-over .vtm__grid {
	row-gap: var(--vtm-gap-y, var(--vtm-gap-x, 1.44cqw));
}

/* Línea del escáner de la entrada (fuera del recorte para que se vea el brillo) */
.vtm__edge {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	z-index: 3;
	display: block;
	height: 2px;
	opacity: 0;
	pointer-events: none;
	background: linear-gradient(90deg, transparent 0%, var(--vtm-scan2) 12%, #fff 50%, var(--vtm-scan2) 88%, transparent 100%);
	box-shadow: 0 0 10px 1px var(--vtm-scan2), 0 0 24px 4px var(--vtm-scan1);
}

/* Nombre */
.vtm__name {
	display: block;
	margin-top: var(--vtm-name-gap, 15px);
	font-family: inherit;
	font-weight: 500;
	font-size: 24px;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--vtm-name);
}

/* ---------- Puntos (solo en carrusel) ---------- */
.vtm__dots {
	display: none;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 2px;
	margin-top: 22px;
}

.vtm .vtm__dot,
.vtm .vtm__dot:hover,
.vtm .vtm__dot:focus {
	position: relative;
	display: block;
	width: auto;
	min-width: 0;
	height: 24px;
	min-height: 0;
	margin: 0;
	padding: 0 4px;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	line-height: 0;
	cursor: pointer;
}

.vtm .vtm__dot::before {
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--vtm-dot);
	transition: width 0.4s cubic-bezier(0.65, 0, 0.35, 1), background-color 0.3s ease;
}

.vtm .vtm__dot.is-active::before {
	width: 26px;
	background: var(--vtm-dot-on);
}

.vtm .vtm__dot:focus-visible {
	outline: 2px solid var(--vtm-dot-on);
	outline-offset: 0;
	border-radius: 999px;
}

/* ---------- Carrusel (mixins por anchura) ---------- */
@media (max-width: 1024px) {
	.vtm__heading {
		font-size: 5.6cqw;
	}

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

	.vtm__name {
		font-size: 20px;
	}

	/* cuadrícula en tablet cuando el carrusel es solo para móvil */
	.vtm-carousel-mobile .vtm__grid {
		grid-template-columns: repeat(var(--vtm-cols, 4), minmax(0, var(--vtm-card-w, 1fr)));
		column-gap: var(--vtm-gap-x, 16px);
		row-gap: var(--vtm-gap-y, 40px);
	}

	.vtm-carousel-mobile .vtm.is-name-over .vtm__grid {
		row-gap: var(--vtm-gap-y, var(--vtm-gap-x, 16px));
	}

	.vtm-carousel-tablet .vtm__viewport {
		overflow-x: auto;
		overflow-y: hidden;
		margin-left: calc(-1 * var(--vtm-pad));
		margin-right: calc(-1 * var(--vtm-pad));
		padding: 0 var(--vtm-pad);
		scroll-padding: 0 var(--vtm-pad);
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		cursor: grab;
	}

	.vtm-carousel-tablet .vtm__viewport::-webkit-scrollbar {
		display: none;
	}

	.vtm-carousel-tablet .vtm__grid {
		display: flex;
		gap: var(--vtm-gap-x, 16px);
	}

	.vtm-carousel-tablet .vtm__grid::after {
		content: "";
		flex: 0 0 max(1px, calc(var(--vtm-pad) - var(--vtm-gap-x, 16px)));
	}

	.vtm-carousel-tablet .vtm__item {
		flex: 0 0 var(--vtm-card-w, 34%);
		scroll-snap-align: start;
	}

	.vtm-carousel-tablet .vtm__dots {
		display: flex;
	}
}

@media (max-width: 767px) {
	.vtm {
		--vtm-pad: 20px;
	}

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

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

	.vtm__heading {
		margin-top: var(--vtm-gap-label, 3cqw);
		font-size: 10.6cqw;
		line-height: 1.06;
	}

	.vtm__text {
		margin-top: var(--vtm-gap-text, 5cqw);
		font-size: 17px;
		line-height: 25px;
	}

	.vtm__viewport {
		margin-top: var(--vtm-gap-grid, 10cqw);
	}

	.vtm__name {
		margin-top: var(--vtm-name-gap, 12px);
		font-size: 18px;
	}



	.vtm-carousel-tablet .vtm__viewport,
	.vtm-carousel-mobile .vtm__viewport {
		overflow-x: auto;
		overflow-y: hidden;
		margin-left: calc(-1 * var(--vtm-pad));
		margin-right: calc(-1 * var(--vtm-pad));
		padding: 0 var(--vtm-pad);
		scroll-padding: 0 var(--vtm-pad);
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.vtm-carousel-mobile .vtm__viewport::-webkit-scrollbar {
		display: none;
	}

	.vtm-carousel-tablet .vtm__grid,
	.vtm-carousel-mobile .vtm__grid {
		display: flex;
		gap: var(--vtm-gap-x, 12px);
	}

	.vtm-carousel-tablet .vtm__grid::after,
	.vtm-carousel-mobile .vtm__grid::after {
		content: "";
		flex: 0 0 max(1px, calc(var(--vtm-pad) - var(--vtm-gap-x, 12px)));
	}

	.vtm-carousel-tablet .vtm__item,
	.vtm-carousel-mobile .vtm__item {
		flex: 0 0 var(--vtm-card-w, 72%);
		scroll-snap-align: start;
	}

	.vtm-carousel-tablet .vtm__dots,
	.vtm-carousel-mobile .vtm__dots {
		display: flex;
		margin-top: 18px;
	}
}

/* arrastrando con el ratón: sin imán mientras se arrastra */
.vtm .vtm__viewport.is-dragging {
	scroll-snap-type: none;
	cursor: grabbing;
	user-select: none;
}

.vtm .vtm__viewport.is-dragging .vtm__card {
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.vtm .vtm__img,
	.vtm__shade,
	.vtm__role {
		transition: none !important;
	}

	.vtm .vtm__dot::before {
		transition: none;
	}
}