/* RESET */
		* { margin:0; padding:0; box-sizing:border-box; }
		html, body { height:100%; overflow:hidden; background:#000; }

		/* VIEWPORT */
		#viewport {
		  position: fixed;
		  inset: 0;
		  overflow: hidden;
		  touch-action: pan-x pan-y; /* Permite scroll horizontal nativo y cede el control vertical a tu JS */
		}

		/* SLIDE (contenedor lógico del slider) */
		.slide {
		  position: absolute;
		  height: 100svh;
		  width: 100%;
		  overflow: hidden;

		  /* centra el frame interno */
		  display: flex;
		  justify-content: center;
		}

		/* FRAME vertical */
		.slide-inner {
		  width: 100%;
		  height: 100%;
		}

		/* DESKTOP: mantener proporción celular */
		@media (min-width: 768px) {
		  .slide-inner {
			aspect-ratio: 9 / 16;
			height: 100%;
			max-width: 420px;
		  }
		}

/* IMAGEN PRINCIPAL */
.slide-inner img {
  width: 100%;
  height: 100%;
  object-fit: contain; 
  object-position: top; /* <-- AGREGA ESTA LÍNEA */
  pointer-events: auto;
  user-select: none;
  filter: brightness(0.5);
}

		/* MENU */
		#menu {
		position: absolute;
		top: 0;
		left: 0;
		padding: 1rem;
		z-index: 10;
		pointer-events: auto;
	}

	.slide-inner button {
		position: relative;
		z-index: 20;
		pointer-events: auto !important;
	}



/* ESTILOS DEL CARRUSEL HORIZONTAL NATIVO */
.h-carousel {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; /* Oculta barra en Firefox */
    -ms-overflow-style: none; /* Oculta barra en IE/Edge */
}

/* Oculta la barra de desplazamiento en Chrome/Safari/Edge */
.h-carousel::-webkit-scrollbar {
    display: none;
}

.h-carousel-item {
    flex: 0 0 100%; /* Cada imagen ocupa el 100% del ancho */
    height: 100%;
    scroll-snap-align: center; 
	scroll-snap-stop: always;
    position: relative;
}

/* IMAGEN DEL CARRUSEL HORIZONTAL */
.h-carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: contain; 
  object-position: top; /* <-- AGREGA ESTA LÍNEA */
}

/* ESTILOS PARA LAS FLECHAS INDICADORAS HORIZONTALES */
.slide-inner button.nav-arrow {
    position: absolute !important; /* Forzamos que floten sobre la imagen */
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.4);
    color: white;
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    z-index: 30 !important; /* Mayor que el z-index: 20 de tus otros botones */
    cursor: pointer;
    transition: opacity 0.3s ease;
    pointer-events: auto;
}

.nav-arrow-left { left: 10px; }
.nav-arrow-right { right: 10px; }

.arrow-hidden {
    opacity: 0;
    pointer-events: none !important; 
}