:root{
  --void:#08090B; --pitch:#0D0F13; --slate:#141821; --edge:#1F252F; --edge-lit:#2E3745;
  --bone:#F2EFE9; --ash:#A8AEB8; --dim:#6E7683;
  --blue:#4E9BF2; --blue-deep:#1E5DA8; --blue-dim:#24405F;
  --red:#E23B2E; --red-hot:#FF5647; --red-deep:#8C1F16;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--void);color:var(--bone);
  font-family:'Barlow',system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;}
h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;letter-spacing:.005em;margin:0;}
.cond{font-family:'Barlow Condensed','Barlow',sans-serif;}
a{color:var(--blue);text-decoration:none;}
a:hover{color:#7FB8FF;}
img{max-width:100%;display:block;}
/* Los atributos width/height del HTML reservan el espacio y evitan el
   salto de maquetado. Para que ademas no deformen la foto, la altura se
   calcula sola cuando el CSS le da un ancho distinto.
   Se aplica por clase, no con :not() de descendientes: ese selector es
   invalido en varios navegadores y anula la regla entera. */
.frame img,
.prose img,
.postcard img,
.panel img{height:auto;}
.wrap{max-width:1180px;margin:0 auto;padding:0 44px;}
.eyebrow{font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.32em;text-transform:uppercase;color:var(--blue);}
.doorlight{position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(78,155,242,.65) 22%,rgba(78,155,242,.85) 50%,rgba(78,155,242,.65) 78%,transparent);}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--blue);color:var(--void);padding:10px 18px;}

/* NAV */
.hdr{position:sticky;top:0;z-index:40;border-bottom:1px solid var(--edge);
  background:rgba(8,9,11,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px;gap:20px;}
.nav-links{display:flex;align-items:center;gap:30px;}
.nav-links a{font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ash);white-space:nowrap;}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--bone);}
/* --- menu desplegable de juegos ---
   .has-sub es un item flex mas del nav; hereda la altura de los enlaces
   hermanos para que la fila no se descuadre. */
.has-sub{position:relative;display:flex;align-items:center;}
.has-sub>a{display:inline-flex;align-items:center;}
.has-sub>a::after{content:"";display:inline-block;width:5px;height:5px;
  margin-left:8px;flex:0 0 auto;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .25s ease;}
.has-sub:hover>a::after,.has-sub:focus-within>a::after{transform:translateY(1px) rotate(225deg);}
/* puente invisible para que el mouse no pierda el menu al bajar */
.has-sub::after{content:"";position:absolute;top:100%;left:0;right:0;height:16px;
  display:none;}
.has-sub:hover::after,.has-sub:focus-within::after{display:block;}
.sub{position:absolute;top:calc(100% + 15px);left:-20px;min-width:230px;z-index:60;
  background:var(--pitch);border:1px solid var(--edge);
  box-shadow:0 26px 60px -20px rgba(0,0,0,.92);padding:8px 0;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s;}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:translateY(0);}
/* el enlace del submenu no debe heredar nada del enlace padre */
.nav-links .sub a{display:block;padding:12px 24px;
  font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ash);
  border-bottom:0;white-space:nowrap;}
.nav-links .sub a:hover{color:var(--blue);background:rgba(78,155,242,.09);}
.sub .sub-sep{border-top:1px solid var(--edge);margin:8px 0;}
.burger{display:none;background:none;border:1px solid var(--edge-lit);color:var(--bone);
  padding:9px 11px;cursor:pointer;line-height:0;}
.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;
  font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;padding:14px 30px;border:1px solid var(--blue);color:var(--blue);
  background:transparent;transition:all .22s ease;cursor:pointer;}
