/* =====================================================================
 * ZD Slider de Imágenes — Z Digital
 * Slides apilados en una celda de grid: el alto lo da la imagen más alta,
 * sin medidas fijas, y todas las transiciones se resuelven con clases.
 * =================================================================== */

.zdis {
	--zdis-speed: 900ms;
	--zdis-ease: cubic-bezier(.77, 0, .18, 1);
	--zdis-interval: 5000ms;
	--zdis-dir: 1;
	--zdis-skel: #e9ebef;
	--zdis-c-active: #fff;
	--zdis-c-inactive: rgba(255, 255, 255, .38);
	--zdis-nav-offset: 28px;
	--zdis-nav-side: clamp(16px, 4vw, 56px);
	--zdis-nav-gap: 28px;
	--zdis-bar-w: 280px;
	--zdis-bar-h: 3px;
	--zdis-seg-gap: 10px;
	--zdis-dot: 8px;
	--zdis-arrow-icon: 24px;
	--zdis-arrow-box: 40px;
	--zdis-arrow-side: 20px;
	--zdis-arrow-bg: transparent;
	--zdis-arrow-bg-h: rgba(255, 255, 255, .14);
	position: relative;
	width: 100%;
}

.zdis *,
.zdis *::before,
.zdis *::after {
	box-sizing: border-box;
}

.zdis.is-empty {
	display: none;
}

.zdis__viewport {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
}

.zdis__track {
	display: grid;
	width: 100%;
	height: 100%;
}

/* ---------- Slide base ---------- */

.zdis__slide {
	grid-area: 1 / 1;
	position: relative;
	min-width: 0;
	visibility: hidden;
	z-index: 0;
	transition-property: transform, opacity, clip-path, filter, translate;
	transition-duration: var(--zdis-speed);
	transition-timing-function: var(--zdis-ease);
	backface-visibility: hidden;
}

.zdis__slide.is-active {
	visibility: visible;
	z-index: 2;
}

.zdis__slide.is-leaving {
	visibility: visible;
	z-index: 1;
}

.zdis__slide.is-entering {
	visibility: visible;
	z-index: 2;
	transition: none !important;
}

.zdis__slide.is-off {
	display: none !important;
}

.zdis__link {
	position: relative;
	display: block;
	height: 100%;
	color: inherit;
	text-decoration: none !important;
	-webkit-user-drag: none;
}

.zdis__media {
	position: relative;
	display: block;
	height: 100%;
	overflow: hidden;
	background: var(--zdis-skel);
}

.zdis .zdis__img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
	object-position: center;
	-webkit-user-drag: none;
}

.zdis--fixed .zdis__viewport .zdis__track {
	height: 100%;
}

.zdis__shade {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

/* ---------- Transiciones ---------- */

/* Deslizar */
.zdis-fx--slide .zdis__slide {
	transform: translate3d(calc(var(--zdis-dir) * 100%), 0, 0);
}
.zdis-fx--slide .zdis__slide.is-active {
	transform: translate3d(0, 0, 0);
}
.zdis-fx--slide .zdis__slide.is-leaving {
	transform: translate3d(calc(var(--zdis-dir) * -100%), 0, 0);
}

/* Deslizar con parallax: el saliente se queda atrás y se oscurece */
.zdis-fx--parallax .zdis__slide {
	transform: translate3d(calc(var(--zdis-dir) * 100%), 0, 0);
}
.zdis-fx--parallax .zdis__slide.is-active {
	transform: translate3d(0, 0, 0);
	box-shadow: 0 0 60px rgba(0, 0, 0, .35);
}
.zdis-fx--parallax .zdis__slide.is-leaving {
	transform: translate3d(calc(var(--zdis-dir) * -30%), 0, 0);
	filter: brightness(.55);
}

/* Fundido (crossfade sin "bajón" a negro) */
.zdis-fx--fade .zdis__slide {
	opacity: 0;
}
.zdis-fx--fade .zdis__slide.is-active,
.zdis-fx--fade .zdis__slide.is-leaving {
	opacity: 1;
}
.zdis-fx--fade .zdis__slide.is-leaving {
	transition: none;
}

/* Fundido con zoom */
.zdis-fx--zoom .zdis__slide {
	opacity: 0;
	transform: scale(1.14);
}
.zdis-fx--zoom .zdis__slide.is-active {
	opacity: 1;
	transform: scale(1);
}
.zdis-fx--zoom .zdis__slide.is-leaving {
	opacity: 1;
	transform: scale(1);
	transition: none;
}

/* Cortina: el nuevo se revela con clip-path y el saliente se corre un poco */
.zdis-fx--wipe .zdis__slide {
	clip-path: inset(0 0 0 100%);
}
.zdis-fx--wipe.zdis--back .zdis__slide {
	clip-path: inset(0 100% 0 0);
}
.zdis-fx--wipe .zdis__slide.is-active,
.zdis-fx--wipe .zdis__slide.is-leaving {
	clip-path: inset(0 0 0 0);
}
.zdis-fx--wipe .zdis__slide .zdis__media {
	transition: transform var(--zdis-speed) var(--zdis-ease);
}
.zdis-fx--wipe .zdis__slide.is-leaving .zdis__media {
	transform: translate3d(calc(var(--zdis-dir) * -18%), 0, 0);
}

/* Desenfoque */
.zdis-fx--blur .zdis__slide {
	opacity: 0;
	filter: blur(22px);
	transform: scale(1.06);
}
.zdis-fx--blur .zdis__slide.is-active {
	opacity: 1;
	filter: blur(0);
	transform: scale(1);
}
.zdis-fx--blur .zdis__slide.is-leaving {
	opacity: 1;
	filter: blur(0);
	transform: scale(1);
	transition: none;
}

/* Arrastre: el slide activo sigue al dedo */
.zdis.is-dragging .zdis__slide.is-active {
	translate: var(--zdis-drag, 0) 0;
	transition: none;
}

/* Ken Burns: la misma animación sigue en .is-leaving, así no "salta" al salir */
.zdis--kenburns .zdis__slide.is-active .zdis__img,
.zdis--kenburns .zdis__slide.is-leaving .zdis__img {
	animation: zdis-kenburns calc(var(--zdis-slide-dur, var(--zdis-interval)) + var(--zdis-speed) * 2) linear forwards;
}

@keyframes zdis-kenburns {
	from { transform: scale(1); }
	to   { transform: scale(1.09); }
}

/* ---------- Carga moderna ---------- */

.zdis--skeleton .zdis__media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%);
	background-size: 220% 100%;
	animation: zdis-shimmer 1.3s ease-in-out infinite;
	transition: opacity .5s ease;
	pointer-events: none;
}

