/* Amara Centro Fitness. Morón y San Justo.
   Paleta tomada del logo: #151515 negro, #E40808 rojo, #FEFEFE blanco.
   Todo el movimiento usa la misma curva y tres duraciones.
   El bloque del final lo desactiva con prefers-reduced-motion. */

:root {
  --negro:      #0E0E0E;
  --negro-alto: #151515;
  --negro-caja: #1A1A1A;
  --rojo:       #E40808;
  --rojo-vivo:  #FF2A2A;
  --blanco:     #FEFEFE;
  --gris:       #9C9C9C;
  --gris-tenue: #757575;
  --gris-linea: #2E2E2E;

  --curva:  cubic-bezier(.16, .84, .44, 1);
  --rapido: .28s;
  --medio:  .6s;
  --lento:  .9s;

  --ancho: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--negro);
  color: var(--blanco);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3 { font-weight: 800; letter-spacing: -.015em; line-height: 1.04; margin: 0; text-transform: uppercase; }

.envoltorio { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: 24px; }

/* estados antes de animar (sólo si el JS está vivo) */

/* Con GSAP cargado (.gsap) estos estados no aplican, para que las transiciones
   del CSS no compitan con las de GSAP por el transform.
   Si GSAP no carga, esto da la entrada de respaldo. */

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

.js:not(.gsap) [data-anim="subir"]    { opacity: 0; transform: translateY(20px); }
.js:not(.gsap) [data-anim="lateral"]  { opacity: 0; transform: translateX(-16px); }
.js:not(.gsap) [data-anim="escala"]   { opacity: 0; transform: scale(.965); }
.js:not(.gsap) [data-anim="aparecer"] { opacity: 0; }
.js:not(.gsap) [data-anim].visto {
  opacity: 1;
  transform: none;
  transition: opacity var(--lento) var(--curva), transform var(--lento) var(--curva);
}

/* el título se revela detrás de una cortina */
.titulo__linea { display: block; overflow: hidden; padding-bottom: .04em; }
.js .titulo__masa { display: inline-block; }
.palabra { display: inline-block; white-space: nowrap; }
.letra { display: inline-block; will-change: transform, opacity; }
.js:not(.gsap) .titulo__masa { transform: translateY(105%); }
.js:not(.gsap) .titulo__masa.visto { transform: none; transition: transform 1.05s var(--curva); }

/* barra */

