/* ==========================================================================
   AURA Training Center · sistema visual
   --------------------------------------------------------------------------
   Tema único oscuro (decisión de marca). Contrastes WCAG medidos:
     hueso   EDEBE6 sobre carbón 121316 ......... 15.6 : 1
     volt    E4FF3A sobre carbón ................ 16.5 : 1
     carbón  sobre volt (botón principal) ....... 16.5 : 1
     texto-2 ABAAA8 sobre carbón ................  8.0 : 1
     acero   5C6168 sobre hueso ................  5.2 : 1
     acero   sobre carbón ......................  3.0 : 1  -> solo líneas y bordes, nunca texto
     volt    sobre hueso .......................  1.1 : 1  -> PROHIBIDO
   Radios: todo recto (0). Única excepción: el botón flotante de WhatsApp (círculo).
   Capas (z-index): grano 1 · header 40 · menú móvil 45 · flotante 50 · franja demo 60
   ========================================================================== */

/* Mismo orden de capas que Tailwind v4. Los componentes van en "components"
   para que las utilidades (hidden, md:flex, text-*) siempre les ganen. */
@layer theme, base, components, utilities;

/* Tipografías de Google Fonts (Barlow y Barlow Condensed, licencia SIL OFL 1.1) servidas desde
   el propio sitio, subconjunto latin (incluye tildes, ñ, ¿ y ¡). Evita la hoja externa de
   Google, que frenaba el primer pintado, y permite precargar siempre el archivo correcto. */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/barlow-400.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: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/barlow-600.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: "Barlow Condensed";
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/barlow-condensed-800-italic.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: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/barlow-condensed-600.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: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/barlow-condensed-700.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: "Barlow Condensed";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/barlow-condensed-800.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;
}

/* Fuentes de reemplazo con métricas ajustadas (Arial escalada al ancho de Barlow).
   Mientras carga la fuente real, los títulos ocupan casi lo mismo y la página no salta. */
@font-face {
  font-family: "Barlow Condensed Respaldo";
  src: local("Arial");
  font-weight: 100 900;
  size-adjust: 69.6%;
  ascent-override: 143.7%;
  descent-override: 28.7%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Barlow Condensed Respaldo";
  src: local("Arial Italic"), local("Arial");
  font-style: italic;
  font-weight: 100 900;
  size-adjust: 69.6%;
  ascent-override: 143.7%;
  descent-override: 28.7%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Barlow Respaldo";
  src: local("Arial");
  font-weight: 100 900;
  size-adjust: 95.6%;
  ascent-override: 104.6%;
  descent-override: 20.9%;
  line-gap-override: 0%;
}