.btn:hover{background:var(--blue);color:var(--void);}
.btn-solid{background:var(--blue);color:var(--void);border-color:var(--blue);}
.btn-solid:hover{background:#7FB8FF;border-color:#7FB8FF;color:var(--void);}
/* boton de accion: reservar, comprar, cotizar */
.btn-go{background:var(--red);border-color:var(--red);color:#fff;
  box-shadow:0 0 0 0 rgba(226,59,46,.55);}
.btn-go:hover{background:var(--red-hot);border-color:var(--red-hot);color:#fff;
  box-shadow:0 10px 30px -10px rgba(226,59,46,.75);}
.btn-go:focus-visible{outline:2px solid #fff;outline-offset:3px;}
.btn-ghost{border-color:var(--edge-lit);color:var(--ash);}
.btn-ghost:hover{border-color:var(--bone);background:transparent;color:var(--bone);}

/* SALAS */
.rooms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;}
.rooms-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.room{position:relative;display:flex;flex-direction:column;background:var(--pitch);
  border:1px solid var(--edge);overflow:hidden;transform-style:preserve-3d;
  transition:transform .45s cubic-bezier(.2,.7,.3,1),border-color .3s ease,box-shadow .45s ease;}
.room:hover{border-color:var(--blue-deep);
  transform:perspective(900px) rotateX(3.5deg) rotateY(-3deg) translateZ(30px);
  box-shadow:0 26px 60px -26px rgba(0,0,0,.95),0 0 0 1px rgba(78,155,242,.28);}
.room-art{aspect-ratio:1/1;background:#050609;overflow:hidden;}
.room-art img{width:100%;height:100%;object-fit:cover;aspect-ratio:auto;
  transition:transform .7s cubic-bezier(.2,.7,.3,1),filter .5s ease;
  filter:grayscale(.22) contrast(1.05);}
.room:hover .room-art img{transform:scale(1.07);filter:grayscale(0) contrast(1.12);}
.room-body{padding:22px 20px 24px;display:flex;flex-direction:column;flex-grow:1;}
.room h3{font-size:23px;line-height:1.15;margin-bottom:6px;}
.room h3 a{color:var(--bone);}
.room:hover h3 a{color:var(--blue);}
.genre{font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--dim);}
.hook{font-size:14.5px;line-height:1.55;color:var(--ash);margin:14px 0 18px;}
.specs{margin-top:auto;display:flex;gap:14px;flex-wrap:wrap;font-family:'Barlow Condensed',sans-serif;font-size:12.5px;
  letter-spacing:.06em;color:var(--dim);border-top:1px solid var(--edge);padding-top:14px;}
.specs b{color:var(--bone);font-weight:500;}
.stretch::after{content:"";position:absolute;inset:0;z-index:2;}

.stat{font-family:'Cormorant Garamond',serif;font-size:46px;line-height:1;color:var(--blue);}
.stat-l{font-family:'Barlow Condensed',sans-serif;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);margin-top:8px;}

/* --- widget de reservas (Bookeo) ---
   Sin min-height: el widget inserta su contenido y crece solo. Reservar
   altura de antemano dejaba un hueco vacio arriba mientras cargaba. */
.bookeo-caja{padding:20px;}
#bookeo-widget{width:100%;}
#bookeo-widget:empty{display:none;}
#bookeo-widget iframe{width:100%!important;max-width:100%!important;border:0;display:block;}
#bookeo-widget img{max-width:100%;height:auto;}
#bookeo-widget table{max-width:100%;}
@media (max-width:720px){
  .bookeo-caja{padding:10px 6px;}
  #bookeo-widget{overflow-x:auto;-webkit-overflow-scrolling:touch;}
}


/* En celular la pagina de reservas va directo al grano: solo el titular
   y el calendario. El parrafo explicativo solo aparece en computadora. */
@media (max-width:720px){
  .solo-pc{display:none;}
  /* sin el parrafo, el calendario sube junto al titular */
  .pag-reservas .phead .wrap{padding-bottom:26px;}
  .pag-reservas .phead .lede{margin:0;}
  .pag-reservas .sec{padding-top:24px;}
}

/* --- pares en dos columnas que colapsan en movil ---
   Nada de grid-template-columns en atributos style: un estilo inline
   le gana a cualquier media query y por eso no colapsaba en el celular. */
