/* ===============================================================
   BASE / SIN JS  -> scroll horizontal nativo (accesible)
================================================================*/
.gm-hc__sticky {
	position: relative;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.gm-hc__track {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	height: 100vh;
	gap: var( --gm-hc-gap, 3vw );
	padding-left: var( --gm-hc-lead, 40vw );
	padding-right: var( --gm-hc-trail, 8vw );
	box-sizing: border-box;
}

/* --- Párrafo fijo arriba a la izquierda --- */
.gm-hc__intro {
	position: absolute;
	top: clamp( 20px, 4vh, 56px );
	left: clamp( 20px, 4vw, 64px );
	z-index: 5;
	max-width: min( 30vw, 443px );
	font-size: clamp( 1rem, 1.3vw, 1.35rem );
	line-height: 1.5;
	margin: 0;
}

/* --- Tarjeta --- */
.gm-hc__item {
	flex: 0 0 var( --gm-hc-item, 32vw );
	width: var( --gm-hc-item, 32vw );
	display: flex;
	flex-direction: column;
	margin: 0;
}
/* Escalonado: impares abajo, pares arriba */
.gm-hc__item:nth-child(odd)  { align-self: flex-end; }
.gm-hc__item:nth-child(even) { align-self: flex-start; }

/* Imagen: respeta su proporción (cuadrada o vertical), nunca horizontal */
.gm-hc__media {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	text-decoration: none;
	line-height: 0;
}
.gm-hc__img {
	display: block;
	width: 100%;
	height: auto;
	max-height: var( --gm-hc-maxh, 80vh );
	object-fit: cover;   /* si una vertical supera el alto máx., recorta (no deforma) */
}

/* Título centrado sobre la imagen (solo si hay título) */
.gm-hc__media--titled::after {
	/*content: "";
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, .28 );
	pointer-events: none;*/
}
.gm-hc__title {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	text-align: center;
	color: #fff;
	font-weight: 700;
	line-height: 1.1;
	font-size: clamp( 1.2rem, 2vw, 2.2rem );
	text-shadow: 0 2px 20px rgba( 0, 0, 0, .5 );
}

.gm-hc__caption {
	margin-top: .8rem;
	line-height: 1.4;
	font-size: clamp( .9rem, 1.1vw, 1.1rem );
}

/* ===============================================================
   EFECTO PIN (con JS)
================================================================*/
.gm-hc--ready { position: relative; } /* altura la fija el JS */

.gm-hc--ready .gm-hc__sticky {
	position: sticky;
	top: 125px;                 /* si tienes header sticky, usa su altura */
	height: calc(100vh - 125px);
	height: calc(100svh - 125px);
	overflow: hidden;
}
.gm-hc--ready .gm-hc__track {
	height: 100%;
	will-change: transform;
}