/* =========================================================
   km_home_publicos — banda de bloques de color.
   Va a ancho completo: poner la fila de WPBakery que la contiene
   en "Stretch row".
   ========================================================= */

.km-home-publicos {
	/* Sobre estos fondos va texto blanco pequeño, así que se usan las
	   variantes -dark del turquesa y el coral (ver CLAUDE.md →
	   identidad visual). Para clavar el tono del mockup, cambiar por
	   var(--km-accent) y var(--km-highlight) asumiendo menos contraste. */
	--km-pub-primary: var(--km-primary);
	--km-pub-accent: var(--km-accent-dark);
	--km-pub-highlight: var(--km-highlight-dark);

	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.km-home-publicos__item {
	display: flex;
	justify-content: center;
	padding: 56px 40px;
	color: var(--km-white);
}

.km-home-publicos__item--primary   { background: var(--km-pub-primary); }
.km-home-publicos__item--accent    { background: var(--km-pub-accent); }
.km-home-publicos__item--highlight { background: var(--km-pub-highlight); }

.km-home-publicos__inner {
	max-width: 380px;
	text-align: center;
}

.km-home-publicos__title {
	font-size: clamp(25px, 2.54vw, 33px);
	line-height: 1.2;
	color: var(--km-white);
	margin: 0 0 16px;
}

.km-home-publicos__text {
	font-size: 17px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.95);
	margin: 0;
}

.km-home-publicos__link {
	display: inline-block;
	margin-top: 18px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--km-white);
	border-bottom: 2px solid rgba(255, 255, 255, 0.5);
	padding-bottom: 3px;
	transition: border-color var(--km-trans);
}

.km-home-publicos__link:hover {
	color: var(--km-white);
	border-color: var(--km-white);
}

@media (max-width: 768px) {
	.km-home-publicos__item {
		padding: 44px 24px;
	}
}