/* ==========================================================================
   Nacional Fitness Lleida — hoja de estilos
   HTML estático puro. Sin frameworks, sin CDN, sin paso de compilación.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fuentes autohospedadas (subsets latin y latin-ext)
   Los pesos se declaran por separado, igual que hacía la hoja de Google, para
   que el emparejamiento de font-weight sea idéntico al del original.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/oswald-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/oswald-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/oswald-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/oswald-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
/* Paleta. --red es el rojo de marca. --red-text es el mismo rojo elevado en
   luminosidad para textos pequenos: sobre #0A0A0A el de marca se queda en
   3.45:1 y WCAG AA pide 4.5:1 por debajo de 24px. --red-text da 5.24:1. */
:root {
  --red: #C81D25;
  --red-text: #FF2530;
  --ink: #0A0A0A;

  /* Curvas de animación. La hoja original las escribía a mano en cada regla;
     al empezar a usarlas como variable había que declararlas, porque un
     var() no definido invalida la declaración entera y la transición vuelve
     a cero sin avisar de nada.
     --ease-out sale rápida y frena al final: buena para hover de botones.
     --ease-soft arranca despacio: la de los movimientos que deben leerse
     como un acercamiento y no como un salto. */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #0A0A0A;
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--red); }
::selection { background: var(--red); color: #fff; }

.page {
  background: #0A0A0A;
  color: #fff;
  width: 100%;
  overflow-x: hidden;
  position: relative;
}

.accent { color: var(--red); }

/* Salto al contenido: invisible hasta que recibe el foco de teclado. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: #fff;
  color: var(--ink);
  padding: 14px 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.skip-link:focus {
  left: 8px;
  top: 8px;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   3. Navegación
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  background: rgba(10,10,10,0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  transition: color 0.32s cubic-bezier(0.22,1,0.36,1),
              letter-spacing 0.32s cubic-bezier(0.22,1,0.36,1),
              text-shadow 0.32s cubic-bezier(0.22,1,0.36,1),
              transform 0.32s cubic-bezier(0.22,1,0.36,1);
}
.nav-logo:hover {
  color: var(--red);
  text-shadow: 0 0 28px rgba(200,29,37,0.85);
}

/* El sello va a 40px de alto y el archivo mide 88, así que se ve nítido en
   pantallas retina. flex-shrink 0 evita que se aplaste al estrecharse. */
.nav-logo-mark {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
.nav-logo:hover .nav-logo-mark { filter: drop-shadow(0 0 10px rgba(200,29,37,0.55)); }
.mm-logo { display: flex; align-items: center; gap: 11px; }

.nav-links { display: none; gap: 40px; }

.nav-link {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  font-weight: 400;
  transition: color 0.3s cubic-bezier(0.22,1,0.36,1),
              letter-spacing 0.3s cubic-bezier(0.22,1,0.36,1),
              text-shadow 0.3s cubic-bezier(0.22,1,0.36,1);
}
.nav-link:hover {
  color: var(--red);
  letter-spacing: 0.22em;
  text-shadow: 0 0 18px rgba(200,29,37,0.55);
}

/* ── Selector de idioma ────────────────────────────────────────────────
   Tres botones muy pequeños, agrupados para que se lean como un solo
   control y no como tres enlaces más de la navegación. En la cabecera
   solo aparece en escritorio; en móvil vive dentro del menú desplegable,
   donde hay sitio para dedos. */
/* Bloque derecho de la cabecera: idioma + "Únete". El hueco de 26px los
   separa lo justo para que no parezcan un mismo control, pero los mantiene
   agrupados frente a los enlaces de la izquierda. */
.nav-right {
  display: none;
  align-items: center;
  gap: 26px;
}

.lang-switch {
  display: none;
  align-items: center;
}
@media (min-width: 900px) {
  .nav-right   { display: flex; }
  .lang-switch { display: flex; }
}

.lang-btn {
  position: relative;
  background: none;
  border: 0;
  margin: 0;
  padding: 8px 10px;
  font: inherit;
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  appearance: none;
  transition: color 0.3s var(--ease-out),
              text-shadow 0.3s var(--ease-out),
              transform 0.3s var(--ease-out);
}

/* Separador fino entre botones. Cuelga del botón de la derecha, así que al
   elevarse ese botón se lo llevaría consigo: la contra-traslación de abajo
   lo deja clavado en su sitio. */
.lang-btn + .lang-btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 11px;
  margin-top: -5.5px;
  background: rgba(255,255,255,0.18);
  transition: transform 0.3s var(--ease-out);
}

@media (hover: hover) {
  .lang-btn:hover {
    color: var(--red-text);
    text-shadow: 0 0 18px rgba(200,29,37,0.55);
    transform: translateY(-2px);
  }
  .lang-btn + .lang-btn:hover::before { transform: translateY(2px); }
}

/* El idioma en uso se marca con una barra roja encendida, no solo con el
   color del texto: el color a secas no vale como única señal. */
.lang-btn.is-active { color: #fff; }
.lang-btn.is-active::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 2px;
  height: 1px;
  background: var(--red-text);
  box-shadow: 0 0 10px rgba(200,29,37,0.7);
}

/* Dentro del menú móvil: mismo control, tamaño de dedo. */
.lang-switch--mm { display: flex; margin-top: 8px; }
.lang-switch--mm .lang-btn { font-size: 13px; padding: 12px 16px; }
.lang-switch--mm .lang-btn.is-active::after { left: 16px; right: 16px; bottom: 5px; }

.nav-cta { display: none; }

.btn-outline {
  border: 1px solid rgba(255,255,255,0.35);
  padding: 11px 22px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  display: inline-block;
  color: #fff;
  transition: background-color 0.35s cubic-bezier(0.22,1,0.36,1),
              color 0.35s cubic-bezier(0.22,1,0.36,1),
              border-color 0.35s cubic-bezier(0.22,1,0.36,1),
              transform 0.35s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.35s cubic-bezier(0.22,1,0.36,1);
}
.btn-outline:hover {
  background: var(--red);
  border-color: var(--red);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(200,29,37,0.35);
}

.hamburger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  /* 44x44 es la diana tactil comoda; el dibujo sigue midiendo 22px. */
  width: 44px;
  height: 44px;
  padding: 0;
  margin-right: -11px;   /* compensa el ensanchado para no mover el borde */
  background: none;
  border: 0;
}
.hamburger-bar { width: 22px; height: 2px; background: #fff; }

/* --------------------------------------------------------------------------
   4. Menú móvil
   -------------------------------------------------------------------------- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #0A0A0A;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.mobile-menu.is-open { opacity: 1; pointer-events: auto; }

.mm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 84px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mm-logo {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
}
.mm-close {
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: -11px;
  background: none;
  border: 0;
  color: inherit;
  font-family: inherit;
}

.mm-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

/* Entrada escalonada: el retardo sólo se aplica al abrir, nunca al cerrar. */
.mm-anim {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease 0s, transform 0.4s ease 0s;
}
.mobile-menu.is-open .mm-anim { opacity: 1; transform: translateY(0); }
.mobile-menu.is-open .mm-body > :nth-child(1) { transition-delay: 0.1s; }
.mobile-menu.is-open .mm-body > :nth-child(2) { transition-delay: 0.18s; }
.mobile-menu.is-open .mm-body > :nth-child(3) { transition-delay: 0.26s; }
.mobile-menu.is-open .mm-body > :nth-child(4) { transition-delay: 0.34s; }
.mobile-menu.is-open .mm-body > :nth-child(5) { transition-delay: 0.42s; }

.mm-link {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 36px;
  text-transform: uppercase;
  color: #fff;
}
.mm-cta {
  margin-top: 16px;
  border: 1px solid rgba(255,255,255,0.35);
  padding: 14px 28px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;      /* respaldo para navegadores sin svh */
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  background: #0A0A0A;
}
.hero-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 75% 25%, rgba(255,255,255,0.06), transparent 55%);
}
.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  min-height: 100vh;
  min-height: 100svh;
}
.hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 140px 32px 80px 32px;
  max-width: 640px;
}

