/* =========================================================
   km_nosotros_equipo — rejilla de profesionales.
   Se usa flex (y no grid) para que la última fila incompleta
   quede centrada, como en el diseño.
   ========================================================= */

.km-nosotros-equipo {
	--km-equipo-cols: 3;
	--km-equipo-gap: 30px;

	padding: 70px 0;
	background: var(--km-bg);
}

/* Columnas en escritorio (lo elige el editor en el builder).
   Los selectores de atributo mantienen la misma especificidad que las
   media queries de más abajo, para que en móvil ganen ellas. */
.km-nosotros-equipo[data-columns="2"] { --km-equipo-cols: 2; }
.km-nosotros-equipo[data-columns="3"] { --km-equipo-cols: 3; }
.km-nosotros-equipo[data-columns="4"] { --km-equipo-cols: 4; }

.km-nosotros-equipo__head {
	text-align: center;
	max-width: 820px;
	margin: 0 auto 40px;
}

.km-nosotros-equipo__title {
	font-size: clamp(28px, 3.23vw, 39px);
	line-height: 1.2;
	color: var(--km-heading);
	margin: 0 0 14px;
}

.km-nosotros-equipo__intro {
	font-size: 17px;
	line-height: 1.75;
	color: var(--km-text-soft);
}

.km-nosotros-equipo__intro p:last-child {
	margin-bottom: 0;
}

.km-nosotros-equipo__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--km-equipo-gap);
}

.km-nosotros-equipo__item {
	flex: 0 1 calc((100% - (var(--km-equipo-cols) - 1) * var(--km-equipo-gap)) / var(--km-equipo-cols));
	max-width: 320px;
	text-align: center;
}

.km-nosotros-equipo__media {
	border-radius: var(--km-radius);
	overflow: hidden;
	background: var(--km-border);
	margin-bottom: 14px;
}

.km-nosotros-equipo__photo {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.km-nosotros-equipo__item:hover .km-nosotros-equipo__photo {
	transform: scale(1.04);
}

.km-nosotros-equipo__name {
	font-size: 20px;
	line-height: 1.3;
	color: var(--km-primary);
	margin: 0 0 4px;
}

.km-nosotros-equipo__role {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--km-text-muted);
	margin: 0;
}

@media (max-width: 900px) {
	.km-nosotros-equipo {
		padding: 52px 0;
	}

	.km-nosotros-equipo[data-columns] { --km-equipo-cols: 2; }

	.km-nosotros-equipo__head {
		margin-bottom: 30px;
	}
}

@media (max-width: 480px) {
	.km-nosotros-equipo[data-columns] { --km-equipo-cols: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.km-nosotros-equipo__photo {
		transition: none;
	}

	.km-nosotros-equipo__item:hover .km-nosotros-equipo__photo {
		transform: none;
	}
}