:root {
  /* Paleta de marca */
  --c-carbon: #121316;
  --c-carbon-2: #191b1f; /* superficies elevadas */
  --c-carbon-3: #23262b; /* hover, separadores fuertes */
  --c-hondo: #0c0d0f; /* franja demo y footer */
  --c-hueso: #edebe6;
  --c-texto-2: #abaaa8; /* hueso al 70 %, texto secundario sobre oscuro */
  --c-volt: #e4ff3a;
  --c-acero: #5c6168;
  --c-linea: rgb(237 235 230 / 0.12);

  /* Tipografías */
  --ff-display: "Barlow Condensed", "Barlow Condensed Respaldo", "Arial Narrow", sans-serif;
  --ff-sans: "Barlow", "Barlow Respaldo", system-ui, sans-serif;

  /* Alto inicial de la franja demo (el JS lo corrige con la medida real) */
  --franja-h: 35px;

  /* Movimiento */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.7s;

  color-scheme: dark;
}
@media (max-width: 719px) {
  :root {
    --franja-h: 53px;
  }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
html {
  background: var(--c-carbon);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}
body {
  margin: 0;
  background: var(--c-carbon);
  color: var(--c-hueso);
  font-family: var(--ff-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
::selection {
  background: var(--c-volt);
  color: var(--c-carbon);
}
[x-cloak] {
  display: none !important;
}

/* Foco visible: anillo volt con separación, legible sobre carbón y sobre fotos */
:focus-visible {
  outline: 2px solid var(--c-volt);
  outline-offset: 3px;
}
/* Sobre superficies claras (hueso o volt) el anillo pasa a carbón */
.sobre-claro :focus-visible {
  outline-color: var(--c-carbon);
}

.saltar {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 70;
  padding: 0.75rem 1rem;
  background: var(--c-volt);
  color: var(--c-carbon);
  font-weight: 600;
}
.saltar:focus {
  top: 1rem;
}

@layer components {
  /* --------------------------------------------------------------------------
     Tipografía
     -------------------------------------------------------------------------- */
  .t-hero,
  .t-h2,
  .t-h3,
  .t-etiqueta,
  .t-numero {
    font-family: var(--ff-display);
    text-transform: uppercase;
  }
  /* Interlineado 0.92: las mayúsculas acentuadas (Á, Í) no chocan con la línea de arriba */
  .t-hero {
    font-weight: 800;
    font-size: clamp(2.875rem, 1.4rem + 5.6vw, 6.25rem);
    line-height: 0.92;
    letter-spacing: -0.005em;
  }
  .t-h2 {
    font-weight: 800;
    font-size: clamp(2.5rem, 1.6rem + 3.9vw, 5.25rem);
    line-height: 0.92;
    letter-spacing: -0.005em;
  }
  .t-h3 {
    font-weight: 700;
    font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem);
    line-height: 1;
    letter-spacing: 0.005em;
  }
  /* Botones, navegación, chips y datos cortos */
  .t-etiqueta {
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1;
    letter-spacing: 0.08em;
  }
  /* Precios y horas */
  .t-numero {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
  /* Énfasis dentro de un título: itálica de la misma familia, en volt */
  .enfasis {
    font-style: italic;
    color: var(--c-volt);
    padding-right: 0.06em; /* la itálica no se corta contra el borde */
  }
  .t-cuerpo {
    color: var(--c-texto-2);
    max-width: 62ch;
  }
  .t-cuerpo-lg {
    font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
    line-height: 1.55;
    color: var(--c-texto-2);
    max-width: 46ch;
  }

  /* Texto con contorno (solo decorativo, siempre con aria-hidden) */
  .t-contorno {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--c-acero);
  }

  /* --------------------------------------------------------------------------
     Botones (rectos, etiqueta condensada en mayúsculas, una sola línea)
     -------------------------------------------------------------------------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    min-height: 3.25rem;
    padding: 0 1.5rem;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition:
      background-color 0.25s var(--ease-out),
      color 0.25s var(--ease-out),
      border-color 0.25s var(--ease-out),
      transform 0.25s var(--ease-out);
  }
  .btn svg {
    width: 1.15em;
    height: 1.15em;
    flex: none;
    transition: transform 0.35s var(--ease-out);
  }
  .btn:hover svg {
    transform: translateX(3px);
  }
  .btn .ico-wa {
    width: 1.25em;
    height: 1.25em;
    flex: none;
  }
  .btn:active {
    transform: translateY(1px) scale(0.985);
  }

  /* Principal: volt con texto carbón (16.5:1) */
  .btn-primario {
    background: var(--c-volt);
    color: var(--c-carbon);
  }
  .btn-primario:hover {
    background: var(--c-hueso);
  }

  /* Secundario: contorno hueso sobre oscuro */
  .btn-secundario {
    border-color: var(--c-hueso);
    color: var(--c-hueso);
  }
  .btn-secundario:hover {
    background: var(--c-hueso);
    color: var(--c-carbon);
  }

  /* Sobre volt: carbón lleno con texto volt */
  .btn-oscuro {
    background: var(--c-carbon);
    color: var(--c-volt);
  }
  .btn-oscuro:hover {
    background: var(--c-carbon-3);
  }

  /* Link de texto con subrayado que crece */
  .link {
    color: var(--c-hueso);
    text-decoration: underline;
    text-decoration-color: var(--c-volt);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    transition: color 0.2s;
  }
  .link:hover {
    color: var(--c-volt);
  }

  /* Chip de estado (único lugar con punto de color: estado real abierto/cerrado) */
  .chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--c-linea);
    background: rgb(18 19 22 / 0.7);
  }
  .chip-punto {
    width: 0.5rem;
    height: 0.5rem;
    background: var(--c-acero);
  }
  .chip[data-abierto="true"] .chip-punto {
    background: var(--c-volt);
  }

  /* --------------------------------------------------------------------------
     Franja demo, header y botón flotante
     -------------------------------------------------------------------------- */
  .franja-demo {
    position: relative;
    z-index: 60;
    background: var(--c-hondo);
    color: var(--c-texto-2);
    font-size: 0.8125rem;
    line-height: 1.4;
    border-bottom: 1px solid var(--c-linea);
  }
  .franja-demo a {
    color: var(--c-volt);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .header {
    position: sticky;
    top: 0;
    z-index: 40;
    transition:
      background-color 0.35s var(--ease-out),
      border-color 0.35s var(--ease-out);
    border-bottom: 1px solid transparent;
  }
  .header.is-scrolled {
    border-bottom-color: var(--c-linea);
  }
  /* El desenfoque va en un pseudo-elemento: si estuviera en el header, el menú
     móvil (position: fixed) quedaría atrapado dentro de sus 72 px de alto. */
  .header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgb(18 19 22 / 0.9);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    opacity: 0;
    transition: opacity 0.35s var(--ease-out);
  }
  .header.is-scrolled::before {
    opacity: 1;
  }
  .logo {
    font-family: var(--ff-display);
    font-weight: 800;
    font-style: italic;
    font-size: 1.875rem;
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    padding-right: 0.08em;
  }
  .logo-sub {
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: 0.6875rem;
    line-height: 1.05;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-texto-2);
  }
  .nav-link {
    position: relative;
    color: var(--c-hueso);
    text-decoration: none;
  }
  .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    background: var(--c-volt);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s var(--ease-out);
  }
  .nav-link:hover::after {
    transform: scaleX(1);
  }

  /* Botón flotante de WhatsApp: siempre visible */
  .wa-flotante {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 50;
    display: grid;
    place-items: center;
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 999px;
    background: var(--c-volt);
    color: var(--c-carbon);
    box-shadow: 0 10px 30px -8px rgb(0 0 0 / 0.6);
    transition: transform 0.3s var(--ease-out), background-color 0.3s;
  }
  .wa-flotante:hover {
    transform: translateY(-2px);
    background: var(--c-hueso);
  }
  .wa-flotante:focus-visible {
    outline-color: var(--c-hueso);
    box-shadow: 0 0 0 5px var(--c-carbon);
  }
  /* En el plan gratis, Netlify agrega un cartel "Powered by Netlify" fijo abajo a la derecha
     (197 x 64 px) que no se puede ocultar y queda encima de este botón. Si está su script,
     el botón se corre: más arriba en escritorio y a la izquierda en celular. En otro hosting
     no cambia nada. */
  html:has(script[src*="/.netlify/scripts/hud"]) .wa-flotante {
    bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 5rem);
  }
  @media (max-width: 767px) {
    html:has(script[src*="/.netlify/scripts/hud"]) .wa-flotante {
      left: max(1rem, env(safe-area-inset-left));
      right: auto;
      bottom: max(1rem, env(safe-area-inset-bottom));
    }
  }
  /* Glifo oficial de WhatsApp (Simple Icons, CC0) pintado con el color del botón */
  .ico-wa {
    display: inline-block;
    width: 1.75rem;
    height: 1.75rem;
    background: currentColor;
    -webkit-mask: url("../img/icons/whatsapp.svg") center / contain no-repeat;
    mask: url("../img/icons/whatsapp.svg") center / contain no-repeat;
  }

  /* --------------------------------------------------------------------------
     Hero
     -------------------------------------------------------------------------- */
  .hero {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    margin-top: -72px; /* pasa por debajo del header transparente */
    min-height: calc(100vh - var(--franja-h, 0px));
    min-height: calc(100svh - var(--franja-h, 0px));
    background: var(--c-carbon);
    /* clip (no hidden): hidden crea un contenedor de scroll y frena el parallax */
    overflow: clip;
  }
  .hero-medio {
    position: absolute;
    inset: 0;
    z-index: -1;
  }
  .hero-medio picture {
    display: block;
    height: 100%;
  }
  .hero-foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
  }
  /* Velos: arriba para el header, abajo para el texto y la unión con la banda */
  .hero-medio::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgb(18 19 22 / 0.7) 0%, rgb(18 19 22 / 0) 20%),
      linear-gradient(0deg, var(--c-carbon) 0%, rgb(18 19 22 / 0.88) 24%, rgb(18 19 22 / 0) 58%),
      rgb(18 19 22 / 0.18);
  }
  /* Pantalla apaisada: el texto va a la izquierda, el velo también */
  @media (orientation: landscape) {
    .hero-foto {
      object-position: 66% 50%;
    }
    .hero-medio::after {
      background:
        linear-gradient(180deg, rgb(18 19 22 / 0.7) 0%, rgb(18 19 22 / 0) 20%),
        linear-gradient(90deg, rgb(18 19 22 / 0.9) 0%, rgb(18 19 22 / 0.55) 38%, rgb(18 19 22 / 0) 60%),
        linear-gradient(0deg, var(--c-carbon) 0%, rgb(18 19 22 / 0) 32%),
        rgb(18 19 22 / 0.15);
    }
  }
  .hero-linea {
    display: block;
  }

  /* Entrada: la foto se asienta y el texto sube en orden. Solo CSS, no espera a JS. */
  @media (prefers-reduced-motion: no-preference) {
    .hero-foto {
      animation: hero-foto 1.8s var(--ease-out) both;
    }
    .hero-linea {
      animation: hero-linea 1s var(--ease-out) both;
      animation-delay: calc(0.15s + var(--i, 0) * 0.11s);
    }
    .hero-entra {
      animation: hero-entra 0.9s var(--ease-out) both;
      animation-delay: calc(0.15s + var(--i, 0) * 0.11s);
    }
  }
  @keyframes hero-foto {
    from {
      opacity: 0.35;
      transform: scale(1.08);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes hero-linea {
    from {
      clip-path: inset(-0.3em -0.15em calc(100% + 0.3em) -0.15em);
      transform: translateY(0.45em);
    }
    to {
      clip-path: inset(-0.3em -0.15em -0.3em -0.15em);
      transform: none;
    }
  }
  @keyframes hero-entra {
    from {
      opacity: 0;
      transform: translateY(18px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  /* Al bajar, la foto se queda un poco atrás (parallax) mientras el texto sube */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .hero-medio {
        animation: hero-salida linear both;
        animation-timeline: view();
        animation-range: exit 0% exit 100%;
      }
    }
    @keyframes hero-salida {
      to {
        transform: translateY(22%);
      }
    }
  }

  /* --------------------------------------------------------------------------
     Banda volt con texto en movimiento (la única marquesina de la página)
     -------------------------------------------------------------------------- */
  .marquesina {
    background: var(--c-volt);
    color: var(--c-carbon);
    overflow: hidden;
  }
  .marquesina-pista {
    display: flex;
    width: max-content;
    animation: marquesina 32s linear infinite;
  }
  .marquesina:hover .marquesina-pista {
    animation-play-state: paused;
  }
  @keyframes marquesina {
    to {
      transform: translateX(-50%);
    }
  }

  /* --------------------------------------------------------------------------
     Movimiento al hacer scroll
     -------------------------------------------------------------------------- */
  /* Entrada: sube y aparece. Solo se oculta si hay JS (clase .js en <html>). */
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition:
      opacity var(--dur) var(--ease-out),
      transform var(--dur) var(--ease-out);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  .js [data-reveal].is-in {
    opacity: 1;
    transform: none;
  }
  /* Título que sube desde una máscara: el observador mira al padre y se anima
     cada hijo (una línea por span). Si el clip estuviera en el padre, el
     IntersectionObserver lo vería con área cero y nunca lo revelaría. */
  .js [data-reveal="mascara"] {
    opacity: 1;
    transform: none;
  }
  .js [data-reveal="mascara"] > * {
    display: block;
    clip-path: inset(-0.3em -0.15em calc(100% + 0.3em) -0.15em);
    transform: translateY(0.4em);
    transition:
      clip-path 0.9s var(--ease-out),
      transform 0.9s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  .js [data-reveal="mascara"].is-in > * {
    clip-path: inset(-0.3em -0.15em -0.3em -0.15em);
    transform: none;
  }

  /* Animaciones ligadas al scroll (Chrome, Edge y Safari 26+). Sin soporte: quedan quietas. */
  @supports (animation-timeline: view()) {
    /* Foto que se acerca mientras pasa por la pantalla */
    .scroll-zoom {
      animation: scroll-zoom linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes scroll-zoom {
      from {
        transform: scale(1.12);
      }
      to {
        transform: scale(1);
      }
    }
    /* Texto gigante que se desplaza en horizontal */
    .scroll-deriva {
      animation: scroll-deriva linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes scroll-deriva {
      from {
        transform: translateX(8%);
      }
      to {
        transform: translateX(-12%);
      }
    }
  }

  /* --------------------------------------------------------------------------
     Secciones y contenedor
     -------------------------------------------------------------------------- */
  .seccion {
    padding-block: 5rem;
  }
  @media (min-width: 768px) {
    .seccion {
      padding-block: 7rem;
    }
  }
  .contenedor {
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: 1rem;
  }
  @media (min-width: 768px) {
    .contenedor {
      padding-inline: 2rem;
    }
  }
  @media (min-width: 1024px) {
    .contenedor {
      padding-inline: 3rem;
    }
  }

  /* --------------------------------------------------------------------------
     Disciplinas: acordeón de franjas con foto
     -------------------------------------------------------------------------- */
  .disc {
    --disc-cerrada: 5.5rem;
    --disc-abierta: 23rem;
    display: grid;
    gap: 6px;
    grid-template-rows: var(--disc-filas);
    transition:
      grid-template-rows 0.6s var(--ease-out),
      grid-template-columns 0.6s var(--ease-out);
  }
  @media (min-width: 1024px) {
    .disc {
      grid-template-rows: none;
      grid-template-columns: var(--disc-cols);
      height: clamp(30rem, 64vh, 38rem);
    }
  }
  .disc-panel {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--c-carbon-2);
  }
  /* Línea volt que se dibuja arriba de la franja activa */
  .disc-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    z-index: 2;
    height: 4px;
    background: var(--c-volt);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s var(--ease-out);
  }
  .disc-panel.is-activa::before {
    transform: scaleX(1);
  }
  /* Velo para que el texto se lea sobre la foto */
  .disc-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgb(18 19 22 / 0.94) 0%, rgb(18 19 22 / 0.55) 45%, rgb(18 19 22 / 0.1) 80%);
  }
  .disc-foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) brightness(0.5);
    transform: scale(1.08);
    transition:
      filter 0.6s var(--ease-out),
      transform 0.9s var(--ease-out);
  }
  .disc-panel.is-activa .disc-foto {
    filter: grayscale(0.2) brightness(0.9);
    transform: none;
  }
  .disc-contenido {
    position: absolute;
    inset: auto 0 0;
    z-index: 1;
    padding: 1.25rem;
  }
  @media (min-width: 1024px) {
    .disc-contenido {
      padding: 1.75rem;
    }
  }
  .disc-boton {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--c-hueso);
    text-align: left;
    cursor: pointer;
  }
  .disc-nombre {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 1.75rem;
    line-height: 1;
    text-transform: uppercase;
  }
  .disc-ico {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--c-acero);
    transition:
      border-color 0.3s,
      color 0.3s;
  }
  .disc-ico svg {
    width: 1.1rem;
    height: 1.1rem;
    transition: transform 0.35s var(--ease-out);
  }
  .is-activa .disc-ico {
    border-color: var(--c-volt);
    color: var(--c-volt);
  }
  .is-activa .disc-ico svg {
    transform: rotate(45deg);
  }
  /* Detalle: se abre con la técnica de grid 0fr -> 1fr (sin animar height) */
  .disc-detalle {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition:
      grid-template-rows 0.5s var(--ease-out),
      opacity 0.3s;
  }
  .is-activa .disc-detalle {
    grid-template-rows: 1fr;
    opacity: 1;
    transition-delay: 0.15s;
  }
  .disc-detalle-interno {
    display: grid;
    min-height: 0;
    overflow: hidden;
    justify-items: start;
    gap: 1.25rem;
  }
  .disc-texto {
    max-width: 34ch;
    padding-top: 0.75rem;
    color: var(--c-hueso);
  }
  @media (min-width: 1024px) {
    /* En escritorio el nombre de las franjas cerradas va más chico y sin ícono */
    .disc-ico {
      display: none;
    }
    .disc-nombre {
      font-size: 1.5rem;
    }
    .is-activa .disc-nombre {
      font-size: clamp(2.25rem, 1.2rem + 1.6vw, 3rem);
    }
    /* Ancho fijo: el texto no se reacomoda mientras la franja se ensancha */
    .disc-texto {
      width: 34ch;
      font-size: 1.125rem;
    }
  }

  /* --------------------------------------------------------------------------
     Horarios: filtros, tabla semanal y lista por día
     -------------------------------------------------------------------------- */
  .filtro,
  .dia {
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-hueso);
    border: 1px solid var(--c-acero);
    cursor: pointer;
    transition:
      background-color 0.25s,
      color 0.25s,
      border-color 0.25s;
  }
  .filtro {
    min-height: 2.75rem;
    padding: 0 1.1rem;
  }
  .filtro:hover,
  .dia:hover {
    border-color: var(--c-hueso);
  }
  .filtro[aria-pressed="true"],
  .dia[aria-pressed="true"] {
    background: var(--c-volt);
    border-color: var(--c-volt);
    color: var(--c-carbon);
  }

  .grilla {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 4px;
    margin-inline: -4px;
  }
  .grilla thead th {
    padding: 0.75rem 0.25rem;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
    border-bottom: 2px solid var(--c-acero);
  }
  .grilla thead th.es-hoy {
    color: var(--c-volt);
    border-bottom-color: var(--c-volt);
  }
  .grilla .grilla-hora {
    width: 4.5rem;
    font-size: 1.25rem;
    color: var(--c-texto-2);
    text-align: left;
    vertical-align: middle;
  }
  .hoy-tag {
    margin-left: 0.4rem;
    padding: 0.15rem 0.35rem;
    background: var(--c-volt);
    color: var(--c-carbon);
    font-size: 0.75rem;
    vertical-align: 0.15em;
  }
  .grilla td {
    height: 4.5rem;
    padding: 0;
    background: rgb(237 235 230 / 0.025);
    transition: opacity 0.3s;
  }
  .grilla td.atenuada {
    opacity: 0.22;
  }
  .celda {
    position: relative;
    display: flex;
    height: 100%;
    min-height: 4.5rem;
    flex-direction: column;
    justify-content: center;
    padding: 0.6rem 0.8rem;
    background: var(--c-carbon-2);
    border-left: 2px solid var(--c-acero);
    color: var(--c-hueso);
    text-decoration: none;
    transition:
      background-color 0.25s,
      border-color 0.25s;
  }
  .celda:hover,
  .es-hoy .celda {
    border-left-color: var(--c-volt);
  }
  .celda:hover {
    background: var(--c-carbon-3);
  }
  .celda-nombre {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 1.0625rem;
    line-height: 1.05;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }
  .celda-accion,
  .fila-accion {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-volt);
  }
  .celda-accion svg,
  .fila-accion svg {
    width: 0.9rem;
    height: 0.9rem;
  }
  /* En la tabla, "Reservar" aparece con hover o foco (el link siempre funciona) */
  @media (hover: hover) {
    .celda-accion {
      position: absolute;
      left: 0.8rem;
      bottom: 0.45rem;
      opacity: 0;
      transform: translateY(3px);
      transition:
        opacity 0.25s,
        transform 0.25s var(--ease-out);
    }
    .celda:hover .celda-accion,
    .celda:focus-visible .celda-accion {
      opacity: 1;
      transform: none;
    }
  }

  .dias {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
  }
  .dia {
    position: relative;
    min-height: 3.25rem;
    padding: 0.25rem 0;
  }
  .dia-hoy {
    position: absolute;
    left: 50%;
    bottom: 3px;
    transform: translateX(-50%);
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    line-height: 1;
  }
  .fila-clase {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 4rem;
    padding: 0.75rem 1rem;
    background: var(--c-carbon-2);
    border-left: 2px solid var(--c-acero);
    color: var(--c-hueso);
    text-decoration: none;
  }
  .fila-clase:active {
    background: var(--c-carbon-3);
    border-left-color: var(--c-volt);
  }
  .fila-nombre {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }
  .fila-accion {
    margin-left: auto;
  }
  .vacio {
    padding: 1.5rem 1rem;
    border: 1px dashed var(--c-acero);
    color: var(--c-texto-2);
  }
  .nota-sala {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.75rem;
    color: var(--c-texto-2);
  }
  .nota-sala svg {
    flex: none;
    width: 1.375rem;
    height: 1.375rem;
    color: var(--c-volt);
  }

  /* --------------------------------------------------------------------------
     Planes: tablero de bandas horizontales
     -------------------------------------------------------------------------- */
  .planes {
    display: grid;
    gap: 0.75rem;
  }
  .plan {
    display: grid;
    gap: 1rem;
    padding: 1.5rem 1.25rem;
    border: 1px solid var(--c-acero);
    transition:
      border-color 0.3s,
      background-color 0.3s;
  }
  .plan:hover {
    border-color: var(--c-hueso);
    background: var(--c-carbon-2);
  }
  .plan-cabeza {
    display: grid;
    justify-items: start;
    gap: 0.6rem;
  }
  .plan-etiqueta {
    padding: 0.35rem 0.6rem;
    background: var(--c-carbon);
    color: var(--c-volt);
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 0.8125rem;
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .plan-nombre {
    font-family: var(--ff-display);
    font-weight: 800;
    font-size: clamp(1.875rem, 1.3rem + 1.9vw, 2.875rem);
    line-height: 0.95;
    text-transform: uppercase;
  }
  .plan-detalle {
    max-width: 40ch;
    color: var(--c-texto-2);
  }
  .plan-precio {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
  }
  .plan-precio .t-numero {
    font-size: clamp(2.75rem, 2rem + 2.4vw, 4.25rem);
    font-weight: 800;
    letter-spacing: -0.01em;
  }
  .plan-mes {
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-texto-2);
  }
  .plan-boton {
    width: 100%;
  }
  /* Plan destacado: la banda entera en volt, texto carbón (16.5:1) */
  .plan-destacado,
  .plan-destacado:hover {
    background: var(--c-volt);
    border-color: var(--c-volt);
    color: var(--c-carbon);
  }
  .plan-destacado .plan-detalle,
  .plan-destacado .plan-mes {
    color: var(--c-carbon);
  }
  @media (min-width: 1024px) {
    .plan {
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.25fr) auto 15.5rem;
      align-items: center;
      gap: 2.5rem;
      padding: 2rem 2.5rem;
    }
    .plan-destacado {
      padding-block: 2.75rem;
    }
    .plan-precio {
      flex-direction: column;
      align-items: flex-end;
      gap: 0.35rem;
    }
  }

  /* --------------------------------------------------------------------------
     El espacio: marca en contorno ligada al scroll + bento de 5 fotos
     -------------------------------------------------------------------------- */
  .espacio {
    overflow: clip;
  }
  .espacio-deriva {
    position: relative;
    z-index: 0;
    margin-top: 2.5rem;
    margin-bottom: -0.24em;
    font-size: clamp(5rem, 2rem + 13vw, 15rem);
    pointer-events: none;
  }
  .espacio-deriva p {
    font-family: var(--ff-display);
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .bento {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 10rem;
    gap: 6px;
  }
  .bento-celda {
    position: relative;
    overflow: clip;
    background: var(--c-carbon-2);
  }
  .bento-celda img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* Mobile: sala 2x2, rack alto, funcional y cardio chicos, vestuario 2x2 */
  .bento-sala {
    grid-column: span 2;
    grid-row: span 2;
  }
  .bento-rack {
    grid-row: span 2;
  }
  .bento-vestuario {
    grid-column: span 2;
    grid-row: span 2;
  }
  @media (min-width: 1024px) {
    .bento {
      grid-template-columns: repeat(6, minmax(0, 1fr));
      grid-template-rows: repeat(2, clamp(13rem, 19vw, 17.5rem));
      grid-auto-rows: auto;
    }
    .bento-sala {
      grid-column: 1 / 4;
      grid-row: 1 / 3;
    }
    .bento-rack {
      grid-column: 4 / 5;
      grid-row: 1 / 3;
    }
    .bento-funcional {
      grid-column: 5 / 7;
      grid-row: 1 / 2;
    }
    .bento-cardio {
      grid-column: 5 / 6;
      grid-row: 2 / 3;
    }
    .bento-vestuario {
      grid-column: 6 / 7;
      grid-row: 2 / 3;
    }
  }

  /* --------------------------------------------------------------------------
     Coaches: carrusel con snap en mobile, retratos escalonados en escritorio
     -------------------------------------------------------------------------- */
  .coaches-pista {
    margin-inline: -1rem;
    padding-inline: 1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1rem;
    scrollbar-width: thin;
    scrollbar-color: var(--c-acero) transparent;
  }
  .coaches {
    display: flex;
    gap: 1rem;
    padding-bottom: 1rem;
  }
  .coach {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
  .coach-foto {
    aspect-ratio: 3 / 4;
    overflow: clip;
    background: var(--c-carbon-2);
  }
  .coach-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.35);
    transition:
      transform 0.9s var(--ease-out),
      filter 0.6s;
  }
  .coach:hover .coach-foto img {
    transform: scale(1.04);
    filter: none;
  }
  .coach-info {
    display: grid;
    gap: 0.5rem;
    padding-top: 1.25rem;
    border-top: 2px solid var(--c-volt);
    margin-top: 1rem;
  }
  .coach-especialidad {
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-volt);
  }
  .coach-nombre {
    font-family: var(--ff-display);
    font-weight: 800;
    font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
    line-height: 1;
    text-transform: uppercase;
  }
  .coach-bio {
    max-width: 38ch;
    color: var(--c-texto-2);
  }
  @media (min-width: 768px) {
    .coach {
      flex-basis: 45%;
    }
  }
  @media (min-width: 1024px) {
    .coaches-pista {
      margin-inline: 0;
      padding-inline: 0;
      overflow: visible;
    }
    .coaches {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 2rem;
      padding-bottom: 0;
    }
    /* Escalonado: los retratos suben como una escalera de izquierda a derecha.
       nth-of-type (no nth-child): el <template> de Alpine también es hijo de la lista. */
    .coach:nth-of-type(1) {
      margin-top: 6rem;
    }
    .coach:nth-of-type(2) {
      margin-top: 3rem;
    }
  }

  /* --------------------------------------------------------------------------
     Preguntas frecuentes: acordeón
     -------------------------------------------------------------------------- */
  .faq {
    border-top: 1px solid var(--c-linea);
  }
  .faq-item {
    border-bottom: 1px solid var(--c-linea);
  }
  .faq-boton {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.5rem 0;
    color: var(--c-hueso);
    font-family: var(--ff-sans);
    font-weight: 600;
    font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    transition: color 0.25s;
  }
  .faq-boton:hover,
  .is-abierta .faq-boton {
    color: var(--c-volt);
  }
  .faq-ico {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--c-acero);
    color: var(--c-hueso);
    transition: border-color 0.3s;
  }
  .faq-ico svg {
    width: 1.1rem;
    height: 1.1rem;
    transition: transform 0.35s var(--ease-out);
  }
  .is-abierta .faq-ico {
    border-color: var(--c-volt);
    color: var(--c-volt);
  }
  .is-abierta .faq-ico svg {
    transform: rotate(45deg);
  }
  .faq-respuesta {
    max-width: 60ch;
    padding-bottom: 1.75rem;
    color: var(--c-texto-2);
  }

  /* --------------------------------------------------------------------------
     Ubicación: mapa con panel hueso superpuesto
     -------------------------------------------------------------------------- */
  .ubicacion {
    display: grid;
    background: var(--c-carbon-2);
  }
  .mapa {
    position: relative;
    height: 20rem;
    overflow: clip;
  }
  .mapa iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    /* El mapa estándar de Google es claro: se pasa a gris oscuro para que no rompa el tema */
    filter: grayscale(1) invert(0.92) contrast(0.9);
    pointer-events: none;
  }
  .mapa-enlace {
    position: absolute;
    inset: 0;
  }
  /* Marcador propio en el centro del mapa */
  .mapa-pin {
    position: absolute;
    left: 50%;
    top: 50%;
    display: grid;
    justify-items: center;
    gap: 0.6rem;
    transform: translate(-50%, calc(-100% + 0.6rem));
    pointer-events: none;
  }
  .mapa-pin-etiqueta {
    padding: 0.35rem 0.6rem;
    background: var(--c-volt);
    color: var(--c-carbon);
    font-family: var(--ff-display);
    font-weight: 800;
    font-style: italic;
    font-size: 1.125rem;
    line-height: 1;
    text-transform: uppercase;
    box-shadow: 0 8px 20px -6px rgb(0 0 0 / 0.6);
  }
  .mapa-pin-punto {
    width: 1.2rem;
    height: 1.2rem;
    background: var(--c-volt);
    border: 3px solid var(--c-carbon);
    transform: rotate(45deg);
  }
  .panel {
    display: grid;
    align-content: start;
    gap: 1.25rem;
    padding: 1.75rem 1.5rem;
    background: var(--c-hueso);
    color: var(--c-carbon);
  }
  .panel-nombre {
    font-family: var(--ff-display);
    font-weight: 800;
    font-size: 2rem;
    line-height: 1;
    text-transform: uppercase;
  }
  /* El chip de estado va oscuro sobre el panel claro */
  .panel .chip {
    background: var(--c-carbon);
    border-color: var(--c-carbon);
    color: var(--c-hueso);
  }
  .panel-datos {
    display: grid;
    gap: 1rem;
  }
  .panel-datos li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .panel-datos svg {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.2rem;
  }
  .panel-horarios,
  .pie-horarios {
    display: grid;
    gap: 0.35rem;
  }
  .panel-horarios div,
  .pie-horarios div {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.5rem;
  }
  .panel-horarios dt {
    font-weight: 600;
  }
  .panel-horarios dd {
    color: var(--c-acero);
  }
  .panel .btn svg {
    width: 1.1em;
    height: 1.1em;
  }
  @media (min-width: 1024px) {
    .ubicacion {
      position: relative;
      display: block;
    }
    .mapa {
      height: clamp(30rem, 66vh, 38rem);
    }
    .panel {
      position: absolute;
      top: 2rem;
      left: 2rem;
      width: 24rem;
      padding: 2.25rem 2rem;
      box-shadow: 0 24px 60px -20px rgb(0 0 0 / 0.6);
    }
  }

  /* --------------------------------------------------------------------------
     Footer: cierre, datos y la marca a todo el ancho
     -------------------------------------------------------------------------- */
  .pie {
    position: relative;
    overflow: clip;
    background: var(--c-hondo);
    border-top: 1px solid var(--c-linea);
    padding-top: 5rem;
  }
  @media (min-width: 768px) {
    .pie {
      padding-top: 7rem;
    }
  }
  .pie-cierre {
    display: grid;
    justify-items: start;
    gap: 1.5rem;
    max-width: 48rem;
    padding-bottom: 4rem;
  }
  .pie-grilla {
    display: grid;
    gap: 2.5rem;
    padding-block: 3.5rem;
    border-top: 1px solid var(--c-linea);
  }
  @media (min-width: 640px) {
    .pie-grilla {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 1024px) {
    .pie-grilla {
      grid-template-columns: 1.4fr 1fr 1fr 1fr;
    }
  }
  .pie-titulo-col {
    margin-bottom: 0.9rem;
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-volt);
  }
  .pie-horarios dt {
    color: var(--c-hueso);
  }
  .pie-horarios dd {
    color: var(--c-texto-2);
  }
  .pie-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem 2rem;
    padding-block: 1.5rem 0;
    border-top: 1px solid var(--c-linea);
    font-size: 0.875rem;
    color: var(--c-texto-2);
  }
  /* La palabra AURA a todo el ancho, cortada abajo */
  .pie-marca {
    margin-top: 2rem;
    margin-bottom: -0.2em;
    padding-left: 0.02em;
    font-family: var(--ff-display);
    font-weight: 800;
    font-style: italic;
    font-size: 41vw;
    line-height: 0.78;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--c-carbon-3);
    white-space: nowrap;
    user-select: none;
  }
  .pie-marca-texto {
    display: block;
  }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .pie-marca-texto {
        animation: pie-marca linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 100%;
      }
    }
    @keyframes pie-marca {
      from {
        transform: translateY(35%);
      }
      to {
        transform: none;
      }
    }
  }

  /* Grano fijo y sutil sobre toda la página (no repinta al scrollear) */
  .grano::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.06;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

}

/* Movimiento reducido: todo queda quieto y visible */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .js [data-reveal],
  .js [data-reveal="mascara"] > * {
    opacity: 1;
    transform: none;
    clip-path: none;
  }
}