/*
 * Barra de filtros de los archivos (JetSmartFilters en Bricks).
 *
 * Réplica de la de Elementor: plantilla de filtros 156319, barra de la plantilla de
 * archivo 155990, widget global de orden 173266 y las reglas «FILTROS DE CATEGORÍA»
 * del Personalizador. Todo cuelga de `.sils-filtros` (el contenedor de la barra), así
 * que no toca los filtros de la home. Colores y tipos con las variables del sistema.
 *
 * Tipos: etiqueta del desplegable = Indicativo; opciones = Texto pequeño; contadores,
 * orden y opción elegida = Tags listing.
 */

.sils-filtros {
	--filtros-flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M0.256 8.606c0-0.269 0.106-0.544 0.313-0.75 0.412-0.412 1.087-0.412 1.5 0l14.119 14.119 13.913-13.912c0.413-0.412 1.087-0.412 1.5 0s0.413 1.088 0 1.5l-14.663 14.669c-0.413 0.413-1.088 0.413-1.5 0l-14.869-14.869c-0.213-0.213-0.313-0.481-0.313-0.756z'/%3E%3C/svg%3E");
	color: var(--sils-principal);
}

/* ── Los filtros, en fila y separados por una línea ───────────────────── */
.sils-filtros__lista > * {
	border-right: 1px solid var(--sils-principal);
}

/* Filtro sin opciones: JetSmartFilters lo oculta (style="display: none") pero su
 * contenedor de Bricks quedaba con 1 px y su línea; varios juntos hacían un trazo grueso. */
.sils-filtros__lista > :has(> .jet-filter[style*="display: none"]) {
	display: none;
}

/* Los elementos de Bricks que envuelven cada filtro son flex: así el hueco del texto
   suelto que traen dentro no suma altura (la barra medía 72 px en vez de 48). */
.sils-filtros [class*="brxe-jet-smart-filters-"] {
	display: flex;
	align-items: stretch;
}

.sils-filtros [class*="brxe-jet-smart-filters-"] > * {
	flex: 1 1 auto;
}

.sils-filtros .brxe-jet-smart-filters-remove-filters {
	align-items: center;
}

/* Cada desplegable se abre bajo su propia etiqueta (JetSmartFilters lo posiciona
 * respecto a sí mismo, como en Elementor). */
.sils-filtros .jet-filter-items-dropdown {
	max-width: 100%;
	height: 100%;
}

.sils-filtros .jet-filter-items-dropdown__label {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sils-esp-3xs);
	height: 100%;
	padding: 1.5rem 4rem 1.5rem 2rem;
	border: 0;
	border-radius: 0;
	background-color: var(--sils-blanco);
	font-family: var(--sils-fuente-thoren);
	font-size: var(--sils-txt-xs);
	font-weight: 400;
	line-height: 1.2em;
	letter-spacing: 0.05rem;
	text-transform: uppercase;
	cursor: pointer;
}

/* Flecha: la del Personalizador, girada al abrir. */
.sils-filtros .jet-filter-items-dropdown__label::after,
.sils-filtros .jet-sorting::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 1rem;
	width: 2rem;
	height: 2rem;
	border: 0;
	background-color: currentColor;
	-webkit-mask: var(--filtros-flecha) center / 1rem no-repeat;
	mask: var(--filtros-flecha) center / 1rem no-repeat;
	transform: translateY(-50%);
	transition: transform .2s ease;
	pointer-events: none;
}

.sils-filtros .jet-filter-items-dropdown.jet-dropdown-open .jet-filter-items-dropdown__label::after {
	transform: translateY(-50%) rotate(180deg);
}

/* Lo elegido, dentro de la propia etiqueta. */
.sils-filtros .jet-filter-items-dropdown__active__item {
	font-size: var(--sils-txt-3xs);
	line-height: 1.8rem;
	letter-spacing: 0.025rem;
}

/* ── El desplegable ────────────────────────────────────────────────────── */
.sils-filtros .jet-filter-items-dropdown__body {
	left: 1.6rem;
	right: auto;
	width: 45rem;
	margin-top: 0.9rem;
	border: 0;
	border-radius: 1rem;
	background-color: var(--sils-blanco);
	box-shadow: 0 0.4rem 1.6rem color-mix(in srgb, var(--sils-principal) 12%, transparent);
}