.barra {
  position: sticky; top: 0; z-index: 40;
  background: rgba(14, 14, 14, .82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: background var(--rapido) var(--curva), border-color var(--rapido) var(--curva);
}

.barra--compacta { background: rgba(14, 14, 14, .96); border-bottom-color: var(--gris-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: 62px; }

.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; }

.marca__sello { position: relative; display: block; border-radius: 50%; padding: 2px; background: linear-gradient(140deg, var(--rojo), #6B0404 60%, var(--gris-linea)); }
.marca__sello img { width: 42px; height: 42px; border-radius: 50%; }

.marca__texto { display: flex; flex-direction: column; line-height: 1.1; }
.marca__nombre { font-weight: 800; font-size: 1.08rem; letter-spacing: .06em; }
.marca__zona { font-size: .72rem; color: var(--gris); letter-spacing: .14em; text-transform: uppercase; }

.barra__acciones { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.enlace-barra {
  position: relative; text-decoration: none; font-size: .9rem; font-weight: 600;
  color: var(--gris); padding: 4px 2px; transition: color var(--rapido) var(--curva);
}
.enlace-barra::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px;
  background: var(--rojo); transform: scaleX(0); transform-origin: left;
  transition: transform var(--rapido) var(--curva);
}
.enlace-barra:hover { color: var(--blanco); }
.enlace-barra:hover::after { transform: scaleX(1); }

/* logos de redes: heredan el color, asi acompanan la paleta de cada sitio */
.glifo { width: 20px; height: 20px; display: block; flex: 0 0 auto; }
.boton .glifo { width: 18px; height: 18px; }
.icono-red {
  border-radius: 4px;
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  text-decoration: none; border: 1px solid var(--gris-linea); color: var(--gris);
  transition: color var(--rapido) var(--curva), border-color var(--rapido) var(--curva),
              background var(--rapido) var(--curva), transform var(--rapido) var(--curva);
}
.icono-red:hover { color: var(--blanco); border-color: var(--rojo); background: rgba(228,8,8,.12); transform: translateY(-2px); }
.icono-red:focus-visible { outline: 2px solid var(--rojo); outline-offset: 3px; }
.pie__red { display: inline-flex; align-items: center; gap: 8px; }
.pie__red .glifo { width: 17px; height: 17px; }

/* botones */

.boton {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: 4px;
  /* font y background explícitos: la clase se usa en <a> y en <button>, y un
     <button> trae fondo gris y tipografía propios del navegador */
  font-family: inherit; background: transparent; color: var(--blanco);
  font-weight: 700; font-size: .93rem; letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background var(--rapido) var(--curva), border-color var(--rapido) var(--curva),
              transform var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva);
}

/* un brillo que cruza el botón al pasar por encima */
.boton::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .75s var(--curva);
}
.boton:hover::before { transform: translateX(120%); }

.boton--fuerte { background: var(--rojo); color: var(--blanco); }
.boton--fuerte:hover { background: var(--rojo-vivo); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(228, 8, 8, .32); }

/* el borde tiene que llegar a 3:1 contra el fondo, o no se lee como boton */
.boton--linea { border-color: var(--gris-tenue); color: var(--blanco); }
.boton--linea:hover { border-color: var(--blanco); transform: translateY(-2px); }

.boton--chico  { padding: 9px 15px; font-size: .82rem; }
.boton--grande { padding: 16px 30px; font-size: .97rem; }

/* portada */

.portada { position: relative; overflow: hidden; isolation: isolate; }

.portada__foto {
  position: absolute; inset: -6% 0 0;
  background: url('../img/portada.jpg') center 42% / cover no-repeat;
  /* la foto ya viene muy oscura de origen (luminancia media 48/255): se levanta,
     y la legibilidad del texto la resuelve el velo de abajo */
  filter: brightness(1.2) saturate(1.05) contrast(1.04);
  transform: scale(1.06);
  animation: respirar 26s var(--curva) forwards;
  z-index: -2;
}

@keyframes respirar { from { transform: scale(1.14); } to { transform: scale(1.06); } }

.portada__velo {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(14,14,14,.93) 0%, rgba(14,14,14,.62) 48%, rgba(14,14,14,.18) 100%),
    linear-gradient(180deg, rgba(14,14,14,.5) 0%, rgba(14,14,14,0) 38%, var(--negro) 100%);
}

/* anillo que gira lento, tomado del círculo del logo */
.portada__anillo {
  position: absolute; z-index: -1;
  right: -140px; top: 50%; width: 620px; height: 620px;
  margin-top: -310px; border-radius: 50%;
  border: 1px solid rgba(228, 8, 8, .16);
  animation: girar 46s linear infinite;
}
.portada__anillo::after {
  content: ''; position: absolute; inset: 58px; border-radius: 50%;
  border: 1px solid rgba(254, 254, 254, .05);
}

@keyframes girar { to { transform: rotate(360deg); } }

.portada__interior { position: relative; z-index: 2; padding: 116px 24px 104px; max-width: var(--ancho); margin-inline: auto; }

.rotulo {
  display: inline-flex; align-items: center;
  font-size: .76rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gris); margin: 0 0 22px;
}

.titulo { font-size: clamp(2.7rem, 8.4vw, 5.3rem); }
.titulo__masa--rojo { color: var(--rojo); }

.portada__lema { font-size: clamp(1.15rem, 3vw, 1.65rem); font-weight: 600; margin: 22px 0 6px; }
.portada__sub { color: var(--gris); max-width: 46ch; margin: 0 0 34px; }
.portada__acciones { display: flex; flex-wrap: wrap; gap: 12px; }

/* banda corrida */

