/* Zuhause Gym. Generado desde una receta con demos/generar.py.

   Lo único que cambia entre sitios vive arriba, en las variables: la paleta, la
   tipografía y el lenguaje de formas. Debajo de eso el CSS es el mismo, porque
   lo que diferencia a un sitio de otro es la combinación (paleta, tipografía,
   formas, disposición del hero, galería, coreografía y efecto de fondo), no
   tener reglas distintas.

   La paleta está en un bloque solo a propósito: si después se consigue el logo
   del negocio, se muestrean sus colores y se reemplaza acá de una sola vez. */

:root {
  --fondo:         #100D0B;
  --caja:          #171310;
  --caja-alta:     #1D1815;
  --linea:         #332A24;
  --texto:         #FFFFFF;
  --texto-suave:   #D8D8D8;
  --gris:          #A3A3A3;
  --gris-firme:    #7C7C7C;
  --acento:        #D9694F;
  --acento-alto:   #EE8368;
  --acento-oscuro: #D9694F;
  --sobre-acento:  #FFFFFF;
  --cierre-fondo:  #171310;
  --cierre-texto:  #FFFFFF;
  --cierre-gris:   #A3A3A3;
  --velo-medio:    rgba(0,0,0,.86);
  --velo-suave:    rgba(0,0,0,.5);
  --curva:  cubic-bezier(.18, .8, .34, 1);
  --rapido: .28s;
  --medio:  .62s;
  --ancho:  1140px;
  --radio:  8px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; }
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }

body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font-family: 'Mulish', system-ui, sans-serif;
  font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: 'Sora', sans-serif; font-weight: 700; letter-spacing: -.035em; line-height: 1.04; margin: 0; }
p { margin: 0 0 1em; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; }

.envoltorio { max-width: var(--ancho); margin-inline: auto; padding-inline: 26px; }
.doble { display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: center; }

/* barra */

.barra {
  position: sticky; top: 0; z-index: 40;
  background: rgba(16,13,11,.85); backdrop-filter: blur(13px);
  border-bottom: 1px solid transparent;
  transition: background var(--rapido) var(--curva), border-color var(--rapido) var(--curva);
}
.barra--compacta { background: rgba(16,13,11,.97); border-bottom-color: var(--linea); }
.barra__interior { display: flex; align-items: center; gap: 16px; min-height: 74px; transition: min-height var(--rapido) var(--curva); }
.barra--compacta .barra__interior { min-height: 60px; }

.marca { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; }
.marca img { width: 42px; height: 42px; border-radius: var(--radio); object-fit: cover; border: 1px solid var(--linea); }
.marca__nombre { font-family: 'Sora', sans-serif; font-weight: 700; letter-spacing: -.035em; font-size: 1.08rem; }
.marca__zona { font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; color: var(--gris); }

.barra__enlaces { display: flex; gap: 24px; }
.enlace-barra { position: relative; text-decoration: none; font-size: .87rem; color: var(--texto-suave); transition: color var(--rapido) var(--curva); }
.enlace-barra::after {
  content: ''; position: absolute; left: 0; bottom: -5px; width: 100%; height: 2px;
  background: var(--acento); transform: scaleX(0); transform-origin: left;
  transition: transform var(--rapido) var(--curva);
}
.enlace-barra:hover { color: var(--texto); }
.enlace-barra:hover::after { transform: scaleX(1); }
.barra__acciones { display: flex; align-items: center; gap: 9px; }

/* botones. El borde llega a 3:1 contra el fondo, o no se lee como botón. */

.boton {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 13px 23px; border-radius: var(--radio); 
  font-size: .92rem; font-weight: 700; letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent; background: transparent; font-family: inherit;
  transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva),
              border-color var(--rapido) var(--curva), transform var(--rapido) var(--curva);
}
.boton--fuerte { background: var(--acento); color: var(--sobre-acento); }
.boton--fuerte:hover { background: var(--acento-alto); transform: translateY(-2px); }
.boton--linea { border-color: var(--gris-firme); color: var(--texto); }
.boton--linea:hover { border-color: var(--acento); color: var(--acento); transform: translateY(-2px); }
.boton--chico { padding: 9px 16px; font-size: .84rem; }
.boton--grande { padding: 17px 31px; font-size: 1.04rem; }

