/* Carrusel móvil con desplazamiento (scroll-snap) reutilizable.
 * Uso: contenedor con .hmo-snap + data-hmo-snap, y un .hmo-snap-dots hermano.
 * Variables: --hmo-snap-w (ancho de cada elemento), --hmo-snap-gap, --hmo-snap-edge (margen lateral). */
.hmo-snap-dots { display: none; }

@media (max-width: 768px) {
	.hmo-snap {
		display: flex;
		gap: var(--hmo-snap-gap, 16px);
		margin-left: calc(var(--hmo-snap-edge, 16px) * -1);
		margin-right: calc(var(--hmo-snap-edge, 16px) * -1);
		overflow-x: auto;
		padding: 0 var(--hmo-snap-edge, 16px);
		scroll-padding: 0 var(--hmo-snap-edge, 16px);
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.hmo-snap::-webkit-scrollbar { display: none; }
	.hmo-snap > * { flex: 0 0 var(--hmo-snap-w, 260px); min-width: 0; scroll-snap-align: start; }

	.hmo-snap-dots { display: flex; gap: 8px; margin-top: 32px; }
	.hmo-snap-dots .hmo-snap-dot { appearance: none; background: #E6E6E6; border: 0; border-radius: 0; cursor: pointer; flex: 1 1 0; font-size: 0; height: 3px; line-height: 0; min-height: 0; padding: 0; transition: background-color .2s ease; }
	.hmo-snap-dots .hmo-snap-dot.is-active { background: var(--hmo-orange); }
}