:root {
	--bg: #0b0c10;
	--card: #111;
	--text: #f7f7fb;
	--muted: #e5e7eb;
	--accent: #00a387;
	/* verde suave */
	--radius: 16px;
	--shadow: 0 18px 40px rgba(0, 0, 0, .25);
}
*,
*::before,
*::after {
	box-sizing: border-box
}

/* ===== Slider ===== */

.slider {
	position: relative;
	max-width: min(1100px, 96vw);
	border-radius: var(--radius);
	overflow: hidden;
	background: #000;
	box-shadow: var(--shadow);
	margin: 2rem 0;
}
.slider__viewport {
	overflow: hidden;
	outline: none;
}
.slider__track {
	display: flex;
	will-change: transform;
	transition: transform .6s ease;
}
.slide {
	position: relative;
	min-width: 100%;
	width: 100vw;
	block-size: clamp(260px, 55vw, 520px);
	display: grid;
	place-items: end start;
	background: #000;
}
.slide img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(1.05) contrast(1.02);
}

/* Gradiente de lectura + caption */

.slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 60%);
}
.slide__caption {
	position: relative;
	z-index: 1;
	padding: 2rem;
	max-width: 70vw;
	/* background-color: rgba(0, 0, 0, .5); */
}
.slide__caption h2 {
	margin: 0 0 .25rem 0;
	font-size: clamp(1.25rem, 2.6vw, 2rem);
	letter-spacing: .4px;
	color: #fafafa;
}
.slide__caption p {
	margin: 0;
	color: #fafafa;
	font-size: clamp(.95rem, 1.6vw, 1.05rem);
	opacity: .95;
}

/* Botones */

.slider__btn {
	position: absolute;
	inset-block: 0;
	margin-block: auto;
	height: 40px;
	width: 44px;
	display: grid;
	place-items: center;
	border: none;
	border-radius: 999px;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	font-size: 1.6rem;
	cursor: pointer;
	transition: transform .2s ease, background .2s ease, opacity .2s ease;
	backdrop-filter: blur(6px);
	opacity: .9;
}
.slider__btn:hover {
	background: rgba(255, 255, 255, .2);
	transform: scale(1.05)
}
.slider__btn:active {
	transform: scale(.98)
}
.slider__btn--prev {
	left: .5rem
}
.slider__btn--next {
	right: .5rem
}

/* Dots */

.slider__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: .6rem;
	display: flex;
	justify-content: center;
	gap: .5rem;
	padding: .25rem .5rem;
}
.dot {
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .45);
	border: 0;
	cursor: pointer;
	transition: transform .2s ease, background .2s ease;
}
.dot:hover {
	transform: scale(1.15)
}
.dot.is-active {
	background: var(--accent)
}

/* Accesibilidad visual oculta */

.sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Responsivo */

@media (max-width: 680px) {
	.slider__btn {
		height: 36px;
		width: 40px;
		font-size: 1.4rem
	}
}

/* Reduce motion: desactiva auto-animaciones pesadas */

@media (prefers-reduced-motion: reduce) {
	.slider__track {
		transition: none
	}
}