/* ================================================
   ROOM FITNESS CLUB — Premium Stylesheet v2.0
   ================================================
   PALETA:
     --bg-dark:     #1E1E1E  → Fondo principal
     --bg-mid:      #3A3A3A  → Cards, secciones alternas
     --text-white:  #FFFFFF  → Texto principal
     --text-muted:  #d9d9d9  → Texto secundario / cuerpo
     --accent-lime: #E0EA8C  → CTA principal, highlights
     --accent-blue: #1D49A7  → CTA secundario, overlays
   FUENTES:
     Bebas Neue   → Títulos y display
     Cormorant SC → Palabra "ROOM" en el header
     Inter        → Cuerpo y UI
   ================================================ */


/* ================================================
   1. VARIABLES GLOBALES
   Edita AQUÍ para cambiar colores, tipografías y
   espaciados en toda la página de una sola vez.
   ================================================ */
:root {
  /* --- Colores --- */
  --bg-dark:     #1E1E1E;   /* Fondo de body y secciones principales */
  --bg-mid:      #3A3A3A;   /* Fondo de cards, stats bar, footer alterno */
  --text-white:  #FFFFFF;   /* Texto principal en todo el sitio */
  --text-muted:  #d9d9d9;   /* Texto de párrafos y descripciones */
  --accent-lime: #E0EA8C;   /* Color acento principal: botones, eyebrows, líneas hover */
  --accent-blue: #1D49A7;   /* Color acento secundario: botón Registrarse, overlay coaches */

  /* --- Tipografías --- */
  --font-display: 'Bebas Neue', 'Arial Black', sans-serif;  /* Títulos grandes de sección */
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif; /* Cuerpo, nav, botones */
  --font-brand:   'Cormorant SC', Georgia, serif;           /* Solo la palabra "ROOM" en header */

  /* --- Layout --- */
  --section-pad:    120px;                  /* Espacio vertical superior/inferior de cada sección */
  --container-max:  1300px;                 /* Ancho máximo del contenido centrado */
  --container-side: clamp(24px, 5vw, 80px); /* Margen lateral fluido (crece con la pantalla) */

  /* --- Transición global --- */
  --ease:       cubic-bezier(0.25, 0.8, 0.25, 1); /* Curva de aceleración para animaciones */
  --transition: all 0.35s var(--ease);             /* Shorthand de transición usada en todo el CSS */
}


/* ================================================
   2. RESET & BASE
   Reglas base que normalizan el comportamiento
   del navegador. No tocar salvo necesidad.
   ================================================ */

/* Elimina márgenes/paddings por defecto en todos los elementos */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Comportamiento general del documento HTML */
html {
  scroll-behavior: smooth; /* Desplazamiento suave al hacer clic en anclas del menú */
  font-size: 16px;          /* Base para todas las unidades rem del sitio */
}

/* Estilos generales del BODY — toda la página */
body {
  font-family: var(--font-body);
  background-color: var(--bg-dark);
  color: var(--text-white);
  overflow-x: hidden;            /* Evita scroll horizontal no deseado */
  -webkit-font-smoothing: antialiased;  /* Suaviza fuentes en macOS/iOS */
  -moz-osx-font-smoothing: grayscale;
}

img    { max-width: 100%; display: block; } /* Imágenes nunca se salen de su contenedor */
a      { text-decoration: none; color: inherit; } /* Links sin subrayado por defecto */
ul     { list-style: none; }                /* Listas sin bullet points */
button { font-family: inherit; }            /* Botones heredan la fuente del body */


/* ================================================
   3. UTILIDADES — Clases reutilizables en todo el HTML
   ================================================ */

/* Contenedor centrado con ancho máximo — usado en casi todas las secciones.
   NO añade padding lateral: cada sección padre ya aplica `var(--container-side)`,
   y duplicarlo aquí causaba desbordamiento horizontal en móvil (p.ej. el toggle
   con min-width:140px en cada opción quedaba más ancho que el área disponible). */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
}

/* Texto en color lima acento */
.text-accent  { color: var(--accent-lime); }
/* Texto en color azul acento */
.text-blue    { color: var(--accent-blue); }

/* Etiqueta pequeña en mayúsculas encima del título de cada sección
   Ej: "QUIÉNES SOMOS", "NUESTRO EQUIPO", "LO QUE OFRECEMOS" */
.eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 4px;             /* Estandarizado en todas las secciones */
  text-transform: uppercase;
  color: var(--accent-lime);
  margin-bottom: 14px;
}

/* Título principal de cada sección (H2)
   Ej: "MÁS QUE UN GIMNASIO", "LOS COACHES", "NUESTRAS CLASES" */
.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.8rem); /* Fluido: se reduce en pantallas pequeñas */
  letter-spacing: 2px;
  line-height: 1.0;
  text-transform: uppercase;
  margin-bottom: 18px;
}

/* Párrafo descriptivo debajo del título de sección */
.section-desc {
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.75;
  max-width: 580px;
}

/* Contenedor del título + eyebrow + descripción al inicio de cada sección */
.section-header {
  margin-bottom: 70px;
}


/* ================================================
   4. BOTONES — Estilos globales de los dos tipos de botón
   ================================================ */

/* BOTÓN PRIMARIO (fondo lima → se vuelve oscuro en hover)
   Usado en: Hero "Reservar Clase", sección Reservas "Contáctanos" */
.btn-primary {
  display: inline-block;
  position: relative;
  overflow: hidden;
  background-color: var(--accent-lime);
  color: var(--bg-dark);
  padding: 16px 44px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  border: 2px solid var(--accent-lime);
  cursor: pointer;
  transition: color 0.35s var(--ease), box-shadow 0.35s var(--ease);
  z-index: 0;
}

/* Capa oscura que desliza de izquierda a derecha en hover (efecto fill) */
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg-dark);
  transform: translateX(-102%);
  transition: transform 0.4s var(--ease);
  z-index: -1;
}

.btn-primary:hover::before { transform: translateX(0); }
.btn-primary:hover {
  color: var(--accent-lime);
  box-shadow: 0 0 24px rgba(224, 234, 140, 0.2);
}

/* BOTÓN FANTASMA (borde semitransparente → borde lima en hover)
   Usado en: Hero "Conocer más", mapa "Ver en Google Maps" */
.btn-ghost {
  display: inline-block;
  background: transparent;
  color: var(--text-white);
  padding: 14px 40px;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  border: 1px solid rgba(255, 255, 255, 0.45);  /* 1px (antes 2px) para subordinarlo visualmente al primario */
  transition: var(--transition);
}

.btn-ghost:hover {
  border-color: var(--accent-lime);
  color: var(--accent-lime);
}


/* ================================================
   5. HEADER / BARRA DE NAVEGACIÓN SUPERIOR FIJA
   Estructura: [Marca izq.] [Nav centro] [Acciones der.]
   Se vuelve opaco y más pequeño al hacer scroll.
   ================================================ */

/* Barra de navegación superior — fija en toda la página */
#main-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 88px;                   /* Altura inicial (antes de scroll) */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--container-side);
  z-index: 1000;                  /* Por encima de todo el contenido */
  background: transparent;        /* Transparente sobre el hero */
  transition:
    height     0.4s var(--ease),
    background 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}

/* Estado del header al hacer scroll (clase añadida por JS)
   Se vuelve opaco con blur tipo vidrio esmerilado */
#main-header.scrolled {
  height: 70px;                           /* Se encoge al bajar */
  background: rgba(16, 16, 16, 0.96);     /* Fondo casi negro semitransparente */
  backdrop-filter: blur(20px);            /* Efecto vidrio */
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06); /* Línea sutil inferior */
}

/* ----- IZQUIERDA DEL HEADER: Bloque de marca ----- */

/* Contenedor de la marca — siempre en la esquina superior izquierda */
.header-brand {
  flex-shrink: 0;  /* No se comprime cuando el espacio es limitado */
  z-index: 1001;
}

/* Enlace que envuelve logo/texto — lleva al inicio */
.brand-link {
  display: flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
}

/* Imagen del logotipo — VISIBLE SOLO EN MÓVIL (≤768px)
   En desktop se oculta y se muestra el texto brand en su lugar */
.logo-img {
  height: 52px;
  width: auto;
  display: none;                          /* Oculto por defecto (desktop) */
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6));
  transition: var(--transition);
}

/* Logo se encoge cuando el header está en modo scrolled */
#main-header.scrolled .logo-img { height: 44px; }
/* Logo escala sutilmente al pasar el cursor */
.brand-link:hover .logo-img   { transform: scale(1.04); }

/* Texto de marca "ROOM | FITNESS CLUB" — VISIBLE SOLO EN DESKTOP (>768px)
   En móvil se oculta y se muestra la imagen del logo */
.logo-text {
  display: inline-flex;           /* Visible en desktop por defecto */
  align-items: baseline;
  gap: 0;
  line-height: 1;
  white-space: nowrap;
  transition: var(--transition);
}

/* Palabra "ROOM" — fuente Cormorant SC en negrita, color blanco */
.logo-room {
  font-family: var(--font-brand); /* Cormorant SC */
  font-weight: 700;
  font-size: 1.55rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-white);
}

/* Separador " | " entre ROOM y FITNESS CLUB */
.logo-sep {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.1rem;
  color: rgba(255,255,255,0.35);  /* Tono apagado para que no reste protagonismo */
  margin: 0 10px;
}

/* Palabras "FITNESS CLUB" — color lima, Inter semibold */
.logo-fitness {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--accent-lime);
}

/* Estados hover de la marca entera */
.brand-link:hover .logo-room    { opacity: 0.85; }
.brand-link:hover .logo-fitness { color: #f0f5a8; } /* Lima un poco más claro en hover */

/* ----- CENTRO DEL HEADER: Menú de navegación ----- */

/* Lista de enlaces del menú principal (desktop) */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 38px;                      /* Espacio entre cada ítem del menú */
}

/* Cada enlace del menú — Nosotros, Membresía, Calendario, Coaches, Contacto */
.nav-link {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: relative;
  padding-bottom: 5px;
  transition: color 0.3s ease;
}

/* Línea lima animada que aparece debajo del enlace en hover */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;                         /* Empieza en 0 y se expande en hover */
  height: 2px;
  background: var(--accent-lime);
  transition: width 0.35s var(--ease);
}

.nav-link:hover                { color: var(--text-white); }
.nav-link:hover::after         { width: 100%; }  /* Línea se expande al 100% en hover */
.nav-link.active               { color: var(--accent-lime); } /* Sección activa mientras se scrollea */
.nav-link.active::after        { width: 100%; }

/* ----- DERECHA DEL HEADER: Botones de acceso ----- */

/* Contenedor de los botones de login y registro (en la barra del header — DESKTOP) */
.header-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-shrink: 0;
}

/* Copia de los botones que vive DENTRO del menú deslizante.
   Oculta en desktop; se muestra en tablet/móvil dentro de la hamburguesa. */
.nav-actions { display: none; }

/* BOTÓN "Ingresar" — ícono de persona + texto (desaparece en tablet/móvil) */
.btn-login {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  transition: var(--transition);
  padding: 4px 0;
  white-space: nowrap;
}

/* Ícono SVG de persona dentro del botón login */
.btn-login svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  flex-shrink: 0;
  transition: transform 0.3s var(--ease);
}

.btn-login:hover             { color: var(--accent-lime); }
.btn-login:hover svg         { transform: scale(1.12); } /* Ícono escala en hover */

/* BOTÓN "Registrarse" — fondo azul, borde lima en hover */
.btn-register {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-blue);
  color: var(--text-white);
  padding: 10px 26px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  border: 2px solid var(--accent-blue);
  transition: var(--transition);
  white-space: nowrap;
}

.btn-register:hover {
  background: transparent;
  color: var(--accent-lime);
  border-color: var(--accent-lime);
  box-shadow: 0 0 18px rgba(29, 73, 167, 0.35);
}

/* ----- BOTÓN HAMBURGUESA — solo visible en móvil (≤768px) ----- */

/* Las tres líneas del menú hamburguesa — oculto en desktop */
.btn-hamburger {
  display: none;               /* Se activa con display:flex en el media query de móvil */
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: 1002;               /* Por encima del menú deslizante */
}

