/* Pop-up del minijuego con Gerardo (fichas de los videojuegos). Diseño: popup-minijuego-gerardo-v14.html; ver minigame.js */
.gsmg{
  --gs-ink:#0B1B30; --gs-action:#0064D1; --gs-floor:#003F86; --gs-hover:#0073F0; --gs-sky:#36B4FA; --gs-ice:#EAF5FF;
  --w:380px;                       /* ancho de Gerardo */
  position:fixed; inset:0; z-index:2147483000; display:none; align-items:center; justify-content:center;
  padding:16px; box-sizing:border-box; background:rgba(5,12,24,.6);
  font-family:"Archivo","Archivo Variable",system-ui,-apple-system,"Segoe UI",sans-serif; color:#fff; -webkit-font-smoothing:antialiased;
}
.gsmg *,.gsmg *::before,.gsmg *::after{box-sizing:border-box}
.gsmg.is-open{display:flex; animation:gsmg-fade .3s ease both}
@keyframes gsmg-fade{from{opacity:0}to{opacity:1}}

/* Tarjeta 4:5 */
.gsmg__card{
  position:relative; width:min(400px,100%); aspect-ratio:4/5; border-radius:26px; overflow:hidden; outline:none;
  background:var(--gs-ink); border:1px solid rgba(255,255,255,.1); box-shadow:0 36px 90px rgba(0,0,0,.5);
  padding:28px 28px 28px; display:flex; flex-direction:column;
  animation:gsmg-in .5s cubic-bezier(.2,.9,.25,1.12) both;
}
@keyframes gsmg-in{from{opacity:0; transform:translateY(26px) scale(.96)}to{opacity:1; transform:none}}

.gsmg__logo{display:block; width:124px; height:auto}
.gsmg__title{
  margin:26px 0 0; max-width:12.5em; font-size:clamp(26px,7.4vw,29px); line-height:1.06; letter-spacing:-.025em;
  font-weight:840; font-stretch:118%; text-wrap:balance;
}
.gsmg__title em{font-style:normal; color:var(--gs-sky)}

.gsmg__close{
  position:absolute; top:16px; right:16px; z-index:6; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; padding:0;
  background:transparent; border:1px solid rgba(54,180,250,.45); color:var(--gs-sky); cursor:pointer;
  transition:background-color .15s ease, color .15s ease;
}
.gsmg__close:hover{background:var(--gs-sky); color:var(--gs-ink)}
.gsmg__close:focus-visible,.gsmg__btn:focus-visible{outline:3px solid var(--gs-ice); outline-offset:3px}
.gsmg__close svg{width:18px; height:18px}

/* Botón de recreativa (se hunde al pulsar) */
.gsmg__btn{
  position:absolute; left:28px; right:28px; bottom:30px; height:56px; display:flex; align-items:center; justify-content:center;
  border-radius:999px; background:var(--gs-action); color:#fff; font:inherit; font-size:17px; font-weight:680; text-decoration:none; border:0;
  box-shadow:0 5px 0 var(--gs-floor); cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background-color .15s ease, transform .08s ease, box-shadow .08s ease;
  animation:gsmg-press .5s ease-out 3.35s backwards;
}
.gsmg__btn:hover{background:var(--gs-hover)}
.gsmg__btn:active{transform:translateY(3px); box-shadow:0 2px 0 var(--gs-floor)}
.gsmg__btn::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:0 0 0 0 rgba(54,180,250,.6);
  animation:gsmg-ring 2.8s ease-out 4.4s infinite;
}
@keyframes gsmg-ring{0%{box-shadow:0 0 0 0 rgba(54,180,250,.6)}70%,100%{box-shadow:0 0 0 14px rgba(54,180,250,0)}}
@keyframes gsmg-drop{0%{transform:none} 28%{transform:translateY(5px)} 100%{transform:none}}
@keyframes gsmg-press{
  0%{transform:none; box-shadow:0 5px 0 var(--gs-floor)}
  28%{transform:translateY(5px); box-shadow:0 0 0 var(--gs-floor)}
  100%{transform:none; box-shadow:0 5px 0 var(--gs-floor)}
}
/* onda al caer */
.gsmg__impact{
  position:absolute; z-index:4; left:var(--land-x,50%); bottom:calc(30px + 56px - 18px); width:150px; height:34px; margin-left:-75px;
  border:3px solid var(--gs-sky); border-radius:50%; opacity:0; pointer-events:none; animation:gsmg-impact .8s ease-out 3.35s forwards;
}
@keyframes gsmg-impact{0%{opacity:.9; transform:scale(.3)}100%{opacity:0; transform:scale(1.5)}}