.banda {
  position: relative; z-index: 2;
  border-top: 1px solid var(--gris-linea); border-bottom: 1px solid var(--gris-linea);
  background: var(--negro-alto); overflow: hidden; padding: 15px 0;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.banda__via {
  display: flex; align-items: center; gap: 26px; width: max-content;
  animation: correr 34s linear infinite;
}
.banda:hover .banda__via { animation-play-state: paused; }

.banda__via span { font-size: .84rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; }
.banda__via i { color: var(--rojo); font-style: normal; font-size: .6rem; }

@keyframes correr { to { transform: translateX(-50%); } }

/* cifras */

.cifras { border-bottom: 1px solid var(--gris-linea); padding: 54px 0; }
.cifras__grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 34px; }

/* cada cifra es un enlace: lleva al mapa, a Instagram o a los horarios */
.cifra {
  display: flex; flex-direction: column; gap: 6px;
  text-decoration: none; padding: 4px 0;
  border-left: 2px solid transparent; padding-left: 0;
  transition: border-color var(--medio) var(--curva), padding-left var(--medio) var(--curva);
}
.cifra:hover { border-left-color: var(--rojo); padding-left: 14px; }
.cifra__numero { font-size: clamp(2.1rem, 5vw, 3rem); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.cifra__pie { font-size: .86rem; color: var(--gris); text-transform: uppercase; letter-spacing: .1em; }
.cifra__pie em {
  display: block; font-style: normal; color: var(--rojo); font-size: .78rem; letter-spacing: .06em;
  opacity: 0; transform: translateY(-3px);
  transition: opacity var(--medio) var(--curva), transform var(--medio) var(--curva);
}
.cifra:hover .cifra__pie em, .cifra:focus-visible .cifra__pie em { opacity: 1; transform: none; }
.cifra:focus-visible { outline: 2px solid var(--rojo); outline-offset: 4px; }

/* secciones */

.seccion { padding: 88px 0; border-top: 1px solid var(--gris-linea); }
.seccion:first-of-type { border-top: 0; }
.seccion--galeria { padding-bottom: 72px; }

.seccion__titulo { font-size: clamp(1.7rem, 4.4vw, 2.6rem); margin-bottom: 10px; }
.seccion__bajada { color: var(--gris); max-width: 58ch; margin: 0 0 42px; }

/* sucursales */

.sedes { display: grid; align-items: stretch; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }

.sede {
  position: relative; overflow: hidden;
  background: var(--negro-alto); border: 1px solid var(--gris-linea); border-radius: 6px;
  padding: 30px; display: flex; flex-direction: column; gap: 6px;
  transition: border-color var(--medio) var(--curva), transform var(--medio) var(--curva);
}
.sede::before {
  content: ''; position: absolute; left: 0; top: 0; width: 3px; height: 100%;
  background: var(--rojo); transform: scaleY(0); transform-origin: top;
  transition: transform var(--medio) var(--curva);
}
.sede:hover { border-color: #4A4A4A; transform: translateY(-3px); }
.sede:hover::before { transform: scaleY(1); }

.sede__nombre { font-size: 1.35rem; }

.sede__dato { color: var(--gris); font-size: .96rem; margin: 2px 0; }
.sede__dato strong { color: var(--blanco); font-weight: 600; }
.sede__acciones { margin-top: auto; padding-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }

/* la dirección y el teléfono son enlaces: abren el mapa o llaman */
.sede__enlace {
  text-decoration: none; border-bottom: 1px solid transparent;
  transition: border-color var(--rapido) var(--curva), color var(--rapido) var(--curva);
}
.sede__enlace:hover { border-bottom-color: var(--rojo); }
.sede__enlace:hover strong { color: var(--rojo); }
.sede__enlace:focus-visible { outline: 2px solid var(--rojo); outline-offset: 3px; }

.horario__nota { margin: 20px 0 0; font-size: .92rem; }
.horario__nota a { color: var(--rojo); text-decoration: none; font-weight: 600; }
.horario__nota a:hover { text-decoration: underline; }

/* instalaciones */

.doble { display: grid; grid-template-columns: 1.05fr .95fr; gap: 54px; align-items: center; }

.lista-check { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.lista-check li { display: flex; gap: 13px; align-items: flex-start; }
.lista-check li::before {
  content: ''; flex: 0 0 auto; width: 8px; height: 8px; margin-top: .58em;
  background: var(--rojo); border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(228, 8, 8, .14);
}

.foto-marco { position: relative; border-radius: 6px; overflow: hidden; border: 1px solid var(--gris-linea); }
.foto-marco img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--curva); }
.foto-marco:hover img { transform: scale(1.06); }

/* polvo de magnesio (Three.js) */

.particulas {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  opacity: 0; transition: opacity 1.6s var(--curva);
  pointer-events: none;
}
.particulas--vivo { opacity: 1; }

/* mapa */

.mapa { margin-top: 30px; }

.mapa__mando { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

.ficha {
  background: var(--negro-alto); color: var(--gris);
  border: 1px solid var(--gris-linea); border-radius: 999px;
  padding: 9px 17px; font: inherit; font-size: .85rem; font-weight: 600;
  cursor: pointer;
  transition: color var(--rapido) var(--curva), border-color var(--rapido) var(--curva),
              background var(--rapido) var(--curva);
}
.ficha:hover { color: var(--blanco); border-color: #4A4A4A; }
.ficha.activo { color: var(--blanco); border-color: var(--rojo); background: rgba(228, 8, 8, .1); }
.ficha--destacada { color: var(--blanco); border-color: var(--rojo); }
.ficha--destacada:hover { background: var(--rojo); }
.ficha:disabled { opacity: .6; cursor: default; }
.ficha:focus-visible { outline: 2px solid var(--rojo); outline-offset: 3px; }

.mapa__lienzo {
  height: 460px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--gris-linea); background: var(--negro-alto);
  z-index: 1;
}

.mapa__resultado {
  margin: 14px 0 0; padding: 14px 18px;
  background: var(--negro-alto); border: 1px solid var(--gris-linea);
  border-left: 3px solid var(--rojo); border-radius: 4px;
  font-size: .94rem; color: var(--gris);
}
.mapa__resultado strong { color: var(--blanco); }
.mapa__resultado a { color: var(--rojo); text-decoration: none; font-weight: 600; }
.mapa__resultado a:hover { text-decoration: underline; }

/* chinchetas propias, en el rojo de la marca */
.chincheta { position: relative; }
.chincheta__punto {
  position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  background: var(--rojo); border: 2px solid var(--blanco); border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .7);
}
.chincheta__aro {
  position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border: 2px solid var(--rojo); border-radius: 50%;
  animation: latir 2.6s var(--curva) infinite;
}
@keyframes latir {
  0%   { transform: scale(1);   opacity: .9; }
  70%  { transform: scale(3.4); opacity: 0; }
  100% { transform: scale(3.4); opacity: 0; }
}
.chincheta__texto {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%);
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--blanco); white-space: nowrap;
  background: rgba(14, 14, 14, .82); border: 1px solid var(--gris-linea);
  padding: 2px 8px; border-radius: 3px;
}
.chincheta--yo .chincheta__punto { background: var(--blanco); border-color: var(--rojo); }

