/**
 * Caracool Motion — Scroll
 * Solo estructura: nada de colores de marca ni tipografías. Lo que necesita
 * color lo toma de las variables globales del Kit de Elementor, así que el
 * mismo archivo sirve para cualquier cliente sin tocar una línea.
 */

/* --- cortina ------------------------------------------------------------ */
.cm-recorta { position: relative; overflow: hidden; }

.cm-capa {
	position: absolute;
	inset: -1px;
	z-index: 6;
	pointer-events: none;
	will-change: transform;
}

/* Contenido por encima de la cortina («entra después»). */
.cm-recorta > .cm-encima { position: relative; z-index: 7; }

/* --- la foto crece ------------------------------------------------------ */
.cm-fijo {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cm-marco {
	position: relative;
	z-index: 1;
	overflow: hidden;
	will-change: width, height;
	flex: none;
}

.cm-marco img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cm-velo {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: var(--cm-velo-color, currentColor);
	opacity: 0;
	pointer-events: none;
}

.cm-rotulo {
	position: absolute;
	z-index: 3;
	opacity: 0;
	pointer-events: none;
}

/* Widgets sueltos: caja centrada de ancho fijo. */
.cm-rotulo-caja {
	inset: auto;
	max-width: 42rem;
	padding: 0 24px;
	text-align: center;
}

/* El contenedor del contenido es el rótulo: ocupa la pantalla entera sobre
   la foto y todo lo demás (padding, justificar, alinear, ancho de la
   columna interior) se decide en Elementor. */
.cm-fijo > .cm-rotulo-propio {
	position: absolute;
	inset: 0;
	width: 100%;
	max-width: none;
	min-height: 0;
}

.cm-progreso {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 8;
	height: var(--cm-barra-grosor, 2px);
	background: rgba(127, 127, 127, .22);
}

/* El avance lo escribe el JavaScript como un número de 0 a 1 y lo reparte el
   CSS: así la línea puede ser ancho o alto según el tamaño de pantalla, y
   girar el teléfono la recoloca sola sin recargar. */
.cm-progreso > i {
	display: block;
	height: 100%;
	width: calc(var(--cm-avance, 0) * 100%);
	background: var(--cm-barra-color, var(--e-global-color-accent, currentColor));
}

/* --- navegación por puntos ---------------------------------------------- */
.cm-puntos {
	position: fixed;
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 80;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.cm-puntos button {
	width: 9px;
	height: 9px;
	padding: 0;
	border-radius: 50%;
	cursor: pointer;
	background: transparent;
	border: 1px solid var(--cm-puntos-color, var(--e-global-color-accent, currentColor));
	opacity: .5;
	transition: background-color .3s, border-color .3s, opacity .3s, transform .3s;
}

.cm-puntos button.cm-activo {
	background: var(--cm-puntos-color, var(--e-global-color-accent, currentColor));
	border-color: var(--cm-puntos-color, var(--e-global-color-accent, currentColor));
	opacity: 1;
	transform: scale(1.35);
}

.cm-puntos .cm-flecha {
	width: auto;
	height: auto;
	padding: 6px;
	border: 0;
	border-radius: 0;
	background: none;
	line-height: 0;
	opacity: .45;
	color: var(--cm-puntos-color, var(--e-global-color-accent, currentColor));
}

.cm-puntos .cm-flecha:hover { opacity: 1; }

.cm-punto-env { position: relative; display: flex; align-items: center; }

.cm-etiqueta {
	position: absolute;
	right: 20px;
	white-space: nowrap;
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--e-global-color-secondary, currentColor);
	opacity: 0;
	transform: translateX(6px);
	transition: opacity .25s, transform .25s;
	pointer-events: none;
}

.cm-punto-env:hover .cm-etiqueta { opacity: 1; transform: translateX(0); }

.cm-puntos button:focus-visible {
	outline: 2px solid var(--e-global-color-secondary, currentColor);
	outline-offset: 4px;
}

/* --- móvil y accesibilidad ---------------------------------------------- */
@media (max-width: 860px) {
	.cm-puntos { display: none; }
	.cm-fijo { height: 100svh; }

	/* En un móvil lo que se recorre es alto, no ancho: la línea de avance va
	   de pie, pegada al borde izquierdo de la foto. Abajo acababa peleándose
	   con la barra del navegador, que aparece y desaparece, y en Safari se
	   quedaba directamente fuera de lo visible. */
	.cm-progreso {
		top: 0;
		bottom: 0;
		left: 0;
		right: auto;
		width: var(--cm-barra-grosor, 2px);
		height: auto;
	}

	.cm-progreso > i {
		width: 100%;
		height: calc(var(--cm-avance, 0) * 100%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cm-capa { display: none; }
	.cm-velo { display: none; }
	.cm-rotulo { position: static; opacity: 1; }
	.cm-fijo { position: static; height: auto; }

	/* «La foto crece» necesita una sección de varias pantallas para tener
	   recorrido de scroll. Sin animación esa altura se queda como un hueco
	   enorme debajo del contenido, así que la sección vuelve a medir lo que
	   mide lo que hay dentro. Va con !important porque la altura la escribe
	   Elementor en la variable --min-height con más especificidad. */
	[data-cm-efecto="crece"] {
		--min-height: 0px !important;
		min-height: 0 !important;
		height: auto !important;
	}

	/* Y la foto, que sin animación no la dimensiona nadie, ocupa el ancho
	   del bloque en vez de quedarse al tamaño que tuviera el marco. */
	[data-cm-efecto="crece"] .elementor-widget-image img {
		width: 100%;
		height: auto;
	}
}