.eyebrow { display: flex; align-items: center; gap: 10px; }
.eyebrow-mark {
  display: block;
  width: 7px;
  height: 7px;
  background: var(--red);
  transform: rotate(45deg);
}
.eyebrow-text {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  font-weight: 400;
}

/* El <h1> envuelve el eyebrow y el titular. Se neutralizan los estilos que
   el navegador aplica por defecto a h1 (font-size 2em, negrita, márgenes)
   para que no se filtren al eyebrow; la tipografía grande va en
   .hero-title-lines. */
.hero-title {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}
.hero-title-lines {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.94;
  letter-spacing: -0.01em;
  margin-top: 24px;
  font-size: clamp(2.6rem, 7vw, 5.2rem);
}
.hero-lead {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,0.65);
  max-width: 420px;
  margin: 28px 0 0 0;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  margin-top: 36px;
}

.btn-light {
  background: #fff;
  color: #0A0A0A;
  padding: 16px 28px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.35s cubic-bezier(0.22,1,0.36,1),
              color 0.35s cubic-bezier(0.22,1,0.36,1),
              border-color 0.35s cubic-bezier(0.22,1,0.36,1),
              transform 0.35s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.35s cubic-bezier(0.22,1,0.36,1);
}
.btn-light:hover {
  background: var(--red);
  color: #FFFFFF;
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(200,29,37,0.4);
}

.hero-badge { display: flex; align-items: center; gap: 10px; }
.hero-badge-icon {
  width: 32px; height: 32px;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: rgba(255,255,255,0.6);
}
/* Rombo dibujado con CSS. Antes era el carácter ✦, que se ve distinto en
   cada sistema y parecía un asterisco mal puesto. Repite el mismo motivo
   que el rombo del eyebrow, así que el hero tiene un lenguaje propio. */
