/* -------------------------------------------------------------------------
 * Características de empresa — estilos del módulo.
 * Tokens semánticos aliaseados en _shared/tokens.css (no redeclarar aquí).
 * ---------------------------------------------------------------------- */

.cmpg-cfeatures {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}

.cmpg-cfeatures__item {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 1rem;
}

/* Icono dentro de un "chip" redondeado con fondo claro.
   El SVG hereda el color vía currentColor (ver nota). */
.cmpg-cfeatures__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 0.75rem;
	background: var(--color-icon-bg, #E8ECF7);
	color: var(--color-icon, #4B5C82);
}

.cmpg-cfeatures__icon svg {
	width: 1.25rem;
	height: 1.25rem;
}

.cmpg-cfeatures__body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.cmpg-cfeatures__title {
	margin: 0;
	font-family: var(--typo-body-bold-font-family);
	font-weight: var(--typo-body-bold-font-weight);
	font-size: var(--typo-body-bold-font-size);
	line-height: var(--typo-body-bold-line-height);
	color: var(--typo-body-bold-font-color);
}

.cmpg-cfeatures__desc {
	margin: 0;
	font-size: 0.9375rem;   /* ~15px */
	line-height: 1.5;
	color: var(--color-muted, #7B7B7B);
}

/* En mobile se mantiene icono-izquierda + texto-derecha (igual que el Figma).
   Solo achicamos un poco el espaciado vertical. */
@media (max-width: 768px) {
	.cmpg-cfeatures {
		gap: 1.5rem;
	}
}