/* Cada línea del ícono hamburguesa */
.btn-hamburger span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--text-white);
  transition: var(--transition);
  transform-origin: center;
}

/* Animación de las 3 líneas cuando el menú está abierto (clase .active añadida por JS) */
.btn-hamburger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }  /* → X */
.btn-hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.btn-hamburger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Overlay semiopaco detrás del menú móvil deslizante
   Ocupa toda la pantalla; al hacer clic en él se cierra el menú */
#nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 998;                /* Debajo del menú (999) pero encima del contenido */
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

#nav-overlay.active { opacity: 1; }


/* ================================================
   6. HERO — Sección principal de bienvenida
   Ocupa el 100% del alto de la pantalla.
   Fondo: bgFitness2.png con efecto parallax al scroll.
   ================================================ */

/* Contenedor principal del hero — pantalla completa */
.hero-section {
  height: 100svh;              /* Usa svh para mejor soporte en móviles */
  min-height: 680px;
  position: relative;
  display: flex;
  align-items: center;         /* Contenido centrado verticalmente */
  padding: 0 var(--container-side);
  overflow: hidden;

  /* Imagen de fondo con parallax (se mueve más lento que el scroll) */
  background-image:
    linear-gradient(            /* Degradado oscuro encima de la foto */
      105deg,
      rgba(30, 30, 30, 0.93) 0%,
      rgba(30, 30, 30, 0.55) 55%,
      rgba(30, 30, 30, 0.88) 100%
    ),
    url('../img/bgFitness2.jpg'); /* Imagen de fondo — ruta relativa desde css/ */
  background-size: cover;
  background-position: center 30%;
  background-attachment: fixed; /* PARALLAX: la imagen se mueve más lento que el scroll */
}

/* Degradado negro en la parte inferior del hero
   Fusiona visualmente el hero con la sección de estadísticas */
.hero-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 220px;
  background: linear-gradient(to top, var(--bg-dark), transparent);
  z-index: 1;
  pointer-events: none;        /* No bloquea clics */
}

/* Layout del hero — en DESKTOP es una fila: [logo izquierda | texto derecha].
   En móvil/tablet se apila en columna (ver media queries más abajo). */
.hero-layout {
  position: relative;
  z-index: 2;                  /* Por encima del overlay */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;     /* Centra el grupo (logo + texto) horizontalmente */
  gap: clamp(40px, 6vw, 90px); /* Separación fluida entre logo y texto */
  margin-top: 65px;            /* Separación del menú superior para que no se vea pegado */
}

/* Bloque izquierdo del hero — contiene el logotipo grande */
.hero-logo-block {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  animation: heroFadeUp 0.9s var(--ease) 0.1s forwards; /* Entra primero */
}

/* Logotipo grande del hero — lo primero que ve el visitante */
.hero-logo {
  width: clamp(220px, 24vw, 360px); /* Grande pero fluido según el ancho */
  height: auto;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.55));
  transition: transform 0.5s var(--ease);
}

.hero-logo:hover { transform: scale(1.03); }

/* Bloque de texto del hero (título, subtítulo, botones) */
.hero-content {
  position: relative;
  z-index: 2;                  /* Por encima del overlay */
  max-width: 760px;
}

/* Texto pequeño sobre el título — "TRAINING CLUB · SATÉLITE..."
   Apagado a blanco 60% para que el lima quede reservado al H1 + CTA */
.hero-eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 22px;
  opacity: 0;
  animation: heroFadeUp 0.8s var(--ease) 0.2s forwards; /* Animación al cargar la página */
}

/* Título principal del hero — "ENTRENA CON PROPÓSITO" */
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 10vw, 8.5rem); /* Fluido: enorme en desktop, menor en móvil */
  line-height: 0.92;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 26px;
  opacity: 0;
  animation: heroFadeUp 0.9s var(--ease) 0.4s forwards;
}

/* Subtítulo del hero — "FUERZA · ACONDICIONAMIENTO · RENDIMIENTO" */
.hero-subtitle {
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 52px;
  opacity: 0;
  animation: heroFadeUp 0.9s var(--ease) 0.6s forwards;
}

/* Fila de botones del hero — "Reservar Clase" y "Conocer más" */
.hero-cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  opacity: 0;
  animation: heroFadeUp 0.9s var(--ease) 0.8s forwards;
}

/* Indicador de scroll animado — línea vertical en el costado derecho del hero */
.scroll-indicator {
  position: absolute;
  bottom: 50px;
  right: var(--container-side);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Texto "SCROLL" vertical al lado de la línea */
.scroll-indicator span {
  font-size: 0.65rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  writing-mode: vertical-rl;   /* Texto rotado verticalmente */
}

/* Línea animada del indicador de scroll */
.scroll-line {
  width: 1px;
  height: 70px;
  background: linear-gradient(to bottom, var(--accent-lime), transparent);
  animation: scrollPulse 2.2s ease-in-out infinite; /* Pulso continuo */
  transform-origin: top;
}

/* Animación de pulso de la línea de scroll */
@keyframes scrollPulse {
  0%, 100% { transform: scaleY(0.3); opacity: 0.4; }
  50%       { transform: scaleY(1);   opacity: 1; }
}

/* Animación de entrada de los elementos del hero al cargar la página */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ================================================
   7. BARRA DE ESTADÍSTICAS
   Franja oscura con 4 números animados inmediatamente
   debajo del hero: Miembros, Coaches, Años, Clases.
   ================================================ */

/* Contenedor de los 4 bloques de estadística */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 columnas iguales en desktop */
  background: var(--bg-mid);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 50px;                /* Aire entre el hero y la stats bar (evita que se vea apilado) */
}

/* Cada bloque individual de estadística (número + etiqueta) */
.stat-item {
  text-align: center;
  padding: 52px 20px;
  border-right: 1px solid rgba(255, 255, 255, 0.07); /* Divisor entre bloques */
  position: relative;
  overflow: hidden;
  transition: background 0.3s ease;
}

.stat-item:last-child { border-right: none; } /* El último no tiene borde derecho */

/* Línea lima que aparece en la base del bloque en hover */
.stat-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent-lime);
  transition: width 0.5s var(--ease);
}

.stat-item:hover             { background: rgba(255,255,255,0.03); }
.stat-item:hover::after      { width: 100%; }

/* Número grande animado (JS lo cuenta desde 0) — ej: "200", "4", "5" */
.stat-number {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 3.8rem;
  letter-spacing: 1px;
  color: var(--accent-lime);
  line-height: 1;
}

/* Símbolo "+" al lado del número — ej: "200+" */
.stat-symbol {
  font-family: var(--font-display);
  font-size: 2.6rem;
  color: var(--accent-lime);
  vertical-align: top;
  margin-top: 5px;
  display: inline-block;
}

/* Etiqueta debajo del número — ej: "MIEMBROS ACTIVOS" */
.stat-label {
  display: block;
  margin-top: 10px;
  font-size: 0.72rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
}


/* ================================================
   8. SECCIÓN NOSOTROS (id="nosotros")
   Texto izquierda con Misión/Visión + imagen derecha.
   ================================================ */

/* Sección completa de Nosotros */
.section-nosotros {
  padding: var(--section-pad) var(--container-side);
  max-width: var(--container-max);
  margin: 0 auto;
}

/* Grid de dos columnas: texto (izq) + imagen (der) */
.nosotros-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;                   /* Espacio entre columna de texto e imagen */
  align-items: center;
}

/* Párrafos del texto de nosotros */
.body-text {
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.82;
  margin-bottom: 22px;
}

/* Palabras en negrita dentro del texto de nosotros (ej: "Room Fitness Club") */
.body-text strong { color: var(--text-white); font-weight: 600; }

/* Grid de las dos tarjetas Misión + Visión debajo del texto */
.mission-vision-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 44px;
}

/* Tarjeta individual de Misión o Visión */
.mv-card {
  background: var(--bg-mid);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-left: 3px solid transparent; /* Borde izquierdo que se activa en hover */
  padding: 28px 22px;
  transition: var(--transition);
  position: relative;
}

/* Tarjeta se eleva y muestra borde lima izquierdo en hover */
.mv-card:hover {
  border-left-color: var(--accent-lime);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
  background: #2a2a2a;
}

/* Contenedor del ícono SVG en la tarjeta (ojo/persona) */
.mv-icon {
  display: inline-flex;
  margin-bottom: 14px;
}

/* Ícono SVG de Misión o Visión */
.mv-icon svg {
  width: 26px;
  height: 26px;
  fill: var(--accent-lime);
}

/* Título de la tarjeta — "MISIÓN" o "VISIÓN" */
.mv-card h4 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* Texto descriptivo dentro de la tarjeta */
.mv-card p {
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.65;
}

/* Columna derecha de Nosotros — contenedor de la foto */
.nosotros-image { position: relative; }

/* Caja de la foto (parejaFitness.jpg) con proporción 3:4 */
.image-box {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;          /* Proporción retrato */
}

/* La foto en sí — escala y se desaturiza/colorea en hover */
.image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(25%);        /* Ligero blanco y negro por defecto */
  transition: transform 0.7s var(--ease), filter 0.5s ease;
}

/* Al pasar el cursor: escala y muestra color completo */
.image-box:hover img {
  transform: scale(1.05);
  filter: grayscale(0%);
}

/* Barra decorativa lima en la esquina inferior derecha de la foto */
.image-box::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 55%;
  height: 4px;
  background: var(--accent-lime);
}

/* Marco decorativo de esquina en la parte superior izquierda de la foto */
.image-box::before {
  content: '';
  position: absolute;
  top: -12px;
  left: -12px;
  width: 60px;
  height: 60px;
  border-top: 3px solid var(--accent-lime);
  border-left: 3px solid var(--accent-lime);
  z-index: 1;
}


/* ================================================
   9. SECCIÓN CLASES / HORARIOS (id="horarios")
   4 tarjetas de tipos de clase: Fuerza, Acondiciona-
   miento, HIIT y Movilidad. Fondo degradado oscuro.
   ================================================ */

/* Sección completa de Clases — fondo degradado oscuro/medio/oscuro */
.section-clases {
  padding: var(--section-pad) var(--container-side);
  background: linear-gradient(
    180deg,
    var(--bg-dark)   0%,
    var(--bg-mid) 40%,
    var(--bg-mid) 60%,
    var(--bg-dark) 100%
  );
}

/* Grid de 4 tarjetas de clase — 4 columnas iguales en desktop */
.clases-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;                    /* Separación mínima entre tarjetas */
  margin-top: 70px;
}

/* Tarjeta individual de tipo de clase */
.clase-card {
  background: rgba(30, 30, 30, 0.9);
  padding: 52px 30px;
  border-bottom: 3px solid transparent; /* Borde lima inferior que aparece en hover */
  transition: var(--transition);
  cursor: default;
  position: relative;
  overflow: hidden;
}

/* Brillo radial sutil en la esquina superior izquierda en hover */
.clase-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(224, 234, 140, 0.05) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* Tarjeta sube y muestra borde lima al pasar el cursor */
.clase-card:hover {
  background: #252525;
  border-bottom-color: var(--accent-lime);
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
  z-index: 1;
}

.clase-card:hover::before { opacity: 1; }

/* Cuadrado con ícono SVG de cada tipo de clase */
.clase-icon {
  width: 56px;
  height: 56px;
  background: rgba(224, 234, 140, 0.09); /* Fondo lima tenue por defecto */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
  transition: var(--transition);
}

/* En hover: el cuadrado se vuelve lima sólido */
.clase-card:hover .clase-icon {
  background: var(--accent-lime);
}

/* Ícono SVG dentro del cuadrado */
.clase-icon svg {
  width: 26px;
  height: 26px;
  fill: var(--accent-lime);
  transition: fill 0.3s ease;
}

/* En hover: el ícono se vuelve oscuro (contrasta con fondo lima) */
.clase-card:hover .clase-icon svg { fill: var(--bg-dark); }