.hero-badge-icon::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--red);
  transform: rotate(45deg);
}
.hero-badge-text { display: flex; flex-direction: column; line-height: 1.3; }
.hero-badge-text span {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.stat-num { font-family: 'Oswald', sans-serif; font-size: 36px; font-weight: 600; }
.stat-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-top: 4px;
}

/* El vídeo es vertical (720x1204 = 0.598). En móvil el contenedor adopta
   esa misma proporción: así el saco se ve entero, llena todo el ancho y no
   queda ni una franja negra, porque no hay nada que recortar ni que rellenar. */
.hero-visual {
  position: relative;
  aspect-ratio: 720 / 1204;
  overflow: hidden;
  background: #000;
}

/* cover, no contain: el vídeo es vertical (720x1204) y con contain quedaban
   franjas negras a los lados en móvil. Sin animación: el propio archivo ya
   gira de forma continua y con bucle cerrado, así que superponerle un
   balanceo en CSS era lo que delataba el corte. */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: contrast(1.4) brightness(0.55) saturate(1.1);
}

/* Si el autoplay falla (Modo de Bajo Consumo en iOS), el elemento muestra
   el poster. Estas reglas evitan que iOS pinte encima su botón de play. */
.hero-video::-webkit-media-controls,
.hero-video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}
.hv-dim    { position: absolute; inset: 0; background: rgba(10,10,10,0.42); }
.hv-left   { position: absolute; inset: 0; background: linear-gradient(90deg, #0A0A0A 0%, rgba(10,10,10,0.2) 35%, rgba(10,10,10,0.05) 65%); }
.hv-bottom { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,10,10,0.75), transparent 45%); }
.hv-glow   { position: absolute; inset: 0; background: radial-gradient(circle at 60% 25%, rgba(255,255,255,0.1), transparent 40%); }
.hv-top    { position: absolute; top: 0; left: 0; right: 0; height: 30%; background: linear-gradient(180deg, #0A0A0A 0%, transparent 100%); }

/* --------------------------------------------------------------------------
   6. Encabezados de sección (compartido)
   -------------------------------------------------------------------------- */
.section-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 56px; }
.section-kicker {
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--red-text);
  font-weight: 600;
  margin: 0;
}
.section-rule { flex: 1; height: 1px; background: rgba(255,255,255,0.12); }
.section-title {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   7. Disciplinas
   -------------------------------------------------------------------------- */
.disciplinas { padding: 120px 32px; max-width: 1400px; margin: 0 auto; }
.disciplinas .section-title { margin: 0 0 20px 0; max-width: 700px; }

.section-hint {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 48px;
}
.hint-touch { display: none; }

.disc-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.disc-grid--stacked { margin-top: 20px; }

/* Las tarjetas son <button> nativos: el rol, el foco y la activacion por
   teclado los aporta el navegador. Aqui solo se deshacen los estilos propios
   del boton (fondo, borde, tipografia, centrado) para que se vean igual que
   los <div> que eran antes. .disc-card--cross vuelve a poner su display:flex
   y su borde mas abajo, asi que no hay conflicto. */
.disc-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.disc-card--primary   { grid-column: span 6; height: 440px; }
.disc-card--secondary { grid-column: span 3; height: 270px; }
.disc-card--gym       { grid-column: span 8; height: 190px; background: #000; }
.disc-card--cross {
  grid-column: span 4;
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.1);
}

.disc-pattern {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, #1c1c1c 0px, #1c1c1c 14px, #141414 14px, #141414 28px);
}
.disc-pattern--sm {
  background: repeating-linear-gradient(135deg, #191919 0px, #191919 12px, #121212 12px, #121212 24px);
}

.disc-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: contrast(1.05) brightness(0.72) saturate(0.95);
}
.disc-photo--gym   { filter: contrast(1.05) brightness(0.7) saturate(0.9); }
.disc-photo--cross { filter: contrast(1.05) brightness(0.6) saturate(0.95); }

.disc-fade       { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,10,10,0.85), transparent 60%); }
.disc-fade--sm   { background: linear-gradient(0deg, rgba(10,10,10,0.85), transparent 65%); }
.disc-dim--gym   { position: absolute; inset: 0; background: rgba(10,10,10,0.4); }
.disc-dim--cross { position: absolute; inset: 0; background: rgba(10,10,10,0.35); }
.disc-sweep--gym { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,10,10,0.9) 0%, rgba(10,10,10,0.45) 55%, rgba(10,10,10,0.25) 100%); }

.disc-face {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 28px;
  opacity: 1;
  transition: background 0.2s ease;
}
.disc-face--sm  { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 18px; }
.disc-face--gym { position: absolute; inset: 0; display: flex; align-items: center; padding: 24px; }

.disc-tag {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 8px;
}
.disc-name {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 700;
  line-height: 1;
}
.disc-name--sm  { font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 20px; font-weight: 600; line-height: 1.05; }
.disc-name--gym { font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 26px; font-weight: 600; }
.disc-name--cross {
  position: relative;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.05em;
}

