/* sldr.css — el pase (Slider) y sus efectos. Con tokens.
   Un efecto es SÓLO esto: qué animación llevan las cuatro clases de paso
   (--outNext, --inNext, --outPrev, --inPrev) bajo .sldr--fx-<nombre>. */

.sldr {
	position: relative;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	overflow: hidden;
	color: var(--sldr-ink, #ffffff);
	background: var(--sldr-bg, #111111);
}

/* el escenario: las piezas, apiladas */
.sldr__items {
	position: relative;
	-webkit-flex: 1;
	flex: 1;
	min-height: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
}

.sldr__item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	pointer-events: none;
}

.sldr__item--current,
.sldr__item--outNext,
.sldr__item--outPrev { opacity: 1; }
.sldr__item--current { pointer-events: auto; }

.sldr__item img {
	display: block;
	width: 100%;
	height: 100%;
	/* cover para un hero; contain para ver la foto entera (una galería) */
	object-fit: var(--sldr-fit, cover);
}

/* ---------- Efectos ---------- */

/* archive (el «whatsapp»): la actual se encoge y se oscurece al fondo mientras la
   nueva entra deslizándose por encima; hacia atrás, al revés */
.sldr--fx-archive .sldr__item::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: 0;
	background: var(--sldr-shade, rgba(0, 0, 0, 0.7));
	transition: opacity 0.7s cubic-bezier(0.7, 0, 0.3, 1);
}

.sldr--fx-archive .sldr__item--outNext { animation: sldrScaleDown 0.7s cubic-bezier(0.7, 0, 0.3, 1) forwards; }
.sldr--fx-archive .sldr__item--outNext::after { opacity: 1; }
.sldr--fx-archive .sldr__item--inNext { z-index: 2; opacity: 1; animation: sldrFromLeft 0.7s cubic-bezier(0.7, 0, 0.3, 1) forwards; }
.sldr--fx-archive .sldr__item--outPrev { z-index: 2; animation: sldrToLeft 0.7s cubic-bezier(0.7, 0, 0.3, 1) forwards; }
.sldr--fx-archive .sldr__item--inPrev { opacity: 1; animation: sldrScaleUp 0.7s cubic-bezier(0.7, 0, 0.3, 1) forwards; }

/* slide: una empuja a la otra */
.sldr--fx-slide .sldr__item--outNext { animation: sldrToLeft 0.6s cubic-bezier(0.7, 0, 0.3, 1) forwards; }
.sldr--fx-slide .sldr__item--inNext { opacity: 1; animation: sldrFromRight 0.6s cubic-bezier(0.7, 0, 0.3, 1) forwards; }
.sldr--fx-slide .sldr__item--outPrev { animation: sldrToRight 0.6s cubic-bezier(0.7, 0, 0.3, 1) forwards; }
.sldr--fx-slide .sldr__item--inPrev { opacity: 1; animation: sldrFromLeft 0.6s cubic-bezier(0.7, 0, 0.3, 1) forwards; }

/* fade: se funden */
.sldr--fx-fade .sldr__item--outNext,
.sldr--fx-fade .sldr__item--outPrev { animation: sldrFadeOut 0.6s ease forwards; }
.sldr--fx-fade .sldr__item--inNext,
.sldr--fx-fade .sldr__item--inPrev { animation: sldrFadeIn 0.6s ease forwards; }

/* scale: la que sale crece y se va; la que entra llega desde pequeña */
.sldr--fx-scale .sldr__item--outNext,
.sldr--fx-scale .sldr__item--outPrev { animation: sldrGrowOut 0.6s cubic-bezier(0.7, 0, 0.3, 1) forwards; }
.sldr--fx-scale .sldr__item--inNext,
.sldr--fx-scale .sldr__item--inPrev { animation: sldrScaleUp 0.6s cubic-bezier(0.7, 0, 0.3, 1) forwards; }