.zdis--skeleton .zdis__media.is-loaded::before {
	opacity: 0;
	animation: none;
}

@keyframes zdis-shimmer {
	from { background-position: 120% 0; }
	to   { background-position: -120% 0; }
}

/* Solo se oculta la imagen si hay JS (clase puesta en <head>) */
.zdis-js .zdis:not(.zdis-load--none) .zdis__img {
	opacity: 0;
	transition: opacity .8s ease, filter 1.1s cubic-bezier(.16, 1, .3, 1), clip-path 1.1s cubic-bezier(.77, 0, .18, 1);
}

.zdis-js .zdis-load--blur .zdis__img {
	filter: blur(24px);
	transform: scale(1.06);
	transition: opacity .8s ease, filter 1.1s cubic-bezier(.16, 1, .3, 1), transform 1.3s cubic-bezier(.16, 1, .3, 1);
}

.zdis-js .zdis-load--zoom .zdis__img {
	transform: scale(1.15);
	transition: opacity .9s ease, transform 1.6s cubic-bezier(.16, 1, .3, 1);
}

.zdis-js .zdis-load--reveal .zdis__img {
	opacity: 1;
	clip-path: inset(100% 0 0 0);
}

.zdis-js .zdis .zdis__media.is-loaded .zdis__img {
	opacity: 1;
	filter: none;
	transform: none;
	clip-path: inset(0 0 0 0);
}

/* ---------- Texto sobre el banner ---------- */

.zdis__content {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: clamp(20px, 6vw, 88px);
	padding-bottom: calc(var(--zdis-nav-offset) + 56px);
	pointer-events: none;
	color: #fff;
}

.zdis__content-inner {
	display: flex;
	flex-direction: column;
	align-items: inherit;
	gap: 14px;
	max-width: 620px;
}

.zdis__subtitle {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: inherit;
}

.zdis .zdis__title {
	margin: 0;
	font-size: clamp(28px, 4.4vw, 60px);
	font-weight: 700;
	line-height: 1.05;
	color: #fff;
}

.zdis .zdis__text {
	margin: 0;
	font-size: clamp(15px, 1.3vw, 18px);
	line-height: 1.5;
	color: rgba(255, 255, 255, .88);
}

.zdis__btn {
	display: inline-flex;
	align-items: center;
	margin-top: 8px;
	padding: 14px 28px;
	border-radius: 999px;
	background: #fff;
	color: #111;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	pointer-events: auto;
	transition: background-color .3s ease, color .3s ease, transform .3s ease;
}

.zdis__link:hover .zdis__btn {
	transform: translateY(-2px);
}

/* Entrada escalonada del texto en cada cambio */
.zdis__content-inner > * {
	opacity: 0;
	transform: translate3d(0, 26px, 0);
	transition: opacity .7s ease, transform .9s cubic-bezier(.16, 1, .3, 1);
}