/* Leaflet, vestido de oscuro */
.leaflet-container { background: #0B0B0B; font-family: inherit; }

/* Las tiles de OpenStreetMap vienen claras. Se invierten y se rota el matiz 180
   grados para que queden oscuras sin que los verdes y los azules cambien de color. */
.leaflet-tile {
  filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.7);
}
.leaflet-control-zoom a {
  background: var(--negro-alto) !important; color: var(--blanco) !important;
  border-color: var(--gris-linea) !important;
}
.leaflet-control-zoom a:hover { background: var(--rojo) !important; }
.leaflet-control-attribution {
  background: rgba(14, 14, 14, .82) !important; color: var(--gris-tenue) !important;
  font-size: .68rem !important;
}
.leaflet-control-attribution a { color: var(--gris) !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--negro-caja); color: var(--blanco);
  border: 1px solid var(--gris-linea); border-radius: 6px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .6);
}
.leaflet-popup-content { margin: 14px 16px; font-size: .9rem; line-height: 1.6; }
.leaflet-popup-content a { color: var(--rojo); font-weight: 600; text-decoration: none; }
.leaflet-popup-content a:hover { text-decoration: underline; }
.leaflet-popup-close-button { color: var(--gris) !important; }
.leaflet-popup-close-button:hover { color: var(--blanco) !important; }

/* galería */

