/* =========================================================
   Módulo Features — Lista de características del producto
   includes/custom/product/features/features.css

   Renderiza solo la lista de items. El container (fondo gris,
   border-radius, layout de 2 columnas, eyebrow/título/desc del
   lado izquierdo) se arma directamente en Elementor.
   ========================================================= */

.cmpg-features {
	/* Tokens de color scopeados al componente (no globales) */
	--cmpg-fx-text: #1a1a1a;
	--cmpg-fx-muted: #6b7280;
	--cmpg-fx-icon: #2563eb;
	--cmpg-fx-icon-bg: #e8eefc;

	display: flex;
	flex-direction: column;
	gap: 1.75rem;
	font-family: inherit;
	color: var(--cmpg-fx-text);
}

.cmpg-features__item {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}

.cmpg-features__icon {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--cmpg-fx-icon-bg);
	color: var(--cmpg-fx-icon);
}

.cmpg-features__icon svg {
	width: 20px;
	height: 20px;
}

.cmpg-features__body {
	flex: 1 1 auto;
	min-width: 0; /* permite wrap correcto del texto */
}

.cmpg-features__item-title {
	margin: 0 0 0.375rem;
	font-family:     var(--typo-body-bold-font-family);
    font-size:       var(--typo-body-bold-font-size);
    font-weight:     var(--typo-body-bold-font-weight);
    line-height:     var(--typo-body-bold-line-height);
    letter-spacing:  var(--typo-body-bold-letter-spacing);
    text-transform:  var(--typo-body-bold-text-transform);
	color: 			 var(--typo-body-bold-font-color);
}

.cmpg-features__item-text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--cmpg-fx-muted);
}