.par{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start;}
.par-res{grid-template-columns:1.55fr 1fr;gap:44px;}
.par-con{grid-template-columns:1.2fr 1fr;gap:54px;}
.par-pie{grid-template-columns:1.4fr 1fr;gap:40px;}
.par-ancho{grid-template-columns:1.1fr .9fr;gap:64px;align-items:center;}
.par-campos{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media (max-width:1000px){
  .par,.par-res,.par-con,.par-pie,.par-ancho{grid-template-columns:1fr;gap:30px;}
}
@media (max-width:720px){
  .par,.par-res,.par-con,.par-pie,.par-ancho{grid-template-columns:1fr;gap:24px;}
  .par-campos{grid-template-columns:1fr;gap:0;}
}


/* foto de cumpleanos en la portada: acotada para que no domine la seccion */
img.foto-cumple{width:100%;height:auto;max-height:270px;object-fit:cover;
  object-position:center 42%;filter:contrast(1.03);}
@media (max-width:1000px){ img.foto-cumple{max-height:240px;} }
@media (max-width:720px){ img.foto-cumple{max-height:200px;} }

/* --- selector de idioma --- */
.lang{display:inline-flex;align-items:center;gap:2px;flex:0 0 auto;
  border:1px solid var(--edge-lit);padding:3px;margin-left:4px;}
.lang a{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;
  font-family:'Barlow Condensed',sans-serif;font-size:12.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
  transition:color .2s ease,background .2s ease;border-bottom:0;}
.lang a:hover{color:var(--bone);background:rgba(255,255,255,.05);}
.lang a[aria-current="true"]{color:var(--bone);background:rgba(78,155,242,.14);}
.lang svg{display:block;width:19px;height:13px;flex:0 0 auto;
  border:1px solid rgba(255,255,255,.16);border-radius:1px;}
@media (max-width:720px){
  .lang{margin:18px 0 0;align-self:flex-start;}
  .lang a{padding:8px 14px;font-size:13.5px;}
}

/* --- carrusel de logos ---
   La pista usa white-space:nowrap + display:inline-block en lugar de flex.
   Es la tecnica mas antigua y compatible: no hay forma de que un inline-block
   dentro de un nowrap se apile, en ningun navegador. */
.marquee{position:relative;overflow:hidden;padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);}
.marquee-track{display:block;white-space:nowrap;font-size:0;line-height:0;
  animation:slide var(--dur,42s) linear infinite;will-change:transform;}
.marquee-group{display:inline-block;white-space:nowrap;font-size:0;line-height:0;
  vertical-align:top;}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track{animation-play-state:paused;}
@keyframes slide{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(-50%,0,0);}
}
.logo-item{display:inline-block;vertical-align:middle;white-space:normal;
  width:168px;height:84px;margin:0 14px;
  text-align:center;line-height:84px;font-size:0;}
.logo-item img{display:inline-block;vertical-align:middle;
  max-width:100%;max-height:84px;width:auto;height:auto;
  filter:grayscale(1) brightness(1.9) contrast(.55);opacity:.55;
  transition:filter .35s ease,opacity .35s ease,transform .35s ease;}
.logo-item:hover img{filter:none;opacity:1;transform:scale(1.04);}
.logos-mas{font-family:'Barlow Condensed',sans-serif;font-size:14.5px;letter-spacing:.08em;
  color:var(--dim);line-height:2;text-align:center;max-width:900px;margin:26px auto 0;}
.logos-mas b{color:var(--ash);font-weight:500;}

/* ESCENA 3D */
#stage{position:relative;overflow:hidden;perspective:1400px;perspective-origin:50% 42%;}
.depth{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none;z-index:1;}
.fly{position:absolute;left:50%;top:50%;color:rgba(78,155,242,.30);
  transform-style:preserve-3d;animation:fly linear infinite;}
@keyframes fly{
  0%{transform:translate3d(var(--dx,0px),var(--dy,0px),-2600px) rotateX(0) rotateY(0) rotateZ(0);opacity:0;}
  12%{opacity:1;}
  78%{opacity:.75;}
  100%{transform:translate3d(calc(var(--dx,0px) * 3.4),calc(var(--dy,0px) * 3.4),620px)
       rotateX(var(--rx,180deg)) rotateY(var(--ry,220deg)) rotateZ(var(--rz,140deg));opacity:0;}
}
.cine{opacity:0;transform:translateZ(-460px) translateY(26px);transform-style:preserve-3d;
  animation:cine 1.25s cubic-bezier(.16,.84,.28,1) forwards;}