.sils-filtros .jet-filter-items-dropdown__footer {
	justify-content: flex-end;
	background-color: var(--sils-gris-claro);
}

.sils-filtros .jet-filter-items-dropdown .jet-filter-items-search__input:focus {
	outline: none;
	box-shadow: none;
}

/* Casillas, en dos columnas. Con !important, como hacía el Personalizador: JetSmartFilters
   pone las filas en línea con reglas propias. */
.sils-filtros .jet-checkboxes-list-wrapper {
	display: block !important;
	column-count: 2 !important;
	margin: -0.5rem -0.25rem;
	padding: 1rem;
	text-align: left;
}

.sils-filtros .jet-checkboxes-list__row {
	display: block !important;
	margin: 0 0.25rem 0.5rem;
	padding-top: 0.5rem;
	break-inside: avoid;
}

.sils-filtros .jet-filter-row-hide {
	display: none !important;
}

.sils-filtros .jet-checkboxes-list__button {
	padding: 0.5rem 1.5rem 0.5rem 1rem;
	border: 0;
	border-radius: 0.5rem;
	transition: background-color .15s ease;
}

.sils-filtros .jet-checkboxes-list__button:hover,
.sils-filtros .jet-checkboxes-list__input:checked ~ .jet-checkboxes-list__button {
	background-color: var(--sils-gris-claro);
}

.sils-filtros .jet-checkboxes-list__label,
.sils-filtros .jet-color-image-list__label {
	color: var(--sils-texto);
	font-family: var(--sils-fuente-thoren);
	font-size: var(--sils-txt-2xs);
	font-weight: 300;
	line-height: 1.2em;
	letter-spacing: var(--sils-ls-texto, 0.12rem);
}

.sils-filtros .jet-checkboxes-list__decorator {
	width: 1.4rem;
	height: 1.4rem;
	min-width: 1.4rem;
	min-height: 1.4rem;
	margin: 0.1rem 0.5rem 0 0;
	border-radius: 0.1rem;
	overflow: hidden;
}

/* Marcada: negra con la marca en blanco. JetSmartFilters la pinta gris (#ccc) con una
 * regla de seis clases (.jet-checkboxes-list .…__item .…__input:checked + …); aquí, siete. */
.sils-filtros .jet-checkboxes-list .jet-checkboxes-list__item .jet-checkboxes-list__input:checked ~ .jet-checkboxes-list__button .jet-checkboxes-list__decorator {
	background-color: var(--sils-principal);
	border-color: var(--sils-principal);
}

.sils-filtros .jet-checkboxes-list__checked-icon svg {
	fill: var(--sils-blanco);
}

.sils-filtros .jet-checkboxes-list__checked-icon {
	font-size: var(--sils-txt-3xs, 1.2rem);
}

.sils-filtros .jet-filters-counter {
	margin-left: initial;
	font-family: var(--sils-fuente-thoren);
	font-size: var(--sils-txt-3xs);
	font-weight: 400;
	letter-spacing: 0.025rem;
	text-transform: uppercase;
}

/* Colores: muestras redondas, en dos columnas. */
.sils-filtros .jet-color-image-list-wrapper {
	padding: var(--sils-esp-s, 1.6rem);
	text-align: left;
}

.sils-filtros .jet-color-image-list-wrapper fieldset {
	display: block !important;
	column-count: 2 !important;
}

.sils-filtros .jet-color-image-list__row {
	display: block !important;
	margin-bottom: 1rem;
	break-inside: avoid;
}

/* Los colores sin obras también se esconden: la regla de arriba ganaba a la de
 * .jet-filter-row-hide (mismo peso, va después) y salían con «(0)» (15-oct-2026). */
.sils-filtros .jet-color-image-list__row.jet-filter-row-hide {
	display: none !important;
}

.sils-filtros .jet-color-image-list__button {
	padding: 0.5rem;
	border: 0;
	transition: background-color .15s ease;
}

.sils-filtros .jet-color-image-list__button:hover,
.sils-filtros .jet-color-image-list__input:checked ~ .jet-color-image-list__button {
	background-color: var(--sils-gris-claro);
}

