/* ==========================================================
   Academia Más Estética · expositores (retratos y mosaico)
   ========================================================== */

/* ---------- Encuadre de cada rostro ----------
   --z es el acercamiento y --o el punto focal: iguala la escala de las caras. */
/* Tarjetas verticales (4:5). */
.mas-face--sol { --z: 1.18; --o: 50% 30%; }
.mas-face--luis { --z: 1.08; --o: 50% 28%; }
/* Dupla editorial del encabezado: retratos amplios y encuadre natural. */
.mas-team .mas-face--sol { --z: 1.2; --o: 50% 30%; }
.mas-team .mas-face--luis { --z: 1.08; --o: 50% 28%; }
.mas-speaker .elementor-widget-image,
.mas-team__item .elementor-widget-image { overflow: hidden; margin: 0; }
.mas-speaker .elementor-widget-image img,
.mas-team__item .elementor-widget-image img {
	display: block;
	width: 100%;
	object-fit: cover;
	object-position: var(--o, 50% 25%);
	transform: scale(var(--z, 1));
	transform-origin: var(--o, 50% 25%);
	transition: transform 1.1s var(--mas-ease), filter .6s;
}

/* ---------- Dupla de expositores (encabezado del evento e inicio) ---------- */
.mas-team {
	align-items: flex-start !important;
	padding: 14px !important;
	gap: 14px !important;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 28px;
	background: rgba(255, 255, 255, .06);
	box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .65);
	backdrop-filter: blur(8px);
}
.mas-team > .mas-team__item {
	width: calc(50% - 7px) !important;
	padding: 0 !important;
	transition: transform .5s var(--mas-ease);
}
.mas-team__item .elementor-widget-image { border-radius: 20px; box-shadow: 0 22px 40px -22px rgba(0, 0, 0, .55); position: relative; }
.mas-team__item .elementor-widget-image::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
	pointer-events: none;
}
.mas-team__item .elementor-widget-image img { aspect-ratio: 4 / 5; }
.mas-team__item:hover .elementor-widget-image img { transform: scale(calc(var(--z, 1) * 1.07)); }
.mas-team__item .mas-team__name { margin-top: 13px; text-align: center; }
.mas-team__item .mas-team__role { text-align: center; }
.mas-team__name .elementor-heading-title { line-height: 1.25; }
.mas-team__role .elementor-heading-title { letter-spacing: .04em; }
.mas-team:not(.is-dark) { border-color: rgba(16, 39, 61, .09); background: rgba(255, 255, 255, .72); box-shadow: 0 30px 65px -42px rgba(16, 39, 61, .45); }
.mas-team:not(.is-dark) .mas-team__item .elementor-widget-image { box-shadow: 0 22px 40px -24px rgba(16, 39, 61, .45); }
.mas-team:not(.is-dark) .mas-team__item .elementor-widget-image::after { box-shadow: inset 0 0 0 3px #fff; }
/* Sol, como directora del encuentro, lleva un borde dorado. */
.mas-team .mas-face--sol .elementor-widget-image::after { box-shadow: inset 0 0 0 3px var(--mas-gold); }

/* ---------- Tarjetas de retrato ---------- */
.mas-speakers { align-items: stretch !important; justify-content: center !important; gap: 28px !important; }
.e-con.mas-speaker {
	position: relative;
	border-radius: 24px !important;
	overflow: hidden;
	background: var(--mas-navy-dark);
	box-shadow: 0 26px 50px -28px rgba(11, 46, 76, .6);
	isolation: isolate;
	transition: transform .5s var(--mas-ease), box-shadow .5s;
}
.e-con.mas-speaker:hover { transform: translateY(-8px); box-shadow: 0 36px 60px -28px rgba(11, 46, 76, .7); }
.mas-speaker.mas-face--sol { box-shadow: 0 0 0 2px var(--mas-gold), 0 26px 50px -28px rgba(11, 46, 76, .6); }
.mas-speaker .elementor-widget-image img { aspect-ratio: 4 / 5; border-radius: 0 !important; }
.mas-speaker:hover .elementor-widget-image img { transform: scale(calc(var(--z, 1) * 1.06)); }
.mas-speaker.is-open .elementor-widget-image img { filter: blur(2px) brightness(.8); }

.e-con.mas-speaker__info {
	position: absolute !important;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	max-height: 100%;
	padding: 90px 22px 22px !important;
	background: linear-gradient(to top, rgba(11, 46, 76, .97) 0%, rgba(11, 46, 76, .88) 38%, rgba(11, 46, 76, 0) 100%);
	overflow: hidden;
	transition: padding .45s var(--mas-ease), background .45s;
}
.mas-speaker.is-open .mas-speaker__info,
.mas-speaker.has-more:hover .mas-speaker__info { background: linear-gradient(to top, rgba(11, 46, 76, .97) 0%, rgba(11, 46, 76, .93) 70%, rgba(11, 46, 76, .6) 100%); padding-top: 40px !important; }
.mas-speaker__info .mas-speaker-role .elementor-heading-title { padding: 5px 12px; background: rgba(37, 180, 177, .22); color: #8FE3E0 !important; }
.mas-speaker__info .mas-speaker-role.is-gold .elementor-heading-title { background: var(--mas-gold); color: var(--mas-ink) !important; }
.mas-speaker__name .elementor-heading-title { margin-top: 4px; text-shadow: 0 2px 14px rgba(0, 0, 0, .35); }

.e-con.mas-speaker__more {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height .55s var(--mas-ease), opacity .35s, margin .45s;
}
.mas-speaker__more p { margin: 0 0 8px; }
/* Siempre en columna: en móvil Elementor dejaba la ficha en fila y cortaba el texto. */
.e-con.mas-speaker__info, .e-con.mas-speaker__more { flex-direction: column !important; flex-wrap: nowrap !important; align-items: flex-start !important; }
.mas-speaker__info > *, .mas-speaker__more > * { width: 100%; max-width: 100%; }
.mas-speaker.has-more:hover .mas-speaker__more,
.mas-speaker.is-open .mas-speaker__more { max-height: 460px; opacity: 1; margin-top: 6px; overflow-y: auto; }

.mas-speaker__toggle { cursor: pointer; }
.mas-speaker__toggle .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
	color: var(--mas-gold) !important;
	letter-spacing: .06em;
}
.mas-speaker__toggle .elementor-heading-title::after {
	content: "+";
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid rgba(204, 180, 142, .6);
	font-size: 15px;
	line-height: 1;
	transition: transform .4s var(--mas-ease);
}
.mas-speaker.is-open .mas-speaker__toggle .elementor-heading-title::after,
.mas-speaker.has-more:hover .mas-speaker__toggle .elementor-heading-title::after { transform: rotate(45deg); }

@media (max-width: 1024px) {
	.mas-team { padding: 11px !important; gap: 11px !important; }
	.mas-team > .mas-team__item { width: calc(50% - 5.5px) !important; }
}
@media (max-width: 767px) {
	.mas-team { padding: 8px 8px 14px !important; gap: 8px !important; border-radius: 20px; }
	.mas-team > .mas-team__item { width: calc(50% - 4px) !important; }
	.mas-team__item .elementor-widget-image { border-radius: 16px; }

	/* Retratos en carrusel deslizable, como el resto de tarjetas en móvil. */
	.e-con.mas-speakers {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		justify-content: flex-start !important;
		gap: 14px !important;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scroll-padding: 0 18px;
		width: calc(100% + 36px) !important;
		max-width: none !important;
		margin-left: -18px !important;
		margin-right: -18px !important;
		padding: 6px 18px 26px !important;
		scrollbar-width: none;
	}
	.e-con.mas-speakers::-webkit-scrollbar { display: none; }
	.e-con.mas-speakers > .e-con {
		flex: 0 0 78% !important;
		width: 78% !important;
		max-width: 78% !important;
		scroll-snap-align: start;
		visibility: visible !important;
		animation: none !important;
	}
	.e-con.mas-speaker:hover { transform: none; }
	/* En pantallas táctiles el perfil se abre con un toque, no con hover. */
	.mas-speaker.has-more:hover:not(.is-open) .mas-speaker__more { max-height: 0; opacity: 0; margin-top: 0; }
	.mas-speaker.has-more:hover:not(.is-open) .mas-speaker__info { padding-top: 90px !important; background: linear-gradient(to top, rgba(11, 46, 76, .97) 0%, rgba(11, 46, 76, .88) 38%, rgba(11, 46, 76, 0) 100%); }
	.mas-speaker.has-more:hover:not(.is-open) .mas-speaker__toggle .elementor-heading-title::after { transform: none; }
}