@keyframes cine{to{opacity:1;transform:translateZ(0) translateY(0);}}
.puzzle{position:absolute;inset:0;z-index:3;display:grid;
  grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(3,1fr);
  pointer-events:none;transform-style:preserve-3d;}
.pc{background:#0A0B0E;border:.5px solid rgba(78,155,242,.22);
  transform-style:preserve-3d;animation:pcFlip 1.05s cubic-bezier(.5,0,.2,1) forwards;}
@keyframes pcFlip{
  0%{opacity:1;transform:rotateX(0) rotateY(0) translateZ(0);}
  100%{opacity:0;transform:rotateX(-72deg) rotateY(18deg) translateZ(220px);}
}
.clock{font-family:'Barlow Condensed',sans-serif;font-variant-numeric:tabular-nums;
  letter-spacing:.22em;color:var(--blue);display:inline-flex;align-items:center;gap:11px;
  border:1px solid var(--blue-dim);padding:9px 20px;}
.clock .dot{width:6px;height:6px;border-radius:50%;background:var(--blue);
  animation:tick 1s steps(2,end) infinite;}
@keyframes tick{50%{opacity:.15;}}
.clock .lbl{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);}
.rise{opacity:0;transform:translateY(22px);animation:rise .9s cubic-bezier(.2,.7,.3,1) forwards;}
@keyframes rise{to{opacity:1;transform:translateY(0);}}
.drift{position:absolute;color:rgba(78,155,242,.16);pointer-events:none;
  animation:drift linear infinite;}
@keyframes drift{
  0%{transform:translateY(0) rotate(0);opacity:0;}
  12%{opacity:1;} 88%{opacity:1;}
  100%{transform:translateY(-190px) rotate(var(--spin,140deg));opacity:0;}
}
/* aparecer al hacer scroll */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1);}
.rv.in{opacity:1;transform:none;}

/* RESEÑAS */
.rev{background:var(--pitch);border:1px solid var(--edge);padding:26px 24px;
  display:flex;flex-direction:column;gap:14px;transition:border-color .3s ease,transform .3s ease;}
.rev:hover{border-color:var(--blue-deep);transform:translateY(-3px);}
.stars{display:flex;gap:3px;color:var(--blue);}

/* PAGINAS INTERNAS */
.phead{position:relative;overflow:hidden;border-bottom:1px solid var(--edge);
  background:radial-gradient(ellipse 900px 460px at 50% -20%,rgba(78,155,242,.08),transparent 62%),
             linear-gradient(180deg,#0A0B0E 0%,var(--void) 70%);}
.phead .wrap{padding-top:66px;padding-bottom:60px;position:relative;z-index:2;}
.crumbs{font-family:'Barlow Condensed',sans-serif;font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);margin-bottom:22px;}
.crumbs a{color:var(--dim);} .crumbs a:hover{color:var(--ash);}
.lede{font-size:19px;line-height:1.68;color:var(--ash);max-width:660px;}
.sec{padding:84px 0;}
.sec-t{padding-top:0;}
h2.big{font-size:44px;line-height:1.1;}
h3.mid{font-size:27px;line-height:1.2;}
.prose{max-width:720px;}
.prose p{font-size:17px;line-height:1.78;color:var(--ash);margin:0 0 22px;}
.prose h3{font-size:27px;line-height:1.2;margin:44px 0 16px;color:var(--bone);}
.prose ul{padding-left:20px;color:var(--ash);font-size:16.5px;line-height:1.75;}
.prose li{margin-bottom:10px;}
.panel{background:var(--pitch);border:1px solid var(--edge);padding:32px 30px;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;}
.frame{position:relative;}
.frame::before{content:"";position:absolute;inset:14px -14px -14px 14px;border:1px solid var(--blue-deep);opacity:.4;}
.frame img{position:relative;width:100%;height:auto;filter:contrast(1.04);}
.gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
.gal img{aspect-ratio:4/3;object-fit:cover;width:100%;height:auto;border:1px solid var(--edge);
  filter:grayscale(.2) contrast(1.05);transition:filter .4s ease,transform .5s ease;}
.gal img:hover{filter:none;transform:scale(1.02);}
.ptable{width:100%;border-collapse:collapse;}
.ptable th,.ptable td{text-align:left;padding:16px 8px;border-bottom:1px solid var(--edge);
  font-family:'Barlow Condensed',sans-serif;letter-spacing:.06em;font-size:16px;}
.ptable th{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);font-weight:600;}
.ptable td:last-child{text-align:right;color:var(--blue);font-size:20px;}
.price-card{background:var(--pitch);border:1px solid var(--edge);padding:30px 28px;
  display:flex;flex-direction:column;transition:border-color .3s ease,transform .3s ease;}
