:root{
  --bg:#060a17;
  --ink:#f2f5f7;
  --accent:#c8f10a;
  --maxw:1450px;
}

/*Hace que por defecto la version desktop se vea y la movil no*/
.desktop-only { display:block; } 
.mobile-only  { display:none; }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif}

/* Header con imagen y hotspots */
.site-header{position:sticky; top:0; z-index:9999; background:#07152a}
.header-wrap{position:relative; max-width:var(--maxw); margin:0 auto}
.header-wrap>img{width:100%; height:auto; display:block}

/* Hotspots */
.hotspots{ position:absolute; inset:0; display:grid; grid-template-columns:9% 11.1% 15% 13.8% 11.8% 12.4% 12.3% 14.4%; }
.hotspots a{display:block}
.hotspots a:hover{outline:2px solid rgba(200,241,10,1); outline-offset:-2px}

/* Menú móvil base */
.nav-toggle{display:none; position:absolute; right:10px; top:10px; z-index:2; background:transparent; border:1px solid rgba(255,255,255,.25); color:#fff; border-radius:10px; padding:8px 12px}
.mobile-nav{display:none; position:absolute; left:0; right:0; top:100%; background:#07152a; border-bottom:2px solid var(--accent)}
.mobile-nav a{display:block; padding:12px 16px; border-top:1px solid rgba(255,255,255,.08)}

@media (max-width: 900px){
  .hotspots{display:none}
  .nav-toggle{display:block}
}

/* Secciones de imagen */
.section-img img{width:100%; height:auto; display:block}

/*  PAGINA DE INICIO - Imagen 07: 7 botones absolutos */
.hotspot-inicio-abs{ position:relative; }
.hotspot-inicio-abs .hotspots{ position:absolute; inset:0; }
.hotspot-inicio-abs a{ position:absolute; display:block; left: var(--x); top: var(--y); width: var(--w); height: var(--h); }
.hotspot-inicio-abs a:hover{ outline:2px dashed rgba(200,241,10,.35); outline-offset:-2px; }
.hotspot-inicio-abs .b1{ --x: 3.3%;  --y: 18%; --w: 12.5%; --h: 48%; }
.hotspot-inicio-abs .b2{ --x: 16%;   --y: 49%; --w: 12.5%; --h: 46%; }
.hotspot-inicio-abs .b3{ --x: 29%;   --y: 18%; --w: 12.5%; --h: 48%; }
.hotspot-inicio-abs .b4{ --x: 40%;   --y: 49%; --w: 20%;  --h: 46%; }
.hotspot-inicio-abs .b5{ --x: 59%;   --y: 18%; --w: 11.5%; --h: 48%; }
.hotspot-inicio-abs .b6{ --x: 72%;   --y: 49%; --w: 12.5%; --h: 46%; }
.hotspot-inicio-abs .b7{ --x: 85%;   --y: 18%; --w: 11.5%; --h: 48%; }
@media (max-width:900px){
  .hotspot-inicio-abs .hotspots{ display:block !important; }
}

/*  PAGINA DE INICIO - mobile */
.hotspot-inicio-abs-mobile{ position:relative; }
.hotspot-inicio-abs-mobile .hotspots{ position:absolute; inset:0; }
.hotspot-inicio-abs-mobile a{ position:absolute; display:block; left: var(--x); top: var(--y); width: var(--w); height: var(--h); }
.hotspot-inicio-abs-mobile a:hover{ outline:2px dashed rgba(200,241,10,.35); outline-offset:-2px; }
.hotspot-inicio-abs-mobile .b1{ --x: 4.7%;  --y: 18%; --w: 14.5%; --h: 45%; }
.hotspot-inicio-abs-mobile .b2{ --x: 19%;   --y: 49%; --w: 12.5%; --h: 45%; }
.hotspot-inicio-abs-mobile .b3{ --x: 32%;   --y: 18%; --w: 12.5%; --h: 45%; }
.hotspot-inicio-abs-mobile .b4{ --x: 40%;   --y: 49%; --w: 20%;  --h: 45%; }
.hotspot-inicio-abs-mobile .b5{ --x: 58%;   --y: 18%; --w: 12.5%; --h: 45%; }
.hotspot-inicio-abs-mobile .b6{ --x: 70.6%;   --y: 48%; --w: 11.5%; --h: 44%; }
.hotspot-inicio-abs-mobile .b7{ --x: 81%;   --y: 18%; --w: 14.5%; --h: 45%; }
@media (max-width:900px){
  .hotspot-inicio-abs-mobile .hotspots{ display:block !important; }
}

/*  PAGINA DE NOSOTROS - Imagen 06: 4 botones absolutos */
.hotspot-nosotros-abs{ position:relative; }
.hotspot-nosotros-abs .hotspots{ position:absolute; inset:0; }
.hotspot-nosotros-abs a{ position:absolute; display:block; left: var(--x); top: var(--y); width: var(--w); height: var(--h); }
.hotspot-nosotros-abs a:hover{ outline:2px dashed rgba(200,241,10,.35); outline-offset:-2px; }
.hotspot-nosotros-abs .b1{ --x: 0%;  --y: 0%; --w: 45.6%; --h: 25%; }
.hotspot-nosotros-abs .b2{ --x: 0%;   --y: 25%; --w: 45.6%; --h: 25%; }
.hotspot-nosotros-abs .b3{ --x: 0%;   --y: 50%; --w: 45.6%; --h: 25%; }
.hotspot-nosotros-abs .b4{ --x: 0%;   --y: 75%; --w: 45.6%;  --h: 25%; }
@media (max-width:900px){
  .hotspot-nosotros-abs .hotspots{ display:block !important; }
}

/*  PAGINA DE NOSOTROS - mobile */
.hotspot-nosotros-abs-mobile{ position:relative; }
.hotspot-nosotros-abs-mobile .hotspots{ position:absolute; inset:0; }
.hotspot-nosotros-abs-mobile a{ position:absolute; display:block; left: var(--x); top: var(--y); width: var(--w); height: var(--h); }
.hotspot-nosotros-abs-mobile a:hover{ outline:2px dashed rgba(200,241,10,.35); outline-offset:-2px; }
.hotspot-nosotros-abs-mobile .b1{ --x: 0%;  --y: 0%; --w: 44.5%; --h: 24.5%; }
.hotspot-nosotros-abs-mobile .b2{ --x: 0%;   --y: 24%; --w: 44.5%; --h: 30%; }
.hotspot-nosotros-abs-mobile .b3{ --x: 0%;   --y: 54%; --w: 44.5%; --h: 24.5%; }
.hotspot-nosotros-abs-mobile .b4{ --x: 0%;   --y: 77%; --w: 44.5%;  --h: 22.5%; }
@media (max-width:900px){
  .hotspot-nosotros-abs-mobile .hotspots{ display:block !important; }
}

/*  PAGINA DE DIAS Y HORARIO - Imagen 03: 4 botones absolutos */
.hotspot-diashoras-abs{ position:relative; }
.hotspot-diashoras-abs .hotspots{ position:absolute; inset:0; }
.hotspot-diashoras-abs a{ position:absolute; display:block; left: var(--x); top: var(--y); width: var(--w); height: var(--h); }
.hotspot-diashoras-abs a:hover{ outline:2px dashed rgba(200,241,10,.35); outline-offset:-2px; }
.hotspot-diashoras-abs .b1{ --x: 0%;  --y: 0%; --w: 25%; --h: 100%; }
.hotspot-diashoras-abs .b2{ --x: 25%;   --y: 0%; --w: 25%; --h: 100%; }
.hotspot-diashoras-abs .b3{ --x: 50%;   --y: 0%; --w: 25%; --h: 100%; }
.hotspot-diashoras-abs .b4{ --x: 75%;   --y: 0%; --w: 25%;  --h: 100%; }
@media (max-width:900px){
  .hotspot-diashoras-abs .hotspots{ display:block !important; }
}
/*  PAGINA DE TARIFAS Y PROMOCIONES - Imagen 06: 4 botones absolutos */
.hotspot-tarifas-abs{ position:relative; }
.hotspot-tarifas-abs .hotspots{ position:absolute; inset:0; }
.hotspot-tarifas-abs a{ position:absolute; display:block; left: var(--x); top: var(--y); width: var(--w); height: var(--h); }
.hotspot-tarifas-abs a:hover{ outline:2px dashed rgba(200,241,10,.35); outline-offset:-2px; }
.hotspot-tarifas-abs .b1{ --x: 8%;  --y: 0%; --w: 11.6%; --h: 60%; }
.hotspot-tarifas-abs .b2{ --x: 32%;   --y: 0%; --w: 11.6%; --h: 60%; }
.hotspot-tarifas-abs .b3{ --x: 56.5%;   --y: 0%; --w: 11.6%; --h: 60%; }
.hotspot-tarifas-abs .b4{ --x: 79.5%;   --y: 0%; --w: 11.6%;  --h: 60%; }
@media (max-width:900px){
  .hotspot-tarifas-abs .hotspots{ display:block !important; }
} 

/*  ACADEMIA - Imagen 13: 4 botones absolutos */
.hotspot-academia-abs{ position:relative; }
.hotspot-academia-abs .hotspots{ position:absolute; inset:0; }
.hotspot-academia-abs a{ position:absolute; display:block; left: var(--x); top: var(--y); width: var(--w); height: var(--h); }
.hotspot-academia-abs a:hover{ outline:2px dashed rgba(200,241,10,.35); outline-offset:-2px; }
.hotspot-academia-abs .b1{ --x: 0%;  --y: 0%; --w: 28.5%; --h: 100%; }
.hotspot-academia-abs .b2{ --x: 28.5%;   --y: 0%; --w: 21.5%; --h: 100%; }
.hotspot-academia-abs .b3{ --x: 50%;   --y: 0%; --w: 25%; --h: 100%; }
.hotspot-academia-abs .b4{ --x: 75%;   --y: 0%; --w: 25%;  --h: 100%; }
@media (max-width:900px){
  .hotspot-academia-abs .hotspots{ display:block !important; }
}



/*  PAGINA DE UBICACIÓN - Imagen 06: 4 botones absolutos */
.hotspot-ubicacion-abs{ position:relative; }
.hotspot-ubicacion-abs .hotspots{ position:absolute; inset:0; }
.hotspot-ubicacion-abs a{ position:absolute; display:block; left: var(--x); top: var(--y); width: var(--w); height: var(--h); }
.hotspot-ubicacion-abs a:hover{ outline:2px dashed rgba(200,241,10,.35); outline-offset:-2px; }
.hotspot-ubicacion-abs .b1{ --x: 0%;      --y: 50%; --w: 16.2%; --h: 50%; }
.hotspot-ubicacion-abs .b2{ --x: 16.2%;   --y: 0%; --w: 16.2%; --h: 50%; }
.hotspot-ubicacion-abs .b3{ --x: 67.6%;   --y: 50%; --w: 16.2%; --h: 50%; }
.hotspot-ubicacion-abs .b4{ --x: 83.8%;   --y: 0%; --w: 16.2%;  --h: 50%; }
@media (max-width:900px){
  .hotspot-ubicacion-abs .hotspots{ display:block !important; }
} 


/* Volver al principio (Imagen 11) */
.hotspot-backtop{position:relative}
.hotspot-backtop .back-to-top{ --x:35%; --y:61%; --w:30%; --h:29%; position:absolute; left:var(--x); top:var(--y); width:var(--w); height:var(--h); display:block; }
.hotspot-backtop .back-to-top:hover{ outline:2px dashed rgba(200,241,10,1); outline-offset:-2px }

/* Footer */
.site-footer{background:#07152a}
.site-footer img{width:100%; height:auto; display:block}

/* Menú móvil por imágenes pegadas a la derecha (cerrado por defecto) */
#mobile-nav.menu-images{ display:none; }
@media (max-width: 900px){
  /*hace que la version movil se vea y la desktop no*/
  .desktop-only { display:none !important; }
  .mobile-only  { display:block !important; }

  #mobile-nav.menu-images{
    position: fixed; top:0; right:0; bottom:0; left:auto;
    z-index:9999; background:#07152a; border-left:2px solid var(--accent);
    padding:56px 0 0 0; width:max-content; overflow-y:auto;
  }
  #mobile-nav.menu-images.is-open{ display:flex !important; flex-direction:column; align-items:flex-end; gap:0; }
  #mobile-nav.menu-images a{ display:block; margin:0 !important; border:0 !important; line-height:0; width:auto; }
  :root{ --menu-img-h: clamp(40px, 10vw, 72px); }
  #mobile-nav.menu-images img{ display:block; height:var(--menu-img-h)!important; width:auto!important; margin:0; padding:0; }
  .nav-toggle{ display:block !important; position:fixed; top:12px; right:12px; z-index:10000; }
  .header-wrap > img, .hotspots{ display:none !important; }
}

/* Botones dentro de páginas */
.page-buttons{ padding: 16px; }
.btn-grid{ max-width: var(--maxw); margin: 0 auto; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.btn-solid{ text-align:center; padding:12px 14px; font-weight:700; color:#07152a; background: var(--accent); border-radius:999px; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.btn-solid:hover{ filter: brightness(0.95); }

/* Contenedor móvil de la home */
#home-mobile {
  max-width: var(--maxw);
  margin: 0 auto;
}

#home-mobile img{
  display:block;
  width:100%;
  height:auto;
  line-height:0;
  /* Evita saltos de contenido al cargar */
  contain: content;
}