/* Gerardo: vídeo (fondo quitado) de vuelo + aterrizaje; al final se funde con el Gerardo estático que mira de frente */
.gsmg__gerardo{
  position:absolute; z-index:5; left:var(--land-x,50%); width:var(--w); margin-left:calc(var(--w) / -2);
  bottom:calc(30px + 56px + 2px - 4px); pointer-events:none; animation:gsmg-drop .5s ease-out 3.35s backwards;
}
@keyframes gsmg-drop{0%{transform:none} 30%{transform:translateY(5px)} 100%{transform:none}}
.gsmg__run{display:block; animation:gsmg-run 3.1s cubic-bezier(.3,.55,.35,1) .2s backwards}
@keyframes gsmg-run{from{transform:translateX(480px)}to{transform:translateX(0)}}
.gsmg__stage{position:relative; display:block; width:100%; aspect-ratio:640/460}
.gsmg__fly,.gsmg__front{position:absolute; inset:0; width:100%; height:100%; display:block}
.gsmg__front{visibility:hidden}
.gsmg__stage.is-front .gsmg__front{visibility:visible}
.gsmg__stage.is-front .gsmg__fly{visibility:hidden}
.gsmg__stage.is-front{animation:gsmg-breathe 3.4s ease-in-out infinite; transform-origin:50% 92%}
@keyframes gsmg-breathe{0%,100%{transform:none} 50%{transform:scale(1.008,1.016)}}

/* Detalles: halo de luz, destellos y icono de play */
.gsmg__glow{position:absolute; z-index:1; left:var(--land-x,50%); bottom:28px; width:270px; height:270px; margin-left:-135px; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(54,180,250,.34), rgba(0,100,209,.14) 55%, rgba(0,100,209,0) 100%);
  animation:gsmg-glow-in 1s ease-out 3.3s backwards, gsmg-glow 4s ease-in-out 4.3s infinite}
@keyframes gsmg-glow-in{from{opacity:0; transform:scale(.6)}to{opacity:1; transform:none}}
@keyframes gsmg-glow{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.72; transform:scale(1.06)}}
.gsmg__spark{position:absolute; z-index:4; width:var(--s,12px); height:var(--s,12px); background:var(--gs-ice); pointer-events:none; opacity:0;
  clip-path:polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation:gsmg-twinkle 2.8s ease-in-out var(--d,3.5s) infinite}
.gsmg__spark--sky{background:var(--gs-sky)}
@keyframes gsmg-twinkle{0%,100%{opacity:0; transform:scale(.3) rotate(0)} 40%{opacity:1; transform:scale(1) rotate(45deg)} 70%{opacity:0; transform:scale(.4) rotate(90deg)}}
.gsmg__btn::before{content:""; flex:none; width:0; height:0; margin-right:11px; border-left:11px solid #fff; border-top:7px solid transparent; border-bottom:7px solid transparent; border-radius:2px}

/* Cuadrícula sutil de fondo (estilo pantalla de juego) */
.gsmg__card::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit;
  background-image:radial-gradient(rgba(54,180,250,.22) 1.1px, transparent 1.3px); background-size:22px 22px; background-position:11px 11px;
  -webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 72%, #000 0%, transparent 100%); mask-image:radial-gradient(ellipse 70% 55% at 50% 72%, #000 0%, transparent 100%);
  animation:gsmg-grid 1s ease-out 3.2s backwards}
@keyframes gsmg-grid{from{opacity:0}to{opacity:1}}
.gsmg__card>*{position:relative}
.gsmg__card>.gsmg__close,.gsmg__card>.gsmg__btn,.gsmg__card>.gsmg__glow,.gsmg__card>.gsmg__gerardo,.gsmg__card>.gsmg__impact{position:absolute}
/* Brillo que cruza el botón de vez en cuando */
.gsmg__btn{overflow:hidden}
.gsmg__shine{position:absolute; top:0; bottom:0; left:-40%; width:28%; pointer-events:none; transform:skewX(-20deg);
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.38), rgba(255,255,255,0)); animation:gsmg-shine 4.2s ease-in-out 4.6s infinite}
@keyframes gsmg-shine{0%{left:-40%} 28%,100%{left:150%}}

/* Móvil: tarjeta abajo, sin tapar toda la pantalla */
@media (max-width:759px){
  .gsmg__glow{bottom:22px; width:240px; height:240px; margin-left:-120px}
  .gsmg{--w:340px; align-items:flex-end; padding:0 16px 16px; background:none; pointer-events:none}
  .gsmg__card{pointer-events:auto; width:min(358px,100%); margin:0 auto; padding:24px 22px 22px}
  .gsmg__logo{width:112px}
  .gsmg__title{margin-top:20px; font-size:27px}
  .gsmg__btn{left:22px; right:22px; bottom:24px; height:52px; font-size:16px}
  .gsmg__gerardo{bottom:calc(24px + 52px + 2px - 3px)}
  .gsmg__impact{bottom:calc(24px + 52px - 18px); width:130px; margin-left:-65px}
}
@media (prefers-reduced-motion:reduce){
  .gsmg *,.gsmg *::before,.gsmg *::after{animation:none!important; transition:none!important}
}