/**
 * @layer utilities — archive de Marcas Registradas.
 *
 * `color`/`text-decoration` con !important: ver la nota en buttons.css.
 */

@layer utilities {
	.marcas-filtro {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-3);
		margin-bottom: var(--space-7);
	}

	.marcas-filtro__tag {
		display: inline-flex;
		padding: var(--space-2) var(--space-4);
		border: 1px solid var(--c-ink-200);
		font-size: var(--text-sm);
		color: var(--c-ink-700) !important;
		text-decoration: none !important;
	}

	.marcas-filtro__tag:hover {
		border-color: var(--c-accent-600);
	}

	.marcas-filtro__tag.es-actual {
		background: var(--c-accent-600);
		border-color: var(--c-accent-600);
		color: var(--c-white) !important;
	}

	.marcas-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--space-6);
		margin-bottom: var(--space-8);
	}

	@media (width >= 480px) {
		.marcas-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (width >= 1024px) {
		.marcas-grid {
			grid-template-columns: repeat(4, 1fr);
		}
	}

	.marcas-grid__item {
		display: block;
		text-decoration: none !important;
		color: inherit !important;
	}

	.marcas-grid__isologo {
		display: flex;
		align-items: center;
		justify-content: center;
		aspect-ratio: 1;
		padding: var(--space-6);
		background: var(--c-white);
		border: 1px solid var(--c-ink-200);
		margin-bottom: var(--space-3);
	}

	.marcas-grid__item:hover .marcas-grid__isologo,
	.marcas-grid__item:focus-visible .marcas-grid__isologo {
		border-color: var(--c-accent-600);
	}

	.marcas-grid__isologo img {
		max-width: 100%;
		max-height: 100%;
		width: auto;
		height: auto;
	}

	.marcas-grid__isologo span {
		font-size: var(--text-sm);
		color: var(--c-ink-500);
		text-align: center;
	}

	.marcas-grid__titulo {
		font-size: var(--text-base) !important;
		margin: 0 0 var(--space-1);
	}

	.marcas-grid__meta {
		margin: 0;
		font-size: var(--text-sm);
		color: var(--c-ink-500);
	}
}