/* ===== Reset ===== */

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden; /* el carrusel se encarga del scroll horizontal */
}

/* ===== Carrusel fullscreen ===== */

#carousel {
  display: flex;
  flex-direction: row;

  width: 100vw;
  height: 100vh;

  overflow-x: auto;
  overflow-y: hidden;

  -webkit-overflow-scrolling: touch; /* iPhone suave */

  /* 🔥 volvemos a activar scroll-snap nativo */
  scroll-snap-type: x mandatory;
}

/* ocultar scrollbar */
#carousel::-webkit-scrollbar {
  display: none;
}
#carousel {
  scrollbar-width: none;
}

/* ===== Slides ===== */

.slide {
  flex: 0 0 100vw;        /* cada slide ocupa SIEMPRE todo el ancho */
  height: 100vh;

  position: relative;     /* para el botón */

  /* necesario para snap nativo */
  scroll-snap-align: start;
}

/* Imagen / video fullscreen dentro del slide */
.slide-img {
  width: 100%;
  height: 100%;
  object-fit: contain;      /* llena pantalla recortando un poco si hace falta */
  object-position: top center;  /* 👈 esto hace que “llegue hasta arriba” */
  display: block;
}




/* Slide especial tipo STORY */
.slide-story {
  position: relative;
}

/* La foto de fondo se queda abajo */
.slide-story .slide-img.bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;  /* 👈 esto hace que “llegue hasta arriba” */
  z-index: 0;
}






/* SLIDE ESPECIAL TIPO STORY */
.slide-story {
  position: relative;
  background: #000; /* por si algo no carga, no se vea blanco */
}

/* Foto de fondo fija al 100% del slide */
.slide-story .slide-img.bg {
  position: absolute;
  inset: 0;             /* top:0; right:0; bottom:0; left:0 */
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;  /* 👈 esto hace que “llegue hasta arriba” */
  z-index: 0;
}

/* Contenedor de las transparencias */
.slide-story .overlay {
  position: absolute;
  inset: 0;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Cada transparencia PNG ocupando todo el slide */
.trans-panel {
  position: absolute;
  inset: 0;              /* top:0; right:0; bottom:0; left:0 */
  width: 100%;
  height: 100%;

  /* Si tus PNG ya están en 9:16 y bien encuadrados,
     contain respeta todo el diseño sin recortes */
  object-fit: contain;
  object-position: top center;  /* 👈 esto hace que “llegue hasta arriba” */
  
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.45s ease-in-out,
    transform 0.45s ease-in-out;
}

/* Transparencia activa (visible) */
.trans-panel.active {
  opacity: 1;
  transform: translateY(0);
}





/* ===== Botón de sonido centrado ===== */

.sound-toggle{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;

  width: 72px;
  height: 72px;

  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  border: none;
  border-radius: 999px;

  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* estado visual cuando está en mute (un poco más tenue) */
.sound-toggle.muted {
  opacity: 0.8;
  transform: translate(-50%, -50%) scale(0.95);
}

/* cuando está oculto (p.ej. con sonido activo) */
.sound-toggle.hidden {
  opacity: 0;
  pointer-events: none;
}