/**
 * Caracool Churra — el bloque horizontal.
 *
 * EL BLOQUE ES EL CONTENEDOR
 * ─────────────────────────────────────────────────────────────────────
 * El widget va dentro de un contenedor de Elementor y toma de él tres
 * cosas, que Elementor deja en variables heredables:
 *
 *   --min-height      lo que mide el bloque clavado (sin ella, la pantalla)
 *   --padding-*       el aire alrededor de las tarjetas, por los cuatro lados
 *   el fondo          el del contenedor, que cubre también el recorrido
 *
 * Para que el relleno del contenedor sea el aire *dentro* del bloque y no
 * un margen fuera de él, el widget se sale del relleno con márgenes
 * negativos y lo vuelve a aplicar dentro del bloque clavado. Así el
 * contenedor se ajusta como cualquier otro —altura mínima, relleno,
 * fondo— y el bloque es exactamente lo que se ve en el editor.
 *
 * TRES ESTADOS DEL MISMO HTML
 * ─────────────────────────────────────────────────────────────────────
 *   .ch-hz                 recién servido, o sin script, o en móvil, o con
 *                          movimiento reducido: las tarjetas apiladas en
 *                          vertical y todo a la vista. Es el estado seguro.
 *   .ch-hz.ch-hz--listo    el script ha comprobado que toca moverse: el
 *                          bloque se clava y la pista avanza con el scroll.
 *   .ch-hz.ch-hz--editor   en la vista previa de Elementor: la pista
 *                          entera, con scroll lateral, sin animaciones.
 *
 * Quién mueve la pista lo decide el script: donde el navegador tiene
 * animaciones atadas al scroll (Chrome, Safari 26) la mueve el CSS de este
 * archivo; donde no (Firefox), el script escribe lo mismo a cada scroll
 * (.ch-hz--js). La geometría —cuánto recorrido, en qué tramo entra cada
 * tarjeta— la mide el script al cargar y la deja en variables.
 *
 * Los anchos van en cqw: centésimas del ancho del bloque, no de la
 * pantalla, así el widget vale en un contenedor a ancho completo y en uno
 * encajonado. Los colores no se escriben aquí: el texto lo pone el widget
 * desde las globales del Kit y todo lo demás sale de currentColor.
 */

/* ── Lo común ─────────────────────────────────────────────────────────── */

.ch-hz {
	position: relative;
	container-type: inline-size;
	view-timeline-name: --ch-hz;
	view-timeline-axis: block;
	/* Lo que mide el bloque y dónde se clava. Las dos vienen del contenedor
	   y del widget; aquí, por si no llegaran. */
	--ch-bloque: var(--min-height, 100svh);
	--ch-top: calc((100svh - var(--ch-bloque)) / 2);
	--ch-hueco: 2.5cqw;
}

.ch-hz__tarjeta {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	border-radius: 2px;
}

.ch-hz__tarjeta--texto {
	justify-content: center;
	overflow: visible;
	padding: 0 2cqw 0 2.4cqw;
}

/* Con dos clases a propósito: Elementor pone `height: auto` a toda imagen
   dentro de .elementor, y la foto tiene que llenar la tarjeta. */
.ch-hz .ch-hz__img {
	position: absolute;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ch-hz__enlace {
	position: absolute;
	inset: 0;
	display: block;
	color: inherit;
}

.ch-hz__etiqueta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 16px;
}

.ch-hz__etiqueta::before {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: 1px solid currentColor;
	opacity: .5;
}

.ch-hz__titulo {
	margin: 0 0 18px;
	color: inherit;
}

.ch-hz__parrafo {
	max-width: 34ch;
}

.ch-hz__parrafo p {
	margin: 0 0 .6em;
}

.ch-hz__parrafo p:last-child {
	margin-bottom: 0;
}

.ch-hz__boton {
	margin-top: 22px;
}

/* El rótulo opcional sobre una foto: abajo, sobre un velo */
.ch-hz__pie {
	position: relative;
	padding: 22px 22px 24px;
	background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
	color: #FAF5EC;
	pointer-events: none;
}

.ch-hz__pie p {
	margin: 0;
}

.ch-hz__rotulo {
	margin-bottom: 6px !important;
}

.ch-hz__linea {
	opacity: .85;
}

/* La raya de la casa, con su gota. --ch-raya va de 0 a 1: la anima el CSS
   o la escribe el script. En reposo la raya está entera y la gota no se ve. */
.ch-hz__tarjeta--raya {
	--ch-raya: 1;
}

.ch-hz__tarjeta--raya::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 1px;
	background: color-mix(in srgb, currentColor 18%, transparent);
	transform-origin: top;
	transform: scaleY(var(--ch-raya));
}

.ch-hz__tarjeta--raya::after {
	content: "";
	position: absolute;
	left: -3.5px;
	top: calc(var(--ch-raya) * 100%);
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-radius: 50%;
	background: currentColor;
	opacity: min(1, calc(var(--ch-raya) * 8), calc((1 - var(--ch-raya)) * 6));
}

.ch-hz__progreso,
.ch-hz__contador {
	display: none;
}

