/* ==========================================================================
   bl-hscroll — Scroll horizontal por scroll vertical (blomon-base)
   Modelo sticky + progreso del scroll. El JS (bl-hscroll.js) crea el
   envoltorio y marca las clases de trabajo; estas reglas actúan sobre ellas.
   Sin JS, fuera de la media query o con "reducir movimiento" no hay clases
   de trabajo y las tarjetas se apilan en vertical como una sección normal.

   ACTIVACIÓN: clase `bl-hscroll` en el contenedor (Avanzado → Clases CSS de un
   contenedor clásico) o un widget HTML dentro con <div data-bl-hscroll="…">.
   MODIFICADORES: mobile / desktop / hint / slow / fast (ver bl-hscroll.js).

   MEDIDAS (cámbialas aquí):
     --bl-hscroll-card  ancho de cada tarjeta (con "asomo" de la siguiente)
     --bl-hscroll-gap   separación entre tarjetas
     --bl-hscroll-edge  margen en los extremos de la fila
     --bl-hscroll-top   distancia al borde superior del sticky (cabecera fija)
   ========================================================================== */

.bl-hscroll__wrap {
	position: relative;          /* el alto lo calcula el JS: 100vh + recorrido */
	--bl-hscroll-card: 78vw;
	--bl-hscroll-gap:  12px;
	--bl-hscroll-edge: 20px;
	--bl-hscroll-top:  0px;
}

/* Desde tablet, tarjetas más estrechas (varias en pantalla). */
@media (min-width: 768px) {
	.bl-hscroll__wrap { --bl-hscroll-card: 42vw; --bl-hscroll-gap: 24px; --bl-hscroll-edge: 40px; }
}

/* Escenario fijo mientras se recorre el wrap; recorta la fila. */
.bl-hscroll__sticky {
	position: -webkit-sticky;
	position: sticky;
	top: var(--bl-hscroll-top);
	height: 100vh;
	height: 100dvh;
	display: flex;
	align-items: center;
	overflow: hidden;
}

/* La fila de tarjetas: se desplaza con translate desde el JS.
   !important porque Elementor impone su propio flex (columna, anchos, gap). */
.bl-hscroll__row {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	gap: var(--bl-hscroll-gap) !important;
	padding: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	overflow: visible !important;  /* el recorte lo hace el sticky, no la fila */
	will-change: transform;
}

/* Cada tarjeta: ancho fijo, no se encoge. */
.bl-hscroll__panel {
	flex: 0 0 auto !important;
	width: var(--bl-hscroll-card) !important;
	min-width: var(--bl-hscroll-card) !important;
	max-width: none !important;
}

.bl-hscroll__panel.is-first { margin-left:  var(--bl-hscroll-edge) !important; }
.bl-hscroll__panel.is-last  { margin-right: var(--bl-hscroll-edge) !important; }

/* Chevrones que invitan a seguir bajando (modificador `hint`). */
.bl-hscroll__hint {
	position: absolute;
	bottom: 70px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	opacity: 1;
	pointer-events: none;
	transition: opacity 0.5s ease;
}

.bl-hscroll__hint.is-hidden { opacity: 0; }

.bl-hscroll__hint span {
	display: block;
	width: 10px;
	height: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	animation: bl-hscroll-chevron 2s infinite;
}

.bl-hscroll__hint span:nth-child(2) { animation-delay: 0.2s; }
.bl-hscroll__hint span:nth-child(3) { animation-delay: 0.4s; }

@keyframes bl-hscroll-chevron {
	0%   { opacity: 0; transform: rotate(45deg) translate(-4px, -4px); }
	50%  { opacity: 1; }
	100% { opacity: 0; transform: rotate(45deg) translate(4px, 4px); }
}

@media (prefers-reduced-motion: reduce) {
	.bl-hscroll__hint span { animation: none; }
}