.disc-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10,10,10,0.82);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  text-align: center;
  padding: 24px;
}
.disc-overlay--sm    { background: rgba(10,10,10,0.85); padding: 16px; }
.disc-overlay--gym   { background: rgba(10,10,10,0.88); padding: 16px; }
.disc-overlay--cross { background: rgba(10,10,10,0.92); padding: 16px; }

/* Revelado del horario: al pasar el puntero en escritorio, al pulsar en
   cualquier soporte. En táctil sólo cuenta la pulsación, que es lo que
   anuncia el texto de ayuda. */
@media (hover: hover) {
  .disc-overlay:hover { opacity: 1; }
}
.disc-card.is-open .disc-overlay { opacity: 1; }

/* Con el foco de teclado el horario también se ve, incluso sin JavaScript.
   :focus-visible y no :focus, para que un clic de ratón no deje la tarjeta
   abierta al cerrarla. */
.disc-card:focus-visible .disc-overlay { opacity: 1; }

.disc-overlay-name {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 12px;
}
.disc-overlay-name--sm    { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.disc-overlay-name--gym   { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.disc-overlay-name--cross { font-size: 15px; font-weight: 600; margin-bottom: 8px; }

.disc-schedule {
  font-size: 12px;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.75);
  line-height: 1.7;
  white-space: pre-line;
}
.disc-schedule--sm {
  font-size: 10px;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
  max-height: 100%;
  overflow-y: auto;
}
.disc-schedule--gym {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.7);
  line-height: 1.7;
}
.disc-schedule--cross {
  font-size: 10px;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   7 bis. Cuadrante semanal

   Va dentro de la sección de disciplinas, debajo de las tarjetas. Las
   tarjetas enseñan qué se entrena; esto dice cuándo. Un día cada vez: en
   un móvil no se comparan siete columnas, y además así cabe el nombre del
   día escrito entero, sin abreviar.
   -------------------------------------------------------------------------- */
/* Acotado y centrado. A todo el ancho de la sección, las filas quedaban
   con el nombre de la clase a la izquierda y el grupo a más de mil píxeles,
   al otro extremo: se leían como dos cosas sin relación. A esta medida el
   ojo recorre la fila entera de una vez. */
.hr {
  margin-top: 88px;
  max-width: 880px;
  margin-inline: auto;
}

.hr-head { text-align: center; margin-bottom: 34px; }
.hr-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  letter-spacing: 0.03em;
  line-height: 1.1;
  margin: 0 0 10px;
}
.hr-intro {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,0.55);
  margin: 0;
}

/* Siete columnas idénticas. El reparto en partes iguales es lo que hace
   que la fila se lea como una unidad y no como siete botones sueltos. */
.hr-dias {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid rgba(255,255,255,0.10);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.hr-dia {
  position: relative;
  background: none;
  border: 0;
  margin: 0;
  padding: 17px 6px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.50);
  cursor: pointer;
  appearance: none;
  transition: color 0.35s var(--ease-out),
              text-shadow 0.35s var(--ease-out),
              transform 0.35s var(--ease-out);
}

/* Separador entre días, con la misma compensación que el selector de
   idioma: el que sube es el botón, no su línea. */
.hr-dia + .hr-dia::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 14px;
  margin-top: -7px;
  background: rgba(255,255,255,0.12);
  transition: transform 0.35s var(--ease-out);
}

@media (hover: hover) {
  .hr-dia:hover {
    color: var(--red-text);
    text-shadow: 0 0 16px rgba(200,29,37,0.5);
    transform: translateY(-2px);
  }
  .hr-dia + .hr-dia:hover::before { transform: translateY(2px); }
}

/* Día desplegado: mismo lenguaje que el selector de idioma, una barra roja
   encendida. El color no es la única señal, y aria-expanded lo cuenta
   además a los lectores de pantalla. */
.hr-dia[aria-expanded="true"] { color: #fff; }
.hr-dia[aria-expanded="true"]::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -1px;
  height: 2px;
  background: var(--red-text);
  box-shadow: 0 0 12px rgba(200,29,37,0.75);
}

.hr-panel { padding-top: 30px; }

.hr-dia:focus-visible,
.lang-btn:focus-visible {
  outline: none;
  color: #fff;
  box-shadow: 0 0 0 1px var(--red-text), 0 0 18px rgba(200,29,37,0.5);
}
.hr-panel.is-in { animation: hrEntra 0.45s var(--ease-out) both; }
@keyframes hrEntra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* La sala no es una clase: es acceso libre. Va separada de la lista para
   que no se lea como una actividad más. */
.hr-sala {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 26px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  text-align: center;
}
.hr-sala-punto {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  background: var(--red-text);
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(200,29,37,0.7);
}

.hr-lista { list-style: none; margin: 0; padding: 0; }

.hr-fila {
  position: relative;
  display: grid;
  grid-template-columns: 148px 1fr auto;
  align-items: baseline;
  gap: 20px;
  padding: 15px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  transition: background-color 0.35s var(--ease-out);
}
.hr-fila:first-child { border-top: 1px solid rgba(255,255,255,0.07); }