/* Título de la clase — "FUERZA", "ACONDICIONAMIENTO", etc. */
.clase-card h3 {
  font-family: var(--font-display);
  font-size: 1.9rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* Descripción de la clase */
.clase-card p {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.72;
  margin-bottom: 28px;
}

/* Etiqueta de nivel — "TODOS LOS NIVELES", "INTERMEDIO", "AVANZADO" */
.clase-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--accent-lime);
  border: 1px solid rgba(224, 234, 140, 0.38);
  padding: 5px 14px;
}


/* ================================================
   10. SECCIÓN COACHES (id="coaches")
   4 tarjetas de coach con foto + overlay azul en hover
   + nombre, rol y bio debajo de la foto.
   ================================================ */

/* Sección completa de Coaches */
.section-coaches {
  padding: var(--section-pad) var(--container-side);
}

/* Grid de 4 tarjetas de coach — 4 columnas en desktop */
.coaches-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

/* Tarjeta individual de coach */
.coach-card {
  background: var(--bg-mid);
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

/* Tarjeta sube con sombra profunda en hover */
.coach-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 52px rgba(0, 0, 0, 0.55);
}

/* Contenedor de la foto del coach (proporción 3:4 retrato) */
.coach-img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
}

/* Foto del coach — escala y se colorea en hover */
.coach-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(35%);        /* Ligero B&N por defecto */
  transition: transform 0.65s var(--ease), filter 0.5s ease;
}

.coach-card:hover .coach-img-wrap img {
  transform: scale(1.07);
  filter: grayscale(0%);         /* Foto en color completo al hacer hover */
}

/* Overlay azul con degradado que cubre la foto en hover
   Contiene el ícono de Instagram */
.coach-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(29, 73, 167, 0.88) 0%,  /* Azul sólido en la base */
    rgba(20, 20, 20, 0.25) 50%,
    transparent 100%
  );
  opacity: 0;                    /* Invisible por defecto */
  transition: opacity 0.4s ease;
  display: flex;
  align-items: flex-end;         /* Iconos de redes sociales en la parte inferior */
  padding: 24px;
}

.coach-card:hover .coach-overlay { opacity: 1; } /* Aparece al hacer hover */

/* Fila de botones de redes sociales dentro del overlay */
.coach-social { display: flex; gap: 10px; }

/* Botón cuadrado de red social (Instagram, etc.) */
.social-icon-btn {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

/* Botón de red social se vuelve lima en hover */
.social-icon-btn:hover {
  background: var(--accent-lime);
  border-color: var(--accent-lime);
}

/* Ícono SVG de la red social */
.social-icon-btn svg {
  width: 16px;
  height: 16px;
  fill: var(--text-white);
  transition: fill 0.25s ease;
}

.social-icon-btn:hover svg { fill: var(--bg-dark); } /* Ícono oscuro sobre fondo lima */

/* Área de información debajo de la foto (nombre, rol, bio) */
.coach-info {
  padding: 24px 22px 30px;
  border-left: 3px solid transparent; /* Borde lima izquierdo que aparece en hover */
  transition: border-color 0.35s ease;
}

.coach-card:hover .coach-info { border-left-color: var(--accent-lime); }

/* Nombre del coach — "ISAAC", "DIEGO VALDESPINO", etc. */
.coach-name {
  font-family: var(--font-display);
  font-size: 1.65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 5px;
}

/* Rol del coach — "HEAD COACH · FUERZA & RENDIMIENTO" */
.coach-role {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent-lime);
  margin-bottom: 14px;
}

/* Descripción breve del coach */
.coach-bio {
  color: var(--text-muted);
  font-size: 0.87rem;
  line-height: 1.65;
}


/* ================================================
   11. SECCIÓN RESERVACIONES (id="reservas")
   Espacio preparado para integrar un sistema de
   reservas externo (iframe/widget). Fondo alterno
   con líneas decorativas lima arriba y abajo.
   ================================================ */

/* Sección completa de Reservas — fondo alterno gris oscuro */
.section-reservas {
  padding: var(--section-pad) var(--container-side);
  background: var(--bg-mid);
  position: relative;
  overflow: hidden;
}

/* Líneas decorativas lima que bordean la sección arriba y abajo */
.section-reservas::before,
.section-reservas::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, transparent 0%, var(--accent-lime) 40%, var(--accent-lime) 60%, transparent 100%);
}

.section-reservas::before { top: 0; }    /* Línea superior */
.section-reservas::after  { bottom: 0; } /* Línea inferior */

/* Contenedor del widget/iframe de reservas (borde punteado placeholder) */
.booking-placeholder {
  border: 1px dashed rgba(224, 234, 140, 0.28);
  background: rgba(224, 234, 140, 0.025);
  transition: var(--transition);
}

/* Borde punteado se intensifica al pasar el cursor */
.booking-placeholder:hover {
  border-color: rgba(224, 234, 140, 0.55);
  background: rgba(224, 234, 140, 0.05);
}

/* Padding interno del placeholder cuando no hay widget real */
.booking-placeholder-inner {
  padding: 100px 40px;
  text-align: center;
}

/* Ícono de calendario del placeholder */
.booking-icon {
  width: 58px;
  height: 58px;
  fill: var(--accent-lime);
  margin: 0 auto 26px;
  display: block;
  opacity: 0.65;
}

/* Título del placeholder — "SISTEMA DE RESERVACIONES" */
.booking-placeholder h3 {
  font-family: var(--font-display);
  font-size: 2.2rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 18px;
}

/* Texto explicativo del placeholder */
.booking-placeholder p {
  color: var(--text-muted);
  font-size: 0.97rem;
  line-height: 1.75;
  max-width: 520px;
  margin: 0 auto;
}


/* ================================================
   12. SECCIÓN CONTACTO & UBICACIÓN (id="contacto")
   Columna izquierda: dirección, teléfono, email,
   horarios. Columna derecha: mapa de Google Maps.
   ================================================ */

/* Sección completa de Contacto */
.section-contacto {
  padding: var(--section-pad) var(--container-side);
}

/* Grid de dos columnas: info (izq) + mapa (der) */
.contacto-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr; /* El mapa ocupa un poco más de espacio */
  gap: 64px;
  align-items: start;
}

/* Fila de un dato de contacto (ícono + texto) — dirección, teléfono, email */
.contact-item {
  display: flex;
  gap: 20px;
  margin-bottom: 38px;
  align-items: flex-start;
}

/* Cuadrado con ícono SVG (pin, teléfono, sobre) */
.contact-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  background: rgba(224, 234, 140, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
}

/* En hover: el cuadrado se vuelve lima y el ícono oscuro */
.contact-item:hover .contact-icon     { background: var(--accent-lime); }
.contact-icon svg                     { width: 20px; height: 20px; fill: var(--accent-lime); transition: fill 0.3s ease; }
.contact-item:hover .contact-icon svg { fill: var(--bg-dark); }

/* Etiqueta del dato — "DIRECCIÓN", "TELÉFONO", "EMAIL" */
.contact-item h4 {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--accent-lime);
  margin-bottom: 8px;
}

/* Texto y links del dato de contacto */
.contact-item p,
.contact-item a {
  color: var(--text-muted);
  font-size: 0.93rem;
  line-height: 1.65;
  transition: color 0.25s ease;
}

.contact-item a:hover { color: var(--text-white); }

/* Tabla de horarios de atención (Lun-Vie, Sáb, Dom) */
.horarios-table {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 32px;
  margin-top: 6px;
}

/* Título de la tabla de horarios — "HORARIOS DE ATENCIÓN" */
.horarios-table h4 {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--accent-lime);
  margin-bottom: 18px;
}

/* Fila individual de horario — día y hora separados por espacio */
.horario-row {
  display: flex;
  justify-content: space-between; /* Día a la izquierda, hora a la derecha */
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  font-size: 0.9rem;
  color: var(--text-muted);
}

.horario-row:last-child              { border-bottom: none; } /* Sin separador en el último */
.horario-row span:last-child         { color: var(--text-white); font-weight: 500; } /* Hora más visible */

/* Contenedor del mapa de Google Maps
   Cuando insertes el iframe, sustituye este bloque completo en el HTML */
.map-placeholder {
  background: var(--bg-mid);
  border: 1px solid rgba(255, 255, 255, 0.08);
  aspect-ratio: 4 / 3;            /* Proporción del contenedor del mapa */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  transition: border-color 0.3s ease;
  overflow: hidden;
}

.map-placeholder:hover          { border-color: rgba(224, 234, 140, 0.3); }
.map-placeholder svg            { width: 48px; height: 48px; fill: rgba(255,255,255,0.18); }
.map-placeholder p              { color: var(--text-muted); font-size: 0.88rem; }

/* Cuando insertes el iframe de Google Maps, ocupará todo el contenedor */
.map-placeholder iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}


/* ================================================
   13. FOOTER — Pie de página
   3 columnas: marca + redes sociales | nav | accesos.
   Fondo negro casi puro.
   ================================================ */

/* Pie de página completo */
.site-footer {
  background: #111111;           /* Más oscuro que el resto de la página */
  padding: 80px var(--container-side) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Grid de 3 columnas: marca (2fr), Navega (1fr), Accesos (1fr) */
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 60px;
  padding-bottom: 60px;
}

/* Logo en el footer */
.footer-logo {
  height: 52px;
  width: auto;
  margin-bottom: 22px;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

.footer-logo:hover { opacity: 1; }

/* Marca de texto del footer — misma identidad que el header de desktop
   (mantiene consistencia: ROOM serif blanco · separador apagado · FITNESS CLUB lima) */
.footer-logo-text {
  display: inline-flex;
  align-items: baseline;
  margin-bottom: 22px;
  line-height: 1;
}
.footer-logo-text .logo-room    { font-size: 1.7rem; }
.footer-logo-text .logo-fitness { font-size: 0.85rem; }

/* Párrafo descriptivo del negocio debajo del logo del footer */
.footer-brand p {
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.72;
  max-width: 300px;
  margin-bottom: 28px;
}

/* Fila de íconos de redes sociales en el footer */
.footer-social { display: flex; gap: 10px; }

/* Título de cada columna de links del footer — "NAVEGA", "ACCESOS" */
.footer-nav h5 {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--accent-lime);
  margin-bottom: 24px;
}

.footer-nav ul li { margin-bottom: 13px; }

/* Links de navegación del footer */
.footer-nav ul li a {
  color: var(--text-muted);
  font-size: 0.88rem;
  position: relative;
  transition: color 0.25s ease;
}

/* Línea lima animada bajo los links del footer en hover */
.footer-nav ul li a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--accent-lime);
  transition: width 0.3s ease;
}

.footer-nav ul li a:hover            { color: var(--text-white); }
.footer-nav ul li a:hover::after     { width: 100%; }

/* Franja inferior del footer — copyright y ubicación */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.055);
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

/* Textos del copyright — opacidad subida a 0.5 para mejor legibilidad */
.footer-bottom p {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.78rem;
}

.footer-bottom .text-accent { font-size: 0.65rem; }


/* ================================================
   14. ANIMACIONES DE REVELADO AL SCROLL
   Elementos con clase .reveal aparecen al entrar
   al viewport (gestionado por Intersection Observer en JS).
   ================================================ */

/* Estado inicial oculto — todos los elementos con .reveal */
.reveal {
  opacity: 0;
  transform: translateY(44px);   /* Desplazados 44px hacia abajo */
  transition:
    opacity  0.75s var(--ease),
    transform 0.75s var(--ease);
}

/* Estado visible — clase .visible añadida por JS al entrar en viewport */
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Delays escalonados para que las tarjetas de cada grid aparezcan una tras otra */
.coaches-grid .coach-card:nth-child(2) { transition-delay: 0.1s; }
.coaches-grid .coach-card:nth-child(3) { transition-delay: 0.2s; }
.coaches-grid .coach-card:nth-child(4) { transition-delay: 0.3s; }

.clases-grid .clase-card:nth-child(2) { transition-delay: 0.08s; }
.clases-grid .clase-card:nth-child(3) { transition-delay: 0.16s; }
.clases-grid .clase-card:nth-child(4) { transition-delay: 0.24s; }

.stats-bar .stat-item:nth-child(2) { transition-delay: 0.08s; }
.stats-bar .stat-item:nth-child(3) { transition-delay: 0.16s; }
.stats-bar .stat-item:nth-child(4) { transition-delay: 0.24s; }