/* portada */

.portada { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; min-height: min(88vh, 790px); border-bottom: 1px solid var(--linea); }
.portada__panel { position: relative; align-self: stretch; overflow: hidden; }
.portada__panel::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--fondo) 0%, rgba(0,0,0,0) 15%); }
.portada__interior { padding: 92px 52px 84px max(26px, calc((100vw - var(--ancho)) / 2 + 26px)); justify-self: start; width: 100%; }

.portada { position: relative; overflow: hidden; }
.portada__foto { position: absolute; inset: 0; background: url('../img/portada.jpg') center 44% / cover no-repeat; filter: saturate(.9) contrast(1.05); }
.particulas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.7s var(--curva); pointer-events: none; z-index: 2; }
.particulas--vivo { opacity: 1; }
.portada__interior { position: relative; z-index: 3; }

.rotulo { font-size: .74rem; letter-spacing: .19em; text-transform: uppercase; color: var(--acento); margin: 0 0 20px; font-weight: 700; }
.titulo { font-size: clamp(2.8rem, 7.2vw, 4.6rem); margin: 0 0 24px; }
.titulo__linea { display: block; overflow: hidden; }
.titulo__masa { display: inline-block; }
.titulo__masa--acento { color: var(--acento); }
.letra { display: inline-block; }
.palabra { display: inline-block; white-space: nowrap; }
.portada__lema { font-family: 'Sora', sans-serif; font-weight: 700; letter-spacing: -.035em; font-size: clamp(1.1rem, 2.5vw, 1.5rem); margin: 0 0 13px; }
.portada__sub { color: var(--gris); max-width: 50ch; margin: 0 0 32px; }
.portada__acciones { display: flex; flex-wrap: wrap; gap: 12px; }

/* respaldo si no corre GSAP: lo que se ve al cargar no depende de nada */
html:not(.gsap) .titulo__masa,
html:not(.gsap) .rotulo,
html:not(.gsap) .portada__lema,
html:not(.gsap) .portada__sub,
html:not(.gsap) .portada__acciones > * { opacity: 1; }

/* banda corrida */

.banda { overflow: hidden; border-block: 1px solid var(--linea); background: var(--caja); padding: 14px 0; }
.banda__via { display: flex; gap: 28px; width: max-content; animation: desfilar calc(var(--cuantas, 6) * 7s) linear infinite; }
.banda:hover .banda__via { animation-play-state: paused; }
.banda__via span { font-size: .82rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; white-space: nowrap; }
.banda__via i { color: var(--acento); font-style: normal; font-size: .6rem; align-self: center; }
@keyframes desfilar { to { transform: translateX(-50%); } }

/* secciones */

.seccion { padding: 92px 0; }
.seccion--caja { background: var(--caja); }
.seccion__titulo { font-size: clamp(1.9rem, 4.2vw, 2.9rem); margin-bottom: 13px; }
.seccion__titulo em { color: var(--acento); font-style: normal; }
.seccion__bajada { color: var(--gris); max-width: 56ch; margin-bottom: 40px; }

/* cifras */

.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; }
.cifra { background: var(--caja-alta); border: 1px solid var(--linea); border-radius: var(--radio); padding: 26px 24px; }
.cifra__n { font-family: 'Sora', sans-serif; font-weight: 700; letter-spacing: -.035em; font-size: 2.3rem; color: var(--acento); display: block; margin-bottom: 6px; }
.cifra__q { color: var(--gris); font-size: .88rem; }

/* actividades */

