/**
 * Scroll Video Background for Elementor — estilos base.
 *
 * Todas las clases usan el prefijo "sve-".
 */

.sve-scroll-video {
	position: relative;
	width: 100%;
	min-height: 100vh;
	overflow: hidden;
}

/* Modo sticky: el wrapper exterior define el rango de scroll.
   Altura = distancia de scroll del video + una pantalla visible, de modo
   que la fase "pinned" (y por tanto el video) dura justo esa distancia. */
.sve-scroll-video--sticky {
	min-height: 0;
	height: calc(var(--sve-scroll-distance, 300vh) + 100vh);
}

/* Escenario que contiene el video y el overlay. */
.sve-scroll-video__sticky {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.sve-scroll-video--sticky .sve-scroll-video__sticky {
	position: -webkit-sticky;
	position: sticky;
	inset: auto;
	top: 0;
	width: 100%;
	height: 100vh;
}

/* Video de fondo. */
.sve-scroll-video__video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Canvas de fondo (modo secuencia de frames). */
.sve-scroll-video__canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

/* Overlay opcional como pseudo-elemento; no captura el puntero. */
.sve-scroll-video__sticky::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-color: transparent;
}

/* Estado vacío: placeholder mostrado en el editor cuando no hay video. */
.sve-scroll-video--empty {
	min-height: 0;
}

.sve-scroll-video__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 240px;
	padding: 40px 20px;
	text-align: center;
	font-size: 14px;
	line-height: 1.5;
	color: #555;
	background-color: #f1f1f1;
	border: 2px dashed #c3c4c7;
	border-radius: 4px;
}

.sve-scroll-video__placeholder i {
	font-size: 40px;
	line-height: 1;
}

/* -------------------------------------------------------------------- *
 * Fondo de video scroll-driven inyectado en contenedores / secciones.   *
 * El JavaScript también aplica estos estilos en línea; estas reglas     *
 * actúan como respaldo.                                                 *
 * -------------------------------------------------------------------- */

/* Capa de fondo: cubre toda la altura de la sección anfitriona. Al ser
   absolute queda CONTENIDA en la sección y no se desborda a la página. */
.sve-bg-layer {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Escenario fijado dentro de la sección: se mantiene pegado al viewport
   mientras la sección recorre su altura, pero contenido en sus límites. */
.sve-bg-stage {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

.sve-bg-video,
.sve-bg-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.sve-bg-video {
	object-fit: cover;
}

.sve-bg-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}