/* ================================================
   15. RESPONSIVE — TABLET (pantallas ≤ 1024px)
   Ajustes para iPads y laptops pequeñas.
   El menú hamburguesa NO aparece aquí todavía.
   ================================================ */
@media (max-width: 1024px) {
  :root { --section-pad: 90px; } /* Reduce el espacio vertical de cada sección */

  /* Hero: título más pequeño */
  .hero-title { font-size: clamp(3.8rem, 8vw, 6rem); }

  /* Hero: logo y texto se apilan en columna y centrados (logo arriba, texto abajo) */
  .hero-layout     { flex-direction: column; align-items: center; text-align: center; gap: 36px; }
  .hero-content    { max-width: 640px; }
  .hero-cta        { justify-content: center; }
  .hero-logo       { width: clamp(180px, 34vw, 260px); }

  /* Nosotros: pasa de 2 columnas a 1 columna, imagen va arriba */
  .nosotros-grid         { grid-template-columns: 1fr; gap: 50px; }
  .nosotros-image        { order: -1; }          /* Imagen antes del texto */
  .image-box             { aspect-ratio: 16 / 9; } /* Proporción más horizontal */

  /* Coaches y Clases: de 4 columnas a 2 columnas */
  .coaches-grid          { grid-template-columns: repeat(2, 1fr); }
  .clases-grid           { grid-template-columns: repeat(2, 1fr); gap: 2px; }

  /* Stats bar: de 4 columnas a 2 columnas */
  .stats-bar             { grid-template-columns: repeat(2, 1fr); }
  .stat-item:nth-child(2){ border-right: none; } /* Quita el borde entre la 2ª y 3ª columna */

  /* Contacto: de 2 columnas a 1 columna (info + mapa apilados) */
  .contacto-grid         { grid-template-columns: 1fr; }

  /* Footer: de 3 columnas a 2 columnas */
  .footer-grid           { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-brand          { grid-column: 1 / -1; } /* Marca ocupa todo el ancho */

  /* ----- DESDE TABLET: menú + acciones detrás de la hamburguesa ----- */

  /* Oculta los botones de la barra del header (login/registro de desktop) */
  .header-actions        { display: none; }
  /* Muestra el botón hamburguesa */
  .btn-hamburger         { display: flex; }

  /* El menú se convierte en panel deslizante desde la derecha */
  .nav-menu {
    position: fixed;
    top: 0;
    right: -100%;                /* Oculto fuera de pantalla a la derecha */
    width: min(80vw, 340px);
    height: 100dvh;
    background: rgba(14, 14, 14, 0.98);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    z-index: 999;
    transition: right 0.42s var(--ease);
    border-left: 1px solid rgba(255, 255, 255, 0.07);
  }

  /* Panel visible — clase .active añadida por JS al abrir */
  .nav-menu.active       { right: 0; }
  /* Links del menú más grandes dentro del panel */
  .nav-link              { font-size: 1rem; letter-spacing: 3px; }

  /* Acciones (Ingresar / Registrarse) visibles dentro del panel,
     apiladas verticalmente y centradas, debajo de los enlaces */
  .nav-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    margin-top: 16px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    width: 70%;
  }
  /* Dentro del panel sí mostramos el texto "Ingresar" junto al ícono */
  .nav-actions .btn-login      { justify-content: center; font-size: 0.9rem; }
  .nav-actions .btn-login span { display: inline; }
  .nav-actions .btn-register   { width: 100%; padding: 13px 26px; }
}


/* ================================================
   16. RESPONSIVE — MÓVIL (pantallas ≤ 768px)
   Aparece el menú hamburguesa. Logo imagen visible.
   ================================================ */
@media (max-width: 768px) {
  :root { --section-pad: 72px; --container-side: 22px; }

  /* Logo imagen: se hace visible en móvil (por defecto está oculta en desktop) */
  .logo-img              { display: block; }
  /* Texto brand "ROOM | FITNESS CLUB": se oculta en móvil */
  .logo-text             { display: none; }

  /* (El panel deslizante, la hamburguesa y las acciones del menú ya se
     activan desde tablet en el media query de ≤1024px de arriba.) */

  /* Hero: desactiva el parallax (causa problemas de rendimiento en móvil) */
  .hero-section          { background-attachment: scroll; }
  /* Hero: logo más compacto en móvil */
  .hero-logo             { width: clamp(150px, 44vw, 220px); }
  /* Hero: título más pequeño en móvil */
  .hero-title            { font-size: clamp(3rem, 12vw, 4.5rem); }
  /* Hero: botones apilados verticalmente en móvil */
  .hero-cta              { flex-direction: column; align-items: flex-start; }
  /* Oculta el indicador de scroll en móvil */
  .scroll-indicator      { display: none; }

  /* Stats bar: se mantiene en 2 columnas */
  .stats-bar             { grid-template-columns: repeat(2, 1fr); }
  /* Clases: pasa a 1 columna en móvil */
  .clases-grid           { grid-template-columns: 1fr; gap: 2px; }
  /* Coaches: 2 columnas al 50% (fotos no se agrandan demasiado) */
  .coaches-grid          { grid-template-columns: repeat(2, 1fr); }
  /* Misión/Visión: de 2 columnas a 1 columna */
  .mission-vision-cards  { grid-template-columns: 1fr; }

  /* Footer: 1 columna, copyright centrado */
  .footer-grid           { grid-template-columns: 1fr; gap: 36px; }
  .footer-bottom         { flex-direction: column; text-align: center; }

  /* Reservas: reduce el padding del placeholder */
  .booking-placeholder-inner { padding: 70px 24px; }
}


/* ================================================
   18. PÁGINA DE MEMBRESÍA (membresia.html)
   Estilos exclusivos de la subpágina de planes:
   header sólido, encabezado, toggle, planes,
   testimonios y llamado a la acción (CTA).
   ================================================ */

/* En la subpágina el header SIEMPRE tiene fondo sólido
   (no hay hero con imagen detrás como en el index) */
#main-header.header-solid {
  background: rgba(16, 16, 16, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Variante de section-header centrada (usada en esta página) */
.section-header.center        { text-align: center; }
.section-header.center .section-desc { margin-left: auto; margin-right: auto; }

/* ----- Encabezado de la página (debajo del header fijo) -----
   Misma altura que el hero del index (100svh, min 680px) para mantener
   coherencia visual entre páginas.
   Fondo: memb.png con overlay oscuro para garantizar legibilidad del título. */
.page-hero {
  position: relative;
  height: 100svh;                /* Pantalla completa, igual que .hero-section */
  min-height: 680px;
  display: flex;
  flex-direction: column;
  justify-content: center;       /* Contenido centrado verticalmente */
  align-items: center;
  padding: 88px var(--container-side) 40px; /* Deja espacio para el header fijo arriba */
  text-align: center;
  color: var(--text-white);
  background-image:
    linear-gradient(            /* Overlay oscuro encima de la foto */
      180deg,
      rgba(30, 30, 30, 0.85) 0%,
      rgba(30, 30, 30, 0.55) 45%,
      rgba(30, 30, 30, 0.90) 100%
    ),
    url('../img/memb.jpg');
  background-size: cover;
  background-position: center 40%;
  background-attachment: fixed;  /* Efecto parallax sutil (se desactiva en móvil más abajo) */
}

/* Línea decorativa lima en la base del page-hero para fusionarlo con la siguiente sección */
.page-hero::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: clamp(80px, 14vw, 180px);
  height: 3px;
  background: var(--accent-lime);
}

/* Título grande del encabezado de página */
.page-hero-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 5.5rem);
  letter-spacing: 2px;
  line-height: 0.95;
  text-transform: uppercase;
  margin-bottom: 22px;
}

/* Descripción debajo del título de la página */
.page-hero-desc {
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.75;
  max-width: 600px;
  margin: 0 auto;
}

/* ----- Sección de planes ----- */
.section-planes {
  padding: var(--section-pad) var(--container-side) calc(var(--section-pad) - 20px);
}

/* Fila contenedora del toggle — flex center garantiza centrado en
   todas las pantallas sin depender de margin:auto. */
.billing-row {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

/* Toggle Mensual / Anual — pastilla con dos opciones e indicador deslizante.
   Ambas opciones comparten ancho (flex:1 + min-width) para que el slider
   al 50% caiga perfectamente alineado con cada botón. */
.billing-toggle {
  position: relative;
  display: flex;
  background: var(--bg-mid);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 100px;
  padding: 6px;
}

/* Indicador lima que se desliza tras la opción activa */
.billing-slider {
  position: absolute;
  top: 6px;
  left: 6px;
  height: calc(100% - 12px);
  width: calc(50% - 6px);
  background: var(--accent-lime);
  border-radius: 100px;
  transition: transform 0.4s var(--ease);
  z-index: 0;
}

/* Cuando "Anual" está activo, el slider se mueve a la derecha (clase via JS) */
.billing-toggle.annual-active .billing-slider { transform: translateX(100%); }

/* Cada opción del toggle — ambas con MISMO ancho (flex:1 + min-width)
   para que el slider del 50% caiga exactamente sobre cada botón. */
.billing-option {
  position: relative;       /* contenedor de la etiqueta absoluta "Ahorra 20%" */
  z-index: 1;
  flex: 1;                  /* mismo ancho ambas opciones */
  min-width: 140px;         /* ancho mínimo para alojar el texto más largo */
  background: none;
  border: none;
  cursor: pointer;
  padding: 11px 24px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.3s var(--ease);
  white-space: nowrap;
}

/* Opción activa: texto oscuro sobre el slider lima */
.billing-option.active { color: var(--bg-dark); }

/* Chip "Ahorra 20%" — vive como elemento absoluto del TOGGLE (no del botón)
   para no afectar el ancho de los botones ni el centrado del toggle.
   Color AZUL para no chocar con el slider lima cuando se activa "Anual".
   Se queda DENTRO de los bordes del toggle (no sobresale) para evitar el
   "descuadre" en el lado derecho. */
.billing-save {
  position: absolute;
  top: -14px;
  right: 0;                 /* alineado con el borde derecho del toggle, no sobresale */
  background: var(--accent-blue);
  color: var(--text-white);
  padding: 3px 9px;
  border-radius: 100px;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;     /* no interfiere con el clic del botón */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* Hint debajo del toggle que invita a probar el plan anual.
   Se oculta cuando ya se eligió la opción "anual". */
.billing-hint {
  text-align: center;
  margin: 0 auto 48px;
  font-size: 0.78rem;
  color: var(--accent-lime);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

.billing-row:has(.billing-toggle.annual-active) + .billing-hint { opacity: 0; }

/* Grid de los 3 planes */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

/* Tarjeta de plan individual — patrón de hover unificado:
   lift + sombra + línea lima inferior (el mismo lenguaje que el resto de tarjetas).
   IMPORTANTE: no se aplica overflow:hidden para que el badge "Más popular" (que vive
   half-outside arriba del borde) no quede cortado. */
.plan-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-mid);
  border: 1px solid rgba(255, 255, 255, 0.07);
  padding: 44px 36px;
  position: relative;
  transition: var(--transition);
}

/* Línea lima inferior que se expande al pasar el cursor */
.plan-card::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 3px;
  background: var(--accent-lime);
  transition: width 0.45s var(--ease);
}

.plan-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5);
  border-color: rgba(224, 234, 140, 0.25);
}

.plan-card:hover::after { width: 100%; }

/* Plan destacado (Pro) — borde lima y ligeramente elevado */
.plan-card--featured {
  border: 2px solid var(--accent-lime);
  background: #2c2c2c;
  transform: translateY(-12px);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.55);
}

.plan-card--featured:hover { transform: translateY(-18px); }

/* Etiqueta "Más popular" sobre el plan destacado */
.plan-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--accent-lime);
  color: var(--bg-dark);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 6px 18px;
  white-space: nowrap;
}

/* Nombre del plan — "ESENCIAL", "PRO", "ÉLITE"
   Subordinado al H2 "Membresías": menos peso y tracking más cerrado */