.sils-filtros .jet-color-image-list__decorator {
	margin: 0 0.5rem 0 0;
}

.sils-filtros .jet-color-image-list__decorator > * {
	border: 1px solid var(--sils-gris-claro);
	border-radius: 50%;
	overflow: hidden;
}

.sils-filtros .jet-color-image-list__decorator .jet-color-image-list__color {
	width: 2rem;
	height: 2rem;
}

.sils-filtros .jet-color-image-list__decorator .jet-color-image-list__image {
	width: 2rem;
}

.sils-filtros .jet-color-image-list__input:checked ~ .jet-color-image-list__button .jet-color-image-list__decorator > * {
	border-color: var(--sils-principal);
}

/* «Multicolor»: degradado de arcoíris (dato de la muestra, no un color de marca). */
.sils-filtros .jet-color-image-list__item input[data-url-value="multicolor"] ~ .jet-color-image-list__button .jet-color-image-list__color {
	background: conic-gradient(red, orange, yellow, green, blue, violet, red);
}

/* ── Parte derecha: nº de obras, quitar filtros y orden ───────────────── */
/* El número lo pone assets/archivos.js; entra suave en vez de aparecer de golpe. */
.sils-filtros__cuenta.es-listo {
	opacity: 1;
}

.sils-filtros__cuenta {
	align-self: center;
	min-width: 7rem;
	text-align: right;
	opacity: 0;
	transition: opacity .25s ease;
	padding: 0 var(--sils-esp-s, 1.6rem);
	color: var(--sils-secundario);
	font-family: var(--sils-fuente-thoren);
	font-size: var(--sils-txt-3xs);
	letter-spacing: 0.025rem;
	text-transform: uppercase;
	white-space: nowrap;
}

.sils-filtros .jet-remove-all-filters__button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	margin-right: var(--sils-esp-s, 1.6rem);
	padding: 0;
	border: 1px solid var(--sils-principal);
	border-radius: 50%;
	background-color: var(--sils-blanco);
	color: var(--sils-principal);
	font-family: var(--sils-fuente-thoren);
	font-size: var(--sils-txt-3xs);
	letter-spacing: 0.025rem;
	text-transform: uppercase;
	transition: color .15s ease, border-color .15s ease;
}

.sils-filtros .jet-remove-all-filters {
	align-self: center;
}

.sils-filtros .jet-remove-all-filters__button:hover {
	background-color: var(--sils-blanco);
	border-color: var(--sils-secundario);
	color: var(--sils-secundario);
}

.sils-filtros .jet-sorting {
	position: relative;
	height: 100%;
}

.sils-filtros .jet-sorting-select {
	height: 100%;
	min-width: 12.8rem;
	max-width: 100%;
	padding: 1.5rem 4rem 1.5rem 1rem;
	border: 0;
	border-left: 1px solid var(--sils-principal);
	border-radius: 0;
	background: var(--sils-gris-claro);
	background-image: none !important;
	color: var(--sils-principal);
	font-family: var(--sils-fuente-thoren);
	font-size: var(--sils-txt-3xs);
	font-weight: 400;
	line-height: 1.8rem;
	letter-spacing: 0.025rem;
	text-transform: uppercase;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
	.sils-filtros .jet-filter-items-dropdown__label::after,
	.sils-filtros .jet-checkboxes-list__button,
	.sils-filtros .jet-color-image-list__button { transition: none; }
}

/* ── «Ver más» (paginación de JetSmartFilters) y carga ───────────────────
 * Se usa la de JetSmartFilters, no la de Bricks, porque pide la página siguiente con
 * los filtros puestos. Solo se carga al pulsar (sin carga automática, por SEO);
 * assets/archivos.js pone `.es-cargando` mientras llega.
 * Solo se ve «Ver más» (5-oct-2026, petición del usuario). Los números y
 * anterior/siguiente siguen en la página como enlaces de verdad
 * (`?jsf=bricks-query-loop:cuadros&pagenum=N`, rel=prev/next), ocultos: Google los
 * sigue y cada página sigue existiendo. Por eso se ocultan aquí y no con el ajuste
 * `enable_items` (apagado, desaparecen los enlaces). La paginación va en modo «ajax»:
 * al pulsar «Ver más» la barra de direcciones no cambia (en «mixed» pasaba a
 * `pagenum=2` y al recargar solo se veía esa página).
 */
