/* =========================================================
   km_nosotros_valores — rejilla de iconos.
   ========================================================= */

.km-nosotros-valores {
	--km-valores-cols: 3;
	/* Alto del icono. Se toca sólo aquí: lo leen el contenedor y la imagen. */
	--km-valores-icon: 96px;

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

/* 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-valores[data-columns="2"] { --km-valores-cols: 2; }
.km-nosotros-valores[data-columns="3"] { --km-valores-cols: 3; }
.km-nosotros-valores[data-columns="4"] { --km-valores-cols: 4; }

.km-nosotros-valores__head {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 44px;
}

.km-nosotros-valores__eyebrow {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--km-text-muted);
	margin: 0 0 8px;
}

.km-nosotros-valores__title {
	/* Coral como texto sobre blanco: siempre la variante -dark
	   (ver CLAUDE.md → identidad visual). */
	font-size: clamp(28px, 3.23vw, 39px);
	line-height: 1.2;
	color: var(--km-highlight-dark);
	margin: 0;
}

.km-nosotros-valores__grid {
	display: grid;
	grid-template-columns: repeat(var(--km-valores-cols), minmax(0, 1fr));
	gap: 48px 32px;
}

.km-nosotros-valores__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: 320px;
	margin: 0 auto;
}

.km-nosotros-valores__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--km-valores-icon);
	margin-bottom: 16px;
	color: var(--km-accent);
}

.km-nosotros-valores__icon-img {
	max-height: var(--km-valores-icon);
	width: auto;
	object-fit: contain;
}

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

.km-nosotros-valores__text {
	font-size: 16px;
	line-height: 1.7;
	color: var(--km-text-soft);
	margin: 0;
}

/* Enlace opcional del texto (mailto:, tel:, mapa…). En el diseño el
   dato se lee como texto normal, así que sólo se marca al señalarlo. */
.km-nosotros-valores__link {
	color: inherit;
	border-bottom: 1px solid transparent;
	transition: color var(--km-trans), border-color var(--km-trans);
}

.km-nosotros-valores__link:hover,
.km-nosotros-valores__link:focus-visible {
	color: var(--km-accent-dark);
	border-color: currentColor;
}

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

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

	.km-nosotros-valores__grid {
		gap: 36px 24px;
	}

	.km-nosotros-valores__head {
		margin-bottom: 32px;
	}
}

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