/* ==========================================================================
   bl-reel — Carrete vertical: las piezas pasan de UNA EN UNA (blomon-base)

   La sección se queda fija ocupando la pantalla y, al seguir bajando, cada
   pieza sube hasta el centro, se DETIENE un momento y sale por arriba
   mientras la siguiente entra desde abajo. No se acumulan: solo hay una a la
   vista. Al pasar la última, el scroll continúa con normalidad.

   Estructura en Elementor (contenedor de ancho completo, sin relleno):
     Contenedor            <- clase: bl-reel   (+ modificadores)
       ├─ Contenedor       <- pieza 1
       ├─ Contenedor       <- pieza 2
       └─ Contenedor       <- pieza 3 ...
   (Si el contenedor es "boxed", Elementor mete un .e-con-inner por medio;
    el JS lo detecta y lo usa como pista. No hay que hacer nada.)

   Modificadores (en el mismo contenedor padre, o como palabras del atributo
   data-bl-reel="..."):
     hold-long / hold-short  -> pausa más larga / más corta en cada pieza
     slow / fast             -> más / menos scroll por pieza
     mobile / desktop        -> solo en móvil (≤767px) / solo desde tablet

   MEDIDAS:
     --bl-reel-h        alto del escenario y de cada pieza (100vh por defecto)
     --bl-reel-top      offset superior si hay cabecera fija (0 por defecto)
     --bl-reel-justify  alineación vertical del contenido de cada pieza (center)

   Estas reglas actúan sobre las clases de trabajo que marca el JS
   (bl-reel--on / __wrap / __sticky / __track / __panel). Sin JS, fuera de la
   media query o con "reducir movimiento" no se marcan, y las piezas se
   muestran apiladas como una sección normal. Los !important son necesarios
   porque Elementor impone su propio flex (dirección, alturas, gap).
   ========================================================================== */

.bl-reel__wrap {
	position: relative;        /* el alto lo calcula el JS: 100vh + recorrido */
	--bl-reel-h: 100vh;
	--bl-reel-top: 0px;

	/* Si el carrete vive dentro de un contenedor FLEX (lo normal en Elementor,
	   y más aún anidado dentro de bl-rise), sus hijos traen flex-shrink:1 y el
	   padre encogería este envoltorio: el alto que calcula el JS se perdería y
	   el sticky se quedaría sin recorrido. flex:0 0 auto lo impide.
	   OJO: aquí NUNCA se pone `height`, ni siquiera auto: el alto va inline
	   desde el JS y una regla !important lo pisaría. */
	flex: 0 0 auto !important;
	align-self: stretch;
	width: 100%;
}

@supports (height: 100dvh) {
	.bl-reel__wrap { --bl-reel-h: 100dvh; }
}

/* Escenario fijo mientras se recorre el wrap; recorta lo que entra y sale. */
.bl-reel__sticky {
	position: -webkit-sticky;
	position: sticky;
	top: var(--bl-reel-top, 0px);
	height: var(--bl-reel-h, 100vh);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

/* La columna de piezas: la desplaza el JS con translate3d. */
.bl-reel__track {
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	gap: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	overflow: visible !important;   /* el recorte lo hace el escenario */
	will-change: transform;
}

/* Cada pieza ocupa exactamente el alto del escenario: así solo se ve una. */
.bl-reel__panel {
	flex: 0 0 var(--bl-reel-h, 100vh) !important;
	height: var(--bl-reel-h, 100vh) !important;
	min-height: 0 !important;
	width: 100% !important;
	max-width: 100% !important;

	/* Contenido CENTRADO en vertical dentro del escenario.
	   Hay que forzar display:flex + columna: `justify-content` por sí solo no
	   centra nada si la pieza no es un flex en columna (un "bloque div" de
	   Elementor puede no serlo), y el contenido se quedaría pegado arriba.
	   La pieza pasa a apilar sus hijos; el diseño interno de cada hijo (una
	   fila con el número y el título, por ejemplo) no se toca.
	   Escapatorias: --bl-reel-dir (row) y --bl-reel-justify (flex-start/end). */
	display: flex !important;
	flex-direction: var(--bl-reel-dir, column) !important;
	justify-content: var(--bl-reel-justify, center) !important;
}