/**
 * Carrusel de colores.
 *
 * El escenario imita un estudio fotográfico: degradado radial de fondo y una
 * sombra elíptica bajo el vehículo. Es lo que hace que un PNG recortado no
 * parezca pegado sobre un rectángulo plano.
 */

.autum-colores {
	text-align: center;
}

.autum-colores__escenario {
	position: relative;
	display: grid;
	padding: 1rem;
	background:
		radial-gradient(ellipse 70% 55% at 50% 42%, rgba(228, 2, 43, 0.07), transparent 70%),
		radial-gradient(ellipse 90% 70% at 50% 45%, #ffffff, #eeeeec 78%);
	border: 1px solid var(--borde);
	border-radius: 16px;
	overflow: hidden;
}

.autum-oscuro .autum-colores__escenario {
	background:
		radial-gradient(ellipse 70% 55% at 50% 42%, rgba(228, 2, 43, 0.16), transparent 70%),
		radial-gradient(ellipse 90% 70% at 50% 45%, #1c1c1c, #0a0a0a 78%);
}

/* Sombra bajo el vehículo, para asentarlo en el piso. */
.autum-colores__escenario::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 12%;
	width: 62%;
	height: 6%;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.22), transparent 72%);
	pointer-events: none;
}

.autum-colores__foto {
	grid-area: 1 / 1;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	padding: 1.5rem;
	opacity: 0;
	visibility: hidden;
	transform: scale(0.97);
	transition: opacity 0.4s ease, visibility 0.4s, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.autum-colores__foto[data-activo="true"] {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.autum-colores:not([data-autum-colores]) .autum-colores__foto:first-child {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.autum-colores__nombre {
	margin: 1.25rem 0 0.875rem;
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--texto);
	min-height: 1.4em;
}

.autum-colores__muestras {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
}

/* Las muestras que la versión no ofrece se ocultan por completo. */
.autum-colores__muestra[hidden] {
	display: none;
}

.autum-colores__cantidad {
	margin: 0.875rem 0 0;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--texto-tenue);
}

.autum-colores__muestra {
	position: relative;
	display: block;
	width: 2.375rem;
	height: 2.375rem;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.autum-colores__muestra span {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.14),
		inset 0 -3px 6px rgba(0, 0, 0, 0.18),
		inset 0 3px 6px rgba(255, 255, 255, 0.28);
}

/* Anillo de selección, dibujado por fuera para no encoger la muestra. */
.autum-colores__muestra::after {
	content: "";
	position: absolute;
	inset: -5px;
	border: 2px solid transparent;
	border-radius: 50%;
	transition: border-color 0.2s ease;
}

.autum-colores__muestra:hover {
	transform: scale(1.12);
}

.autum-colores__muestra[aria-selected="true"] {
	transform: scale(1.08);
}

.autum-colores__muestra[aria-selected="true"]::after {
	border-color: var(--color-derco-red);
}

.autum-colores__muestra:focus-visible {
	outline: 2px solid var(--color-derco-red);
	outline-offset: 6px;
}

@media (prefers-reduced-motion: reduce) {
	.autum-colores__foto,
	.autum-colores__muestra,
	.autum-colores__muestra::after {
		transition: none;
	}

	.autum-colores__muestra:hover,
	.autum-colores__muestra[aria-selected="true"] {
		transform: none;
	}
}