/* ── Apilado: el estado seguro ────────────────────────────────────────── */

.ch-hz__pista {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.ch-hz:not(.ch-hz--listo):not(.ch-hz--editor) .ch-hz__tarjeta--foto {
	min-height: 70svh;
}

.ch-hz:not(.ch-hz--listo):not(.ch-hz--editor) .ch-hz__tarjeta--texto {
	padding: 24px 0 24px 20px;
}

/* ── Horizontal: clavado y la pista avanzando ─────────────────────────── */

.ch-hz--listo,
.ch-hz--editor {
	--ch-top-real: max(0px, var(--ch-top));
	/* Se sale del relleno del contenedor… */
	margin: calc(-1 * var(--padding-top, 0px)) calc(-1 * var(--padding-right, 0px)) calc(-1 * var(--padding-bottom, 0px)) calc(-1 * var(--padding-left, 0px));
}

/* El envoltorio mide el bloque más el recorrido (lo pone el script):
   mientras se recorre, el bloque de dentro se queda clavado. La línea de
   tiempo del scroll se acota a la franja donde se clava
   (view-timeline-inset), así «contain» va justo de clavarse a soltarse y
   «entry» es el bloque acercándose a su sitio, mida lo que mida. */
.ch-hz--listo {
	height: calc(var(--ch-bloque) + var(--ch-recorrido, 0px));
	view-timeline-inset: var(--ch-top-real) max(0px, calc(100svh - var(--ch-top-real) - var(--ch-bloque)));
}

/* …y lo vuelve a poner dentro del bloque clavado. */
.ch-hz--listo .ch-hz__fijo,
.ch-hz--editor .ch-hz__fijo {
	position: sticky;
	top: var(--ch-top-real);
	box-sizing: border-box;
	height: var(--ch-bloque);
	padding: var(--padding-top, 0px) var(--padding-right, 0px) var(--padding-bottom, 0px) var(--padding-left, 0px);
	display: flex;
	align-items: stretch;
	overflow: hidden;
}

/* Sin clavar: el bloque mide lo que mide y no crece; la pista avanza
   mientras el bloque cruza la pantalla (tramo «cover», de asomar por abajo
   a salir por arriba). El script escribe los tramos de cada tarjeta ya en
   términos de cover. */
.ch-hz--listo.ch-hz--flujo {
	height: var(--ch-bloque);
	view-timeline-inset: auto;
}

.ch-hz--listo.ch-hz--flujo .ch-hz__fijo {
	position: relative;
	top: auto;
}

.ch-hz--listo .ch-hz__pista,
.ch-hz--editor .ch-hz__pista {
	flex-direction: row;
	gap: var(--ch-hueco);
	height: 100%;
	will-change: transform;
}

.ch-hz--listo .ch-hz__tarjeta,
.ch-hz--editor .ch-hz__tarjeta {
	flex: 0 0 auto;
	width: var(--ch-ancho, 36cqw);
	height: 100%;
}

/* La barra va en el relleno de abajo, a 22px de las tarjetas si hay sitio y
   pegada al borde si no; el contador, a su derecha y a su misma altura. */
.ch-hz--listo .ch-hz__progreso,
.ch-hz--editor .ch-hz__progreso {
	display: block;
	position: absolute;
	left: var(--padding-left, 0px);
	right: calc(var(--padding-right, 0px) + 72px);
	bottom: max(8px, calc(var(--padding-bottom, 0px) - 22px));
	height: 1px;
	background: color-mix(in srgb, currentColor 18%, transparent);
}

.ch-hz__progreso i {
	position: absolute;
	inset: 0;
	background: currentColor;
	transform-origin: left center;
	transform: scaleX(var(--ch-p, 0));
}

.ch-hz--listo .ch-hz__contador,
.ch-hz--editor .ch-hz__contador {
	display: block;
	position: absolute;
	right: var(--padding-right, 0px);
	bottom: max(8px, calc(var(--padding-bottom, 0px) - 22px));
	transform: translateY(50%);
	font-size: 12px;
	line-height: 1;
	letter-spacing: .1em;
	opacity: .6;
	font-variant-numeric: tabular-nums;
}

/* En el editor: la pista entera con scroll lateral, sin clavar, sin mover */
.ch-hz--editor {
	height: auto;
}

.ch-hz--editor .ch-hz__fijo {
	position: static;
	overflow-x: auto;
	overflow-y: hidden;
}

.ch-hz--editor .ch-hz__pista {
	flex: 0 0 auto;
}

/* ── Motor 1: el navegador ────────────────────────────────────────────── */

/* Hereda a propósito: la raya y la gota son pseudoelementos de la tarjeta,
   y sin herencia leerían el valor inicial en vez del animado. */
@property --ch-raya {
	syntax: "<number>";
	inherits: true;
	initial-value: 1;
}

@property --ch-p {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {

		@keyframes ch-hz-mueve { to { transform: translateX(var(--ch-viaje, 0px)); } }
		@keyframes ch-hz-progreso { from { --ch-p: 0; } to { --ch-p: 1; } }

		.ch-hz--listo:not(.ch-hz--js) .ch-hz__pista {
			animation: ch-hz-mueve linear both;
			animation-timeline: --ch-hz;
			animation-range: contain 0% contain 100%;
		}

		.ch-hz--listo:not(.ch-hz--js) {
			animation: ch-hz-progreso linear both;
			animation-timeline: --ch-hz;
			animation-range: contain 0% contain 100%;
		}

		.ch-hz--listo.ch-hz--flujo:not(.ch-hz--js) .ch-hz__pista,
		.ch-hz--listo.ch-hz--flujo:not(.ch-hz--js) {
			animation-range: cover 0% cover 100%;
		}

		/* Los destapes de las fotos, uno por tarjeta */
		@keyframes ch-hz-lado { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
		@keyframes ch-hz-lado-inv { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
		@keyframes ch-hz-arriba { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
		@keyframes ch-hz-zoom { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: none; } }

		/* En longhands a propósito: en el atajo `animation: none linear both`,
		   el `none` se lo queda animation-fill-mode (el atajo reparte antes
		   las palabras que valen para otras propiedades) y el `both` se
		   pierde. Sin relleno hacia atrás, la foto se ve entera antes de su
		   tramo y da un salto a cero cuando arranca. */
		.ch-hz--listo:not(.ch-hz--js) .ch-hz__tarjeta--foto .ch-hz__img {
			animation-name: none;
			animation-duration: auto;
			animation-timing-function: linear;
			animation-fill-mode: both;
			animation-timeline: --ch-hz;
			animation-range: var(--ch-rango-entra, contain 0% contain 10%);
		}

		.ch-hz--listo:not(.ch-hz--js) [data-destape="lado"] .ch-hz__img { animation-name: ch-hz-lado; }
		.ch-hz--listo:not(.ch-hz--js) [data-destape="lado-inv"] .ch-hz__img { animation-name: ch-hz-lado-inv; }
		.ch-hz--listo:not(.ch-hz--js) [data-destape="arriba"] .ch-hz__img { animation-name: ch-hz-arriba; }
		.ch-hz--listo:not(.ch-hz--js) [data-destape="zoom"] .ch-hz__img { animation-name: ch-hz-zoom; }

		/* La raya con la gota, antes del texto */
		@keyframes ch-hz-raya { from { --ch-raya: 0; } to { --ch-raya: 1; } }

		.ch-hz--listo:not(.ch-hz--js) .ch-hz__tarjeta--raya {
			animation: ch-hz-raya linear both;
			animation-timeline: --ch-hz;
			animation-range: var(--ch-rango-raya, contain 0% contain 6%);
		}

		/* Los textos aparecen con desenfoque y se van igual. Dos animaciones
		   sobre lo mismo: la de irse no rellena hacia atrás, así no pisa a
		   la de entrar mientras la tarjeta está a la vista. */
		@keyframes ch-hz-aparece { from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: blur(0); } }
		@keyframes ch-hz-apaga { from { opacity: 1; filter: blur(0); } to { opacity: 0; filter: blur(8px); } }

		.ch-hz--listo:not(.ch-hz--js) .ch-hz__anima {
			animation-name: ch-hz-aparece, ch-hz-apaga;
			animation-timing-function: linear;
			animation-fill-mode: both, forwards;
			animation-timeline: --ch-hz, --ch-hz;
			animation-range: var(--ch-rango-entra, contain 0% contain 8%), var(--ch-rango-sale, contain 100% contain 100%);
		}
	}
}

/* ── Motor 2: el script (Firefox) ─────────────────────────────────────── */
/* No hay reglas: el script escribe transform, clip-path, opacity, filter y
   --ch-raya en línea, con los mismos tramos. */

/* ── Móvil: siempre apilado, pase lo que pase ─────────────────────────── */

@media (max-width: 767px) {
	.ch-hz,
	.ch-hz.ch-hz--listo {
		height: auto !important;
		margin: 0;
	}

	.ch-hz.ch-hz--listo .ch-hz__fijo {
		position: static;
		height: auto;
		padding: 0;
		display: block;
		overflow: visible;
	}

	.ch-hz.ch-hz--listo .ch-hz__pista {
		flex-direction: column;
		height: auto;
		transform: none !important;
		animation: none !important;
	}

	.ch-hz.ch-hz--listo .ch-hz__tarjeta {
		width: 100%;
		height: auto;
		animation: none !important;
		--ch-raya: 1 !important;
	}

	.ch-hz.ch-hz--listo .ch-hz__tarjeta--foto {
		min-height: 70svh;
	}

	.ch-hz.ch-hz--listo .ch-hz__tarjeta--texto {
		padding: 24px 0 24px 20px;
	}

	.ch-hz.ch-hz--listo .ch-hz__img {
		animation: none !important;
		clip-path: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.ch-hz.ch-hz--listo .ch-hz__anima {
		animation: none !important;
		opacity: 1 !important;
		filter: none !important;
	}

	.ch-hz.ch-hz--listo .ch-hz__progreso,
	.ch-hz.ch-hz--listo .ch-hz__contador {
		display: none;
	}
}