.zdis__slide.is-active .zdis__content-inner > * {
	opacity: 1;
	transform: none;
	transition-delay: calc(var(--zdis-speed) * .45);
}
.zdis__slide.is-active .zdis__content-inner > :nth-child(2) { transition-delay: calc(var(--zdis-speed) * .45 + 90ms); }
.zdis__slide.is-active .zdis__content-inner > :nth-child(3) { transition-delay: calc(var(--zdis-speed) * .45 + 180ms); }
.zdis__slide.is-active .zdis__content-inner > :nth-child(4) { transition-delay: calc(var(--zdis-speed) * .45 + 270ms); }

.zdis__slide.is-leaving .zdis__content-inner > * {
	opacity: 1;
	transform: none;
}

/* ---------- Navegación ---------- */

.zdis__nav {
	display: flex;
	justify-content: center;
	z-index: 5;
	pointer-events: none;
}

.zdis__nav--inside {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--zdis-nav-offset);
	padding: 0 var(--zdis-nav-side);
}

.zdis__nav--outside {
	position: relative;
	padding: 18px 0 0;
	--zdis-c-active: #111;
	--zdis-c-inactive: rgba(0, 0, 0, .18);
	--zdis-arrow-bg-h: rgba(0, 0, 0, .06);
}

.zdis__nav-box {
	display: flex;
	align-items: center;
	gap: var(--zdis-nav-gap);
	max-width: 100%;
	pointer-events: auto;
}

.zdis-glass-yes .zdis__nav-box {
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	backdrop-filter: blur(14px) saturate(1.4);
}

.zdis__nav-main {
	display: flex;
	align-items: center;
	gap: var(--zdis-nav-gap);
	min-width: 0;
	flex: 0 1 auto;
}

.zdis-nav--segments .zdis__nav-main {
	flex: 1 1 auto;
}

.zdis.is-single .zdis__nav,
.zdis.is-single .zdis__arrows {
	display: none;
}

/* Contador 1 / 3 */
.zdis__counter {
	display: inline-flex;
	align-items: baseline;
	gap: .28em;
	color: var(--zdis-c-active);
	font-size: 26px;
	font-weight: 300;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Barra de progreso */
.zdis__bar {
	position: relative;
	width: var(--zdis-bar-w);
	max-width: 40vw;
	height: var(--zdis-bar-h);
	border-radius: 999px;
	background: var(--zdis-c-inactive);
	overflow: hidden;
}

.zdis__bar-fill,
.zdis__seg-fill,
.zdis__line-fill {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--zdis-c-active);
	transform-origin: left center;
	transform: scaleX(var(--p, 0));
}

.zdis__bar-fill {
	transition: transform var(--zdis-speed) var(--zdis-ease);
}

.zdis__bar[data-mode="time"] .zdis__bar-fill {
	transition: none;
}

/* Segmentos tipo historias */
.zdis__segs {
	display: flex;
	gap: var(--zdis-seg-gap);
	width: var(--zdis-bar-w);
	max-width: 100%;
}

.zdis-nav--segments {
	--zdis-bar-w: 560px;
	--zdis-bar-h: 7px;
}

.zdis button.zdis__seg {
	position: relative;
	flex: 1 1 0;
	min-width: 18px;
	height: var(--zdis-bar-h);
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--zdis-c-inactive);
	box-shadow: none;
	cursor: pointer;
	overflow: visible;
	transition: background-color .3s ease;
}

.zdis button.zdis__seg::after {
	content: "";
	position: absolute;
	inset: -10px 0;
}

.zdis button.zdis__seg:hover,
.zdis button.zdis__seg:focus {
	background: var(--zdis-c-inactive);
}

.zdis__seg-fill {
	transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}

.zdis--autoplay .zdis__seg.is-active .zdis__seg-fill {
	transition: none;
}

/* Puntos */
.zdis__dots {
	display: flex;
	align-items: center;
	gap: calc(var(--zdis-dot) * 1.2);
}

.zdis button.zdis__dot {
	position: relative;
	width: var(--zdis-dot);
	height: var(--zdis-dot);
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--zdis-c-inactive);
	box-shadow: none;
	cursor: pointer;
	transition: width .45s cubic-bezier(.16, 1, .3, 1), background-color .3s ease;
}

.zdis button.zdis__dot::after {
	content: "";
	position: absolute;
	inset: -8px;
}

.zdis button.zdis__dot:hover,
.zdis button.zdis__dot:focus {
	background: var(--zdis-c-inactive);
}

.zdis button.zdis__dot.is-active {
	width: calc(var(--zdis-dot) * 3.5);
	background: var(--zdis-c-active);
}

