:root {
  --bg: #000000;
  /* --text-color: #738748;  */
  --text-color: #6c6c6c;
  --bg-white: #000000;
  --text-color-red: #9b9b9b;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg-white);
  color: #101010;
  overflow: hidden; /* para que la galería sea “viewport-only” */
}
.caballo-pixel{
  position: absolute;
  bottom: -15vh;
  left: 0;
  width: 100vw;
  opacity: .2;
}
.img-desktop{
  display: block;
}
.img-mobile{
  display: none;
}

 @font-face {
      font-family: montrealRegular;
      src: url(NeueMontreal/NeueMontreal-Regular.otf);
    }
    @font-face {
      font-family: montrealBold;
      src: url(NeueMontreal/NeueMontreal-Bold.otf);
    }
    @font-face {
      font-family: montrealItalic;
      src: url(NeueMontreal/NeueMontreal-RegularItalic.otf);
    }
    @font-face {
      font-family: montrealBoldItalic;
      src: url(NeueMontreal/NeueMontreal-BoldItalic.otf);
    }
    @font-face {
      font-family: cascadiaRegular;
      src: url(Cascadia/CascadiaMono-Regular.ttf);
    }
    @font-face {
      font-family: cascadiaBoldItalic;
      src: url(Cascadia/CascadiaMono-SemiBoldItalic.ttf);
    }
    @font-face {
      font-family: helveticaRounded;
      src: url(Cascadia/helvetica-rounded-bold-5871d05ead8de.otf);
    }


  /* ---------- INTRO ---------- */

.intro{
  z-index: 10000;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #111; /* por si el noise tiene transparencia */
  overflow: hidden;
}

.intro-nosignal{
  font-family: cascadiaRegular;
  font-size: 4vh;
  color: rgb(28, 28, 28);
  z-index: 2;
}


/* ---------- POPUP INTRO (LOADING) ---------- */

