/* =========================================================
   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;

	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;
}

@media (max-width: 767px) {
	.cmpg-features__item {
		flex-direction: column;
		gap: 16px;
	}
}

/* El "chip" del icono (círculo + SVG) vive en _shared/icon-chip.css
   como .cmpg-icon-chip. Acá no se redeclara. */

.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);
}