@keyframes sldrScaleDown { to { opacity: 0; transform: scale3d(0.6, 0.6, 1); } }
@keyframes sldrScaleUp { from { opacity: 0; transform: scale3d(0.6, 0.6, 1); } to { opacity: 1; transform: scale3d(1, 1, 1); } }
@keyframes sldrGrowOut { to { opacity: 0; transform: scale3d(1.15, 1.15, 1); } }
@keyframes sldrFromLeft { from { transform: translate3d(-100%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes sldrFromRight { from { transform: translate3d(100%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes sldrToLeft { to { transform: translate3d(-100%, 0, 0); } }
@keyframes sldrToRight { to { transform: translate3d(100%, 0, 0); } }
@keyframes sldrFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sldrFadeOut { to { opacity: 0; } }

/* ---------- Flechas ---------- */

.sldr__arrow {
	position: absolute;
	z-index: 5;
	top: 50%;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	padding: 0;
	cursor: pointer;
	color: inherit;
	opacity: 0.75;
	border: 0;
	border-radius: 50%;
	background: var(--sldr-arrow-bg, rgba(0, 0, 0, 0.18));
	-webkit-tap-highlight-color: transparent;
	transition: opacity 0.2s, background-color 0.2s;
}

.sldr__arrow:hover, .sldr__arrow:focus { opacity: 1; outline: none; }
.sldr__arrow--prev { left: 12px; }
.sldr__arrow--next { right: 12px; }
.sldr__arrow svg { display: block; width: 26px; height: 26px; margin: 0 auto; fill: currentColor; }
/* con tira de miniaturas, las flechas se centran en el escenario, no en el conjunto */
.sldr--nav-thumbs .sldr__arrow { top: calc((100% - var(--sldr-rail, 72px)) / 2); }

/* ---------- Tira de miniaturas ---------- */

.sldr__nav--thumbs { -webkit-flex: none; flex: none; overflow: hidden; height: var(--sldr-rail, 72px); padding: 8px 0; }

.sldr__nav--thumbs .sldr__track {
	position: relative;
	height: 100%;
	padding: 0 8px;
	white-space: nowrap;
	font-size: 0;
	transition: transform 0.5s cubic-bezier(0.2, 1, 0.3, 1);
}

.sldr__thumb {
	display: inline-block;
	width: 56px;
	height: 100%;
	margin: 0 4px;
	padding: 0;
	cursor: pointer;
	vertical-align: top;
	opacity: 0.45;
	border: 0;
	border-radius: 4px;
	background: var(--sldr-thumb-bg, #333) no-repeat 50% 50%;
	background-size: cover;
	-webkit-tap-highlight-color: transparent;
	transition: opacity 0.3s, transform 0.3s cubic-bezier(0.2, 1, 0.3, 1), box-shadow 0.3s;
}

.sldr__thumb:hover, .sldr__thumb:focus { opacity: 0.85; outline: none; }
.sldr__thumb.is-current { opacity: 1; box-shadow: 0 0 0 var(--sldr-ring-width, 1.5px) var(--sldr-ring, currentColor); transform: scale3d(1.1, 1.1, 1); }

/* La entrada en cascada (Slider.enter): cada marca sube y aparece; el retardo de
   cada una lo pone el JS. `backwards`: al acabar no queda ningún transform puesto. */
.sldr__nav--entering .sldr__thumb,
.sldr__nav--entering .sldr__dot {
	animation: sldrMarkIn 0.6s cubic-bezier(0.2, 1, 0.3, 1) backwards;
}

@keyframes sldrMarkIn { from { opacity: 0; transform: translate3d(0, 20px, 0); } }

/* ---------- Puntos ---------- */

.sldr__nav--dots { position: absolute; z-index: 5; right: 0; bottom: 14px; left: 0; text-align: center; pointer-events: none; }
.sldr__nav--dots .sldr__track { display: inline-block; pointer-events: auto; }

.sldr__dot {
	width: 22px;
	height: 22px;
	padding: 0;
	cursor: pointer;
	border: 0;
	background: none;
	-webkit-tap-highlight-color: transparent;
}

.sldr__dot::after {
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	margin: 0 auto;
	opacity: 0.5;
	border-radius: 50%;
	background: currentColor;
	/* un filo oscuro: sobre una foto clara un punto blanco no se vería */
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28);
	transition: opacity 0.3s, transform 0.3s;
}

.sldr__dot:hover::after, .sldr__dot:focus::after { opacity: 0.85; }
.sldr__dot:focus { outline: none; }
.sldr__dot.is-current::after { opacity: 1; transform: scale3d(1.35, 1.35, 1); }

@media (prefers-reduced-motion: reduce) {
	.sldr__item, .sldr__item::after { animation-duration: 0.01s !important; transition-duration: 0.01s !important; }
	.sldr__nav--thumbs .sldr__track { transition-duration: 0.01s; }
	.sldr__nav--entering .sldr__thumb, .sldr__nav--entering .sldr__dot { animation-duration: 0.01s; animation-delay: 0s !important; }
}