.plan-name {
  font-family: var(--font-display);
  font-size: 1.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* Frase descriptiva del plan */
.plan-tagline {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.55;
  margin-bottom: 28px;
  min-height: 44px;
}

/* Bloque del precio */
.plan-price {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.plan-currency {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--text-white);
  margin-top: 8px;
}

/* Cifra grande del precio (cambia con el toggle) */
.plan-amount {
  font-family: var(--font-display);
  font-size: 3.6rem;
  line-height: 1;
  color: var(--text-white);
}

.plan-period {
  align-self: flex-end;
  font-size: 0.78rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

/* Lista de beneficios del plan */
.plan-features {
  margin-bottom: 36px;
  flex-grow: 1;            /* empuja el botón al fondo de la tarjeta */
}

/* Cada beneficio con su palomita lima */
.plan-features li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 14px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Palomita ✓ antes de cada beneficio
   BLANCA por defecto (Esencial / Élite). En el plan destacado (Pro) se vuelve LIMA
   para reservar el lima a un único trabajo: marcar el tier recomendado. */
.plan-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  background: var(--text-white);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* En el plan destacado las palomitas SÍ son lima — refuerza el "recomendado" */
.plan-card--featured .plan-features li::before { background: var(--accent-lime); }

/* Botón de cada plan — ocupa todo el ancho de la tarjeta */
.plan-btn {
  width: 100%;
  text-align: center;
}

/* Nota legal debajo de los planes */
.plans-note {
  text-align: center;
  margin-top: 40px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
}

/* ----- Sección de testimonios ----- */
.section-testimonios {
  padding: var(--section-pad) var(--container-side);
  background: var(--bg-mid);
}

/* Grid de 3 testimonios */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Tarjeta de testimonio — mismo patrón de hover: lift + sombra + línea lima */
.testimonial-card {
  background: var(--bg-dark);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 38px 32px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
}

/* Línea lima inferior animada en hover */
.testimonial-card::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 3px;
  background: var(--accent-lime);
  transition: width 0.45s var(--ease);
}

.testimonial-card:hover {
  transform: translateY(-5px);
  border-color: rgba(224, 234, 140, 0.22);
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.45);
}

.testimonial-card:hover::after { width: 100%; }

/* Fila de estrellas lima */
.testimonial-stars {
  display: flex;
  gap: 4px;
  margin-bottom: 22px;
}

.testimonial-stars svg {
  width: 18px;
  height: 18px;
  fill: var(--accent-lime);
}

/* Cita del testimonio */
.testimonial-quote {
  color: var(--text-muted);
  font-size: 0.97rem;
  line-height: 1.7;
  font-style: italic;
  flex-grow: 1;
  margin-bottom: 28px;
}

/* Pie del testimonio: avatar + nombre + antigüedad */
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* Avatar circular con iniciales */
.author-avatar {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--accent-blue);
  color: var(--text-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 1px;
}

.author-info { display: flex; flex-direction: column; }
.author-info strong { font-size: 0.95rem; }
.author-info small  { color: var(--accent-lime); font-size: 0.72rem; letter-spacing: 1px; text-transform: uppercase; margin-top: 2px; }

/* ----- Sección CTA (llamado a la acción) ----- */
.section-cta {
  position: relative;
  overflow: hidden;
  background: var(--accent-lime);
  padding: clamp(70px, 12vw, 130px) var(--container-side);
  text-align: center;
}

/* Patrón de rejilla sutil sobre el fondo lima */
.cta-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(30, 30, 30, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 30, 30, 0.06) 1px, transparent 1px);
  background-size: 46px 46px;
  pointer-events: none;
}

.cta-content { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; }

/* Título grande del CTA — texto oscuro sobre lima */
.cta-title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 8vw, 6rem);
  line-height: 0.92;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--bg-dark);
  margin-bottom: 18px;
}

/* Subtítulo del CTA — opacidad subida a 0.9 para cumplir WCAG AA sobre el lima */
.cta-sub {
  color: rgba(30, 30, 30, 0.9);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 40px;
}

/* Fila de botones del CTA */
.cta-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Botón oscuro sólido del CTA */
.btn-cta-dark {
  display: inline-block;
  background: var(--bg-dark);
  color: var(--accent-lime);
  padding: 16px 40px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: 2px solid var(--bg-dark);
  transition: var(--transition);
}

.btn-cta-dark:hover {
  background: transparent;
  color: var(--bg-dark);
}

/* Botón con contorno oscuro del CTA */
.btn-cta-outline {
  display: inline-block;
  background: transparent;
  color: var(--bg-dark);
  padding: 16px 40px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: 2px solid rgba(30, 30, 30, 0.45);
  transition: var(--transition);
}

.btn-cta-outline:hover {
  border-color: var(--bg-dark);
  background: var(--bg-dark);
  color: var(--accent-lime);
}

/* ----- Estilos específicos de la página de PAQUETES (5 cards) ----- */

/* Etiqueta "Paquete" arriba del nombre */
.plan-tier {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent-lime);
  margin-bottom: 6px;
}

/* Descripción principal (4 clases / 8 clases / etc) */
.plan-classes {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 1px;
  color: var(--text-white);
  line-height: 1.2;
  margin: 0 0 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Texto de vigencia debajo del precio */
.plan-vigencia {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: -10px 0 28px;
}

/* Grid de 5 paquetes (variante --5) — desktop: 5 cols */
.plans-grid--5 {
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

/* En las 5-cards el padding interno se reduce para acomodar el ancho menor */
.plans-grid--5 .plan-card { padding: 38px 24px 30px; }
.plans-grid--5 .plan-name { font-size: 1.7rem; }
.plans-grid--5 .plan-amount { font-size: 2.9rem; }

/* ----- Responsive de las páginas con planes/paquetes ----- */
@media (max-width: 1200px) {
  /* 5 → 3 cols con las 2 últimas centradas (6-col + span 2) */
  .plans-grid--5 { grid-template-columns: repeat(6, 1fr); }
  .plans-grid--5 .plan-card { grid-column: span 2; }
  .plans-grid--5 .plan-card:nth-child(4) { grid-column: 2 / span 2; }
  .plans-grid--5 .plan-card:nth-child(5) { grid-column: 4 / span 2; }
}

@media (max-width: 1024px) {
  /* Page-hero: padding ajustado al header reducido en tablet (mantiene el alto 100svh) */
  .page-hero               { padding: 70px var(--container-side) 40px; }

  /* Planes (legado, 3-cards): a 1 columna, sin elevación del destacado */
  .plans-grid              { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .plan-card--featured     { transform: translateY(0); }
  .plan-card--featured:hover { transform: translateY(-6px); }
  .plan-tagline            { min-height: 0; }

  /* Paquetes 5-cards: 2 cols con la última centrada en su propia fila */
  .plans-grid--5           { grid-template-columns: repeat(4, 1fr); max-width: 740px; gap: 16px; }
  .plans-grid--5 .plan-card { grid-column: span 2; }
  .plans-grid--5 .plan-card:nth-child(4) { grid-column: auto; }
  .plans-grid--5 .plan-card:nth-child(5) { grid-column: 2 / span 2; }

  /* Testimonios: de 3 a 1 columna */
  .testimonials-grid       { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
}

@media (max-width: 700px) {
  /* En móvil pasa a 1 columna (cualquier variante de plans-grid) */
  .plans-grid--5             { grid-template-columns: 1fr; max-width: 460px; }
  .plans-grid--5 .plan-card,
  .plans-grid--5 .plan-card:nth-child(4),
  .plans-grid--5 .plan-card:nth-child(5) { grid-column: auto; }
}

@media (max-width: 768px) {
  /* Page-hero: parallax fuera (afecta rendimiento en móvil), conserva 100svh */
  .page-hero               { background-attachment: scroll; padding: 70px var(--container-side) 40px; }
}


/* ================================================
   18a. PÁGINA DE MULTIMEDIA (multimedia.html)
   Variante del page-hero + sección de galería de
   instalaciones + sección de videos próximamente.
   ================================================ */

/* Variante del page-hero de la página de multimedia: fondo mulimediaBg.png */
.page-hero--multimedia {
  background-image:
    linear-gradient(
      180deg,
      rgba(30, 30, 30, 0.78) 0%,
      rgba(30, 30, 30, 0.50) 45%,
      rgba(30, 30, 30, 0.90) 100%
    ),
    url('../img/multimediaBg.jpg');
  background-position: center 35%;
}

/* ----- Sección Nuestras Instalaciones (galería) ----- */
.section-gallery {
  padding: var(--section-pad) var(--container-side);
}

/* Grid de la galería — mismas dimensiones y distribución que las tarjetas
   de coaches en index.html: 4 columnas efectivas en desktop, gap 22px, ratio 3/4 retrato.
   Internamente usa 8 columnas + span 2 por item para poder CENTRAR la tarjeta
   huérfana (5ta) en la segunda fila sin alterar su ancho. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 22px;
}

.gallery-item { grid-column: span 2; }

/* Si el grid termina con una tarjeta huérfana en la segunda fila (5to hijo),
   la posicionamos en las columnas 4-5 = centro exacto del grid de 8 columnas. */
.gallery-item:last-child:nth-child(5) { grid-column: 4 / span 2; }

/* Tarjeta de la galería — mismo aspect-ratio que .coach-img-wrap */
.gallery-item {
  position: relative;
  overflow: hidden;
  background: var(--bg-mid);
  aspect-ratio: 3 / 4;
  cursor: zoom-in;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.5);
}

/* Imagen de la galería — escala suave en hover */
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(20%);
  transition: transform 0.7s var(--ease), filter 0.5s ease;
}

.gallery-item:hover img { transform: scale(1.05); filter: grayscale(0%); }

/* Placeholder cuando aún no hay foto — se reemplaza con <img> al subir la real */
.gallery-placeholder {
  width: 100%;
  height: 100%;
  background:
    linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: rgba(255, 255, 255, 0.4);
  border: 1px dashed rgba(224, 234, 140, 0.15);
}

.gallery-placeholder svg   { width: 42px; height: 42px; fill: rgba(224, 234, 140, 0.35); }
.gallery-placeholder span  { font-size: 0.78rem; letter-spacing: 2px; text-transform: uppercase; }

/* Caption sobre la imagen — aparece en hover */
.gallery-item figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 14px 18px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, transparent 100%);
  color: var(--text-white);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.gallery-item:hover figcaption { opacity: 1; transform: translateY(0); }

/* Borde lima decorativo abajo */
.gallery-item::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 3px;
  background: var(--accent-lime);
  transition: width 0.45s var(--ease);
  z-index: 1;
}

.gallery-item:hover::after { width: 100%; }

/* ----- Sección Videos ----- */
.section-videos {
  padding: var(--section-pad) var(--container-side);
  background: var(--bg-mid);
}

/* Grid de 2 columnas en desktop */
.videos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

/* Tarjeta de video */
.video-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}

/* Placeholder del video (cuando no hay aún archivo o iframe insertado) */
.video-placeholder {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(ellipse at center, rgba(224, 234, 140, 0.08) 0%, transparent 65%),
    linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition);
}

.video-placeholder:hover {
  border-color: rgba(224, 234, 140, 0.35);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
}

/* Botón de play centrado (decorativo hasta que se inserte el video real) */
.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%);
  fill: var(--accent-lime);
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
  transition: transform 0.35s var(--ease);
}

.video-placeholder:hover .video-play {
  transform: translate(-50%, -50%) scale(1.12);
}

/* Etiqueta "Próximamente" arriba a la izquierda */
.video-soon {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--accent-lime);
  color: var(--bg-dark);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
}

/* Si insertas <iframe> o <video>, ocupan todo el placeholder */
.video-placeholder iframe,
.video-placeholder video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Título del video */
.video-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 4px;
}

