/* =========================================================
   Icon chip — primitiva global reutilizable
   includes/custom/_shared/icon-chip.css

   Círculo con fondo claro que contiene un SVG (Lucide) que
   hereda el color vía currentColor. Antes estaba duplicado en
   product/features (.cmpg-features__icon) y company-features
   (.cmpg-cfeatures__icon); ahora vive acá una sola vez.

   Uso:
   - En markup del plugin: agregar `cmpg-icon-chip` al contenedor
     directo del SVG (ver features / company-features).
   - Desde Elementor (widget "Icono" o "Caja de icono"): poner la
     clase `cmpg-icon-chip` en Avanzado → Clases CSS. La clase cae
     en el WRAPPER del widget, por eso más abajo hay reglas que
     redirigen el chip al contenedor interno del icono
     (.elementor-icon) en vez de aplicarlo al widget entero.

   Ajuste por contexto: sobrescribir las variables --icon-chip-*
   en un selector padre o en el CSS custom del widget de Elementor.
   Ej:  .mi-seccion { --icon-chip-size: 3.25rem; }
   ========================================================= */

/* Apariencia del chip.
   - `:not(.elementor-widget)`  → uso directo (span/div del plugin,
     o cualquier elemento al que le pongas la clase a mano).
   - `.elementor-widget ... .elementor-icon` → cuando la clase está en
     el wrapper de un widget Elementor, el chip se aplica al contenedor
     interno del icono, no al widget. */
.cmpg-icon-chip:not(.elementor-widget),
.cmpg-icon-chip.elementor-widget .elementor-icon {
	/* Variables ajustables (defaults basados en el diseño de Figma) */
	--icon-chip-size: 2.75rem;   /* diámetro del círculo */
	--icon-chip-icon-size: 1.25rem; /* tamaño del SVG interno */
	--icon-chip-bg: color-mix(in srgb, var(--color-light-blue) 30%, transparent);
	--icon-chip-color: var(--color-dark-blue);

	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--icon-chip-size);
	height: var(--icon-chip-size);
	border-radius: 50%;
	background: var(--icon-chip-bg);
	color: var(--icon-chip-color);
}

.cmpg-icon-chip:not(.elementor-widget) svg,
.cmpg-icon-chip.elementor-widget .elementor-icon svg,
.cmpg-icon-chip.elementor-widget .elementor-icon i {
	width: var(--icon-chip-icon-size);
	height: var(--icon-chip-icon-size);
	font-size: var(--icon-chip-icon-size); /* iconos de fuente (Font Awesome) */
}

/* Caja de icono: Elementor centra el icono con márgenes/espaciados
   propios que pueden descuadrar el chip. Neutralizamos lo mínimo. */
.cmpg-icon-chip.elementor-widget .elementor-icon {
	padding: 0;
	line-height: 1;
}