/* Filo rojo a la izquierda, apagado en reposo. Al pasar el ratón se
   enciende y crece desde el centro: es el mismo gesto de iluminación que
   usan las fotos y el mapa, pero en versión mínima, que aquí hay doce
   filas y no conviene que la sección parpadee. */
.hr-fila::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 2px;
  background: var(--red-text);
  opacity: 0;
  transform: scaleY(0.3);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}

.hr-hora {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.85);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: color 0.35s var(--ease-out), text-shadow 0.35s var(--ease-out);
}
.hr-nombre {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
}
.hr-grupo {
  font-size: 11px;
  letter-spacing: 0.10em;
  color: rgba(255,255,255,0.48);
  text-align: right;
}

@media (hover: hover) {
  .hr-fila:hover { background: rgba(255,255,255,0.03); }
  .hr-fila:hover::before { opacity: 1; transform: scaleY(1); }
  .hr-fila:hover .hr-hora {
    color: var(--red-text);
    text-shadow: 0 0 14px rgba(200,29,37,0.45);
  }
}

.hr-vacio {
  margin: 0;
  padding: 34px 16px;
  text-align: center;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,0.55);
}

/* --------------------------------------------------------------------------
   8. Filosofía
   -------------------------------------------------------------------------- */
.philosophy { display: grid; grid-template-columns: 1fr; gap: 0; }
.philo-visual { position: relative; min-height: 520px; overflow: hidden; }
.philo-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: contrast(1.05) brightness(0.75) saturate(0.95);
}
.philo-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 48px;
  background: #0A0A0A;
}
.philo-kicker { margin-bottom: 20px; }
.philo-title {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  font-weight: 700;
  line-height: 1.05;
  margin: 0 0 20px 0;
  max-width: 480px;
}
.philo-body {
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255,255,255,0.65);
  max-width: 420px;
  margin: 0;
}

/* --------------------------------------------------------------------------
   9. Cuotas
   -------------------------------------------------------------------------- */
.pricing { padding: 120px 32px; max-width: 1200px; margin: 0 auto; }
.pricing .section-title { margin: 0 0 56px 0; }

.pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.plan {
  border: 1px solid rgba(255,255,255,0.14);
  padding: 44px 36px;
  display: flex;
  flex-direction: column;
}
.plan--featured {
  border: 1px solid var(--red);
  position: relative;
  background: linear-gradient(180deg, rgba(200,29,37,0.06), transparent 40%);
}
.plan-badge {
  position: absolute;
  top: -1px; right: -1px;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 8px 16px;
}
.plan-name { font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 26px; font-weight: 600; }
.plan-price { display: flex; align-items: baseline; gap: 8px; margin: 20px 0 28px 0; }
.plan-amount { font-family: 'Oswald', sans-serif; font-size: 52px; font-weight: 700; }
.plan-period { font-size: 14px; color: rgba(255,255,255,0.55); }
.plan-features {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 24px;
  flex: 1;
}
.plan-feature { display: flex; gap: 10px; font-size: 14px; color: rgba(255,255,255,0.75); line-height: 1.5; }
.plan--featured .plan-feature { color: rgba(255,255,255,0.85); }
.plan--featured .plan-feature--strong { color: #fff; font-weight: 600; }
.plan-dash { color: var(--red-text); }

.btn-plan {
  margin-top: 32px;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.35);
  padding: 15px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  transition: background-color 0.35s cubic-bezier(0.22,1,0.36,1),
              color 0.35s cubic-bezier(0.22,1,0.36,1),
              border-color 0.35s cubic-bezier(0.22,1,0.36,1),
              transform 0.35s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.35s cubic-bezier(0.22,1,0.36,1);
}
.btn-plan:hover {
  background: var(--red);
  border-color: var(--red);
  color: #FFFFFF;
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(200,29,37,0.4);
}

.btn-plan-red {
  margin-top: 32px;
  text-align: center;
  background: var(--red);
  padding: 15px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: #fff;
  transition: background-color 0.35s cubic-bezier(0.22,1,0.36,1),
              color 0.35s cubic-bezier(0.22,1,0.36,1),
              border-color 0.35s cubic-bezier(0.22,1,0.36,1),
              transform 0.35s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.35s cubic-bezier(0.22,1,0.36,1);
}
.btn-plan-red:hover {
  background: #e02128;
  color: #FFFFFF;
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(200,29,37,0.45);
}

/* Condiciones de la cuota. Va pegada a las tarjetas de precio, antes de la
   línea divisoria, porque se refiere a los dos planos de arriba y no a la
   nota de oposiciones que viene después. */