.intro-popup{
  position: absolute;
  width: 60vh;
  height: 35vh;
  background: #191919;
  border: 2px solid var(--text-color);
  z-index: 3;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.intro-popup-top,
.intro-popup-bottom{
  width: 100%;
  height: 15px;
  background: var(--text-color);
  position: absolute;
  left: 0;
}

.intro-popup-top{
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5px;

  font-family: montrealRegular;
  font-weight: 300;
  color: #191919;
  font-size: 13px;
}

.intro-popup-close{
  height: 80%;
  cursor: pointer;
}

.intro-popup-bottom{
  bottom: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* body centrado */
.intro-popup-body{
  position: absolute;
  top: 15px;
  bottom: 15px;
  left: 0;
  right: 0;

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

.intro-loading{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.intro-loading-text{
  font-family: montrealRegular;
  font-weight: 300;
  text-transform: uppercase;
  color: rgb(121,121,121);
  font-size: 13px;
  letter-spacing: 0.5px;
}

.intro-loading-bar{
  width: min(20vh, 520px);
  height: auto;
  image-rendering: pixelated;
}

/* estado SPACE */
.intro-space{
  display: none;
  align-items: center;
  justify-content: center;
}

.intro-space p{
  font-family: montrealRegular;
  font-weight: 300;
  text-transform: uppercase;
  color: rgb(121,121,121);
  font-size: 13px;
  line-height: 13px;
  text-align: center;
}
.open-web-desktop{
  display: block;
}
.open-web-mobile{
  display: none;
}

/* parpadeos */
.blink-slow{
  animation: introBlinkSlow 1.9s steps(1,end) infinite;
}

@keyframes introBlinkSlow{
  0%, 54% { opacity: 1; }
  55%, 100% { opacity: 0; }
}

/* misma velocidad que tu snake (la que dejaste en 1.6s) */
.blink-snake{
  animation: introBlinkSnake 1.6s steps(1,end) infinite;
}

@keyframes introBlinkSnake{
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* opcional: velocidad marquee intro (si quieres distinta) */
.marquee--intro .marquee__track{
  animation-duration: 18s;
}



/* ---------- RETRO TYPEWRITER (caret) ---------- */

.lateral-text-container p{
  position: relative;
  white-space: nowrap;
  /* filter: blur(.6px); */
}

.type-caret{
  display: inline-block;
  margin-left: 6px;
  transform: translateY(-1px);
  animation: caretBlink 0.9s steps(1,end) infinite;
}

@keyframes caretBlink{
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}




/* ---------- TV NOISE ---------- */

.tv-noise {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -2; /* fondo */
  pointer-events: none;
}
#tv-noise-intro{
  opacity: 1;
  transform-origin: 50% 50%;
  will-change: transform, filter, opacity;
}
/* CRT off: prep para animar el canvas de la intro */

#tv-noise-bg{
  opacity: 0.15; /* súbelo si lo quieres más presente */
}

/* ---------- GALERÍA FLOTANTE ---------- */

#floating-gallery {
  position: fixed;
  inset: 0;
  z-index: 1; /* debajo del logo */
  pointer-events: none;
  overflow: hidden;
}

.float-img {
  position: absolute;
  height: auto;
  display: block;
  opacity: 1;

  /* look sutil tipo editorial */
  border-radius: 4px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
  transform: translateZ(0);
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}

/* ---------- GALERÍA FLOTANTE ---------- */

/* .retro-menu-container{
  width: 100vw;
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  z-index: 10;
}
.retro-menu{
  display: flex;
  justify-content: center;
}
.retro-menu-item{
  width: 80px;
  height: 60px;
  margin: 0 10px;
  cursor: pointer;
  background-color: rgb(121, 121, 121);
  border: .5px solid #101010;
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.retro-menu-item img{
  width: 40%;
}
.retro-menu-item p{
  font-family: montrealRegular;
  color: #191919;
  font-size: 11px;
  text-transform: uppercase;
  margin-top: 5px;
  line-height: 11px;
} */

.top-info-container{
  width: 100%;
  position: absolute;
  top: 0;
  padding: 2%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}
.top-info{
  display: flex;
  justify-content: center;
  align-items: center;
}
.top-info p{
  font-family: montrealRegular;
  color: var(--text-color-red);
  font-size: 11px;
  text-transform: uppercase;
  margin: 0 10px;
  line-height: 11px;
  white-space: nowrap;
}
.top-info img{
  width: 20px;
}
.line-top{
  width: 20px;
  height: 1px;
  background: var(--text-color);
  margin: 0 5px;
}

/***************************** TOP MENU ****************************************/

.top-menu{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 2%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
  /* filter: blur(1px); */

}
.menu-item{
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.top-menu h2{
  font-family: montrealRegular;
  color: var(--text-color-red);
  font-size: 1.7vw;
  line-height: 1.6vw;
  font-weight: 300;
  border-bottom: 1px solid var(--text-color-red);
}
.fechas-title{
  margin-left: 10px;
}
.merchan-title{
  margin-right: 10px;
}
.outter-circle{
  width: 1.3vw;
  height: 1.3vw;
  border-radius: 50%;
  border: 2px solid var(--text-color-red);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 0;
  padding: 0;
}
.inner-circle{
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background-color: var(--text-color-red);
  opacity: 0;
}
.bottom-icon{
  width: 1.8vw;
  height: auto;
  margin-top: 10px;
}
.scroll-to-make-etc{
  position: absolute;
  font-family: montrealRegular;
  text-transform: uppercase;
  color: var(--text-color-red);
  font-size: 11px;
  text-align: center;
  bottom: 2.5vw;
}
.info-bottom{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 2%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
}
.info-bottom p{
  font-family: montrealRegular;
  color: var(--text-color-red);
  font-size: 11px;
  text-transform: uppercase;
  line-height: 11px;
}


/* ---------- JUEGOS BUTTONS/POP-UP ----------- */

.juegos-button{
  width: 10vw;
  height: 15px;
  background: var(--text-color);
  position: absolute;
  right: 45vw;
  bottom: 2vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: montrealRegular;
  font-weight: 300;
  color: var(--bg-white);
  padding: 0 5px;
  font-size: 13px;
  z-index: 10;
  cursor: pointer;
}
.juegos-button img{
  height: 80%;
}

/* ---------- JUEGOS MENU (POPUP) ----------- */

.juegos-menu{
  position: absolute;
  bottom: 2vw;
  right: 45vw;
  width: 10vw!important;
  height: 25vh;
  background: #191919;
  border: 2px solid var(--text-color);
  z-index: 11;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* top bar */
.juegos-menu-top{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 15px;
  background: var(--text-color);

  display: flex;
  justify-content: space-between;
  align-items: center;

  font-family: montrealRegular;
  font-weight: 300;
  color: #191919;
  padding: 0 3px;
  font-size: 13px;
}
.juegos-close{
  height: 80%;
  cursor: pointer;
}

/* body */
.juegos-menu-body{
  position: absolute;
  top: 15px;
  left: 0;
  right: 0;
  padding: 22px 6px 0 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.juegos-item{
  display: flex;
  align-items: center;
  width: 100%;
  text-decoration: none;
  color: var(--text-color);
  font-family: montrealRegular;
  font-weight: 300;
  font-size: 13px;
  white-space: nowrap;
}

.juegos-name{
  padding-right: 8px;
  text-transform: uppercase;
}

.juegos-dots{
  flex: 1;
  border-bottom: 2px dotted var(--text-color);
  transform: translateY(-1px);
  opacity: 0.9;
}

.juegos-arrow{
  width: 14px;
  height: 14px;
  margin-left: 8px;
  display: block;
  opacity: 0.9;
}

/* bottom bar */
/* ✅ Bottom bar mantiene la altura y color, el contenido lo hace el marquee */
.juegos-menu-bottom{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 15px;
  background: var(--text-color);
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* ✅ velocidad del marquee para juegos (puedes ajustar) */
.marquee--juegos .marquee__track{
  animation-duration: 18s;
}


/* ---------- SNAKE POP UP ---------- */

.snake-pop-up{
  position: absolute;
  top: 10vh;
  left: 2vw;

  /* ✅ AHORA: cuadrado 60vh x 60vh */
  width: 60vh;
  height: 60vh;

  background: #191919;
  border: 2px solid var(--text-color);
  z-index: 20;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.snake-pp{
  width: 100%;
  height: 15px;
  background: var(--text-color);
  position: absolute;
  left: 0;
}

.snake-pp-top{
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: montrealRegular;
  font-weight: 300;
  color: #191919;
  padding: 0 5px;
  font-size: 13px;
}
.snake-close{
  height: 80%;
  cursor: pointer;
}

.snake-pp-bottom{
  bottom: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  line-height: 1;
}

.snake-body{
  position: absolute;
  top: 15px;
  bottom: 15px;
  left: 0;
  right: 0;

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

  /* ✅ un pelín menos de padding para que el canvas respire en 60vh */
  padding: 10px;
}

#snake-canvas{
  width: 100%;
  height: 100%;
  display: block;

  /* look de la captura */
  background: #151515;
  box-shadow: inset 0 0 0 2px rgba(121,121,121,0.25);
}

/* marquee del snake (puedes ajustar velocidad) */
.marquee--snake .marquee__track{
  animation-duration: 22s;
}

/* ✅ Overlay texto (inicio / game over) */
.snake-overlay{
  position: absolute;
  inset: 15px 0 15px 0; /* dentro del área jugable (entre barras) */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}

.snake-overlay p{
  font-family: montrealRegular;
  font-weight: 300;
  text-transform: uppercase;
  color: var(--text-color);
  font-size: 13px;
  line-height: 13px;
  text-align: center;
  animation: snakeBlink 1.6s steps(1, end) infinite;
}

@keyframes snakeBlink{
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}




/* ---------- HEADER / LOGO ---------- */
.site-header {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: visible;
  position: relative;
  /* bottom: 2%; */
  z-index: 3;
  pointer-events: none;
}
.logo3d-wrap {
  width: 40vw;
  height: 40vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  inset: 0;
  z-index: 4; /* por encima de galería */
}
#logo3d {
  width: 130%;
  height: 130%;
  display: block;
}
.description-container{
  width: 100%;
  display: flex;
  justify-content: center;
  bottom: 15%;
  margin-top: 1vh;
}
.description-container p{
  font-family: montrealRegular;
  color: var(--text-color-red);
  font-size: 13px;
  width: 35%;
  text-align: center;
  text-transform: uppercase;
  line-height: 13px;
  /* filter: blur(.6px) */
}
.title-container{
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  top: 15%;
  margin-bottom: 1vh;
}
.title-container p{
  font-size: 10px;
  margin-top: 5px;
  font-family: montrealRegular;
  color: var(--text-color-red);
  /* filter: blur(.6px); */
  margin-top: 10px;
}
.title-container span{
  font-size: 1vw;
  letter-spacing: 0;
}
.title-container h2{
  font-family: montrealRegular;
  color: var(--text-color-red);
  font-size: 2.5vw;
  width: 50%;
  text-align: center;
  text-transform: uppercase;
  line-height: 1.8vw;
  margin: 0;
  letter-spacing: -.05vw;
  /* filter: blur(1px) */
}

/* ---------- FECHAS POP UP ---------- */

.fechas-pop-up{
  position: absolute;
  width: 30vw;
  height: 30vh;
  background: #191919;
  border: 2px solid var(--text-color);
  z-index: 11;
}

.fechas-pp{
  width: 100%;
  height: 15px;
  background: var(--text-color);
  position: absolute;
}

.fechas-pp-top{
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: montrealRegular;
  font-weight: 300;
  color: #191919;
  padding: 0 5px;
  font-size: 13px;
}
.cross-pop-up{
  height: 80%;
  cursor: pointer;
}

.fechas-pp-bottom{
  bottom: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  line-height: 1;
}

/* MARQUEE */
.marquee{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
}

.marquee__track{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  animation: marquee 20s linear infinite;
}

.marquee__item{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  font-family: montrealRegular;
  font-weight: 300;
  color: #191919;
  font-size: 13px;
  line-height: 1;
}

.icono-marquee{
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  fill: #191919;
}

@keyframes marquee{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

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

/* -------------------------------------------------- */
/* ✅ .fechas-pp-info */
/* -------------------------------------------------- */

.fechas-pp-info{
  position: absolute;
  top: 15px;
  bottom: 15px;
  left: 0;
  right: 0;

  padding: 20px 5px 10px 5px;
  display: flex;
  flex-direction: column;
  gap: 5px;

  font-family: montrealRegular;
  font-weight: 300;
  font-size: 13px;
  color: var(--text-color);
}

.fechas-row{
  display: flex;
  align-items: center;
  width: 100%;
  white-space: nowrap;
}
.fechas-desktop{
  display: flex;
}
.fechas-mobile{
  display: none;
}

.fechas-col{
  display: inline-block;
}

.fechas-left{ padding-right: 8px; }
.fechas-mid{ padding: 0 8px; }
.fechas-right{ padding-left: 8px; }

.fechas-dots{
  flex: 1;
  border-bottom: 2px dotted var(--text-color);
  transform: translateY(-1px);
  opacity: 0.9;
}

/* -------------------------------------------------- */
/* ✅ POPUPS: estado inicial oculto (para ambos) */
/* -------------------------------------------------- */

#pop-up-1,
#pop-up-2{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#pop-up-1 .fechas-pp-top,
#pop-up-2 .fechas-pp-top{
  cursor: grab;
}

#pop-up-1 .fechas-pp-top:active,
#pop-up-2 .fechas-pp-top:active{
  cursor: grabbing;
}

/* -------------------------------------------------- */
/* ✅ MERCHAN POPUP (NUEVO) */
/* -------------------------------------------------- */

.merchan-pop-up{
  /* más alto para imágenes */
  width: 30vw;          /* puedes subir a 32-34vw si quieres */
  height: 75vh;         /* alargado como tu captura */
}

/* cuerpo del slider: ocupa todo menos la barra superior */
.merchan-body{
  position: absolute;
  top: 15px;
  bottom: 0;
  left: 0;
  right: 0;

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

  padding: 0;
}

/* contenedor negro interior */
.merchan-media{
  width: calc(100% - 80px);
  height: calc(100% - 70px);
  background: #0f0f0f;
  display: flex;
  align-items: center;
  justify-content: center;

  /* marco sutil como en la foto */
  box-shadow: inset 0 0 0 1px rgba(121,121,121,0.2);
}

/* imagen */
.merchan-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* botones laterales */
.merchan-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 36px;

  background: rgba(121,121,121,0.35);
  border: 1px solid rgba(121,121,121,0.6);
  cursor: pointer;

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

.merchan-prev{ left: 10px; }
.merchan-next{ right: 10px; }

.merchan-arrow{
  font-family: montrealRegular;
  color: rgba(121,121,121,1);
  font-size: 22px;
  line-height: 1;
  position: relative;
  bottom: 2px;
}

/* dots abajo */
.merchan-dots{
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;

  display: flex;
  justify-content: center;
  gap: 10px;
}

.merchan-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(121,121,121,0.9);
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.merchan-dot.is-active{
  background: rgba(121,121,121,0.9);
}
/* ✅ deja hueco al marquee en el popup de merchan */
#pop-up-2 .merchan-body{
  bottom: 15px; /* antes era 0, ahora sube para no pisar el marquee */
}

/* -------------------------------------------------- */
/* ✅ MARQUEE MERCHAN (más lento, texto largo) */
/* -------------------------------------------------- */

.marquee--merchan .marquee__track{
  animation: marquee-merchan 40s linear infinite;
}

/* Animación específica para MERCHAN */
@keyframes marquee-merchan{
  0%{
    transform: translateX(0);
  }
  100%{
    transform: translateX(-50%);
  }
}

/* ---------- LATERAL TEXT ---------- */

.lateral-text-container{
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  align-items: center;
  padding: 0 10vw;
  z-index: 20;
  pointer-events: none;
}

.lateral-text-container p{
  font-family: cascadiaBoldItalic;
  font-size: 13px;
  color: var(--text-color-red);
}
.spin-black{
  color: var(--text-color-red);
  opacity: .5;
}



/* ✅ Permitir click SOLO en las imágenes de la galería */
#floating-gallery { pointer-events: none; }
#floating-gallery .float-img { pointer-events: auto; cursor: zoom-in; }

/* ---------- POPUP VIEWER GALERÍA ---------- */

.gallery-viewer {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2000;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  background: #191919;
  border: 2px solid rgb(121, 121, 121);
}

.gallery-viewer.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.gallery-viewer-top {
  width: 100%;
  height: 15px;
  background: rgb(121, 121, 121);

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 0 6px;
  font-family: montrealRegular, system-ui, sans-serif;
  font-weight: 300;
  color: #191919;
  font-size: 13px;

  cursor: grab;
}
.gallery-viewer-top:active { cursor: grabbing; }

.gallery-viewer-close {
  height: 80%;
  cursor: pointer;
  user-select: none;
  -webkit-user-drag: none;
}

.gallery-viewer-body {
  position: absolute;
  top: 15px;
  left: 0;
  right: 0;
  bottom: 0;

  background: #191919; /* gris oscuro del área de imagen */
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 20px; /* ✅ margen pedido */
  overflow: hidden;
}

.gallery-viewer-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
/* =========================
   ✅ POPUP: RESIZE WINDOWS
   ========================= */

/* APLÍCALO A TODOS LOS POPUPS QUE QUIERAS REDIMENSIONAR */
#pop-up-1,
#pop-up-2,
#snake-pop-up,
.juegos-menu,
.gallery-viewer {
  resize: both;           /* ✅ bordes como ventana */
  overflow: hidden;       /* ✅ necesario para resize + recortar dentro */
  min-width: 280px;       /* ajusta si quieres */
  min-height: 200px;      /* ajusta si quieres */
  max-width: min(920px, 92vw);
  max-height: min(820px, 90vh);
}

/* Para que el contenido interno pueda "estirarse" bien */
#pop-up-1,
#pop-up-2,
#snake-pop-up,
.juegos-menu,
.gallery-viewer {
  display: flex;
  flex-direction: column;
}

/* Si tu popup tiene topbar + body:
   el body debe ocupar el espacio sobrante */
#pop-up-1 .pop-up-body,
#pop-up-2 .pop-up-body,
#snake-pop-up .snake-pp-body,
.juegos-menu .juegos-menu-body,
.gallery-viewer .gallery-viewer-body {
  flex: 1;
  min-height: 0;          /* ✅ clave para que no haga overflow raro */
}

/* =========================
   ✅ IMAGENES: ADAPTARSE
   ========================= */

.gallery-viewer .gallery-viewer-body {
  padding: 20px;          /* ✅ tu margen lateral */
  background: #2a2a2a;    /* (tu gris oscuro del ejemplo) */
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-viewer .gallery-viewer-img {
  width: 100%;
  height: 100%;
  object-fit: contain;    /* ✅ se adapta sin deformar */
  display: block;
}

/* Si quieres que otros contenedores de imagen dentro de popups se comporten igual: */
#pop-up-2 .merchan-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}



/*****************************************************  MOBILE RESPONSIVE ******************************************************************/

@media (max-width: 767px) {
  .intro-popup{
    width: 90vw;
    height: 30vh;
  }
  .top-info-container{
    display: none;
  }
  .top-menu h2{
    font-size: 5.7vw;
    line-height: 5.7vw;
  }
  .outter-circle{
    width: 5.3vw;
    height: 5.3vw;
  }
  .juegos-button{
    display: none;
  }
  .lateral-text-container{
    display: none;
  }
  .description-container p{
    width: 89%;
  }
  .bottom-icon{
    width: 6.8vw;
  }
  .logo3d-wrap{
    height: 30vh;
    width: 78vw;
  }
  #logo3d{
    height: 260%;
  }
  .title-container h2{
    width: 100%;
    font-size: 5.8vw;
    line-height: 5.8vw;
  }
  .title-container span {
    font-size: 3.5vw;
}
.title-container p{
  display: none;
}
.img-desktop{
  display: none;
}
.img-mobile{
  display: block;
  height: 100vh;
  width: auto;
  position: absolute;
  opacity: .4;
}
.img-mobile-container{
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
#floating-gallery{
  display: none;
}
.merchan-pop-up{
  width: 90vw!important;          
  height: 55vh!important;         
}
.fechas-desktop{
  display: none;
}
.fechas-mobile{
  display: flex;
}
.fechas-pop-up{
  width: 90vw;
  height: 30vh;
}
.open-web-desktop{
  display: none;
}
.open-web-mobile{
  display: block;
}
}