/* ==========================================================================
   Colihue Aventura – Widget "Banners destacados" (boceto de Lucas, estilo Xbox)

   OJO: Elementor trae "html * { transition-duration: 0s !important }" para quien
   tiene activado "reducir animaciones" en Windows. Por eso acá las transiciones van
   con !important y un selector más específico, y las de los banners las pone el JS
   en línea con !important. Si no, en esas PCs el carrusel salta sin animación.

   Todo lo que se mueve es transform/opacity: lo compone la placa de video, la página
   no se vuelve a dibujar durante el giro (medido con el trazado de Chrome).
   ========================================================================== */
.ca-dest {
	--ca-dest-ancho: 85.4%;        /* banner del frente: 1366 de 1600 en el boceto */
	--ca-dest-prop: 2.682;         /* 1920 x 716 */
	--ca-dest-escala: .78;         /* los de atrás: 398/510 en el boceto */
	--ca-dest-corrida: 62;         /* cuánto se corren al costado, en % de su ancho */
	--ca-dest-borde: 4px;
	--ca-dest-marco: #ffffff;
	--ca-dest-radio: 20px;
	--ca-dest-punto: #e57322;
	--ca-dest-punto-activo: #e57322;
	--ca-dest-punto-tam: 10px;
	--ca-dest-puntos-abajo: 21px;
	--ca-dest-flecha: #ffffff;
	--ca-dest-flecha-fondo: rgba(15, 15, 17, .62);
	--ca-dest-curva: cubic-bezier(.25, 1.08, .4, 1);   /* frena con un rebote mínimo */
	--ca-dest-suave: cubic-bezier(.22, .61, .27, 1);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	box-sizing: border-box;
	width: 100%;
	padding: 39px 0 63px;
	-webkit-user-select: none;
	user-select: none;
}
.ca-dest.ca-dest-sin-rebote { --ca-dest-curva: var(--ca-dest-suave); }

/* Fondo en capa propia: en cada giro se corre unos px al revés y vuelve (profundidad). */
.ca-dest-fondo {
	position: absolute;
	inset: 0 -80px;
	z-index: -1;
	pointer-events: none;
	transform: translate3d(0, 0, 0);
	will-change: transform;
}
.ca-dest-fondo-revoque { background: #c9cfd0; }
.ca-dest-fondo-revoque .ca-dest-fondo {
	background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22220%22%20height%3D%22220%22%3E%3Cfilter%20id%3D%22g%22%20x%3D%220%22%20y%3D%220%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.9%22%20numOctaves%3D%222%22%20seed%3D%229%22%20stitchTiles%3D%22stitch%22/%3E%3CfeColorMatrix%20values%3D%220%200%200%200%20.12%20%200%200%200%200%20.13%20%200%200%200%200%20.13%20%200%200%200%20.4%20-.14%22/%3E%3C/filter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23g%29%22/%3E%3C/svg%3E") repeat,
 url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22600%22%20height%3D%22600%22%3E%3Cfilter%20id%3D%22n%22%20x%3D%220%22%20y%3D%220%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.018%20.03%22%20numOctaves%3D%225%22%20seed%3D%224%22%20stitchTiles%3D%22stitch%22/%3E%3CfeColorMatrix%20values%3D%220%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%200%200%200%20.75%20-.36%22/%3E%3C/filter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23n%29%22/%3E%3C/svg%3E") repeat,
 radial-gradient(75% 140% at 50% 30%, rgba(255,255,255,0) 52%, rgba(70,78,78,.22) 100%),
 linear-gradient(180deg,#d3d9dc 0%,#cbd1d2 45%,#c2c3be 100%);
}

.ca-dest .swiper {
	width: var(--ca-dest-ancho);
	margin: 0 auto;
	overflow: visible;             /* que asomen los de los costados */
}
.ca-dest .swiper-slide {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	aspect-ratio: var(--ca-dest-prop);
	border-radius: var(--ca-dest-radio);
	overflow: hidden;
	background: #111;
	box-shadow: 0 6px 28px rgba(0, 0, 0, .55), 0 1px 4px rgba(0, 0, 0, .3);
	transition-timing-function: var(--ca-dest-curva);
	backface-visibility: hidden;
	will-change: transform;        /* se rasteriza una vez: al achicarse no se vuelve a dibujar */
}
/* Marco ENCIMA de la foto: así la foto se puede acercar sin taparlo. (Con el marco como
   relleno alrededor, Chrome dibujaba la foto acercada por encima: probado.) */
.ca-dest .swiper-slide::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: inherit;
	box-shadow: inset 0 0 0 var(--ca-dest-borde) var(--ca-dest-marco);
	pointer-events: none;
}
.ca-dest .ca-dest-tarjeta {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	-webkit-user-drag: none;
	transition: transform 1.1s var(--ca-dest-curva), opacity .9s ease !important;
}
.ca-dest .ca-dest-tarjeta picture { display: contents; }
.ca-dest .ca-dest-tarjeta img.ca-dest-img,
.ca-dest .ca-dest-tarjeta .ca-dest-video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	object-fit: cover;
	pointer-events: none;
	transform: scale(1);
	will-change: transform;
	transition: transform .9s var(--ca-dest-suave) !important;
}
.ca-dest .ca-dest-video { z-index: 1; opacity: 0; transition: opacity .5s ease, transform .9s var(--ca-dest-suave) !important; }
.ca-dest .ca-dest-video.ca-dest-sonando { opacity: 1; }
/* El del frente se acerca despacito mientras está. */
.ca-dest .swiper-slide-active .ca-dest-tarjeta img.ca-dest-img,
.ca-dest .swiper-slide-active .ca-dest-tarjeta .ca-dest-video {
	transform: scale(1.06);
	transition: transform 7s linear, opacity .5s ease !important;
}
.ca-dest.ca-dest-sin-acercamiento .swiper-slide-active .ca-dest-tarjeta img.ca-dest-img,
.ca-dest.ca-dest-sin-acercamiento .swiper-slide-active .ca-dest-tarjeta .ca-dest-video { transform: scale(1); }