.price-card:hover{border-color:var(--blue-deep);transform:translateY(-3px);}
.price-card.hi{border-color:var(--blue-deep);background:linear-gradient(180deg,rgba(78,155,242,.05),var(--pitch));}
.price-n{font-family:'Cormorant Garamond',serif;font-size:52px;line-height:1;color:var(--blue);margin:14px 0 4px;}
.tag{display:inline-block;font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--blue);border:1px solid var(--blue-dim);
  padding:5px 12px;}
.chk{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px;
  font-size:15.5px;line-height:1.6;color:var(--ash);}
.chk svg{flex-shrink:0;margin-top:5px;color:var(--blue);}
details.faq{border-bottom:1px solid var(--edge);}
details.faq summary{cursor:pointer;list-style:none;padding:22px 40px 22px 0;position:relative;
  font-family:'Cormorant Garamond',serif;font-size:22px;line-height:1.3;color:var(--bone);}
details.faq summary::-webkit-details-marker{display:none;}
details.faq summary::after{content:"+";position:absolute;right:6px;top:22px;color:var(--blue);
  font-family:'Barlow',sans-serif;font-size:22px;transition:transform .25s ease;}
details.faq[open] summary::after{transform:rotate(45deg);}
details.faq .a{padding:0 40px 24px 0;font-size:16.5px;line-height:1.75;color:var(--ash);}
.postcard{display:flex;flex-direction:column;background:var(--pitch);border:1px solid var(--edge);
  padding:28px 26px;transition:border-color .3s ease,transform .3s ease;position:relative;}
.postcard:hover{border-color:var(--blue-deep);transform:translateY(-3px);}
.date{font-family:'Barlow Condensed',sans-serif;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);}
.fld{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;}
.fld label{font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--dim);}
.fld input,.fld textarea,.fld select{background:#0A0C10;border:1px solid var(--edge);color:var(--bone);
  padding:13px 15px;font-family:'Barlow',sans-serif;font-size:16px;width:100%;transition:border-color .2s ease;}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;border-color:var(--blue);}
.fld textarea{min-height:130px;resize:vertical;}
.hp{position:absolute;left:-9999px;}
.wa{position:fixed;right:22px;bottom:22px;z-index:50;width:54px;height:54px;border-radius:50%;
  background:var(--blue);color:var(--void);display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.8);transition:transform .25s ease,background .25s ease;}
.wa:hover{transform:scale(1.08);background:#7FB8FF;color:var(--void);}

/* PIE */
.ftr{border-top:1px solid var(--edge);background:#050609;}
.ftr .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding:60px 0 44px;}
.ftr h4{font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--dim);margin:0 0 18px;}
.ftr a,.ftr p{font-size:15px;line-height:1.95;color:var(--ash);margin:0;}
.ftr a{display:block;}
.ftr a:hover{color:var(--bone);}
.ftr .btm{border-top:1px solid var(--edge);padding:22px 0;display:flex;justify-content:space-between;
  gap:20px;flex-wrap:wrap;font-family:'Barlow Condensed',sans-serif;font-size:13px;letter-spacing:.08em;color:var(--dim);}
.ftr .btm a{display:inline;color:var(--dim);}