.actividades { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; align-items: stretch; }
.actividad {
  display: flex; flex-direction: column;
  background: var(--caja-alta); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 28px 26px; 
  transition: border-color var(--medio) var(--curva), transform var(--medio) var(--curva);
}
.actividad:hover { border-color: var(--acento); transform: translateY(-3px); }
.actividad__n { font-family: 'Sora', sans-serif; font-weight: 700; letter-spacing: -.035em; font-size: .9rem; color: var(--acento); margin-bottom: 13px; }
.actividad h3 { font-size: 1.25rem; margin-bottom: 8px; }
.actividad p { color: var(--gris); font-size: .94rem; margin: 0; }

/* precio: nace vacío y con hidden, así que si no hay precios no se dibuja nada */
.precio {
  align-self: flex-start; margin-top: auto;
  font-family: 'Sora', sans-serif; font-weight: 700; letter-spacing: -.035em; font-size: .95rem;
  color: var(--sobre-acento); background: var(--acento);
  padding: 5px 13px; border-radius: var(--radio); 
  font-variant-numeric: tabular-nums;
}
.actividad .precio { margin-top: 18px; }

/* sedes */

.sedes { display: grid; align-items: stretch; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-bottom: 32px; }
.sede { display: flex; flex-direction: column; background: var(--caja-alta); border: 1px solid var(--linea); border-radius: var(--radio); padding: 26px 24px; transition: border-color var(--medio) var(--curva); }
.sede:hover { border-color: var(--acento); }
.sede__nombre { font-size: 1.22rem; margin-bottom: 7px; }
.sede__dato { color: var(--gris); font-size: .93rem; margin: 0 0 4px; }
.sede__acciones { display: flex; flex-wrap: wrap; gap: 9px; margin-top: auto; padding-top: 18px; }

/* mapa */

.mapa { position: relative; }
.mapa__mando { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 13px; }
.ficha { padding: 9px 15px; border-radius: var(--radio); cursor: pointer; font-size: .84rem; font-weight: 600; background: transparent; border: 1px solid var(--linea); color: var(--texto-suave); transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva), border-color var(--rapido) var(--curva); }
.ficha:hover { border-color: var(--acento); color: var(--acento); }
.ficha.activo { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.ficha--cerca { margin-left: auto; }
.mapa__lienzo { height: 430px; border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; background: var(--caja-alta); }
.mapa__lienzo .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.9) saturate(.6); }
.mapa__salida { margin: 13px 0 0; color: var(--gris); font-size: .92rem; }
.mapa__salida strong { color: var(--texto); }
.mapa__salida a { color: var(--acento); }
.chincheta { position: relative; }
.chincheta__punto { position: absolute; inset: 0; margin: auto; width: 11px; height: 11px; border-radius: 50%; background: var(--acento); box-shadow: 0 0 0 3px var(--fondo); }
.chincheta__aro { position: absolute; inset: -9px; border: 1px solid var(--acento); border-radius: 50%; opacity: .5; }
.chincheta__texto { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); white-space: nowrap; font-size: .73rem; font-weight: 700; color: var(--texto); background: var(--caja-alta); padding: 2px 7px; border-radius: var(--radio); border: 1px solid var(--linea); }
.chincheta--yo .chincheta__punto { background: var(--texto); }
.chincheta--yo .chincheta__aro { border-color: var(--texto); }
.leaflet-popup-content-wrapper { border-radius: var(--radio); }
.leaflet-popup-content { font-size: .89rem; line-height: 1.5; }
.leaflet-popup-content a { color: var(--acento-oscuro); }

/* galería.

   Las fotos llevan un revelado propio del sitio: vienen de sesiones distintas y
   sin eso la galería se ve como un collage. El filtro va sobre la imagen, así
   el visor muestra la foto tal cual al abrirla en grande. */

.grilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.grilla figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--radio); }
.grilla img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; transition: transform 1s var(--curva); }
.grilla figure:hover img { transform: scale(1.05); }

.mosaico img, .grilla img, .tira img, .galeria__via img { filter: saturate(.8) contrast(1.04) sepia(.08); }

.mira { position: absolute; inset: 0; border: 0; background: transparent; cursor: zoom-in; }