/* Destello que cruza el banner cuando llega al frente. */
.ca-dest .ca-dest-brillo {
	position: absolute;
	inset: -10% -30%;
	z-index: 2;
	background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .26) 50%, rgba(255, 255, 255, 0) 62%);
	transform: translate3d(-100%, 0, 0);
	pointer-events: none;
	will-change: transform;
}
.ca-dest.ca-dest-llego .swiper-slide-active .ca-dest-brillo {
	animation: ca-dest-brillo 1.15s cubic-bezier(.3, .6, .3, 1) .05s 1 both !important;
}
.ca-dest.ca-dest-sin-destello .ca-dest-brillo { display: none; }
@keyframes ca-dest-brillo { from { transform: translate3d(-100%, 0, 0); } to { transform: translate3d(100%, 0, 0); } }

/* Entrada: el del frente aparece y los de atrás se abren hacia los costados. */
.ca-dest.ca-dest-intro .swiper-slide-active .ca-dest-tarjeta { transform: scale(.94); opacity: 0; }
.ca-dest.ca-dest-intro .swiper-slide-prev .ca-dest-tarjeta { transform: translate3d(28%, 0, 0); opacity: 0; }
.ca-dest.ca-dest-intro .swiper-slide-next .ca-dest-tarjeta { transform: translate3d(-28%, 0, 0); opacity: 0; }
.ca-dest.ca-dest-intro .swiper-slide { box-shadow: none; }
.ca-dest.ca-dest-intro .swiper-slide::after { opacity: 0; }
.ca-dest .swiper-slide::after { transition: opacity .9s ease !important; }
.ca-dest .swiper-slide-prev .ca-dest-tarjeta,
.ca-dest .swiper-slide-next .ca-dest-tarjeta { transition-delay: .12s !important; }

/* Puntitos (boceto): todos del mismo color, el activo más grande. */
.ca-dest .ca-dest-puntos {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--ca-dest-puntos-abajo);
	z-index: 5;
	display: flex;
	justify-content: center;
	align-items: center;
	height: calc(var(--ca-dest-punto-tam) * 1.6);
}
.ca-dest .ca-dest-puntos .swiper-pagination-bullet {
	width: var(--ca-dest-punto-tam);
	height: var(--ca-dest-punto-tam);
	margin: 0 calc(var(--ca-dest-punto-tam) * .37) !important;
	border-radius: 50%;
	background: var(--ca-dest-punto);
	opacity: 1;
	transform: scale(1);
	cursor: pointer;
	transition: transform .45s var(--ca-dest-curva), background-color .3s !important;
}
.ca-dest .ca-dest-puntos .swiper-pagination-bullet:hover { transform: scale(1.25); }
.ca-dest .ca-dest-puntos .swiper-pagination-bullet-active,
.ca-dest .ca-dest-puntos .swiper-pagination-bullet-active:hover { transform: scale(1.5); background: var(--ca-dest-punto-activo); }
.ca-dest .ca-dest-puntos .swiper-pagination-bullet:focus-visible { outline: 2px solid #1d1b19; outline-offset: 3px; }

/* Flechas (apagadas por defecto, como en el boceto). */
.ca-dest .ca-dest-flecha {
	position: absolute;
	top: 50%;
	z-index: 6;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-top: -23px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ca-dest-flecha-fondo);
	color: var(--ca-dest-flecha);
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
	transition: transform .2s ease, background-color .2s ease !important;
}
.ca-dest .ca-dest-flecha:hover { transform: scale(1.08); }
.ca-dest .ca-dest-flecha:focus-visible { outline: 2px solid var(--ca-dest-punto); outline-offset: 3px; }
.ca-dest .ca-dest-flecha svg { width: 20px; height: 20px; }
.ca-dest .ca-dest-ant { left: calc((100% - var(--ca-dest-ancho)) / 2 - 23px); }
.ca-dest .ca-dest-sig { right: calc((100% - var(--ca-dest-ancho)) / 2 - 23px); }

/* Antes de que arranque el JS (o si fallara): un solo banner, bien puesto. */
.ca-dest:not(.ca-dest-listo) .swiper-wrapper { display: flex; }
.ca-dest:not(.ca-dest-listo) .swiper-slide { flex: 0 0 100%; }
.ca-dest:not(.ca-dest-listo) .swiper-slide ~ .swiper-slide { visibility: hidden; }

@media (max-width: 767px) {
	.ca-dest {
		--ca-dest-ancho: 88%;
		--ca-dest-escala: .82;
		--ca-dest-corrida: 70;
		--ca-dest-borde: 3px;
		--ca-dest-radio: 12px;
		--ca-dest-punto-tam: 8px;
		--ca-dest-puntos-abajo: 12px;
		padding: 14px 0 40px;
	}
	.ca-dest .ca-dest-flecha { display: none; }
}