/* Números 01 — 03 */
.zdis__nums {
	display: flex;
	align-items: center;
	gap: 16px;
	color: var(--zdis-c-active);
}

.zdis__num {
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .06em;
	font-variant-numeric: tabular-nums;
}

.zdis__num--total {
	opacity: .55;
}

.zdis__line {
	position: relative;
	width: calc(var(--zdis-bar-w) * .4);
	height: var(--zdis-bar-h);
	border-radius: 999px;
	background: var(--zdis-c-inactive);
	overflow: hidden;
}

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

.zdis__arrows {
	display: flex;
	align-items: center;
	gap: 6px;
}

.zdis button.zdis__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--zdis-arrow-box);
	height: var(--zdis-arrow-box);
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--zdis-arrow-bg);
	color: var(--zdis-arrow-c, var(--zdis-c-active));
	box-shadow: none;
	line-height: 1;
	cursor: pointer;
	transition: background-color .3s ease, color .3s ease, transform .3s ease, opacity .3s ease;
}

.zdis button.zdis__arrow:hover,
.zdis button.zdis__arrow:focus-visible {
	background: var(--zdis-arrow-bg-h);
	color: var(--zdis-arrow-c-h, var(--zdis-arrow-c, var(--zdis-c-active)));
}

.zdis button.zdis__arrow svg {
	display: block;
	width: var(--zdis-arrow-icon);
	height: var(--zdis-arrow-icon);
	flex: none;
}

.zdis-arrows--sides .zdis__arrows--sides {
	pointer-events: none;
}

.zdis__arrows--nav .zdis__arrow svg[viewBox="0 0 40 24"],
.zdis__arrows--sides .zdis__arrow svg[viewBox="0 0 40 24"] {
	width: calc(var(--zdis-arrow-icon) * 1.6);
}

.zdis__arrows--nav .zdis__arrow:has(svg[viewBox="0 0 40 24"]) {
	width: calc(var(--zdis-arrow-box) * 1.4);
}

.zdis__arrows--sides {
	position: absolute;
	inset: 50% var(--zdis-arrow-side) auto;
	z-index: 6;
	justify-content: space-between;
	transform: translateY(-50%);
}

.zdis__arrows--sides .zdis__arrow {
	pointer-events: auto;
}

.zdis.zdis-arrows--sides {
	--zdis-arrow-bg: rgba(255, 255, 255, .16);
	--zdis-arrow-bg-h: rgba(255, 255, 255, .32);
	--zdis-arrow-box: 52px;
}

.zdis-arrows--sides .zdis__arrow {
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.zdis button.zdis__arrow:active {
	transform: scale(.92);
}

@media (hover: hover) {
	.zdis--arrows-hover .zdis__arrows--sides .zdis__arrow--prev {
		opacity: 0;
		transform: translateX(-12px);
	}
	.zdis--arrows-hover .zdis__arrows--sides .zdis__arrow--next {
		opacity: 0;
		transform: translateX(12px);
	}
	.zdis--arrows-hover:hover .zdis__arrows--sides .zdis__arrow,
	.zdis--arrows-hover:focus-within .zdis__arrows--sides .zdis__arrow {
		opacity: 1;
		transform: none;
	}
}

/* ---------- Editor ---------- */

.zdis__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 8;
	padding: 6px 10px;
	border-radius: 6px;
	background: rgba(17, 17, 17, .85);
	color: #fff;
	font: 600 11px/1.2 system-ui, -apple-system, sans-serif;
	letter-spacing: .02em;
	pointer-events: none;
}

.zdis-empty {
	padding: 28px;
	border: 2px dashed #c9ccd1;
	border-radius: 8px;
	color: #6d7882;
	font: 14px/1.5 system-ui, -apple-system, sans-serif;
	text-align: center;
}

/* ---------- Responsive ---------- */

@media (max-width: 767px) {
	.zdis {
		--zdis-nav-offset: 18px;
		--zdis-nav-gap: 16px;
		--zdis-arrow-box: 34px;
		--zdis-arrow-icon: 20px;
	}

	.zdis.zdis-arrows--sides {
		--zdis-arrow-box: 40px;
	}

	.zdis__counter {
		font-size: 20px;
	}

	.zdis__bar {
		max-width: 34vw;
	}

	.zdis--arrows-desktop .zdis__arrows {
		display: none;
	}

	.zdis__content {
		padding-bottom: calc(var(--zdis-nav-offset) + 44px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.zdis {
		--zdis-speed: 1ms !important; /* gana al estilo inline */
	}

	.zdis--kenburns .zdis__slide .zdis__img {
		animation: none !important;
	}

	.zdis--skeleton .zdis__media::before {
		animation: none;
	}
}