/* =========================================================
   Marco de Perfiles — estilos
   Las franjas se recortan con clip-path: la foto nunca se
   deforma y no quedan huecos entre franjas.
   ========================================================= */

.mperf-wrap,
.mperf-wrap *,
.mperf-wrap *::before,
.mperf-wrap *::after {
	box-sizing: border-box;
}

.mperf-wrap {
	position: relative;
	width: 100%;
	max-width: var(--mperf-max, 1100px);
	margin: 0 auto;
	font-family: inherit;
}

.mperf-panel {
	position: relative;
	aspect-ratio: var(--mperf-ratio, 16 / 10);
	min-height: 300px;
	overflow: hidden;
	border-radius: var(--mperf-r, 22px);
}

/* ---------- Franjas ---------- */
.mperf-slices {
	display: flex;
	height: 100%;
	width: 100%;
}

.mperf-slice {
	position: relative;
	display: block;
	flex: 1 1 0;
	min-width: 0;
	text-decoration: none;
	border: 0;
	transition: flex-grow .45s cubic-bezier(.22, .8, .26, 1);
}

/* Cada franja se monta sobre la anterior para que los bordes
   diagonales coincidan exactamente (sin huecos). */
.mperf-slice + .mperf-slice {
	margin-left: calc(var(--mperf-k, 90px) * -1);
}

/* La última franja termina recta contra el borde derecho */
.mperf-slice:last-child .mperf-media {
	clip-path: polygon(var(--mperf-k, 90px) 0, 100% 0, 100% 100%, 0 100%);
}

/* Borde izquierdo recto o curvo: la primera franja no se corta */
.mperf-edge-recta .mperf-slice:first-child .mperf-media,
.mperf-edge-curva .mperf-slice:first-child .mperf-media {
	clip-path: polygon(0 0, 100% 0, calc(100% - var(--mperf-k, 90px)) 100%, 0 100%);
}

.mperf-edge-recta .mperf-slice:first-child:last-child .mperf-media,
.mperf-edge-curva .mperf-slice:first-child:last-child .mperf-media {
	clip-path: none;
}