.sils-ver-mas {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sils-esp-s, 1.6rem);
}

.sils-ver-mas .jet-filters-pagination {
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	border: 0;
}

/* Números, puntos y anterior/siguiente: en la página, pero no se ven. */
.sils-ver-mas .jet-filters-pagination__item {
	display: none;
}

.sils-ver-mas .jet-filters-pagination__link {
	padding: 1rem;
	border: 0;
	background: none;
	color: var(--sils-secundario);
	font-family: var(--sils-fuente-thoren);
	font-size: var(--sils-txt-xs);
	font-weight: 400;
	letter-spacing: 0.05rem;
	text-transform: uppercase;
	cursor: pointer;
	transition: color .15s ease;
}

/* «Ver más»: botón con borde. */
.sils-ver-mas .jet-filters-pagination__load-more {
	flex-basis: 100%;
	display: flex;
	justify-content: center;
}

.sils-ver-mas .jet-filters-pagination__load-more .jet-filters-pagination__link {
	border: 1px solid var(--sils-principal);
	background-color: var(--sils-blanco);
	color: var(--sils-principal);
	font-size: var(--sils-txt-2xs);
	font-weight: 300;
	letter-spacing: var(--sils-ls-texto, 0.12rem);
	text-transform: none;
	transition: color .15s ease, border-color .15s ease;
}

/* Sin el azul de fábrica de JetSmartFilters (#5fb5ff al pasar el ratón): como en
   Elementor, fondo blanco y texto y borde en el color del texto. */
.sils-ver-mas .jet-filters-pagination__load-more .jet-filters-pagination__link:hover,
.sils-ver-mas .jet-filters-pagination__load-more .jet-filters-pagination__link:focus,
.sils-ver-mas .jet-filters-pagination__load-more .jet-filters-pagination__link:active {
	background-color: var(--sils-blanco);
	border-color: var(--sils-texto);
	color: var(--sils-texto);
}

.sils-ver-mas .jet-filters-pagination__load-more .jet-filters-pagination__link:focus-visible {
	outline: 1px solid var(--sils-principal);
	outline-offset: 0.2rem;
}

/* Mientras carga: anillo y «Cargando más obras» en lugar del botón. */
.sils-ver-mas::before {
	content: '';
	display: none;
	width: 1.6rem;
	height: 1.6rem;
	border: 0.2rem solid var(--sils-principal);
	border-right-color: transparent;
	border-radius: 50%;
	animation: sils-gira .8s linear infinite;
}

.sils-ver-mas::after {
	content: var(--sils-css-texto-cargando-obras, "Cargando más obras");
	display: none;
	color: var(--sils-texto);
	font-family: var(--sils-fuente-thoren);
	font-size: var(--sils-txt-xs);
	font-weight: 300;
}

.sils-ver-mas.es-cargando::before,
.sils-ver-mas.es-cargando::after {
	display: block;
}

.sils-ver-mas.es-cargando .jet-filters-pagination {
	display: none;
}

@keyframes sils-gira {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.sils-ver-mas::before { animation-duration: 2s; }
}

/* ── «Cargar más» de Bricks (listados sin filtros: Obras similares) ──────
 * Botón de Bricks con la interacción «Cargar más» de su bucle. Mismo aspecto que el
 * «Ver más» de arriba. Bricks le pone `.is-loading` mientras llega la página siguiente
 * (aquí: anillo y «Cargando más obras», como en los archivos) y `.brx-load-more-hidden`
 * cuando ya no quedan.
 */
.sils-cargar-mas.brxe-button {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sils-esp-s, 1.6rem);
	padding: 1rem;
	border: 1px solid var(--sils-principal);
	border-radius: 0;
	background-color: var(--sils-blanco);
	color: var(--sils-principal);
	font-family: var(--sils-fuente-thoren);
	font-size: var(--sils-txt-2xs);
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: var(--sils-ls-texto, 0.12rem);
	text-transform: none;
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease;
}