/* Subtítulo / metadata */
.video-meta {
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* Responsive de multimedia — mismos breakpoints que .coaches-grid */
@media (max-width: 1024px) {
  /* Galería: de 4 a 2 columnas (igual que coaches). Items vuelven a span 1. */
  .gallery-grid                            { grid-template-columns: repeat(2, 1fr); }
  .gallery-item                            { grid-column: span 1; }
  .gallery-item:last-child:nth-child(5)    { grid-column: auto; }
  /* Videos: stack en una columna */
  .videos-grid                             { grid-template-columns: 1fr; gap: 22px; }
}

@media (max-width: 768px) {
  /* Móvil mantiene 2 columnas al 50% — igual que coaches a 768px */
  .gallery-grid         { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

@media (max-width: 480px) {
  /* Móvil pequeño: 1 columna (igual que coaches en este breakpoint) */
  .gallery-grid         { grid-template-columns: 1fr; }
}


/* ================================================
   18b. LIGHTBOX / MODAL — Solicitud de membresía
   Se activa con la clase .active vía JS. Ocupa toda
   la pantalla con un overlay oscuro y el formulario
   centrado encima.
   ================================================ */

/* Overlay oscuro que cubre toda la pantalla */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;                   /* Por encima del header y de todo el contenido */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

/* El atributo [hidden] no debe mostrar el modal */
.modal-overlay[hidden] { display: none; }

/* Estado visible — añadida por JS al abrir */
.modal-overlay.active { opacity: 1; }

/* Caja del modal — contiene el formulario */
.modal-box {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;                 /* scroll interno si el contenido no cabe */
  background: var(--bg-mid);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 4px solid var(--accent-lime); /* acento lima superior */
  padding: 38px 38px 32px;
  color: var(--text-white);
  transform: translateY(20px) scale(0.98);
  transition: transform 0.35s var(--ease);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.modal-overlay.active .modal-box { transform: translateY(0) scale(1); }

/* Botón de cerrar (X) — esquina superior derecha del modal */
.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.modal-close svg { width: 18px; height: 18px; fill: var(--text-white); transition: fill 0.25s ease; }
.modal-close:hover { background: var(--accent-lime); border-color: var(--accent-lime); }
.modal-close:hover svg { fill: var(--bg-dark); }

/* Título del modal */
.modal-title {
  font-family: var(--font-display);
  font-size: 1.9rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* Descripción del modal */
.modal-desc {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
  margin-bottom: 26px;
}

/* Formulario */
.modal-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Cada campo (label + input) */
.form-field { display: flex; flex-direction: column; gap: 6px; }

.form-field label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--accent-lime);
}

/* Inputs del formulario */
.form-field input {
  background: var(--bg-dark);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-white);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 12px 14px;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.form-field input::placeholder { color: rgba(255, 255, 255, 0.3); }

.form-field input:focus {
  outline: none;
  border-color: var(--accent-lime);
  background: #181818;
}

/* Checklist de membresías */
.form-checklist {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 16px 18px 14px;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-checklist legend {
  padding: 0 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--accent-lime);
}

/* Cada opción de la checklist */
.check-item {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
  transition: var(--transition);
}

.check-item:hover     { background: rgba(255, 255, 255, 0.05); border-color: rgba(224, 234, 140, 0.2); }

/* Oculta el checkbox nativo pero lo deja accesible */
.check-item input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Cuadrado visual del check */
.check-box {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  position: relative;
}

/* Palomita interior — visible solo cuando el checkbox está marcado */
.check-box::after {
  content: '';
  width: 12px;
  height: 12px;
  background: var(--accent-lime);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.2s ease, transform 0.2s var(--ease);
}

/* Estado seleccionado: borde lima y palomita visible */
.check-item input:checked ~ .check-box {
  border-color: var(--accent-lime);
  background: rgba(224, 234, 140, 0.08);
}
.check-item input:checked ~ .check-box::after { opacity: 1; transform: scale(1); }

/* Estado seleccionado del contenedor (fondo + borde tenue lima) */
.check-item:has(input:checked) {
  background: rgba(224, 234, 140, 0.06);
  border-color: rgba(224, 234, 140, 0.35);
}

/* Foco accesible vía teclado */
.check-item input:focus-visible ~ .check-box {
  outline: 2px solid var(--accent-lime);
  outline-offset: 2px;
}

/* Etiqueta de cada plan dentro de la checklist */
.check-label { display: flex; flex-direction: column; line-height: 1.25; }
.check-label strong { font-size: 0.95rem; font-weight: 600; }
.check-label small  { color: var(--text-muted); font-size: 0.75rem; margin-top: 2px; }

/* Botón de envío del formulario */
.modal-submit {
  margin-top: 12px;
  width: 100%;
  border: 2px solid var(--accent-lime); /* iguala al borde de btn-primary */
}

/* Bloquea el scroll del body cuando el modal está abierto (vía JS añade .modal-open al body) */
body.modal-open { overflow: hidden; }

/* Responsive del modal */
@media (max-width: 480px) {
  .modal-box   { padding: 32px 22px 26px; border-top-width: 3px; }
  .modal-title { font-size: 1.55rem; }
  .modal-desc  { font-size: 0.88rem; }
}


/* ================================================
   18c. PÁGINAS DE AUTENTICACIÓN — login.html / registrar.html
   Layout split en desktop: aside con imagen + frase a la
   izquierda, formulario centrado a la derecha. En tablet/
   móvil se colapsa a una sola columna (sin aside).
   ================================================ */

/* Contenedor principal de la pantalla de auth */
.section-auth {
  display: grid;
  grid-template-columns: 1fr 1fr;     /* 50/50 en desktop */
  min-height: 100svh;
  background: var(--bg-dark);
}

/* ----- COLUMNA IZQUIERDA: imagen decorativa + frase ----- */
.auth-aside {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(30, 30, 30, 0.45) 0%, rgba(29, 73, 167, 0.55) 100%),
    url('../img/bgFitness.png');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  padding: 88px 60px 60px;             /* 88px top = altura del header fijo */
}

/* Variante de la página de registro — usa carrera.png en lugar de bgFitness.png */
.auth-aside--register {
  background:
    linear-gradient(135deg, rgba(30, 30, 30, 0.45) 0%, rgba(29, 73, 167, 0.55) 100%),
    url('../img/carrera.png');
  background-size: cover;
  background-position: center;
}

/* Overlay degradado adicional en la base para mejor legibilidad de la frase */
.auth-aside-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, transparent 55%);
  pointer-events: none;
}

/* Contenido del aside (marca + frase) sobre el overlay */
.auth-aside-content {
  position: relative;
  z-index: 1;
  color: var(--text-white);
  max-width: 480px;
}

.auth-aside-content .logo-text { display: inline-flex; margin-bottom: 24px; }
.auth-aside-content .logo-room    { font-size: 1.6rem; }
.auth-aside-content .logo-fitness { font-size: 0.82rem; }

.auth-quote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  letter-spacing: 1px;
  line-height: 1.18;
  text-transform: uppercase;
  color: var(--text-white);
  border-left: 3px solid var(--accent-lime);
  padding-left: 22px;
}

/* ----- COLUMNA DERECHA: tarjeta con formulario ----- */
.auth-card-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(88px + 40px) 32px 60px;  /* deja espacio para el header fijo */
}

.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--bg-mid);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 4px solid var(--accent-lime);
  padding: 44px 38px 36px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.auth-title {
  font-family: var(--font-display);
  font-size: 2.1rem;
  letter-spacing: 1.5px;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.auth-desc {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 28px;
}

/* Formulario (reusa .form-field del modal) */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Fila de 2 columnas (contraseña + confirmar en registro).
   IMPORTANTE: minmax(0, 1fr) permite que las celdas se encojan por debajo
   del min-width implícito del input (evita desbordamiento del botón ojo). */
.form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

/* Input con botón "ojo" para mostrar/ocultar contraseña */
.input-wrap { position: relative; display: flex; min-width: 0; }
.input-wrap input { flex: 1; min-width: 0; padding-right: 44px; }

.input-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.25s ease;
}

.input-toggle svg { width: 18px; height: 18px; fill: currentColor; }
.input-toggle:hover { color: var(--accent-lime); }

/* Estado "contraseña visible": ojo en lima */
.input-toggle.active { color: var(--accent-lime); }

/* Fila Recordarme + ¿Olvidé contraseña? */
.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 2px;
}

/* Variante de check-item compacta (para "Recordarme" y términos) */
.check-item--inline {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 0.85rem;
}

.check-item--inline .check-label strong { font-weight: 500; font-size: 0.85rem; }
.check-item--inline:hover { background: transparent; border-color: transparent; }

/* Términos: el texto envuelve, no se trunca */
.check-item--terms .check-label { font-size: 0.82rem; line-height: 1.4; color: var(--text-muted); }
.check-item--terms .check-label .auth-link { color: var(--accent-lime); }

/* Botón de envío del form de auth */
.auth-submit {
  width: 100%;
  border: 2px solid var(--accent-lime);
  margin-top: 6px;
}

/* Divisor "o" entre el formulario y el link secundario */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 28px 0 18px;
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

/* Link alternativo (menor jerarquía visual que el botón principal) */
.auth-alt {
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.auth-link {
  color: var(--accent-lime);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.25s ease, opacity 0.25s ease;
}

.auth-link:hover { opacity: 0.8; }

/* Variante "fuerte": link como CTA secundario subrayado */
.auth-link--strong {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 0.82rem;
  margin-left: 4px;
  border-bottom: 1px solid var(--accent-lime);
  padding-bottom: 2px;
}

/* ----- Responsive de auth ----- */
@media (max-width: 1024px) {
  /* Una sola columna: el aside se oculta para dar todo el espacio al formulario */
  .section-auth   { grid-template-columns: 1fr; }
  .auth-aside     { display: none; }
  .auth-card-wrap { padding: calc(70px + 30px) 22px 50px; }
}

@media (max-width: 768px) {
  /* En tablet y abajo, las contraseñas se apilan (cada una a ancho completo)
     para que el botón ojo quepa sin desbordar */
  .form-row       { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
  .auth-card      { padding: 36px 24px 30px; border-top-width: 3px; }
  .auth-title     { font-size: 1.7rem; }
  .auth-row       { gap: 10px; }
  .auth-row .auth-link { font-size: 0.78rem; }
}


/* ================================================
   18d. PÁGINA DE EVENTOS (eventos.html)
   Variante del page-hero + sección de próximos eventos
   con tarjetas de fecha + descripción.
   ================================================ */

/* Variante del page-hero — usa bgFitness.png con overlay propio */
.page-hero--eventos {
  background-image:
    linear-gradient(
      180deg,
      rgba(30, 30, 30, 0.82) 0%,
      rgba(30, 30, 30, 0.55) 45%,
      rgba(30, 30, 30, 0.92) 100%
    ),
    url('../img/bgFitness.png');
  background-position: center 30%;
}

/* ----- Sección Próximos Eventos ----- */
.section-eventos {
  padding: var(--section-pad) var(--container-side);
}

/* Grid de tarjetas de eventos — 3 columnas en desktop */
.eventos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Tarjeta de evento — bloque fecha + bloque info */
.event-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-mid);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-top: 3px solid var(--accent-lime);
  position: relative;
  overflow: hidden;
  transition: var(--transition);
}

.event-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5);
  border-color: rgba(224, 234, 140, 0.3);
}

/* Bloque grande de la fecha — banner superior con día + mes */
.event-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px 0 18px;
  background: rgba(224, 234, 140, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  line-height: 1;
}

.event-day {
  font-family: var(--font-display);
  font-size: 3.2rem;
  color: var(--accent-lime);
  letter-spacing: 1px;
}

.event-month {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Cuerpo de la tarjeta — info del evento */
.event-body {
  display: flex;
  flex-direction: column;
  padding: 26px 26px 28px;
  flex-grow: 1;
}

/* Etiqueta del tipo de evento — "COMPETENCIA", "CLÍNICA", "RETO" */
.event-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent-blue);
  border: 1px solid rgba(29, 73, 167, 0.5);
  background: rgba(29, 73, 167, 0.1);
  padding: 4px 10px;
  margin-bottom: 14px;
}

/* Título del evento */
.event-title {
  font-family: var(--font-display);
  font-size: 1.55rem;
  letter-spacing: 1px;
  line-height: 1.1;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* Línea de metadata (hora / duración) */
.event-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--accent-lime);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.event-meta svg { width: 14px; height: 14px; fill: var(--accent-lime); flex-shrink: 0; }