/* Borde izquierdo curvo (como el diseño original) */
.mperf-edge-curva .mperf-panel {
	border-radius: var(--mperf-curve, 165px) var(--mperf-r, 22px) var(--mperf-r, 22px) var(--mperf-curve, 165px) / 50% var(--mperf-r, 22px) var(--mperf-r, 22px) 50%;
	background: var(--mperf-dark, #0e2168);
}

.mperf-edge-curva .mperf-rim {
	position: absolute;
	inset: -14px -6px -14px -22px;
	border-radius: calc(var(--mperf-curve, 165px) + 30px) 26px 26px calc(var(--mperf-curve, 165px) + 30px) / 50% 26px 26px 50%;
	background: linear-gradient(120deg, rgba(26, 93, 240, .14), rgba(26, 93, 240, .04) 55%, rgba(26, 93, 240, 0));
	pointer-events: none;
}

/* ---------- Foto ---------- */
/* El recorte diagonal se aplica SOLO a la foto, nunca al icono
   ni al texto (así no se cortan). El fondo de este bloque asoma
   3px por la izquierda y forma la línea divisoria diagonal. */
.mperf-media {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
	background: var(--mperf-line, rgba(255, 255, 255, .55));
	/* Paralelogramo: arriba desplazado a la derecha */
	clip-path: polygon(var(--mperf-k, 90px) 0, 100% 0, calc(100% - var(--mperf-k, 90px)) 100%, 0 100%);
}

.mperf-photo,
.mperf-shade {
	left: 3px;
}

.mperf-slice:first-child .mperf-photo,
.mperf-slice:first-child .mperf-shade {
	left: 0;
}

.mperf-photo {
	position: absolute;
	inset: 0 0 0 3px;
	display: block;
	background-color: var(--mperf-dark, #0e2168);
	background-size: cover;
	background-repeat: no-repeat;
	transform: scale(1.01);
	transform-origin: center;
	transition: transform .6s cubic-bezier(.22, .8, .26, 1), filter .45s ease;
	filter: saturate(.96);
}

/* Zoom propio: la foto se dibuja al X% de la altura de la franja.
   Menos de 100 = se ve la persona más completa (el hueco de abajo lo
   tapa el degradado). Más de 100 = acerca y deja mover la foto
   verticalmente con "Mover la foto: arriba / abajo". */
.mperf-slice.mperf-fit .mperf-photo {
	background-size: auto calc(var(--mperf-fit, 100) * 1%);
}

/* Con zoom menor al 100% la foto se apoya arriba para que no
   quede una banda de color en la parte superior. */
.mperf-slice.mperf-fittop .mperf-photo {
	background-position-y: 0 !important;
}

/* Degradado azul inferior (máscara, para respetar el color elegido) */
.mperf-shade {
	position: absolute;
	inset: 0 0 0 3px;
	display: block;
	background: var(--mperf-dark, #0e2168);
	transition: opacity .45s ease;
	-webkit-mask-image: linear-gradient(to top, #000 0%, #000 var(--mperf-solid, 14%), rgba(0, 0, 0, .5) calc(var(--mperf-solid, 14%) + 20%), rgba(0, 0, 0, 0) calc(var(--mperf-solid, 14%) + 42%));
	mask-image: linear-gradient(to top, #000 0%, #000 var(--mperf-solid, 14%), rgba(0, 0, 0, .5) calc(var(--mperf-solid, 14%) + 20%), rgba(0, 0, 0, 0) calc(var(--mperf-solid, 14%) + 42%));
}

/* ---------- Icono + etiqueta ---------- */
/* Va fuera del recorte, así que nunca se corta.
   --mperf-comp desplaza el bloque para que quede ópticamente
   centrado dentro de la franja diagonal. */
.mperf-content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--mperf-cy, 16%);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: var(--mperf-align, center);
	gap: 12px;
	padding: 0 8px;
	transform: translateX(calc(var(--mperf-k, 90px) * -1 * var(--mperf-comp, .35) + var(--mperf-cx, 0px)));
	pointer-events: none;
}

.mperf-slice:hover {
	z-index: 3;
}

.mperf-icon {
	width: 62px;
	height: 62px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--mperf-accent, #1a5df0);
	color: #fff;
	box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .6);
	transition: transform .4s cubic-bezier(.34, 1.6, .5, 1), box-shadow .4s ease;
}

.mperf-icon svg {
	width: 30px;
	height: 30px;
	fill: currentColor;
}

.mperf-icon svg[stroke] {
	fill: none;
}

.mperf-icon img {
	width: 32px;
	height: 32px;
	object-fit: contain;
}

.mperf-icon i {
	font-size: 26px;
	line-height: 1;
	color: #fff;
}

.mperf-label {
	max-width: 100%;
	color: #fff;
	font-size: clamp(13px, 1.25vw, 17px);
	font-weight: 700;
	letter-spacing: .2px;
	line-height: 1.2;
	min-width: 0;
	text-align: center;
	text-wrap: balance;
	white-space: normal;
	overflow-wrap: break-word;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
	transition: transform .4s ease;
}

/* Reserva la altura de N líneas para que todos los iconos queden
   a la misma altura aunque un texto ocupe dos renglones. */
.mperf-rows .mperf-label {
	display: block;
	min-height: calc(var(--mperf-rows, 2) * 1.2em);
}

/* ---------- Hover ---------- */
@media (hover: hover) {
	.mperf-wrap:not(.mperf-no-anim) .mperf-slice:hover {
		flex-grow: 1.35;
	}

	.mperf-wrap:not(.mperf-no-anim) .mperf-slice:hover .mperf-photo {
		transform: scale(var(--mperf-zoom, 1.12));
		filter: saturate(1.1) brightness(1.06);
	}

	.mperf-wrap:not(.mperf-no-anim) .mperf-slice:hover .mperf-shade {
		opacity: .72;
	}

	.mperf-wrap:not(.mperf-no-anim) .mperf-slice:hover .mperf-icon {
		transform: translateY(-8px) scale(1.12);
		box-shadow: 0 14px 26px -8px rgba(0, 0, 0, .65);
	}

	.mperf-wrap:not(.mperf-no-anim) .mperf-slice:hover .mperf-label {
		transform: translateY(-4px);
	}
}

.mperf-slice:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -6px;
}

/* ---------- Logo de respaldo ---------- */
.mperf-brand {
	position: absolute;
	right: 4.5%;
	bottom: 4%;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	pointer-events: none;
}

.mperf-brand-txt {
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	opacity: .95;
}

.mperf-brand-logo {
	display: block;
	width: auto;
	max-width: 260px;
}

/* ---------- Aparición inicial ---------- */
@keyframes mperf-in {
	from {
		opacity: 0;
		transform: translateY(26px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.mperf-wrap:not(.mperf-no-anim) .mperf-slice {
	animation: mperf-in .7s cubic-bezier(.22, .8, .26, 1) both;
	animation-delay: var(--mperf-delay, 0ms);
}

/* =========================================================
   Responsive
   El punto de quiebre lo elige el usuario: la clase
   .mperf-mq-767 (móvil) o .mperf-mq-1024 (móvil y tablet).
   ========================================================= */

@media (max-width: 1024px) {

	/* --- Cuadrícula 2x2 (por defecto) y lista --- */
	.mperf-mq-1024:not(.mperf-m-carrusel) .mperf-panel {
		aspect-ratio: auto;
		min-height: 0;
		border-radius: var(--mperf-r-m, 26px);
		background: var(--mperf-dark, #0e2168);
	}

	.mperf-mq-1024:not(.mperf-m-carrusel) .mperf-rim {
		display: none;
	}

	.mperf-mq-1024:not(.mperf-m-carrusel) .mperf-slices {
		display: grid;
		grid-template-columns: 1fr 1fr;
		width: 100%;
		height: auto;
		gap: 3px;
	}

	.mperf-mq-1024.mperf-m-lista .mperf-slices {
		grid-template-columns: 1fr;
	}

	.mperf-mq-1024:not(.mperf-m-carrusel) .mperf-slice,
	.mperf-mq-1024:not(.mperf-m-carrusel) .mperf-slice:first-child,
	.mperf-mq-1024:not(.mperf-m-carrusel) .mperf-slice:last-child,
	.mperf-mq-1024:not(.mperf-m-carrusel) .mperf-slice + .mperf-slice {
		aspect-ratio: var(--mperf-ratio-m, 3 / 4);
		margin-left: 0;
	}

	.mperf-mq-1024:not(.mperf-m-carrusel) .mperf-media,
	.mperf-mq-1024:not(.mperf-m-carrusel) .mperf-slice:last-child .mperf-media,
	.mperf-mq-1024:not(.mperf-m-carrusel) .mperf-slice:first-child .mperf-media {
		inset: 0;
		clip-path: none;
		background: none;
	}

	.mperf-mq-1024:not(.mperf-m-carrusel) .mperf-photo,
	.mperf-mq-1024:not(.mperf-m-carrusel) .mperf-shade {
		inset: 0;
	}

	.mperf-mq-1024:not(.mperf-m-carrusel) .mperf-content {
		padding: 0 8px;
		transform: translateX(var(--mperf-cx-m, 0px));
	}

	.mperf-mq-1024:not(.mperf-m-carrusel) .mperf-brand {
		position: static;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 10px;
		padding: 14px 0;
	}

	/* --- Carrusel deslizable (conserva la diagonal) --- */
	.mperf-mq-1024.mperf-m-carrusel .mperf-panel {
		aspect-ratio: var(--mperf-ratio-m, 4 / 5);
		min-height: 0;
	}

	.mperf-mq-1024.mperf-m-carrusel .mperf-slices {
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.mperf-mq-1024.mperf-m-carrusel .mperf-slices::-webkit-scrollbar {
		display: none;
	}

	.mperf-mq-1024.mperf-m-carrusel .mperf-slice {
		flex: 0 0 var(--mperf-card-m, 62%);
		scroll-snap-align: center;
	}

	.mperf-mq-1024.mperf-m-carrusel .mperf-content {
		transform: translateX(calc(var(--mperf-k, 90px) * -1 * var(--mperf-comp, .35) + var(--mperf-cx-m, 0px)));
	}

	.mperf-mq-1024.mperf-m-carrusel .mperf-slice:last-child .mperf-media {
		clip-path: polygon(var(--mperf-k, 90px) 0, 100% 0, calc(100% - var(--mperf-k, 90px)) 100%, 0 100%);
	}

	/* --- Tamaños comunes en móvil --- */
	.mperf-mq-1024 .mperf-slice .mperf-photo {
		background-size: cover;
	}

	.mperf-mq-1024 .mperf-slice.mperf-fitm .mperf-photo {
		background-size: auto calc(var(--mperf-fit-m, 100) * 1%);
	}

	.mperf-mq-1024 .mperf-slice.mperf-fitmtop .mperf-photo {
		background-position-y: 0 !important;
	}

	.mperf-mq-1024 .mperf-slice.mperf-fitmtop .mperf-shade {
		--mperf-solid: var(--mperf-solid-m, 14%);
	}

	.mperf-mq-1024 .mperf-content {
		bottom: var(--mperf-cy-m, 9%);
		gap: 9px;
		align-items: var(--mperf-align-m, center);
	}

	/* Encuadre de la foto solo en móvil (anula el de cada perfil) */
	.mperf-mq-1024.mperf-mfocus .mperf-photo {
		background-position: var(--mperf-focus-m, center 25%) !important;
	}

	.mperf-mq-1024 .mperf-icon {
		width: var(--mperf-icon-m, 52px);
		height: var(--mperf-icon-m, 52px);
	}

	.mperf-mq-1024 .mperf-icon svg,
	.mperf-mq-1024 .mperf-icon img {
		width: calc(var(--mperf-icon-m, 52px) * .48);
		height: calc(var(--mperf-icon-m, 52px) * .48);
	}

	.mperf-mq-1024 .mperf-icon i {
		font-size: calc(var(--mperf-icon-m, 52px) * .42);
	}

	.mperf-mq-1024 .mperf-label {
		font-size: var(--mperf-text-m, 14px);
	}

	.mperf-mq-1024 .mperf-brand-txt {
		font-size: 11px;
	}
}

@media (max-width: 767px) {

	/* --- Cuadrícula 2x2 (por defecto) y lista --- */
	.mperf-wrap:not(.mperf-m-carrusel) .mperf-panel {
		aspect-ratio: auto;
		min-height: 0;
		border-radius: var(--mperf-r-m, 26px);
		background: var(--mperf-dark, #0e2168);
	}

	.mperf-wrap:not(.mperf-m-carrusel) .mperf-rim {
		display: none;
	}

	.mperf-wrap:not(.mperf-m-carrusel) .mperf-slices {
		display: grid;
		grid-template-columns: 1fr 1fr;
		width: 100%;
		height: auto;
		gap: 3px;
	}

	.mperf-wrap.mperf-m-lista .mperf-slices {
		grid-template-columns: 1fr;
	}

	.mperf-wrap:not(.mperf-m-carrusel) .mperf-slice,
	.mperf-wrap:not(.mperf-m-carrusel) .mperf-slice:first-child,
	.mperf-wrap:not(.mperf-m-carrusel) .mperf-slice:last-child,
	.mperf-wrap:not(.mperf-m-carrusel) .mperf-slice + .mperf-slice {
		aspect-ratio: var(--mperf-ratio-m, 3 / 4);
		margin-left: 0;
	}

	.mperf-wrap:not(.mperf-m-carrusel) .mperf-media,
	.mperf-wrap:not(.mperf-m-carrusel) .mperf-slice:last-child .mperf-media,
	.mperf-wrap:not(.mperf-m-carrusel) .mperf-slice:first-child .mperf-media {
		inset: 0;
		clip-path: none;
		background: none;
	}

	.mperf-wrap:not(.mperf-m-carrusel) .mperf-photo,
	.mperf-wrap:not(.mperf-m-carrusel) .mperf-shade {
		inset: 0;
	}

	.mperf-wrap:not(.mperf-m-carrusel) .mperf-content {
		padding: 0 8px;
		transform: translateX(var(--mperf-cx-m, 0px));
	}

	.mperf-wrap:not(.mperf-m-carrusel) .mperf-brand {
		position: static;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 10px;
		padding: 14px 0;
	}

	/* --- Carrusel deslizable (conserva la diagonal) --- */
	.mperf-wrap.mperf-m-carrusel .mperf-panel {
		aspect-ratio: var(--mperf-ratio-m, 4 / 5);
		min-height: 0;
	}

	.mperf-wrap.mperf-m-carrusel .mperf-slices {
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.mperf-wrap.mperf-m-carrusel .mperf-slices::-webkit-scrollbar {
		display: none;
	}

	.mperf-wrap.mperf-m-carrusel .mperf-slice {
		flex: 0 0 var(--mperf-card-m, 62%);
		scroll-snap-align: center;
	}

	.mperf-wrap.mperf-m-carrusel .mperf-content {
		transform: translateX(calc(var(--mperf-k, 90px) * -1 * var(--mperf-comp, .35) + var(--mperf-cx-m, 0px)));
	}

	.mperf-wrap.mperf-m-carrusel .mperf-slice:last-child .mperf-media {
		clip-path: polygon(var(--mperf-k, 90px) 0, 100% 0, calc(100% - var(--mperf-k, 90px)) 100%, 0 100%);
	}

	/* --- Tamaños comunes en móvil --- */
	.mperf-wrap .mperf-slice .mperf-photo {
		background-size: cover;
	}

	.mperf-wrap .mperf-slice.mperf-fitm .mperf-photo {
		background-size: auto calc(var(--mperf-fit-m, 100) * 1%);
	}

	.mperf-wrap .mperf-slice.mperf-fitmtop .mperf-photo {
		background-position-y: 0 !important;
	}

	.mperf-wrap .mperf-slice.mperf-fitmtop .mperf-shade {
		--mperf-solid: var(--mperf-solid-m, 14%);
	}

	.mperf-wrap .mperf-content {
		bottom: var(--mperf-cy-m, 9%);
		gap: 9px;
		align-items: var(--mperf-align-m, center);
	}

	/* Encuadre de la foto solo en móvil (anula el de cada perfil) */
	.mperf-wrap.mperf-mfocus .mperf-photo {
		background-position: var(--mperf-focus-m, center 25%) !important;
	}

	.mperf-wrap .mperf-icon {
		width: var(--mperf-icon-m, 52px);
		height: var(--mperf-icon-m, 52px);
	}

	.mperf-wrap .mperf-icon svg,
	.mperf-wrap .mperf-icon img {
		width: calc(var(--mperf-icon-m, 52px) * .48);
		height: calc(var(--mperf-icon-m, 52px) * .48);
	}

	.mperf-wrap .mperf-icon i {
		font-size: calc(var(--mperf-icon-m, 52px) * .42);
	}

	.mperf-wrap .mperf-label {
		font-size: var(--mperf-text-m, 14px);
	}

	.mperf-wrap .mperf-brand-txt {
		font-size: 11px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mperf-slice,
	.mperf-photo,
	.mperf-icon,
	.mperf-label,
	.mperf-shade {
		transition: none !important;
		animation: none !important;
	}
}