.sils-cargar-mas.brxe-button:focus,
.sils-cargar-mas.brxe-button:hover {
	background-color: var(--sils-blanco);
	border-color: var(--sils-texto);
	color: var(--sils-texto);
}

.sils-cargar-mas.brxe-button:focus-visible {
	outline: 1px solid var(--sils-principal);
	outline-offset: 0.2rem;
}

.sils-cargar-mas.brxe-button.is-loading {
	border-color: transparent;
	font-size: 0;
	letter-spacing: 0;
	cursor: default;
}

.sils-cargar-mas.brxe-button.is-loading::before {
	content: '';
	width: 1.6rem;
	height: 1.6rem;
	border: 0.2rem solid var(--sils-principal);
	border-right-color: transparent;
	border-radius: 50%;
	animation: sils-gira .8s linear infinite;
}

.sils-cargar-mas.brxe-button.is-loading::after {
	content: var(--sils-css-texto-cargando-obras, "Cargando más obras");
	color: var(--sils-texto);
	font-size: var(--sils-txt-xs);
	font-weight: 300;
}

@media (prefers-reduced-motion: reduce) {
	.sils-cargar-mas.brxe-button.is-loading::before { animation-duration: 2s; }
}

/* ── Cargador de JetSmartFilters al filtrar ──────────────────────────────
 * assets/archivos.js lo saca de la primera tarjeta al contenedor de las tarjetas y lo
 * coloca (fijo en el centro de la pantalla o arriba/abajo del listado). El contenedor es
 * su referencia cuando no va fijo; por encima de las tarjetas atenuadas.
 */
:has(> .jsf_provider-preloader) {
	position: relative;
}

.jsf_provider-preloader {
	z-index: 2;
}

/* ── Franja de logos de Inspiración (filtro 188413, «Acabados (visual)») ──
 * Una fila de logos (solo imagen, elección única) centrada y con desplazamiento horizontal
 * si no cabe. Estados con el lenguaje de «Crea tu pared» (sils-crea-tu-pared, wall.css,
 * «Tarjetas: un solo lenguaje de estado»): encima, filo negro de 1,5 px separado 2 px;
 * elegido, filo negro y check negro arriba a la derecha. Con uno elegido, los demás se
 * apagan (45 %, como las miniaturas de «Paredes que inspiran»). Volver a pulsar el elegido
 * lo quita (ajuste «can deselect» del filtro): al pasar por encima, el check pasa a ✕.
 * La colección elegida sale también en la barra y en el panel de filtros
 * (bricks-child/assets/filtros-panel.js).
 */
.sils-logos {
	width: 100%;
	--logos-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	--logos-quitar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
}

/* Aire alrededor para que el filo (fuera de la caja) no se corte con el desplazamiento. */
.sils-logos .jet-color-image-list-wrapper {
	overflow-x: auto;
	padding: 0.6rem var(--sils-esp-3xs, 0.4rem);
	scrollbar-width: none;
}

.sils-logos .jet-color-image-list-wrapper::-webkit-scrollbar {
	display: none;
}

/* La hoja de JetSmartFilters para Bricks pesa más (.brxe-… .wrapper > fieldset): se sube
 * aquí la especificidad. La fila la pone el ajuste «Filters position: row» del filtro. */
.brxe-jet-smart-filters-color-image.sils-logos .jet-color-image-list-wrapper > fieldset {
	flex-wrap: nowrap;
	justify-content: safe center;
	gap: var(--sils-esp-xs);
	margin: 0;
	padding: 0;
	border: 0;
	min-inline-size: 0;
}

.sils-logos .jet-color-image-list__row {
	display: block;
	flex-shrink: 0;
	margin: 0;
}

.sils-logos .jet-color-image-list__button {
	position: relative;
	padding: 1rem;
	background-color: var(--sils-blanco);
	border: 1px solid var(--sils-linea);
	border-radius: var(--sils-radio, 0.4rem);
	box-shadow: none;
	outline: 1.5px solid transparent;
	outline-offset: 2px;
	transition: outline-color .2s ease, opacity .2s ease;
}