.galeria__pista {
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  cursor: grab;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.galeria__pista::-webkit-scrollbar { display: none; }
.galeria__pista--tomada { cursor: grabbing; }

.galeria__via {
  --cuantas: 6;
  display: flex; gap: 16px; width: max-content; padding: 4px 24px;
  animation: desfilar calc(var(--cuantas) * 6.5s) linear infinite;
}
.galeria__pista:hover .galeria__via,
.galeria__via--quieta { animation-play-state: paused; }

@keyframes desfilar { to { transform: translateX(calc(-50% - 8px)); } }

.galeria__pieza { margin: 0; flex: 0 0 auto; }

.galeria__boton {
  position: relative; display: block; padding: 0; border: 1px solid var(--gris-linea);
  border-radius: 6px; overflow: hidden; background: var(--negro-alto); cursor: pointer;
  width: 264px; aspect-ratio: 4 / 5;
  transition: border-color var(--medio) var(--curva), transform var(--medio) var(--curva);
}
.galeria__boton img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--curva), filter var(--medio) var(--curva); filter: saturate(.92); }
.galeria__boton:hover { border-color: var(--rojo); transform: translateY(-4px); }
.galeria__boton:hover img { transform: scale(1.08); filter: saturate(1.05); }
.galeria__boton:focus-visible { outline: 2px solid var(--rojo); outline-offset: 3px; }

.galeria__lupa {
  position: absolute; right: 12px; bottom: 12px;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(14, 14, 14, .72); backdrop-filter: blur(4px);
  border: 1px solid rgba(254, 254, 254, .18);
  color: var(--blanco); font-size: 1.35rem; font-weight: 400; line-height: 1;
  opacity: 0; transform: scale(.8);
  transition: opacity var(--medio) var(--curva), transform var(--medio) var(--curva);
}
.galeria__boton:hover .galeria__lupa,
.galeria__boton:focus-visible .galeria__lupa { opacity: 1; transform: none; }

/* visor */

.visor {
  border: 0; padding: 0; margin: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%;
  background: rgba(8, 8, 8, .94); color: var(--blanco);
  display: none; place-items: center;
}
.visor[open] { display: grid; }
.visor::backdrop { background: rgba(8, 8, 8, .8); backdrop-filter: blur(6px); }

.visor__caja { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px; max-width: min(92vw, 900px); }

.visor__img {
  max-width: 100%; max-height: 76vh; border-radius: 6px;
  opacity: 0; transform: scale(.985);
  transition: opacity var(--medio) var(--curva), transform var(--medio) var(--curva);
}
.visor__img--lista { opacity: 1; transform: none; }

.visor__ficha { display: flex; align-items: center; gap: 16px; font-size: .88rem; color: var(--gris); text-align: center; }
.visor__cuenta { color: var(--gris-tenue); font-variant-numeric: tabular-nums; white-space: nowrap; }

.visor__cerrar, .visor__antes, .visor__despues {
  position: fixed; z-index: 2;
  background: rgba(22, 22, 22, .82); color: var(--blanco);
  border: 1px solid var(--gris-linea); border-radius: 50%;
  width: 48px; height: 48px; display: grid; place-items: center;
  font-size: 1.2rem; line-height: 1; cursor: pointer;
  transition: background var(--rapido) var(--curva), border-color var(--rapido) var(--curva), transform var(--rapido) var(--curva);
}
.visor__cerrar:hover, .visor__antes:hover, .visor__despues:hover { background: var(--rojo); border-color: var(--rojo); transform: scale(1.06); }

.visor__cerrar   { top: 22px; right: 22px; }
.visor__antes    { left: 22px;  top: 50%; margin-top: -24px; font-size: 1.7rem; }
.visor__despues  { right: 22px; top: 50%; margin-top: -24px; font-size: 1.7rem; }

/* horarios */

.horario { width: 100%; border-collapse: collapse; max-width: 520px; }
.horario caption { text-align: left; color: var(--gris); font-size: .9rem; padding-bottom: 14px; }
.horario th, .horario td { padding: 15px 4px; border-bottom: 1px solid var(--gris-linea); text-align: left; }
.horario th { font-weight: 600; font-size: .98rem; }
.horario td { color: var(--gris); text-align: right; font-variant-numeric: tabular-nums; }
.horario tr:last-child th, .horario tr:last-child td { border-bottom: 0; }
.horario .cerrado { color: var(--gris-tenue); }