.visor { border: 0; padding: 0; background: transparent; max-width: min(92vw, 880px); }
.visor::backdrop { background: rgba(0, 0, 0, .82); backdrop-filter: blur(4px); }
.visor__img { width: 100%; height: auto; border-radius: var(--radio); }
.visor__cerrar { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.45); background: rgba(0,0,0,.6); color: #fff; border-radius: var(--radio); cursor: pointer; font-size: 1.1rem; line-height: 1; }
.visor__pie { color: #fff; font-size: .87rem; margin-top: 10px; text-align: center; }

/* horarios: la sección nace oculta y aparece si se cargan */

.horario { width: 100%; border-collapse: collapse; max-width: 640px; }
.horario th, .horario td { text-align: left; padding: 16px 0; border-bottom: 1px solid var(--linea); font-weight: 400; }
.horario th { font-family: 'Sora', sans-serif; font-weight: 700; letter-spacing: -.035em; font-size: 1rem; }
.horario td { color: var(--gris); font-variant-numeric: tabular-nums; }

/* cierre y pie */

.cierre { background: var(--cierre-fondo); color: var(--cierre-texto); padding: 100px 0; text-align: center; }
.cierre h2 { font-size: clamp(2rem, 4.6vw, 3rem); margin-bottom: 15px; }
.cierre h2 em { color: var(--acento-alto); font-style: normal; }
.cierre p { color: var(--cierre-gris); max-width: 48ch; margin: 0 auto 32px; }

.pie { background: var(--cierre-fondo); color: var(--cierre-gris); padding: 32px 0; border-top: 1px solid var(--linea); }
.pie__interior { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; font-size: .85rem; }
.pie a { color: var(--cierre-texto); text-decoration: none; }
.pie a:hover { text-decoration: underline; }
.pie__redes { display: flex; gap: 9px; }

.red { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radio); border: 1px solid var(--linea); color: var(--texto-suave); transition: color var(--rapido) var(--curva), border-color var(--rapido) var(--curva), transform var(--rapido) var(--curva); }
.red:hover { color: var(--acento); border-color: var(--acento); transform: translateY(-2px); }
.pie .red { color: var(--cierre-texto); }
.glifo { width: 18px; height: 18px; fill: currentColor; }

.wa-fijo { display: none; position: fixed; right: 16px; bottom: 16px; z-index: 50; align-items: center; gap: 9px; padding: 13px 18px; border-radius: var(--radio);  background: var(--acento); color: var(--sobre-acento); text-decoration: none; font-size: .9rem; font-weight: 700; box-shadow: 0 14px 32px -14px rgba(0,0,0,.55); }
.wa-fijo .glifo { width: 19px; height: 19px; }

/* video de portada: la foto de arriba queda de poster */
.portada__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; opacity: 0; transition: opacity 1.1s var(--curva); }
.portada__video--vivo { opacity: 1; }

[data-anim] { will-change: transform, opacity; }

/* pantalla chica */

@media (max-width: 900px) {
  .doble { grid-template-columns: 1fr; gap: 36px; }
  .portada { grid-template-columns: 1fr; min-height: 0; }
  .portada__panel { order: -1; min-height: 44vh; }
  .portada__panel::before { background: linear-gradient(180deg, rgba(0,0,0,0) 72%, var(--fondo) 100%); }
  .portada__interior { padding: 42px 22px 60px; justify-self: stretch; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .seccion { padding: 66px 0; }
  .envoltorio { padding-inline: 19px; }
  .barra__enlaces { display: none; }
  .marca__zona { display: none; }
  .marca__nombre { white-space: nowrap; }
  .wa-fijo { display: flex; }
  .mapa__lienzo { height: 310px; }
  .ficha--cerca { margin-left: 0; }
  .cierre { padding: 74px 0; }
  .actividad { padding: 24px 20px; }
  .grilla { grid-template-columns: repeat(2, 1fr); }
}

/* todo el movimiento se apaga si el sistema lo pide. No es opcional. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
  .banda__via { animation: none; }
  .particulas { display: none; }
  [data-anim] { opacity: 1 !important; transform: none !important; filter: none !important; }
}