/* El check: círculo negro (::after) con la marca en blanco encima (::before). */
.sils-logos .jet-color-image-list__button::before,
.sils-logos .jet-color-image-list__button::after {
	content: '';
	position: absolute;
	top: 0.8rem;
	right: 0.8rem;
	width: 2rem;
	height: 2rem;
	opacity: 0;
	transform: scale(.6);
	transition: opacity .2s ease, transform .24s cubic-bezier(.22, .61, .36, 1);
	pointer-events: none;
}

.sils-logos .jet-color-image-list__button::after {
	z-index: 1;
	border-radius: 50%;
	background-color: var(--sils-principal);
}

.sils-logos .jet-color-image-list__button::before {
	z-index: 2;
	background-color: var(--sils-blanco);
	-webkit-mask: var(--logos-check) center / 1rem no-repeat;
	mask: var(--logos-check) center / 1rem no-repeat;
}

.sils-logos .jet-color-image-list__button:hover,
.sils-logos .jet-color-image-list__input:checked ~ .jet-color-image-list__button {
	outline-color: var(--sils-principal);
}

.sils-logos .jet-color-image-list__input:checked ~ .jet-color-image-list__button::before,
.sils-logos .jet-color-image-list__input:checked ~ .jet-color-image-list__button::after {
	opacity: 1;
	transform: none;
}

/* Con uno elegido, los demás apagados; al pasar por encima vuelven. */
.sils-logos:has(.jet-color-image-list__input:checked) .jet-color-image-list__input:not(:checked) ~ .jet-color-image-list__button {
	opacity: .45;
}

.sils-logos:has(.jet-color-image-list__input:checked) .jet-color-image-list__input:not(:checked) ~ .jet-color-image-list__button:hover {
	opacity: 1;
}

/* Encima del elegido: el check pasa a ✕ (pulsar lo quita). Solo con ratón. */
@media (hover: hover) {
	.sils-logos .jet-color-image-list__input:checked ~ .jet-color-image-list__button:hover::before {
		-webkit-mask-image: var(--logos-quitar);
		mask-image: var(--logos-quitar);
	}
}

.sils-logos .jet-color-image-list__decorator > * {
	border: 0;
}

.sils-logos .jet-color-image-list__image {
	width: 16.5rem;
}

.sils-logos .jet-color-image-list__image img {
	display: block;
	width: 100%;
	height: 7.5rem;
	object-fit: contain;
}

/* Sin logo (una selección sin «Logo» en su ficha, inc/catalogo.php): en vez de la imagen
 * de relleno de JetSmartFilters sale el nombre, en la caja de un logo. La etiqueta existe
 * porque el filtro tiene «Show items label»; con logo no se ve. */
.sils-logos .jet-color-image-list__label {
	display: none;
}

.sils-logos .jet-color-image-list__button:has(img[src$="/placeholder.png"]) .jet-color-image-list__decorator {
	display: none;
}

.sils-logos .jet-color-image-list__button:has(img[src$="/placeholder.png"]) .jet-color-image-list__label {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16.5rem;
	height: 7.5rem;
	margin: 0;
	color: var(--sils-principal);
	font-family: var(--sils-fuente-thoren);
	font-size: var(--sils-txt-m);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.12rem;
	text-align: center;
	text-transform: uppercase;
}

/* En el móvil, logos más pequeños: caben tres y se ve que la fila sigue. */
@media (max-width: 767px) {
	.sils-logos .jet-color-image-list__button {
		padding: 0.6rem;
	}

	.sils-logos .jet-color-image-list__image {
		width: 10rem;
	}

	.sils-logos .jet-color-image-list__image img {
		height: 4.6rem;
	}

	.sils-logos .jet-color-image-list__button:has(img[src$="/placeholder.png"]) .jet-color-image-list__label {
		width: 10rem;
		height: 4.6rem;
		font-size: var(--sils-txt-xs);
	}

	.sils-logos .jet-color-image-list__button::before,
	.sils-logos .jet-color-image-list__button::after {
		top: 0.4rem;
		right: 0.4rem;
		width: 1.6rem;
		height: 1.6rem;
	}

	.sils-logos .jet-color-image-list__button::before {
		-webkit-mask-size: 0.8rem;
		mask-size: 0.8rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sils-logos .jet-color-image-list__button,
	.sils-logos .jet-color-image-list__button::before,
	.sils-logos .jet-color-image-list__button::after { transition: none; }
}