/* CasaBlend Slideshow
 * Estructura y animaciones. Lo visual (colores, tipografías, espacios) está en las
 * clases globales de Bricks (categoría "Slideshow") para poder editarlo desde el editor.
 */

.cb-slideshow {
	/* Colores por defecto (sin clase de color en la diapositiva) */
	--cbs-bg: color-mix(in srgb, var(--palha, #EFE8D8) 55%, #fff);
	--cbs-ink: var(--negro, #1C1814);
	--cbs-title: var(--negro, #1C1814);

	--cbs-height: 600px;
	--cbs-speed: 700ms;
	--cbs-interval: 7s;
	--cbs-zoom: 1.15;
	--cbs-media-width: 60%;
	--cbs-media-mobile: 62vw;
	--cbs-text-max: 520px;
	--cbs-text-ease: cubic-bezier(0.26, 0.54, 0.32, 1);
	--cbs-image-ease: cubic-bezier(0.13, 0.55, 0.25, 1);

	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	isolation: isolate;
	outline: none;
	touch-action: pan-y;
}

.cb-slideshow:focus-visible {
	outline: 2px solid var(--cbs-ink);
	outline-offset: -2px;
}

/* Todas las diapositivas ocupan la misma celda: el alto lo da la más alta (o --cbs-height) */
.cb-slideshow__slides {
	display: grid;
	grid-template: 1fr / 1fr;
	height: var(--cbs-height);
}

.cb-slideshow .cb-slideshow__slides > * {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	width: 100%;
	height: 100%;
	min-height: 0;
	margin: 0 !important;
	overflow: hidden;
	background-color: var(--cbs-bg);
	visibility: hidden;
	opacity: 0;
	z-index: 0;
	transition: none;
}

.cb-slideshow__slides > .is-active {
	visibility: visible;
	opacity: 1;
	z-index: 2;
	transition: opacity var(--cbs-speed) ease;
}

/* La que sale queda debajo, quieta, mientras la nueva aparece encima */
.cb-slideshow__slides > .is-leaving {
	visibility: visible;
	opacity: 1;
	z-index: 1;
}

/* Antes de que arranque el script se ve la primera */
.cb-slideshow:not(.is-ready) .cb-slideshow__slides > :first-child {
	visibility: visible;
	opacity: 1;
	z-index: 2;
}

/* ---------- Texto ---------- */

.cb-slideshow .cbs-content {
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	min-width: 0;
	max-width: calc(100% - var(--cbs-media-width));
}

/* ---------- Foto ---------- */

.cb-slideshow .cbs-media {
	position: relative;
	flex: 0 1 var(--cbs-media-width);
	width: var(--cbs-media-width);
	min-width: 0;
	max-width: none;
	overflow: hidden;
	order: var(--cbs-media-order, 2);
	padding: 0;
}

.cb-slideshow .cbs-media > *,
.cb-slideshow .cbs-media img,
.cb-slideshow .cbs-media video {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	margin: 0;
	object-fit: cover;
}

.cb-slideshow .cbs-media img,
.cb-slideshow .cbs-media video {
	transform: scale(var(--cbs-zoom));
	transform-origin: center;
	backface-visibility: hidden;
	-webkit-user-drag: none;
	user-select: none;
	transition: none;
}

.cb-slideshow__slides > .is-active .cbs-media img,
.cb-slideshow__slides > .is-active .cbs-media video {
	transform: scale(1);
	transition: transform calc(var(--cbs-speed) + 200ms) var(--cbs-image-ease);
}

.cb-slideshow__slides > .is-leaving .cbs-media img,
.cb-slideshow__slides > .is-leaving .cbs-media video {
	transform: scale(1);
}

/* Lado de la foto: por defecto a la derecha (texto a la izquierda).
 * --cbs-push = 1 cuando el texto está a la izquierda: el bloque de texto se corre hacia la foto. */
.cb-slideshow .cb-slideshow__slides > * {
	--cbs-media-order: 2;
	--cbs-push: 1;
}

.cb-slideshow[data-image-side="left"] .cb-slideshow__slides > *,
.cb-slideshow[data-image-side="alternate"] .cb-slideshow__slides > :nth-child(even) {
	--cbs-media-order: -1;
	--cbs-push: 0;
}

/* La clase de cada diapositiva manda sobre el ajuste general */
.cb-slideshow .cb-slideshow__slides > .cbs-imagen-izquierda.cbs-imagen-izquierda.cbs-imagen-izquierda {
	--cbs-media-order: -1;
	--cbs-push: 0;
}

.cb-slideshow .cb-slideshow__slides > .cbs-imagen-derecha.cbs-imagen-derecha.cbs-imagen-derecha {
	--cbs-media-order: 2;
	--cbs-push: 1;
}

/* El bloque de texto (hasta --cbs-text-max de ancho) queda siempre junto a la foto,
 * con la misma separación a los dos lados, aunque la pantalla sea muy ancha. */
.cb-slideshow .cbs-content > * {
	margin-left: calc(max(0px, 100% - var(--cbs-text-max)) * var(--cbs-push, 1));
	/* ajuste fino que calcula el script: lleva el final real de las líneas hasta el borde */
	translate: calc(var(--cbs-nudge, 0px) * var(--cbs-push, 1)) 0;
}

/* Mismo ancho máximo con el texto a la izquierda o a la derecha
 * (con :where para que las clases de Bricks, como el ancho de cbs-text, sigan mandando) */
.cb-slideshow :where(.cbs-content > *) {
	max-width: var(--cbs-text-max);
}

/* ---------- Textos escalonados ---------- */

.cb-slideshow[data-text-reveal="true"]:not(.is-builder) .cbs-content > * {
	opacity: 0;
	transform: translateY(10px);
	transition: none;
}

.cb-slideshow[data-text-reveal="true"]:not(.is-builder) .cb-slideshow__slides > .is-active .cbs-content > * {
	opacity: 1;
	transform: none;
	transition:
		opacity 0.4s ease calc(var(--cbs-reveal-base, 0ms) + var(--cbs-i, 0) * 200ms),
		transform 0.6s var(--cbs-text-ease) calc(var(--cbs-reveal-base, 0ms) + var(--cbs-i, 0) * 200ms);
}

/* Los botones solo aparecen (sin subir), más lento, como en el original */
.cb-slideshow[data-text-reveal="true"]:not(.is-builder) .cbs-content > .brxe-button {
	transform: none;
}

.cb-slideshow[data-text-reveal="true"]:not(.is-builder) .cb-slideshow__slides > .is-active .cbs-content > .brxe-button {
	transition: opacity 1s ease calc(var(--cbs-reveal-base, 0ms) + var(--cbs-i, 0) * 200ms);
}

/* Al salir, el texto se va al instante */
.cb-slideshow[data-text-reveal="true"] .cb-slideshow__slides > .is-leaving .cbs-content > * {
	opacity: 0;
	transition: none;
}

/* Si el script no llega a cargar, igual se ven los textos */
.cb-slideshow[data-text-reveal="true"]:not(.is-ready):not(.is-builder) .cb-slideshow__slides > :first-child .cbs-content > * {
	animation: cbs-failsafe 0.4s ease 3s forwards;
}

@keyframes cbs-failsafe {
	to {
		opacity: 1;
		transform: none;
	}
}

/* ---------- Indicadores ---------- */

.cb-slideshow__nav {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 20px;
	z-index: 5;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	pointer-events: none;
	color: var(--cbs-active-ink, var(--cbs-ink));
	transition: color var(--cbs-speed) ease;
}

.cb-slideshow__nav[hidden] {
	display: none;
}

.cb-slideshow__nav > * {
	pointer-events: auto;
}

.cb-slideshow__dot {
	appearance: none;
	display: block;
	width: 6px;
	height: 6px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 100%;
	background-color: currentColor;
	opacity: 0.2;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.cb-slideshow__dot::before {
	/* Área de toque más grande que el punto */
	content: "";
	position: absolute;
	width: 28px;
	height: 28px;
	transform: translate(-11px, -11px);
}

.cb-slideshow__dot {
	position: relative;
}

.cb-slideshow__dot:hover {
	opacity: 0.6;
}

.cb-slideshow__dot.is-active {
	width: 9px;
	height: 9px;
	opacity: 1;
}

/* Barras con progreso */
.cb-slideshow--nav-bars .cb-slideshow__nav {
	bottom: 0;
	gap: 0;
	height: 6px;
}

.cb-slideshow__bar {
	appearance: none;
	position: relative;
	display: block;
	width: 120px;
	height: 6px;
	padding: 0;
	margin: 0 5px;
	border: 0;
	border-radius: 0;
	background: none;
	overflow: hidden;
	cursor: pointer;
}

.cb-slideshow__bar::before,
.cb-slideshow__bar::after {
	content: "";
	position: absolute;
	inset: 0;
}

.cb-slideshow__bar::before {
	background-color: #000;
	opacity: 0.1;
}

.cb-slideshow__bar:hover::before {
	opacity: 0.2;
}

.cb-slideshow__bar::after {
	background-color: currentColor;
	transform: translateX(-100%);
}

.cb-slideshow__bar.is-active::after {
	animation: cbs-bar var(--cbs-interval) linear forwards;
}

.cb-slideshow:not(.is-autoplay) .cb-slideshow__bar.is-active::after {
	animation: none;
	transform: none;
}

.cb-slideshow.is-paused .cb-slideshow__bar.is-active::after {
	animation-play-state: paused;
}

@keyframes cbs-bar {
	from { transform: translateX(-100%); }
	to { transform: translateX(0); }
}

/* Flechas */
.cb-slideshow__arrow {
	appearance: none;
	position: absolute;
	bottom: 20px;
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	color: var(--negro, #1C1814);
	background-color: #fff;
	box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
	cursor: pointer;
	transition: transform 0.2s ease;
}

.cb-slideshow__arrow:hover {
	transform: scale(1.12);
}

.cb-slideshow__arrow:active {
	transform: scale(1);
}

.cb-slideshow__arrow svg {
	width: 12px;
	height: 12px;
	fill: currentColor;
}

.cb-slideshow__arrow--prev {
	right: 90px;
}

.cb-slideshow__arrow--next {
	right: 40px;
}

.cb-slideshow--nav-bars .cb-slideshow__arrow {
	bottom: 26px;
}

/* ---------- Celular ---------- */

@media (max-width: 767px) {
	/* En celular se adapta al contenido, salvo que se elija un alto propio */
	.cb-slideshow__slides {
		height: var(--cbs-height-mobile, auto);
	}

	.cb-slideshow .cb-slideshow__slides > * {
		flex-direction: column;
	}

	.cb-slideshow .cbs-content {
		flex: 0 0 auto;
		max-width: none;
		order: 2;
	}

	.cb-slideshow .cbs-content > * {
		margin-left: 0;
		translate: none;
	}

	/* En celular la foto siempre va arriba */
	.cb-slideshow .cbs-media,
	.cb-slideshow[data-image-side] .cbs-media,
	.cb-slideshow .cb-slideshow__slides > [class] .cbs-media {
		flex: 1 0 auto;
		width: 100%;
		min-height: var(--cbs-media-mobile);
		order: 1;
	}

	.cb-slideshow__bar {
		width: 45px;
	}

	.cb-slideshow__arrow--prev {
		right: 60px;
	}

	.cb-slideshow__arrow--next {
		right: 16px;
	}

	.cb-slideshow--nav-dots .cb-slideshow__nav,
	.cb-slideshow.is-builder .cb-slideshow__nav {
		bottom: 12px;
	}
}

/* ---------- Ken Burns: zoom lento y continuo mientras la foto está en pantalla ----------
 * La animación sigue en la diapositiva que sale (.is-leaving) para que no salte durante el fundido.
 * Las diapositivas pares se mueven hacia el lado contrario para que no sea siempre igual. */
.cb-slideshow--kenburns {
	--cbs-kb-time: calc(var(--cbs-interval) + var(--cbs-speed) * 2);
}

.cb-slideshow--kenburns .cbs-media img,
.cb-slideshow--kenburns .cbs-media video,
.cb-slideshow--kenburns .cb-slideshow__slides > .is-active .cbs-media img,
.cb-slideshow--kenburns .cb-slideshow__slides > .is-active .cbs-media video {
	transform: none;
	transition: none;
	will-change: transform;
}

.cb-slideshow--kenburns .cb-slideshow__slides > .is-active .cbs-media img,
.cb-slideshow--kenburns .cb-slideshow__slides > .is-leaving .cbs-media img,
.cb-slideshow--kenburns .cb-slideshow__slides > .is-active .cbs-media video,
.cb-slideshow--kenburns .cb-slideshow__slides > .is-leaving .cbs-media video {
	animation: cbs-kenburns-a var(--cbs-kb-time) linear forwards;
}

.cb-slideshow--kenburns .cb-slideshow__slides > :nth-child(even).is-active .cbs-media img,
.cb-slideshow--kenburns .cb-slideshow__slides > :nth-child(even).is-leaving .cbs-media img,
.cb-slideshow--kenburns .cb-slideshow__slides > :nth-child(even).is-active .cbs-media video,
.cb-slideshow--kenburns .cb-slideshow__slides > :nth-child(even).is-leaving .cbs-media video {
	animation-name: cbs-kenburns-b;
}

.cb-slideshow--kenburns.is-paused .cb-slideshow__slides > .is-active .cbs-media img,
.cb-slideshow--kenburns.is-paused .cb-slideshow__slides > .is-active .cbs-media video {
	animation-play-state: paused;
}

@keyframes cbs-kenburns-a {
	from { transform: scale(1) translate3d(0, 0, 0); }
	to { transform: scale(var(--cbs-kb)) translate3d(-1.5%, -1%, 0); }
}

@keyframes cbs-kenburns-b {
	from { transform: scale(1) translate3d(0, 0, 0); }
	to { transform: scale(var(--cbs-kb)) translate3d(1.5%, 1%, 0); }
}

/* ---------- Editor de Bricks ---------- */

.cb-slideshow.is-builder .cb-slideshow__slides > .is-active {
	transition: none;
}

.cb-slideshow.is-builder .cbs-media img,
.cb-slideshow.is-builder .cbs-media video {
	transform: none !important;
	transition: none;
	animation: none !important;
}

/* ---------- Menos movimiento ---------- */

@media (prefers-reduced-motion: reduce) {
	.cb-slideshow__slides > .is-active,
	.cb-slideshow__slides > .is-active .cbs-media img,
	.cb-slideshow[data-text-reveal="true"]:not(.is-builder) .cb-slideshow__slides > .is-active .cbs-content > * {
		transition: none !important;
		transform: none !important;
	}

	.cb-slideshow .cbs-media img,
	.cb-slideshow .cbs-media video {
		transform: none !important;
		animation: none !important;
	}

	.cb-slideshow__bar.is-active::after {
		animation: none;
		transform: none;
	}
}