/* Descripción del evento */
.event-desc {
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.6;
  margin-bottom: 22px;
  flex-grow: 1;
}

/* Botón "Más info" — alineado al inicio */
.event-btn {
  align-self: flex-start;
  font-size: 0.74rem;
  padding: 10px 26px;
}

/* Tarjeta de evento clickeable */
.event-card { cursor: pointer; }
.event-card .event-btn { pointer-events: none; }  /* el click lo captura la tarjeta entera */

/* Bloque "próximamente" dentro del modal de detalle de evento */
.event-soon-box {
  text-align: center;
  padding: 40px 10px 20px;
  border: 1px dashed rgba(224, 234, 140, 0.28);
  background: rgba(224, 234, 140, 0.04);
  margin-top: 18px;
}

.event-soon-box svg {
  width: 52px;
  height: 52px;
  fill: var(--accent-lime);
  opacity: 0.7;
  margin-bottom: 16px;
}

.event-soon-box h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.event-soon-box p {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
  max-width: 380px;
  margin: 0 auto 14px;
}

.event-soon-hint { font-size: 0.85rem; }

/* Responsive de eventos */
@media (max-width: 1024px) {
  /* 3 → 2 columnas en tablet */
  .eventos-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  /* 1 columna en móvil */
  .eventos-grid { grid-template-columns: 1fr; }
}


/* ================================================
   18e. CALENDARIO DE RESERVAS (#reservas en index.html)
   Inspirado en el grid de Hyrox: 6 columnas (tiempo + 5 días).
   En móvil se muestra UN día a la vez con tabs.
   Cada slot lima es clickeable; si el usuario no está logueado
   se redirige a login.html (lógica en js/main.js).
   ================================================ */

/* Contenedor general del calendario */
.reservar-calendar {
  background: var(--bg-dark);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 32px clamp(20px, 3vw, 36px) 36px;
}

/* Banner: aviso de que solo miembros pueden reservar */
.cal-auth-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(224, 234, 140, 0.08);
  border: 1px solid rgba(224, 234, 140, 0.25);
  margin-bottom: 28px;
  color: var(--text-white);
  font-size: 0.88rem;
}

.cal-auth-banner svg { width: 20px; height: 20px; fill: var(--accent-lime); flex-shrink: 0; }

.cal-auth-banner a {
  color: var(--accent-lime);
  border-bottom: 1px solid var(--accent-lime);
  padding-bottom: 1px;
}

.cal-auth-banner a:hover { opacity: 0.8; }

/* Tabs de días (solo visibles en móvil ≤768px) */
.cal-tabs {
  display: none;
  gap: 6px;
  margin-bottom: 22px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}

.cal-tab {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 18px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-white);
  cursor: pointer;
  font-family: var(--font-body);
  transition: var(--transition);
}

.cal-tab strong {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 1px;
  line-height: 1;
}

.cal-tab small {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 2px;
}

.cal-tab.active {
  background: var(--accent-lime);
  border-color: var(--accent-lime);
  color: var(--bg-dark);
}

.cal-tab.active small { color: rgba(30, 30, 30, 0.75); }

/* Grid principal: tiempo + 5 días en desktop */
.cal-grid {
  display: grid;
  grid-template-columns: 70px repeat(5, 1fr);
  gap: 10px 12px;
  align-items: center;
}

/* Celda vacía en la esquina superior izquierda */
.cal-corner { /* solo ocupa espacio en el grid */ }

/* Header de día (Lun · Lower, Mar · Upper, etc.) */
.cal-day-header {
  text-align: center;
  padding: 4px 0 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cal-day-header strong {
  font-family: var(--font-display);
  font-size: 1.75rem;
  letter-spacing: 1px;
  line-height: 1;
  color: var(--text-white);
}

.cal-day-header small {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--accent-lime);
}

/* Etiqueta de tiempo (columna izquierda) — orientación vertical en desktop */
.cal-time {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  min-height: 80px;
}

/* Slot reservable — cuadrado con bordes redondeados (8px).
   Contiene nombre del coach arriba y contador "X/Y" abajo. */
.cal-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  max-width: 100px;
  aspect-ratio: 1;
  margin: 0 auto;
  padding: 6px 4px;
  border-radius: 8px;
  background: var(--accent-lime);
  color: var(--bg-dark);
  border: 2px solid var(--accent-lime);
  font-family: var(--font-body);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease,
              transform 0.25s var(--ease), box-shadow 0.25s ease;
}

/* Nombre del coach (línea principal) */
.cal-slot-coach {
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1.05;
}

/* Contador "ocupados/total" (línea secundaria, más chica) */
.cal-slot-spots {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  opacity: 0.7;
}

/* Hover: blanco brillante para destacar el horario que el usuario puede elegir */
.cal-slot:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--bg-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4),
              0 0 0 4px rgba(224, 234, 140, 0.25);
}

.cal-slot:hover .cal-slot-spots { opacity: 0.85; }

.cal-slot:focus-visible {
  outline: 3px solid var(--text-white);
  outline-offset: 2px;
}

/* Estado "lleno" — slot apagado, no clickeable */
.cal-slot.is-full {
  background: rgba(224, 234, 140, 0.18);
  border-color: rgba(224, 234, 140, 0.35);
  color: rgba(255, 255, 255, 0.55);
  cursor: not-allowed;
}

.cal-slot.is-full:hover {
  background: rgba(224, 234, 140, 0.18);
  border-color: rgba(224, 234, 140, 0.35);
  color: rgba(255, 255, 255, 0.55);
  transform: none;
  box-shadow: none;
}

.cal-slot.is-full .cal-slot-spots { color: #ff8a8a; opacity: 1; }

/* Variante Open Gym — fondo azul en lugar de lima */
.cal-slot--open-gym {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: #ffffff;
}

.cal-slot--open-gym:hover {
  background: #2559c7;
  border-color: #2559c7;
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4),
              0 0 0 4px rgba(29, 73, 167, 0.3);
}

.cal-slot--open-gym.is-full {
  background: rgba(29, 73, 167, 0.2);
  border-color: rgba(29, 73, 167, 0.4);
  color: rgba(255, 255, 255, 0.5);
  cursor: not-allowed;
}

.cal-slot--open-gym.is-full:hover {
  background: rgba(29, 73, 167, 0.2);
  border-color: rgba(29, 73, 167, 0.4);
  color: rgba(255, 255, 255, 0.5);
  transform: none;
  box-shadow: none;
}

/* Divisor de sección dentro del grid — span completo */
.cal-section-label {
  grid-column: 1 / -1;
  padding: 10px 0 4px;
  margin-top: 6px;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--accent-blue);
  border-top: 1px solid rgba(29, 73, 167, 0.25);
}

.cal-section-label--evening {
  color: var(--text-muted);
  border-top-color: rgba(255, 255, 255, 0.08);
}

/* Sección Sábado — separada del grid Lun–Vie */
.cal-sabado {
  margin-top: 32px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cal-sabado-header {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 20px;
}

.cal-sabado-header strong {
  font-family: var(--font-display);
  font-size: 1.75rem;
  letter-spacing: 2px;
  line-height: 1;
  color: var(--text-white);
}

.cal-sabado-header small {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--accent-lime);
}

/* Fila horizontal de slots para Sábado */
.cal-sabado-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 14px;
  align-items: flex-start;
}

.cal-sabado-slot-wrap {
  flex: 0 0 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* Separador visual entre clases y open gym de sábado */
.cal-sabado-slot-wrap--open-gym:first-of-type {
  position: relative;
}

.cal-sabado-slot-wrap--open-gym:first-of-type::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(29, 73, 167, 0.35);
}

.cal-sabado-slot-time {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Open Gym — pastilla larga que ocupa toda la fila (mantenido por compatibilidad) */
.cal-open-gym {
  grid-column: 2 / -1;            /* desde la columna 2 hasta la última */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  border: 2px solid var(--accent-lime);
  border-radius: 100px;
  color: var(--accent-lime);
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  background: rgba(224, 234, 140, 0.04);
}

/* Pequeña nota legal al pie del calendario */
.cal-footnote {
  margin-top: 24px;
  text-align: center;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.5px;
}

/* ----- Responsive del calendario ----- */

/* Tablet (769–1024px) — muestra 2 días: el activo + el siguiente
   (el JS añade las clases .cal-active y .cal-active-secondary). */
@media (min-width: 769px) and (max-width: 1024px) {
  .reservar-calendar         { padding: 28px 20px 32px; }

  /* Tabs visibles desde aquí (no solo en móvil) */
  .cal-tabs                  { display: flex; }

  /* Grid: tiempo + 2 días */
  .cal-grid                  { grid-template-columns: 70px 1fr 1fr; gap: 12px; }

  /* Time labels horizontales para más legibilidad */
  .cal-time {
    writing-mode: horizontal-tb;
    transform: none;
    padding: 14px 8px;
    justify-content: flex-end;
    min-height: auto;
    font-size: 0.7rem;
    letter-spacing: 1.5px;
  }

  /* Oculta los días que NO son el activo ni el secundario */
  .cal-grid [data-day]:not(.cal-active):not(.cal-active-secondary) { display: none; }

  /* Slots un poco más grandes ahora que hay solo 2 columnas de día */
  .cal-slot                  { max-width: 120px; }
  .cal-day-header strong     { font-size: 1.5rem; }
  .cal-open-gym              { font-size: 1rem; letter-spacing: 2px; }

  /* Sáb activo en tablet: oculta el grid principal y muestra sábado */
  .reservar-calendar[data-active-day="sab"] .cal-grid { display: none; }
}

/* Móvil (≤768px) — un día a la vez con tabs */
@media (max-width: 768px) {
  .reservar-calendar         { padding: 24px 18px 28px; }

  /* Tabs visibles */
  .cal-tabs                  { display: flex; }

  /* Grid se colapsa: solo 2 columnas (tiempo + 1 día) */
  .cal-grid                  { grid-template-columns: 60px 1fr; gap: 10px; }

  /* Time labels pasan a horizontal (más legibles) */
  .cal-time {
    writing-mode: horizontal-tb;
    transform: none;
    padding: 10px 6px;
    justify-content: flex-end;
    min-height: auto;
    font-size: 0.68rem;
    letter-spacing: 1px;
    white-space: normal;
    line-height: 1.3;
    text-align: right;
  }

  /* Day-header centrado; el slot grande para tocar fácil */
  .cal-day-header            { padding: 10px 0 14px; }
  .cal-day-header strong     { font-size: 1.6rem; }
  .cal-slot                  { max-width: 140px; }
  .cal-slot-coach            { font-size: 1rem; }
  .cal-slot-spots            { font-size: 0.75rem; }

  /* Open Gym sigue ocupando el único día visible */
  .cal-open-gym              { font-size: 0.95rem; letter-spacing: 2px; }

  /* Oculta los items que no son del día activo */
  .cal-grid [data-day]:not(.cal-active) { display: none; }

  /* Sábado: oculto por defecto, visible al seleccionar tab Sáb */
  .cal-sabado                { display: none; }
  .reservar-calendar[data-active-day="sab"] .cal-sabado { display: block; }
  .reservar-calendar[data-active-day="sab"] .cal-grid   { display: none; }

  /* Sábado: slots más compactos para caber en pantalla pequeña */
  .cal-sabado-slot-wrap      { flex: 0 0 130px; }
  .cal-sabado-slots          { gap: 14px 10px; }
}

@media (max-width: 380px) {
  .cal-grid                  { grid-template-columns: 54px 1fr; }
  .cal-slot                  { max-width: 130px; }
}

/* ================================================
   SÁBADO COMO COLUMNA — DESKTOP (≥ 1025px)
   REVERTIR: quitar clase "cal-desktop-sab-col" del
   div.reservar-calendar en index.html. Eso es todo.
   ================================================ */
@media (min-width: 1025px) {

  /* Layout flex: grid Lun–Vie + columna Sáb en fila */
  .cal-desktop-sab-col .cal-layout {
    display: flex;
    align-items: flex-start;
    gap: 0;
  }

  /* Grid principal: columnas más juntas, slots más grandes */
  .cal-desktop-sab-col .cal-grid {
    flex: 1;
    min-width: 0;
    gap: 10px 24px;
  }

  .cal-desktop-sab-col .cal-grid .cal-slot {
    max-width: 130px;
  }

  /* Columna sábado: separada del grid, fondo más oscuro, bordes redondeados */
  .cal-desktop-sab-col .cal-layout {
    gap: 22px;
  }

  .cal-desktop-sab-col .cal-sabado {
    flex: 0 0 196px;
    margin-top: 0;
    padding: 14px 14px 18px;
    border-top: none;
    border-left: none;
    background: #2E2E2E;   /* #3A3A3A oscurecido ≈ 10% */
    border-radius: 14px;
    align-self: stretch;
  }

  /* Header Sáb: SAB centrado con "Full Body" debajo en lima */
  .cal-desktop-sab-col .cal-sabado-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    min-height: 54px;
    padding: 4px 0 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 0;
    justify-content: flex-end;
  }

  /* Slots en columna vertical */
  .cal-desktop-sab-col .cal-sabado-slots {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 10px;
    padding-top: 10px;
  }

  .cal-desktop-sab-col .cal-sabado-slot-wrap {
    flex: 0 0 auto;
    width: 100%;
    flex-direction: row;
    gap: 8px;
    align-items: center;
  }

  .cal-desktop-sab-col .cal-sabado-slot-time {
    width: 54px;
    flex-shrink: 0;
    text-align: right;
    writing-mode: horizontal-tb;
    white-space: normal;
    line-height: 1.3;
  }

  .cal-desktop-sab-col .cal-sabado .cal-slot {
    flex: 0 0 96px;
    width: 96px;
    max-width: 96px;
    margin: 0;
  }

  /* Separador entre clases y open gym dentro de la columna Sáb */
  .cal-desktop-sab-col .cal-sabado-sep {
    height: 1px;
    background: rgba(29,73,167,0.35);
    margin: 4px 0;
  }

  /* Quitar el ::before lateral que ya no aplica en layout de columna */
  .cal-desktop-sab-col .cal-sabado-slot-wrap--open-gym:first-of-type::before {
    display: none;
  }
}
/* ================================================ */