.plan-terms {
  margin: 26px 0 0;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

.plan-note {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   10. Instalaciones
   -------------------------------------------------------------------------- */
.gallery { padding: 0 32px 120px 32px; max-width: 1400px; margin: 0 auto; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* Cada foto es un <button> que abre el visor. Se deshacen los estilos
   propios del botón y se añade el realce: la tarjeta sube un poco y el
   borde se enciende en el rojo de la marca. */
.gal-item {
  height: 280px;
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  /* Recorrido largo y curva suave: la tarjeta se acerca en vez de pegar un
     salto. --ease-soft arranca despacio; --ease-out sale disparada y era lo
     que hacía que se notara el corte. */
  transition: transform .7s var(--ease-soft), box-shadow .7s var(--ease-soft);
}
.gal-photo { transition: transform .9s var(--ease-soft), filter .7s var(--ease-soft); }

@media (hover: hover) {
  /* Sin línea de contorno: un halo rojo difuso alrededor, como el que deja
     el logo de la cabecera al pasar el ratón. Tres sombras del mismo rojo a
     distinta apertura y opacidad para que se funda hacia fuera en vez de
     recortarse. El leve scale acompaña al desplazamiento y hace que se lea
     como un acercamiento. */
  .gal-item:hover {
    transform: translateY(-6px) scale(1.015);
    box-shadow:
      0 0 18px rgba(200,29,37,0.55),
      0 0 44px rgba(200,29,37,0.30),
      0 0 90px rgba(200,29,37,0.14),
      0 22px 46px rgba(0,0,0,0.5);
  }
  .gal-item:hover .gal-photo {
    transform: scale(1.04);
    filter: contrast(1.05) brightness(0.86) saturate(1.05);
  }
  .gal-item:hover .gal-label { color: #fff; }
}
/* Mismo realce con el foco de teclado, para que se vea dónde estás. */
.gal-item:focus-visible {
  outline: none;
  transform: translateY(-6px) scale(1.015);
  box-shadow:
    0 0 0 2px var(--red-text),
    0 0 26px rgba(200,29,37,0.55),
    0 0 60px rgba(200,29,37,0.25);
}
.gal-pattern {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, #181818 0px, #181818 14px, #101010 14px, #101010 28px);
}
.gal-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: contrast(1.05) brightness(0.72) saturate(0.95);
}
.gal-fade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,10,10,0.85), transparent 65%); }
.gal-label-wrap { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 18px; }
.gal-label {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.05;
  color: #fff;
}


/* --------------------------------------------------------------------------
   10b. Difuminado de bordes
   Las fotos que van sueltas sobre el fondo cortaban en seco contra el negro.
   Este velo las funde con la página por los cuatro lados, así que da igual
   qué tengan al lado o cómo se recoloquen al cambiar de tamaño.

   Se aplica al contenedor y no a la imagen: mediante mask-image habría que
   enmascarar también los patrones de rayas que hay debajo, y el resultado
   depende de mask-composite, con soporte irregular. Un velo con dos
   degradados cruzados hace lo mismo y funciona en cualquier navegador.

   NO se aplica a .disc-photo: en las tarjetas de disciplinas y de gym la
   foto va a sangre y ese corte es parte del diseño.
   -------------------------------------------------------------------------- */
.philo-visual::after,
.contact-map::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to right,  var(--ink), transparent var(--difuminado),
                    transparent calc(100% - var(--difuminado)), var(--ink)),
    linear-gradient(to bottom, var(--ink), transparent var(--difuminado),
                    transparent calc(100% - var(--difuminado)), var(--ink));
}
/* El velo se gradúa según el tamaño del hueco: en una foto grande hace falta
   más recorrido para que la transición no se note como una banda. */
.philo-visual::after { --difuminado: 18px; }
.contact-map::after  { --difuminado: 30px; }

/* Rótulos y atribución por encima del velo, para que no se apaguen. */
.gal-label-wrap { z-index: 3; }
.map-credit     { z-index: 3; }

@media (max-width: 640px) {
  .philo-visual::after { --difuminado: 12px; }
  .contact-map::after  { --difuminado: 20px; }
}

/* --------------------------------------------------------------------------
   10c. Visor de la galería
   -------------------------------------------------------------------------- */
