/* ==========================================================================
   bl-hscroll — Scroll horizontal por clases (blomon-base)

   Pon la clase `bl-hscroll` en un CONTENEDOR; sus hijos directos pasan a ser
   los paneles. La sección se fija (pin) y, mientras haces scroll vertical,
   los paneles se desplazan en horizontal. El JS vive en bl-hscroll.js.

   Estructura en Elementor (contenedor de ancho completo, mejor sin relleno):
     Contenedor            <- clase: bl-hscroll   (+ modificadores)
       ├─ Contenedor       <- panel 1
       ├─ Contenedor       <- panel 2
       └─ Contenedor       <- panel 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):
     bl-hscroll-snap     -> se detiene en cada panel
     bl-hscroll-slow     -> hace falta más scroll por panel (más calmado)
     bl-hscroll-fast     -> menos scroll por panel (más ágil)
     bl-hscroll-mobile   -> SOLO en móvil (≤ 767px)
     bl-hscroll-desktop  -> SOLO desde tablet (≥ 768px)

   Altura del escenario: variable --bl-hscroll-h (100vh por defecto).

   Estas reglas actúan sobre las clases de trabajo que marca el JS
   (bl-hscroll--on / __track / __panel). Sin JS, fuera de la media query o
   con "reducir movimiento" no se marcan, y los paneles se apilan en vertical
   como una sección normal. Los !important son necesarios porque Elementor
   impone su propio flex (columna, anchos) a los contenedores.
   ========================================================================== */

/* El contenedor al que pusiste la clase: recorta lo que sobresale. */
.bl-hscroll--on {
	overflow: hidden !important;
}

/* La pista: fila sin salto, a la altura del escenario. */
.bl-hscroll__track {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	gap: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	height: var(--bl-hscroll-h, 100vh);
	height: var(--bl-hscroll-h, 100dvh);
	overflow: hidden !important;
}

/* Cada panel = todo el ancho de la pista. */
.bl-hscroll__panel {
	flex: 0 0 100% !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0;
	height: 100%;
	will-change: transform;
}