@media (max-width:1000px){
  .rooms{grid-template-columns:repeat(2,minmax(0,1fr));}
  .rooms-3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .grid2{grid-template-columns:1fr;gap:38px;}
  .grid3{grid-template-columns:1fr;}
  .ftr .cols{grid-template-columns:1fr 1fr;gap:32px;}
  .gal{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:720px){
  .wrap{padding:0 20px;}
  .nav{height:66px;}
  .hdr{background:var(--void);backdrop-filter:none;-webkit-backdrop-filter:none;}
  .nav-links{position:fixed;inset:66px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--void);border-bottom:1px solid var(--edge);
    box-shadow:0 20px 40px -18px rgba(0,0,0,.95);
    padding:8px 20px 22px;display:none;}
  .nav-links.open{display:flex;}
  .nav-links a{padding:15px 0;border-bottom:1px solid var(--edge);font-size:15px;}
  .nav-links a.btn{margin-top:16px;border:1px solid var(--blue);justify-content:center;}
  .nav-links a.btn-go{border-color:var(--red);}
  .has-sub{display:block;}
  .has-sub>a::after{display:none;}
  .has-sub::after{display:none !important;}
  .sub{position:static;opacity:1;visibility:visible;transform:none;min-width:0;
    background:transparent;border:0;box-shadow:none;padding:0 0 6px 14px;}
  .nav-links .sub a{padding:12px 0;border-bottom:1px solid var(--edge);font-size:14px;}
  .sub .sub-sep{display:none;}
  .burger{display:block;}
  .rooms,.rooms-3{grid-template-columns:1fr;}
  .logo-item{width:132px;height:66px;line-height:66px;margin:0 10px;}
  .logo-item img{max-height:66px;}
  .sec{padding:58px 0;}
  h2.big{font-size:33px;}
  .ftr .cols{grid-template-columns:1fr;gap:28px;}
  .frame::before{display:none;}
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{animation:none;}
  .marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none;}
  html{scroll-behavior:auto;}
  .pc{animation:none;opacity:0;}
  .fly{animation:none;opacity:0;}
  .cine{animation:none;opacity:1;transform:none;}
  .room:hover{transform:none;}
  .rise{animation:none;opacity:1;transform:none;}
  .drift{animation:none;opacity:.1;}
  .rv{opacity:1;transform:none;transition:none;}
}

/* --- rendimiento de la escena en celular ---
   Causa real del entrecortado: las llaves y candados son SVG con trazos
   (stroke). Al escalarlos, el navegador tiene que REDIBUJAR el vector en
   cada fotograma, y eso lo hace el procesador, no la tarjeta grafica.
   Por eso no bastaba con quitar el 3D.
   Solucion: en movil los rasterizamos una sola vez con will-change y
   contain, y evitamos escalar: solo trasladamos y desvanecemos, que son
   las dos unicas propiedades que la GPU resuelve sin recalcular nada. */
@media (max-width:720px){
  #stage{perspective:none;}
  .depth{transform-style:flat;contain:strict;}

  .fly{transform-style:flat;
    will-change:transform,opacity;
    /* fuerza su propia capa en la GPU, dibujada una sola vez */
    backface-visibility:hidden;
    contain:layout paint;}
  .fly svg{width:34px;height:34px;}
  @keyframes fly{
    0%{transform:translate3d(var(--dx,0px),var(--dy,0px),0);opacity:0;}
    18%{opacity:.85;}
    72%{opacity:.55;}
    100%{transform:translate3d(calc(var(--dx,0px) * 2.6),calc(var(--dy,0px) * 2.6),0);opacity:0;}
  }

  .cine{transform-style:flat;transform:translateY(18px);
    animation-name:cinePlano;animation-duration:.8s;}
  @keyframes cinePlano{to{opacity:1;transform:translateY(0);}}

  .drift{will-change:transform,opacity;backface-visibility:hidden;
    contain:layout paint;}
  /* sin rotacion: rotar un SVG con trazos lo obliga a redibujarse */
  @keyframes drift{
    0%{transform:translate3d(0,0,0);opacity:0;}
    14%{opacity:.9;} 86%{opacity:.9;}
    100%{transform:translate3d(0,-170px,0);opacity:0;}
  }

  .puzzle{display:none;}
  .pc{display:none;}
}