.lb {
  border: 0;
  padding: 0;
  max-width: min(94vw, 1200px);
  max-height: 92vh;
  background: transparent;
  color: #fff;
  overflow: visible;
}
.lb::backdrop { background: rgba(6,6,6,0.92); }
.lb-fig { margin: 0; }
.lb-img {
  display: block;
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  margin-inline: auto;
  border: 1px solid rgba(255,255,255,0.16);
}
.lb-cap {
  margin-top: 14px;
  text-align: center;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.lb-desc {
  margin: 8px auto 0;
  max-width: 62ch;
  text-align: center;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255,255,255,0.72);
}
.lb-btn {
  position: absolute;
  z-index: 2;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: rgba(10,10,10,0.78);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.lb-btn:hover { background: var(--red); border-color: var(--red); }
.lb-close { top: -8px; right: -8px; font-size: 26px; }
.lb-prev  { left: -8px;  top: 50%; transform: translateY(-50%); }
.lb-next  { right: -8px; top: 50%; transform: translateY(-50%); }

@media (max-width: 640px) {
  .lb { max-width: 96vw; }
  .lb-btn { width: 42px; height: 42px; }
  .lb-close { top: -6px; right: -6px; }
  .lb-prev { left: -2px; }
  .lb-next { right: -2px; }
}

/* --------------------------------------------------------------------------
   11. Resultados
   -------------------------------------------------------------------------- */
.results {
  padding: 100px 32px;
  max-width: 1200px;
  margin: 0 auto;
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.results-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-bottom: 64px; }
.result-num { font-family: 'Oswald', sans-serif; font-size: 56px; font-weight: 700; }
.result-label {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-top: 8px;
}

.two-col { display: grid; grid-template-columns: 1fr 1fr; }
.quotes { gap: 32px; }
.quote { border-left: 2px solid var(--red); padding-left: 24px; }
.quote-stars {
  width: 90px;
  height: 16px;
  margin-bottom: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'%3E%3Cpath fill='%23FF3B30' d='M9 1l1.9 4.3 4.7.5-3.5 3.2 1 4.6L9 11.3 4.9 13.6l1-4.6L2.4 5.8l4.7-.5z'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 18px 16px;
}
.quote-text {
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  color: rgba(255,255,255,0.85);
}
.quote-author {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-top: 14px;
}

/* --------------------------------------------------------------------------
   12. Contacto
   -------------------------------------------------------------------------- */
.contact { padding: 120px 32px; max-width: 1400px; margin: 0 auto; }
.contact-grid { gap: 20px; }
.contact-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
  padding-right: 24px;
}
.contact-title {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1;
  margin: 0;
}
.contact-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 10px;
}
.contact-value { font-size: 16px; color: rgba(255,255,255,0.85); line-height: 1.6; }
.contact-value--hours { line-height: 1.9; }
.btn-light--contact { width: fit-content; gap: 10px; }
.contact-map {
  position: relative;
  min-height: 480px;
  overflow: hidden;
  /* Mismo tratamiento que las fotos de instalaciones: se acerca despacio y
     se enciende en rojo. El mapa entero es un enlace a Google Maps, así que
     el realce sirve además de pista de que se puede pulsar. */
  transition: transform .7s var(--ease-soft), box-shadow .7s var(--ease-soft);
}
.contact-map-img { transition: transform .9s var(--ease-soft), filter .7s var(--ease-soft); }

@media (hover: hover) {
  .contact-map:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow:
      0 0 18px rgba(200,29,37,0.55),
      0 0 44px rgba(200,29,37,0.30),
      0 0 90px rgba(200,29,37,0.14),
      0 22px 46px rgba(0,0,0,0.5);
  }
  .contact-map:hover .contact-map-img { transform: scale(1.04); }
}
/* Con el foco de teclado sobre el enlace, el mismo realce. */
.contact-map:has(.contact-map-link:focus-visible) {
  transform: translateY(-6px) scale(1.01);
  box-shadow:
    0 0 0 2px var(--red-text),
    0 0 26px rgba(200,29,37,0.55),
    0 0 60px rgba(200,29,37,0.25);
}
.contact-map-link:focus-visible { outline: none; }
.contact-map-link { position: absolute; inset: 0; display: block; }

/* La atribución va en HTML y no incrustada en la imagen: object-fit: cover
   recorta los bordes según la proporción del hueco y se la llevaría por
   delante, y la licencia del mapa exige que se vea siempre. */
.map-credit {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 5px 9px;
  background: rgba(10,10,10,0.72);
  color: rgba(255,255,255,0.6);
  font-size: 10px;
  letter-spacing: 0.02em;
}
.contact-map-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* --------------------------------------------------------------------------
   13. Pie
   -------------------------------------------------------------------------- */
