/* ==========================================================================
   bl-swipe — Carrusel deslizable (blomon-base)

   Las tarjetas se ponen en fila y se pasan con el dedo (o arrastrando en
   escritorio), dejando asomar la siguiente por la derecha. NO está ligado al
   scroll vertical: usa el scroll nativo del navegador (inercia incluida) y
   puntos de anclaje (`scroll-snap`), así cada tarjeta queda encuadrada.

   DÓNDE SE ACTIVA: por defecto SOLO en móvil (≤767px). Con `bl-swipe-all` en
   todos los tamaños; con `bl-swipe-desktop` solo desde tablet.

   IMPORTANTE: todas las reglas cuelgan de `[data-on]`, un atributo que pone y
   quita el JS según la consulta de medios elegida. Fuera de ella no se aplica
   NADA y la rejilla de Elementor queda intacta. (Antes había reglas fuera de
   la media query y rompían el diseño de escritorio.)

   Estructura en Elementor:
     Contenedor            <- clase: bl-swipe   (+ modificadores)
       ├─ Contenedor       <- tarjeta 1
       ├─ Contenedor       <- tarjeta 2
       └─ Contenedor       <- tarjeta 3 ...
   (También vale el marcador <div data-bl-swipe> en un widget HTML dentro.)

   Modificadores:
     bl-swipe-all      -> activo en TODOS los tamaños
     bl-swipe-desktop  -> activo solo desde tablet (≥768px)
     bl-swipe-center   -> la tarjeta se ancla centrada (asoma por ambos lados)
     bl-swipe-peek-sm  -> tarjeta más ancha: asoma menos de la siguiente
     bl-swipe-peek-lg  -> tarjeta más estrecha: asoma más

   MEDIDAS:
     --bl-swipe-card  ancho de la tarjeta (78vw móvil / 34vw desde tablet)
     --bl-swipe-gap   separación entre tarjetas
     --bl-swipe-edge  margen en los extremos del raíl
   ========================================================================== */

.bl-swipe__track {
	--bl-swipe-card: 78vw;
	--bl-swipe-gap: 12px;
	--bl-swipe-edge: 20px;
}

/* Desde tablet, tarjetas más estrechas: caben varias y el raíl tiene sentido. */
@media (min-width: 768px) {
	.bl-swipe__track {
		--bl-swipe-card: 34vw;
		--bl-swipe-gap: 24px;
		--bl-swipe-edge: 40px;
	}
}

.bl-swipe-peek-sm .bl-swipe__track,
.bl-swipe-peek-sm.bl-swipe__track { --bl-swipe-card: 88vw; }

.bl-swipe-peek-lg .bl-swipe__track,
.bl-swipe-peek-lg.bl-swipe__track { --bl-swipe-card: 68vw; }

@media (min-width: 768px) {
	.bl-swipe-peek-sm .bl-swipe__track,
	.bl-swipe-peek-sm.bl-swipe__track { --bl-swipe-card: 44vw; }

	.bl-swipe-peek-lg .bl-swipe__track,
	.bl-swipe-peek-lg.bl-swipe__track { --bl-swipe-card: 26vw; }
}

/* El marcador (widget HTML) nunca cuenta ni se ve. */
[data-bl-swipe-marker] { display: none !important; }

/* --------------------------------------------------------------------------
   EL CARRUSEL. Todo cuelga de [data-on]: si el JS no lo pone, no se aplica
   nada. Los !important son necesarios porque Elementor impone su propio flex
   (dirección, envoltura, anchos) a los contenedores.
   -------------------------------------------------------------------------- */
.bl-swipe__track[data-on] {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	gap: var(--bl-swipe-gap) !important;
	width: 100% !important;
	max-width: 100% !important;

	/* Deslizamiento nativo con anclaje */
	overflow-x: auto !important;
	overflow-y: hidden !important;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;

	/* Aire en los extremos, respetado también al anclar */
	padding-inline: var(--bl-swipe-edge) !important;
	scroll-padding-inline: var(--bl-swipe-edge);

	/* Sin barra de scroll a la vista */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.bl-swipe__track[data-on]::-webkit-scrollbar { display: none; }

/* Cada tarjeta: ancho fijo, no se encoge, y se ancla al deslizar. */
.bl-swipe__track[data-on] > .bl-swipe__card {
	flex: 0 0 var(--bl-swipe-card) !important;
	width: var(--bl-swipe-card) !important;
	min-width: 0 !important;
	max-width: none !important;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

/* Variante centrada: asoma por los dos lados. */
.bl-swipe-center .bl-swipe__track[data-on] > .bl-swipe__card,
.bl-swipe-center.bl-swipe__track[data-on] > .bl-swipe__card {
	scroll-snap-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.bl-swipe__track[data-on] { scroll-behavior: auto; }
}