.do-carousel { position: relative; margin-inline: auto; max-width: 100%; }

.do-carousel__track {
	display: flex;
	gap: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 0.25rem;
	scrollbar-width: none;
}
.do-carousel__track::-webkit-scrollbar { display: none; }

.do-carousel__slide {
	flex: 0 0 auto;
	width: min(420px, 78vw);
	scroll-snap-align: start;
}
.do-carousel__slide img {
	display: block;
	width: 100%;
	height: 320px;
	object-fit: cover;
}
.do-carousel__slide figcaption {
	margin-top: 0.85rem;
	font-size: 0.85rem;
	font-weight: 300;
	color: var(--do-color-text-muted);
}

.do-carousel__arrow {
	display: none;
	position: absolute;
	top: 140px;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--do-color-border);
	background: var(--do-color-surface);
	color: var(--do-color-text);
	font-size: 1.1rem;
	cursor: pointer;
	transition: border-color var(--do-transition), transform var(--do-transition);
	z-index: 2;
}
.do-carousel__arrow:hover { border-color: var(--do-color-text); transform: scale(1.06); }
.do-carousel__arrow--prev { left: -22px; }
.do-carousel__arrow--next { right: -22px; }

/* Las flechas solo tienen sentido con mouse; en tactil se usa el swipe nativo. */
@media (hover: hover) and (pointer: fine) {
	.do-carousel__arrow { display: flex; }
}

.do-carousel__dots {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	margin-top: 1.5rem;
}
.do-carousel__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--do-color-border);
	cursor: pointer;
	transition: background-color var(--do-transition), transform var(--do-transition);
}
.do-carousel__dot.is-active {
	background: var(--do-color-gold);
	transform: scale(1.35);
}

@media (prefers-reduced-motion: reduce) {
	.do-carousel__track { scroll-behavior: auto; }
}

@media (max-width: 640px) {
	.do-carousel__arrow { display: none; }
}