/* cierre y pie */

.cierre { text-align: center; padding: 96px 0; border-top: 1px solid var(--gris-linea); }
.cierre h2 { font-size: clamp(1.8rem, 5vw, 3rem); margin-bottom: 14px; }
.cierre p { color: var(--gris); max-width: 44ch; margin: 0 auto 30px; }

.pie { border-top: 1px solid var(--gris-linea); padding: 44px 0; font-size: .9rem; color: var(--gris); }
.pie__interior { display: flex; flex-wrap: wrap; gap: 18px 34px; align-items: center; }
.pie a { text-decoration: none; transition: color var(--rapido) var(--curva); }
.pie a:hover { color: var(--blanco); }
.pie__nota { margin-left: auto; font-size: .82rem; color: var(--gris-tenue); }

/* whatsapp fijo */

.wa-fijo {
  display: none; position: fixed; right: 16px; bottom: 16px; z-index: 50;
  background: var(--rojo); color: var(--blanco); border-radius: 999px;
  padding: 11px 17px; font-weight: 700; font-size: .84rem; text-decoration: none;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .6);
}

/* responsive */

@media (max-width: 900px) {
  .doble { grid-template-columns: 1fr; gap: 34px; }
  .portada__interior { padding: 88px 24px 76px; }
  .seccion { padding: 66px 0; }
  .enlace-barra { display: none; }
  .portada__anillo { right: -240px; width: 460px; height: 460px; margin-top: -230px; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .envoltorio, .portada__interior { padding-inline: 18px; }
  .barra__acciones { gap: 6px; }
  .barra__acciones .boton--linea { display: none; }
  .wa-fijo { display: block; }
  /* la barra en celular: el nombre no se parte y la lista de sedes se guarda,
     que con cuatro nombres desbordaba y empujaba los botones */
  .marca__nombre { white-space: nowrap; }
  .marca__zona { display: none; }
  .marca img, .marca__sello img { width: 38px; height: 38px; }

  .pie { padding-bottom: 88px; }
  .pie__nota { margin-left: 0; }
  .sede { padding: 22px; }
    .cifras { padding: 40px 0; }
  .cifras__grilla { grid-template-columns: 1fr 1fr; gap: 26px; }
  .cifra:hover { padding-left: 0; border-left-color: transparent; }
  .cifra__pie em { opacity: 1; transform: none; }   /* en celular no hay hover: siempre visible */
  .mapa__lienzo { height: 340px; }
  .mapa__mando { gap: 6px; }
  .ficha { font-size: .8rem; padding: 8px 14px; }
  .galeria__boton { width: 208px; }
  .galeria__via { padding-inline: 18px; }
  .visor__caja { padding: 14px; }
  .visor__antes, .visor__despues { width: 42px; height: 42px; }
  .visor__antes { left: 10px; }
  .visor__despues { right: 10px; }
  .visor__cerrar { top: 14px; right: 14px; }
  /* la portada, más alta y compacta */
  .portada__velo { background: linear-gradient(180deg, rgba(14,14,14,.74) 0%, rgba(14,14,14,.66) 45%, var(--negro) 100%); }
}

/* se apaga todo el movimiento */

/* video de portada: la foto de arriba queda de poster, asi que el video entra
   con transicion cuando ya reproduce y su ausencia no se nota */
.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; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .portada__foto { animation: none; transform: none; }
  .portada__anillo { animation: none; }
  .banda__via { animation: none; }
  .galeria__via { animation: none; }
  .foto-marco:hover img { transform: none; }
  .galeria__boton:hover img { transform: none; }
  .galeria__boton:hover, .sede:hover, .boton--fuerte:hover, .boton--linea:hover { transform: none; }
  .boton:hover::before { transform: translateX(-120%); }
  .visor__img { opacity: 1; transform: none; }
  .particulas { display: none; }                    /* el lienzo de Three.js ni se crea */
  .chincheta__aro { animation: none; opacity: 0; }
  .cifra:hover { padding-left: 0; }
  .js [data-anim], .js [data-anim].visto,
  .js .titulo__masa, .js .titulo__masa.visto { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
  }
}