.footer {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 56px 32px 32px 32px;
  max-width: 1400px;
  margin: 0 auto;
}
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-bottom: 40px; }
.footer-brand {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer-addr { font-size: 13px; color: rgba(255,255,255,0.5); line-height: 1.7; }
.footer-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 14px;
}
.footer-text { font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.9; }
.footer-links { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: rgba(255,255,255,0.65); }
/* Diana tactil: WCAG 2.2 pide 24x24 minimo y estos enlaces median 16px. */
.footer-links a,
.footer-text a,
.contact-value a { display: inline-block; padding: 4px 0; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 24px;
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------------
   13b. Paginas legales (aviso-legal.html, privacidad.html)
   -------------------------------------------------------------------------- */
.legal-main {
  max-width: 820px;
  margin: 0 auto;
  padding: 148px 32px 96px 32px;
}
.legal-main h1 {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 700;
  line-height: 1;
  margin: 12px 0 8px 0;
}
.legal-updated {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 48px;
}
.legal-main h2 {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 600;
  margin: 44px 0 14px 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.legal-main p,
.legal-main li {
  font-size: 15px;
  line-height: 1.8;
  color: rgba(255,255,255,0.78);
  margin: 0 0 14px 0;
}
.legal-main ul { padding-left: 20px; margin-bottom: 14px; }
.legal-main li { margin-bottom: 8px; }
.legal-main a { border-bottom: 1px solid var(--red-text); }
.legal-back {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.legal-back:hover { color: var(--red-text); }

/* Marcador de dato pendiente. Salta a la vista a proposito: si algo con este
   aspecto llega a produccion, es que falta rellenarlo. */
.todo {
  background: var(--red-text);
  color: #0A0A0A;
  font-weight: 700;
  padding: 1px 7px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   14. Aparición al hacer scroll
   La clase .reveal la añade script.js. Sin JavaScript, o con movimiento
   reducido, nunca se añade y el contenido queda visible desde el principio.
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(30px); will-change: opacity, transform; }
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 1.1s cubic-bezier(0.22,1,0.36,1),
              transform 1.1s cubic-bezier(0.22,1,0.36,1);
}
.reveal.is-settled { will-change: auto; }

/* --------------------------------------------------------------------------
   15. Puntos de ruptura
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .nav-links   { display: flex; }
  .nav-cta     { display: block; }
  .hamburger   { display: none; }
  .hero-grid   { grid-template-columns: 1fr 1fr; }
  .hero-text   { padding-left: 64px; }

  /* En escritorio la columna es más ancha de lo que pide la proporción del
     vídeo (haría falta 1058px de alto para encajarla, más que la ventana),
     así que aquí manda la altura completa y el vídeo va en contain: el saco
     se ve entero y los laterales quedan bajo los degradados del hero. */
  .hero-visual { aspect-ratio: auto; min-height: 100vh; min-height: 100svh; }
  .hero-video  { object-fit: contain; }
  .philosophy  { grid-template-columns: 1fr 1fr; }
}

/* Movimiento reducido. Se desactiva lo intrusivo (aparicion al hacer scroll,
   desplazamientos, animaciones en bucle) pero se conservan los cambios de
   color y las transiciones de hover: son respuesta a una accion del usuario,
   no movimiento decorativo. Windows trae esta preferencia activada de serie
   en muchos equipos, y arrasar con todo deja la web sin ninguna reaccion. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; }
  .reveal, .reveal.is-in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .mm-anim { opacity: 1 !important; transform: none !important; transition: none !important; }
  .nav-logo:hover, .nav-link:hover { letter-spacing: inherit; }
  .btn-light:hover, .btn-outline:hover, .btn-plan:hover, .btn-plan-red:hover { transform: none; }
  .lang-btn:hover { transform: none; }
  .lang-btn + .lang-btn:hover::before { transform: none; }
  .hr-dia:hover { transform: none; }
  .hr-dia + .hr-dia:hover::before { transform: none; }
  .hr-panel.is-in { animation: none; }
  .hr-fila::before { transition: opacity 0.35s var(--ease-out); transform: scaleY(1); }
}

@media (hover: none) {
  .hint-desktop { display: none; }
  .hint-touch   { display: inline; }
}

@media (max-width: 899px) {
  .disc-card--secondary { grid-column: span 6; }
  .disc-card--primary   { grid-column: span 12; }
}

@media (max-width: 640px) {
  .two-col       { grid-template-columns: 1fr; }
  .pricing-grid  { grid-template-columns: 1fr; }
  .gallery-grid  { grid-template-columns: 1fr 1fr; }
  .results-grid  { grid-template-columns: 1fr; gap: 32px; }
  .footer-grid   { grid-template-columns: 1fr 1fr; }
  .disc-card--secondary { grid-column: span 12; }

  /* Con 12 columnas y 20px de hueco, a 375px cada columna mide 7,58px: los
     220px de huecos se comen el 71% del ancho. Así, un span 4 queda en 90px y
     el rótulo "CROSSTRAINING", que necesita 115px, se recortaba por ambos
     lados. Se apilan como el resto de tarjetas de la sección. */
  .disc-card--gym,
  .disc-card--cross { grid-column: span 12; }

  /* Siete días en una fila no caben con los nombres escritos enteros, y
     abreviarlos no es una opción. Dos columnas, y el domingo ocupa las dos
     para que no quede un hueco impar al final. */
  .hr-dias { grid-template-columns: 1fr 1fr; }
  .hr-dia  { padding: 15px 8px; }
  .hr-dia:last-child { grid-column: span 2; }
  /* Con dos columnas el separador vertical sobra: lo que ordena la
     cuadrícula son las propias filas. */
  .hr-dia + .hr-dia::before { display: none; }

  /* La hora deja de tener columna propia: pasa encima del nombre. Con
     148px reservados a la izquierda no quedaba sitio para el nombre en
     una pantalla de 375px. */
  .hr-fila {
    grid-template-columns: 1fr auto;
    gap: 4px 14px;
    padding: 14px 12px;
  }
  .hr-hora   { grid-column: 1 / -1; font-size: 12px; }
  .hr-nombre { font-size: 14px; }
  .hr-grupo  { font-size: 10px; }
}