/* Master G · Filtro de catálogo. Medidas del filtro de Impreza que reemplaza (1440 px): títulos 16/700 con
   8 px debajo, 24 px entre grupos; opciones 14,4/400 (la elegida en 600) con 5,76 px entre sí; círculo de
   21,6 px #F5F5F5 con un punto de 7,8 px #666 en la elegida, a 7,2 px del texto. Colores y tipografías los
   ponen los controles del widget (globales del Kit). En móvil (≤ 601) se pliega bajo «Filtros». */
.mg-filtro { --mg-filtro-circulo: 21.6px; }
.mg-filtro-boton { display: none; }
.mg-filtro-opciones { list-style: none; margin: 0; padding: 0; }
.mg-filtro-opciones li { margin: 0; }
.mg-filtro-opcion {
	display: flex; align-items: center; gap: 7.2px;
	text-decoration: none; color: inherit;
}
.mg-filtro-circulo {
	flex: 0 0 var(--mg-filtro-circulo); width: var(--mg-filtro-circulo); height: var(--mg-filtro-circulo);
	border-radius: 50%; background-color: #f5f5f5;
	display: flex; align-items: center; justify-content: center;
}
.mg-filtro-circulo::after {
	content: ""; width: 36%; height: 36%; border-radius: 50%; background-color: #666;
	transform: scale(0); transition: transform .15s ease;
}
.mg-filtro-opcion.is-activa .mg-filtro-circulo::after,
.mg-filtro-opcion:hover .mg-filtro-circulo::after { transform: scale(1); }
.mg-filtro-opcion:hover:not(.is-activa) .mg-filtro-circulo::after { opacity: .35; }

@media (max-width: 601px) {
	.mg-filtro-boton {
		display: flex; align-items: center; gap: 8px; width: 100%;
		padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
		font: inherit;
	}
	.mg-filtro-boton::after {
		content: ""; width: 8px; height: 8px; margin-top: -4px;
		border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
		transition: transform .15s ease;
	}
	.mg-filtro.is-abierto .mg-filtro-boton::after { transform: rotate(-135deg); margin-top: 4px; }
	.mg-filtro-grupos { display: none; padding-top: 16px; }
	.mg-filtro.is-abierto .mg-filtro-grupos { display: block; }
}