/**
 * @layer components — carrusel de marcas (<santiago-carousel>). El track es
 * un scroll horizontal con scroll-snap nativo: funciona sin JS; el
 * componente sólo agrega flechas, puntos y autoplay (assets/js/carousel.js).
 *
 * `color`/`text-decoration` con !important: ver la nota en buttons.css.
 */

@layer components {
	.carrusel-marcas {
		display: block;
	}

	.carrusel-marcas__track {
		display: flex;
		gap: var(--space-7);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-block: var(--space-2);
		/* Máscara de gradiente en los bordes en vez de un corte duro. */
		mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.carrusel-marcas__track::-webkit-scrollbar {
		display: none;
	}

	.carrusel-marcas__track:focus-visible {
		outline: 2px solid var(--c-focus);
		outline-offset: 4px;
	}

	.carrusel-marcas__slide {
		flex: 0 0 calc((100% - var(--space-7)) / 2);
		scroll-snap-align: start;
	}

	@media (width >= 480px) {
		.carrusel-marcas__slide {
			flex-basis: calc((100% - 2 * var(--space-7)) / 3);
		}
	}

	@media (width >= 768px) {
		.carrusel-marcas__slide {
			flex-basis: calc((100% - 4 * var(--space-7)) / 5);
		}
	}

	.marcas-home__logo {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 64px;
		color: var(--c-ink-500) !important;
		text-decoration: none !important;
		font-size: var(--text-sm);
	}

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

	.carrusel-marcas__controles {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-5);
		margin-top: var(--space-6);
	}

	.carrusel-marcas__flecha {
		display: inline-flex;
		padding: var(--space-2);
		color: var(--c-ink-700);
	}

	.carrusel-marcas__flecha:hover,
	.carrusel-marcas__flecha:focus-visible {
		color: var(--c-accent-600);
	}

	.carrusel-marcas__flecha .icono {
		width: 20px;
		height: 20px;
	}

	.carrusel-marcas__flecha-icono--prev {
		transform: rotate(180deg);
	}

	.carrusel-marcas__puntos {
		display: flex;
		align-items: center;
		gap: var(--space-2);
	}

	.carrusel-marcas__punto {
		width: 8px;
		height: 8px;
		border-radius: 0;
		background: var(--c-ink-200);
		padding: 0;
	}

	.carrusel-marcas__punto.es-actual {
		background: var(--c-accent-600);
	}
}