/*
 * "Somos un gran equipo" (Inicio): texto + cinco fotos recortadas en arco.
 *
 *   Contenedor (grid)           → home-team
 *     Contenedor de textos      → home-team__copy
 *       Editor de texto         → home-team__eyebrow eyebrow
 *       Título                  → home-team__title
 *       Editor de texto         → home-team__text
 *       Botón                   → home-team__btn btn btn--red
 *     Contenedor                → home-team__gallery
 *       Contenedor (5 columnas) → home-team__faces
 *         Arco de color         → home-team__face home-team__face--1 … --5 (el modificador pone el color de fondo)
 *           Imagen              → home-team__photo (foto de la persona, se mezcla con el color del arco)
 *       Editor de texto         → home-team__note
 */

.home-team {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(28px, 5vw, 80px);
	align-items: center;
	padding: clamp(56px, 6.5vw, 96px) var(--wrap-gutter);
	background: var(--color-soft);
}

.home-team__copy { gap: 0; }
/* Espacio con padding: Elementor anula el margin de los widgets. */
.home-team__title { padding: 14px 0 18px; }
.home-team__title .elementor-heading-title {
	margin: 0;
	font-size: clamp(32px, 4vw, 58px);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -.04em;
}
.home-team__text p {
	max-width: 30em;
	margin: 0;
	font-size: clamp(16px, 1.3vw, 18px);
	line-height: 1.55;
	color: var(--color-muted);
}
.home-team__text p + p { margin-top: 12px; }
.home-team__btn { padding-top: 26px; }

.home-team__gallery { gap: 0; min-width: 0; }

.home-team__faces {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	align-items: end;
	gap: 6px;
	padding-top: 12px; /* espacio para las fotos que suben */
}

.home-team__face {
	--face-bg: #fff;
	position: relative;
	isolation: isolate; /* para que la mezcla de la foto solo afecte al color del arco */
	gap: 0;
	aspect-ratio: .62 / 1;
	border-radius: 999px 999px 24px 24px;
	overflow: hidden;
	background: var(--face-bg);
	transition: translate .5s var(--ease-out);
}
.home-team__face--1 { --face-bg: var(--color-red-soft); }
.home-team__face--2 { --face-bg: var(--color-green-soft); }
.home-team__face--3 { --face-bg: var(--color-amber-soft); }
.home-team__face--4 { --face-bg: var(--color-red-soft); }
.home-team__face--5 { --face-bg: var(--color-green-soft); }
.home-team__face:nth-child(odd) { translate: 0 -12px; }
.home-team__face:hover { translate: 0 -30px; }

/* La mezcla va en el widget (no en el <img>) y el aislamiento en el contenedor. Apunta al <img> interno. */
.home-team__photo {
	position: absolute !important; /* Elementor da position: relative a sus widgets */
	inset: 8% 0 0;
	margin: 0 !important;
	mix-blend-mode: multiply;
}
.home-team__photo .elementor-widget-container { height: 100%; }
.home-team__photo img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center bottom;
}

.home-team__note p {
	margin: 18px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--color-muted);
}

@media (min-width: 561px) {
	.home-team__faces { gap: clamp(8px, 1vw, 14px); padding-top: 22px; }
	.home-team__face:nth-child(odd) { translate: 0 -22px; }
	.home-team__face:hover { translate: 0 -30px; }
}

@media (min-width: 1025px) {
	.home-team { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

@media (prefers-reduced-motion: reduce) {
	.home-team__face { transition: none; }
	.home-team__face:hover { translate: 0 -22px; }
}