/* ================================================
   19. DASHBOARDS — Usuario (dashboard.html) y Admin (admin.html)
   Shell de aplicación: top bar con marca + perfil,
   sidebar de navegación a la izquierda, área principal
   con tarjetas (widgets) a la derecha. Mantiene paleta
   y tipografías del sitio público para coherencia.
   ================================================ */

/* Body en páginas de dashboard: sin overflow horizontal raro */
body.page-dashboard { background: #161616; }

/* ----- TOP BAR del dashboard (reemplaza al header del sitio público) ----- */
.dash-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  height: 64px;
  background: rgba(16, 16, 16, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.dash-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  text-decoration: none;
  color: var(--text-white);
}

.dash-brand .logo-room    { font-size: 1.35rem; }
.dash-brand .logo-fitness { font-size: 0.72rem; }
.dash-brand .logo-sep     { margin: 0 8px; color: rgba(255,255,255,0.3); }

/* Etiqueta del rol (USUARIO / ADMIN) al lado de la marca */
.dash-role-tag {
  display: inline-block;
  margin-left: 14px;
  padding: 3px 9px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: var(--accent-lime);
  color: var(--bg-dark);
  border-radius: 100px;
  vertical-align: middle;
}

.dash-role-tag--admin { background: var(--accent-blue); color: var(--text-white); }

/* Acciones del top bar (usuario actual + cerrar sesión) */
.dash-actions { display: flex; align-items: center; gap: 14px; }

.dash-user {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-white);
  font-size: 0.85rem;
}

.dash-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-blue);
  color: var(--text-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 1px;
}

.dash-user-meta { display: flex; flex-direction: column; line-height: 1.2; }
.dash-user-meta strong { font-size: 0.85rem; font-weight: 600; }
.dash-user-meta small  { font-size: 0.68rem; color: rgba(255,255,255,0.5); letter-spacing: 1px; text-transform: uppercase; }

.dash-logout {
  background: none;
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--text-white);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 8px 16px;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
}

.dash-logout:hover { background: var(--accent-lime); color: var(--bg-dark); border-color: var(--accent-lime); }

/* ----- SHELL: sidebar + main ----- */
.dash-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: calc(100vh - 64px);
}

.dash-sidebar {
  background: #1a1a1a;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  padding: 30px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dash-sidebar h6 {
  padding: 0 24px;
  margin: 22px 0 10px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}

.dash-sidebar h6:first-child { margin-top: 0; }

.dash-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 24px;
  color: var(--text-muted);
  font-size: 0.88rem;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: var(--transition);
  cursor: pointer;
}

.dash-nav-item svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }

.dash-nav-item:hover { background: rgba(255,255,255,0.03); color: var(--text-white); }

.dash-nav-item.active {
  background: rgba(224, 234, 140, 0.06);
  color: var(--accent-lime);
  border-left-color: var(--accent-lime);
}

/* ----- ÁREA PRINCIPAL del dashboard ----- */
.dash-main {
  padding: 36px 36px 60px;
  background: #161616;
}

/* Encabezado de página del dashboard */
.dash-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 26px;
}

.dash-title {
  font-family: var(--font-display);
  font-size: 2rem;
  letter-spacing: 1.5px;
  line-height: 1;
  text-transform: uppercase;
}

.dash-subtitle {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin-top: 6px;
}

/* Grid de KPIs (fila de tarjetas con números grandes) */
.dash-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 28px;
}

.dash-kpi {
  background: #1f1f1f;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-left: 3px solid var(--accent-lime);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dash-kpi-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.dash-kpi-value {
  font-family: var(--font-display);
  font-size: 2.4rem;
  letter-spacing: 1px;
  color: var(--text-white);
  line-height: 1;
}

.dash-kpi-delta {
  font-size: 0.72rem;
  color: var(--accent-lime);
  letter-spacing: 1px;
}

.dash-kpi-delta.down { color: #ff7a7a; }

/* Variante azul (acento azul) para KPIs secundarios del admin */
.dash-kpi--blue { border-left-color: var(--accent-blue); }

/* Grid de tarjetas widget — 2 columnas (gran tarjeta + sidebar) */
.dash-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

.dash-grid--three { grid-template-columns: 1fr 1fr 1fr; }
.dash-grid--equal { grid-template-columns: 1fr 1fr; }

/* Tarjeta genérica del dashboard (widget) */
.dash-card {
  background: #1f1f1f;
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 22px 24px;
}

.dash-card h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dash-card h3 .dash-card-link {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent-lime);
  text-decoration: none;
}

.dash-card h3 .dash-card-link:hover { opacity: 0.8; }

/* Lista simple dentro de tarjetas (próximas clases, actividad reciente) */
.dash-list { display: flex; flex-direction: column; }

.dash-list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.dash-list-item:last-child { border-bottom: none; }

.dash-list-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  background: rgba(224, 234, 140, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dash-list-icon svg { width: 18px; height: 18px; fill: var(--accent-lime); }

.dash-list-content { flex-grow: 1; min-width: 0; }
.dash-list-content strong { display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: 2px; }
.dash-list-content small  { color: var(--text-muted); font-size: 0.78rem; }

.dash-list-meta {
  font-size: 0.72rem;
  color: var(--accent-lime);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  flex-shrink: 0;
  text-align: right;
}

/* Estado de la membresía (tarjeta destacada) */
.dash-membership {
  background: linear-gradient(135deg, #1f1f1f 0%, #2a2a2a 100%);
  border: 1px solid rgba(224, 234, 140, 0.25);
  padding: 26px 26px 24px;
}

.dash-membership-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
.dash-membership-name { font-family: var(--font-display); font-size: 2rem; letter-spacing: 1px; color: var(--accent-lime); }
.dash-membership-status {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  background: rgba(110, 220, 110, 0.15);
  color: #8fe78f;
}

.dash-membership-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.dash-membership-meta div span { display: block; font-size: 0.65rem; letter-spacing: 1.8px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.dash-membership-meta div strong { font-size: 1rem; color: var(--text-white); font-weight: 600; }

/* Tabla simple (admin) — miembros, reservas */
.dash-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.dash-table thead th {
  text-align: left;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.dash-table tbody td { padding: 12px; border-bottom: 1px solid rgba(255,255,255,0.04); color: var(--text-muted); }
.dash-table tbody tr:hover td { background: rgba(255,255,255,0.02); color: var(--text-white); }
.dash-table tbody td strong { color: var(--text-white); font-weight: 600; }

/* Badge / pill genérico (estado: activo, pendiente, etc.) */
.pill {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 100px;
}
.pill--green { background: rgba(143, 231, 143, 0.15); color: #8fe78f; }
.pill--lime  { background: rgba(224, 234, 140, 0.18); color: var(--accent-lime); }
.pill--blue  { background: rgba(29, 73, 167, 0.25); color: #8eaaff; }
.pill--amber { background: rgba(255, 195, 90, 0.18); color: #ffc35a; }

/* Placeholder de gráfica (sustituir con Chart.js/etc. cuando se conecte backend) */
.dash-chart {
  position: relative;
  height: 220px;
  background:
    linear-gradient(180deg, rgba(224, 234, 140, 0.08) 0%, transparent 80%),
    repeating-linear-gradient(0deg, transparent 0, transparent 39px, rgba(255,255,255,0.04) 40px),
    repeating-linear-gradient(90deg, transparent 0, transparent 49px, rgba(255,255,255,0.03) 50px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 16px;
}

.dash-chart::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(135deg,
      transparent 0%,
      transparent 30%,
      rgba(224, 234, 140, 0.45) 50%,
      rgba(224, 234, 140, 0.7) 80%);
  clip-path: polygon(0 80%, 14% 60%, 28% 70%, 42% 45%, 56% 55%, 70% 30%, 84% 40%, 100% 15%, 100% 100%, 0 100%);
}

.dash-chart-note { font-size: 0.72rem; color: var(--text-muted); letter-spacing: 1px; text-transform: uppercase; }

/* Botón "quick action" del admin */
.dash-quick {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: rgba(224, 234, 140, 0.05);
  border: 1px solid rgba(224, 234, 140, 0.2);
  color: var(--text-white);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition);
}

.dash-quick:hover { background: rgba(224, 234, 140, 0.12); border-color: var(--accent-lime); }
.dash-quick svg   { width: 18px; height: 18px; fill: var(--accent-lime); flex-shrink: 0; }

/* Responsive del dashboard */
@media (max-width: 1024px) {
  .dash-shell      { grid-template-columns: 1fr; }
  .dash-sidebar    {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    padding: 0 16px;
    gap: 4px;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .dash-sidebar h6 { display: none; }
  .dash-nav-item   { padding: 14px 16px; border-left: none; border-bottom: 3px solid transparent; white-space: nowrap; }
  .dash-nav-item.active { border-left-color: transparent; border-bottom-color: var(--accent-lime); }
  .dash-kpis       { grid-template-columns: repeat(2, 1fr); }
  .dash-grid       { grid-template-columns: 1fr; }
  .dash-grid--three{ grid-template-columns: 1fr 1fr; }
  .dash-grid--equal{ grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .dash-main       { padding: 24px 18px 50px; }
  .dash-kpis       { grid-template-columns: 1fr 1fr; gap: 12px; }
  .dash-kpi        { padding: 16px 16px; }
  .dash-kpi-value  { font-size: 2rem; }
  .dash-grid--three{ grid-template-columns: 1fr; }
  .dash-user-meta  { display: none; }
}


/* ================================================
   19. RESPONSIVE — MÓVIL PEQUEÑO (pantallas ≤ 480px)
   Ajustes finos para teléfonos de pantalla reducida.
   ================================================ */
@media (max-width: 480px) {
  /* Título del hero aún más pequeño */
  .hero-title            { font-size: 2.8rem; }
  /* Títulos de sección más pequeños */
  .section-title         { font-size: 2.2rem; }
  /* Números de estadística más pequeños */
  .stat-number           { font-size: 3rem; }
  /* Stats se mantienen en 2 columnas */
  .stats-bar             { grid-template-columns: 1fr 1fr; }

  .coaches-grid          { grid-template-columns: repeat(1, 1fr); }

}