/* Container Slider for Elementor */

.ecsn-slider {
	--ecsn-color: rgba(255, 255, 255, .4);
	--ecsn-active: #fff;
	--ecsn-arrow: #fff;
	--ecsn-arrow-bg: rgba(0, 0, 0, .3);
	--ecsn-ease: cubic-bezier(.65, 0, .35, 1);
	--ecsn-scale: 1;
	position: relative;
	width: 100%;
	overflow: hidden;
	height: 650px;
}

.ecsn-viewport {
	position: absolute;
	inset: 0;
	touch-action: pan-y;
}

/* ---------- Tarjetas ---------- */
.ecsn-slide {
	position: absolute;
	inset: 0;
	overflow: hidden;
	visibility: hidden;
	will-change: transform, opacity;
}

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

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

.ecsn-bg,
.ecsn-overlay {
	position: absolute;
	inset: 0;
}

.ecsn-bg {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.ecsn-overlay {
	pointer-events: none;
}

.ecsn-video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Ken Burns */
.ecsn-zoom .ecsn-slide.is-active .ecsn-bg,
.ecsn-zoom .ecsn-slide.is-leaving .ecsn-bg {
	animation: ecsn-zoom var(--ecsn-zoom-dur, 8s) ease-out forwards;
}

@keyframes ecsn-zoom {
	from { transform: scale(1); }
	to   { transform: scale(1.1); }
}

/* ---------- Contenido (plantilla con contenedores) ---------- */
.ecsn-content {
	position: relative;
	z-index: 2;
	height: 100%;
	width: 100%;
}

.ecsn-content > .elementor {
	height: 100%;
}

.ecsn-content .elementor > .e-con.e-parent {
	min-height: 100%;
}

.ecsn-edit-tpl {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 9;
	padding: 7px 12px;
	border-radius: 6px;
	background: #92003b;
	color: #fff;
	font: 600 12px/1.2 sans-serif;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}

.ecsn-edit-tpl:hover {
	background: #b0004a;
	color: #fff;
}

.ecsn-notice {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 10px 16px;
	border-radius: 6px;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	font: 13px/1.4 sans-serif;
	text-align: center;
	max-width: 80%;
}

/* ---------- Flechas ---------- */
.ecsn-arrow {
	position: absolute;
	top: 50%;
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-top: -24px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ecsn-arrow-bg);
	color: var(--ecsn-arrow);
	cursor: pointer;
	backdrop-filter: blur(6px);
	transition: transform .3s var(--ecsn-ease), background-color .3s;
}

.ecsn-arrow:hover {
	transform: scale(1.1);
}

.ecsn-prev { left: 20px; }
.ecsn-next { right: 20px; }

/* ---------- Marcadores ---------- */
.ecsn-pagination {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 32px;
	z-index: 6;
	display: flex;
	justify-content: center;
	padding: 0 30px;
	pointer-events: none;
}

.ecsn-pagination > * {
	pointer-events: auto;
}

.ecsn-items {
	display: flex;
	align-items: center;
	gap: calc(10px * var(--ecsn-scale));
}

.ecsn-item {
	position: relative;
	padding: 0;
	border: 0;
	overflow: hidden;
	background: var(--ecsn-color);
	cursor: pointer;
}

.ecsn-fill {
	position: absolute;
	inset: 0;
	background: var(--ecsn-active);
	transform-origin: left center;
	transform: scaleX(0);
}

.ecsn-item.is-active .ecsn-fill {
	transform: scaleX(var(--ecsn-p, 1));
}

.ecsn-item:not(.is-active) .ecsn-fill {
	transition: transform .45s var(--ecsn-ease);
}

/* 1) Puntos: el activo se expande en píldora con progreso */
.ecsn-pag-dots .ecsn-item {
	width: calc(10px * var(--ecsn-scale));
	height: calc(10px * var(--ecsn-scale));
	border-radius: 99px;
	transition: width .55s var(--ecsn-ease);
}

.ecsn-pag-dots .ecsn-item.is-active {
	width: calc(38px * var(--ecsn-scale));
}

.ecsn-pag-dots .ecsn-item.is-passed .ecsn-fill {
	transform: scaleX(0);
}

/* 2) Líneas: barra de progreso; las pasadas quedan llenas */
.ecsn-pag-lines .ecsn-items {
	gap: calc(8px * var(--ecsn-scale));
}

.ecsn-pag-lines .ecsn-item {
	width: calc(56px * var(--ecsn-scale));
	height: calc(3px * var(--ecsn-scale));
	border-radius: 99px;
	transition: height .3s var(--ecsn-ease);
}

.ecsn-pag-lines .ecsn-item:hover,
.ecsn-pag-lines .ecsn-item.is-active {
	height: calc(5px * var(--ecsn-scale));
}

.ecsn-pag-lines .ecsn-item.is-passed .ecsn-fill {
	transform: scaleX(1);
}

/* 3) Contador: 01 ——— 02 (actual y siguiente) */
.ecsn-counter {
	display: flex;
	align-items: center;
	gap: calc(16px * var(--ecsn-scale));
	padding: 0;
	border: 0;
	background: none;
	color: var(--ecsn-active);
	font-weight: 600;
	font-size: calc(15px * var(--ecsn-scale));
	line-height: 1.5;
	font-family: inherit;
	letter-spacing: .08em;
	cursor: pointer;
}

.ecsn-num {
	display: block;
	height: 1.5em;
	overflow: hidden;
	font-variant-numeric: tabular-nums;
}

.ecsn-num-next {
	opacity: .55;
}

.ecsn-roll {
	display: block;
	transition: transform .7s var(--ecsn-ease);
}

.ecsn-roll > span {
	display: block;
	height: 1.5em;
	line-height: 1.5em;
}

.ecsn-bar {
	position: relative;
	width: calc(90px * var(--ecsn-scale));
	height: calc(2px * var(--ecsn-scale));
	background: var(--ecsn-color);
	overflow: hidden;
}

.ecsn-bar .ecsn-fill {
	transform: scaleX(var(--ecsn-p, 1));
}

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
	.ecsn-arrow {
		width: 38px;
		height: 38px;
		margin-top: -19px;
	}

	.ecsn-prev { left: 10px; }
	.ecsn-next { right: 10px; }

	.ecsn-pag-lines .ecsn-item {
		width: calc(38px * var(--ecsn-scale));
	}

	.ecsn-bar {
		width: calc(60px * var(--ecsn-scale));
	}
}

@media (prefers-reduced-motion: reduce) {
	.ecsn-zoom .ecsn-slide .ecsn-bg {
		animation: none !important;
	}
}

/* =====================================================
   Versión anidada: cada tarjeta es un contenedor real
   ===================================================== */
.ecsn-nested .ecsn-viewport > .e-con {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
	box-sizing: border-box;
	overflow: hidden;
	visibility: hidden;
	will-change: transform, opacity;
}

.ecsn-nested .ecsn-viewport > .e-con.is-active {
	visibility: visible;
	z-index: 2;
}

.ecsn-nested .ecsn-viewport > .e-con.is-leaving {
	visibility: visible;
	z-index: 1;
}