/* =========================================================
   Forja Training Club — tema Energía
   Nombres de token del sistema de diseño de Clave Digital
   (SISTEMA DE DISEÑO/FOUNDATIONS). Aquí arriba solo cambian los
   valores; los componentes de abajo usan siempre var(--…).
   Contrastes comprobados el 25/09/2026 (ver REVISAR.md).
   ========================================================= */
:root {
  /* ---- Color: primitivos (no se usan directamente abajo) ---- */
  --marca-600: #D0311A;
  --marca-700: #BB2C16;
  --marca-400: #FF5A3D;
  --marca-200: #F08A74;
  --gris-1000: #0B0B0C;
  --gris-950:  #141416;
  --gris-900:  #1A1A1D;
  --gris-850:  #26262B;
  --gris-800:  #2E2E33;
  --gris-600:  #66666E;
  --gris-500:  #8C8C93;
  --gris-300:  #B4B4B8;
  --gris-50:   #F5F5F4;
  --blanco:    #FFFFFF;
  --verde-500: #3DDC84;

  /* ---- Color: tokens semánticos (01 - color.md) ---- */
  --bg-page:           var(--gris-1000);
  --bg-page-alt:       var(--gris-950);
  --bg-surface:        var(--gris-900);
  --bg-surface-raised: var(--gris-850);
  --bg-brand-bold:     var(--marca-600);   /* blanco encima: 5,08:1 */
  --bg-brand-hover:    var(--marca-700);
  --bg-danger-subtle:  rgba(255, 122, 107, 0.12);
  --bg-success-subtle: rgba(61, 220, 132, 0.12);
  --text-heading:      var(--gris-50);
  --text-neutral:      var(--gris-300);    /* 9,52:1 */
  --text-subtle:       var(--gris-500);    /* 5,89:1 */
  --text-brand:        var(--marca-400);   /* 6,35:1 */
  --text-inverse:      var(--blanco);
  --text-danger:       #FF7A6B;            /* 7,73:1 */
  --text-success:      var(--verde-500);
  --border-neutral:    var(--gris-800);
  --border-brand:      var(--marca-400);   /* anillo de foco */
  --border-input:      var(--gris-600);    /* 3,46:1 */

  /* Alpha: solo capas sobre imagen y estados (01 - color.md, «Alpha: dónde sí») */
  --bg-overlay:        rgba(11, 11, 12, 0.72);
  --bg-overlay-subtle: rgba(11, 11, 12, 0.35);
  --bg-glass:          rgba(26, 26, 29, 0.55);
  --border-glass:      rgba(245, 245, 244, 0.12);
  --bg-brand-glass:    rgba(208, 49, 26, 0.85);
  --bg-brand-glow:     rgba(208, 49, 26, 0.35);
  --bg-brand-overlay:  rgba(208, 49, 26, 0.92);
  --bg-brand-overlay-2:rgba(208, 49, 26, 0.72);
  --border-inverse-subtle: rgba(255, 255, 255, 0.3);
  --border-outline-deco:   rgba(245, 245, 244, 0.14);   /* solo el FORJA gigante decorativo */
  --success-halo:      rgba(61, 220, 132, 0.2);

  /* Categorías del horario: tonos del mismo acento + neutros (un solo acento) */
  --clase-fuerza:    var(--marca-600);
  --clase-hiit:      var(--marca-200);
  --clase-boxeo:     var(--gris-50);
  --clase-movilidad: var(--gris-500);

  /* ---- Tipografía (02 - tipografia.md) ----
     Cada token trae peso, tamaño e interlineado: se usa con font: var(--…).
     Excepción de tema Energía: display y headings más grandes y en 900. */
  --font-titular: 'Archivo', 'Arial Black', sans-serif;
  --font-cuerpo:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display:    900 clamp(2.75rem, 8vw, 6.5rem) / 0.95 var(--font-titular);
  --font-heading-l:  900 clamp(2.25rem, 5vw, 3.75rem) / 0.95 var(--font-titular);
  --font-heading-m:  800 1.5rem / 1.05 var(--font-titular);
  --font-heading-s:  800 1.0625rem / 1.25 var(--font-titular);
  --font-body-l:     400 1.125rem / 1.6 var(--font-cuerpo);
  --font-body-m:     400 1rem / 1.6 var(--font-cuerpo);
  --font-body-m-strong: 600 1.0625rem / 1.4 var(--font-cuerpo);
  --font-body-s:     400 0.875rem / 1.55 var(--font-cuerpo);
  --font-label:      600 0.8125rem / 1.3 var(--font-titular);
  --font-metric-l:   300 clamp(2.5rem, 5vw, 4rem) / 1 var(--font-titular);
  --font-metric-s:   300 2.25rem / 1 var(--font-titular);
  --tracking-titular: -0.02em;
  --tracking-label:   0.12em;
  --portada-gigante:  clamp(8rem, 26vw, 24rem);   /* decorativo, no es texto */

  /* ---- Escala de espacio, base 4 (03 - escalas y forma.md) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;

  /* ---- Forma: el tema Energía va casi recto ---- */
  --radio-sm: 4px;
  --radio-md: 6px;
  --radio-lg: 8px;
  --radio-full: 999px;
  --borde-fino: 1px;
  --borde-grueso: 2px;
  --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sombra-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --sombra-lg: 0 24px 64px rgba(0, 0, 0, 0.7);

  /* ---- Layout (04 - layout y breakpoints.md) ---- */
  --cont-max: 1140px;
  --cont-estrecho: 720px;
  --margen-lateral: 20px;
  --seccion: var(--sp-16);
  --cabecera-alto: 72px;
  --portada-max: 960px;
  --transicion: 0.25s ease;

  /* ---- Chat (COMPONENTES/chat-web.md) ---- */
  --chat-avatar: url('https://images.unsplash.com/photo-1583264277168-58ceba4b84e7?w=160&h=160&fit=crop&crop=faces&q=75');
}

@media (min-width: 768px)  { :root { --margen-lateral: 32px; } }
@media (min-width: 1024px) { :root { --margen-lateral: 48px; --seccion: var(--sp-24); } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--cabecera-alto); }
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-neutral);
  font: var(--font-body-m);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; color: var(--text-heading); }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Foco visible en todo lo que se pulsa (01 - color.md: nunca outline: none sin sustituto) */
:focus-visible { outline: var(--borde-grueso) solid var(--border-brand); outline-offset: 3px; }

.saltar {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 100;
  padding: var(--sp-3) var(--sp-4); background: var(--bg-brand-bold); color: var(--text-inverse);
  font: var(--font-label); border-radius: var(--radio-sm);
}
.saltar:focus { top: var(--sp-4); }

/* Los hijos de rejilla no empujan el ancho de la página en móvil */
.reserva > *, .por-que > *, .faq > *, .cabeza-seccion > *, .precios > *, .opiniones > *, .equipo > *, .formulario__fila > *, .horario > *, .formulario > * { min-width: 0; }
.formulario input, .formulario select, .formulario textarea { min-width: 0; max-width: 100%; }

.contenedor { width: 100%; max-width: calc(var(--cont-max) + 2 * var(--margen-lateral)); margin: 0 auto; padding: 0 var(--margen-lateral); }
.seccion { padding: var(--seccion) 0; }
.seccion--alterna { background: var(--bg-page-alt); }

.etiqueta {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font: var(--font-label); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-brand); margin-bottom: var(--sp-4);
}
.etiqueta::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--text-brand); }

/* Mayúsculas solo en titulares cortos (hasta 4 palabras: excepción del tema Energía) */
.titulo-seccion { font: var(--font-heading-l); letter-spacing: var(--tracking-titular); text-transform: uppercase; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
  min-height: 48px; padding: var(--sp-4) var(--sp-8);
  white-space: nowrap; flex: none;
  background: var(--bg-brand-bold); color: var(--text-inverse);
  border: var(--borde-fino) solid var(--bg-brand-bold); border-radius: var(--radio-sm);
  font: var(--font-label); letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; transition: background var(--transicion), border-color var(--transicion), transform var(--transicion);
}
.boton:hover { background: var(--bg-brand-hover); border-color: var(--bg-brand-hover); transform: translateY(-2px); }
.boton--pequeno { min-height: 44px; padding: var(--sp-3) var(--sp-6); }
.boton--contorno { background: transparent; color: var(--text-heading); border-color: var(--border-input); }
.boton--contorno:hover { background: var(--bg-surface-raised); border-color: var(--text-subtle); }
.boton--claro { background: var(--text-heading); color: var(--bg-page); border-color: var(--text-heading); }
.boton--claro:hover { background: var(--blanco); border-color: var(--blanco); }
.boton--ancho { width: 100%; white-space: normal; text-align: center; }

.enlace-flecha {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px;
  font: var(--font-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-heading);
  transition: gap var(--transicion), color var(--transicion);
}
.enlace-flecha:hover { gap: var(--sp-3); color: var(--text-brand); }

/* ---------- Cabecera ---------- */
.cabecera {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--cabecera-alto);
  transition: background var(--transicion), border-color var(--transicion);
  border-bottom: var(--borde-fino) solid transparent;
}
.cabecera.con-fondo { background: var(--bg-overlay); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-color: var(--border-neutral); }
.cabecera__fila { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); }
.logo { font: var(--font-heading-m); font-weight: 900; letter-spacing: 0.02em; color: var(--text-heading); }
.logo span { color: var(--text-brand); }

.menu { display: none; gap: var(--sp-8); }
.menu > a {
  font: var(--font-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-neutral);
  transition: color var(--transicion);
}
.menu > a:hover { color: var(--text-heading); }
.cabecera__cta { display: none; }

.hamburguesa {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer;
}
.hamburguesa span { width: 24px; height: 2px; background: var(--text-heading); transition: transform var(--transicion), opacity var(--transicion); }
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menú móvil: pantalla completa, enlaces grandes numerados y reserva abajo */
.menu__num, .menu__pie { display: none; }
@media (max-width: 1023.98px) {
  .menu.abierto {
    display: flex; flex-direction: column;
    position: fixed; top: var(--cabecera-alto); left: 0; right: 0; bottom: 0;
    padding: var(--sp-6) var(--margen-lateral) var(--sp-8);
    background: var(--bg-page); border-top: var(--borde-fino) solid var(--border-neutral);
    overflow-y: auto;
  }
  .menu.abierto > a {
    display: flex; align-items: baseline; gap: var(--sp-4);
    padding: var(--sp-4) 0; border-bottom: var(--borde-fino) solid var(--border-neutral);
    font: var(--font-heading-m); font-size: clamp(1.75rem, 8vw, 2.25rem);
    letter-spacing: var(--tracking-titular); text-transform: uppercase; color: var(--text-heading);
    opacity: 0; transform: translateY(12px);
    animation: menu-entra 0.4s ease forwards;
  }
  .menu.abierto > a::after { content: '→'; margin-left: auto; font: var(--font-body-l); color: var(--text-subtle); transition: transform var(--transicion), color var(--transicion); }
  .menu.abierto > a:hover::after, .menu.abierto > a:focus-visible::after { color: var(--text-brand); transform: translateX(4px); }
  .menu.abierto .menu__num { display: inline; font: var(--font-label); letter-spacing: 0.1em; color: var(--text-brand); }
  .menu.abierto > a:nth-child(2) { animation-delay: 0.04s; }
  .menu.abierto > a:nth-child(3) { animation-delay: 0.08s; }
  .menu.abierto > a:nth-child(4) { animation-delay: 0.12s; }
  .menu.abierto > a:nth-child(5) { animation-delay: 0.16s; }
  .menu.abierto .menu__pie {
    display: flex; flex-direction: column; gap: var(--sp-4);
    margin-top: auto; padding-top: var(--sp-8);
    opacity: 0; animation: menu-entra 0.4s ease 0.22s forwards;
  }
  .menu.abierto .menu__pie p { font: var(--font-body-s); color: var(--text-subtle); text-align: center; }
  .menu.abierto .menu__pie p a { font: var(--font-body-m-strong); color: var(--text-heading); }
}

@keyframes menu-entra { to { opacity: 1; transform: none; } }
html.menu-abierto { overflow: hidden; }
html.menu-abierto .cabecera { background: var(--bg-page); border-color: var(--border-neutral); }
html.menu-abierto .chat-window-wrapper { display: none; }   /* el botón del chat no tapa el menú */

@media (min-width: 1024px) {
  .menu, .menu.abierto { display: flex; flex-direction: row; position: static; padding: 0; background: none; border: 0; overflow: visible; }
  .menu__num, .menu__pie, .menu.abierto .menu__num, .menu.abierto .menu__pie { display: none; }
  .cabecera__cta { display: inline-flex; }
  .hamburguesa { display: none; }
}

/* ---------- Portada ---------- */
.portada {
  position: relative; min-height: min(100svh, var(--portada-max)); overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--cabecera-alto) + var(--sp-12)) 0 var(--sp-12);
}
.portada__fondo { position: absolute; inset: 0; }
.portada__fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 65% center; }
.portada__fondo::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 75% 30%, var(--bg-brand-glow), transparent 55%),
    linear-gradient(90deg, var(--bg-page) 0%, var(--bg-overlay) 45%, var(--bg-overlay-subtle) 100%),
    linear-gradient(0deg, var(--bg-page) 0%, transparent 40%);
}
.portada__gigante {
  position: absolute; top: calc(var(--cabecera-alto) - var(--sp-4)); right: -2vw;
  font-family: var(--font-titular); font-weight: 900; font-size: var(--portada-gigante);
  line-height: 0.8; letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1px var(--border-outline-deco);
  pointer-events: none; user-select: none;
}
.portada__contenido { position: relative; }
.portada__titulo { font: var(--font-display); letter-spacing: var(--tracking-titular); text-transform: uppercase; max-width: 12ch; }
.portada__sub { margin-top: var(--sp-6); max-width: 46ch; font: var(--font-body-l); color: var(--text-neutral); }
.portada__botones { margin-top: var(--sp-8); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6); }
.portada__confianza { margin-top: var(--sp-8); display: flex; align-items: center; gap: var(--sp-4); font: var(--font-body-s); }
.portada__confianza strong { color: var(--text-heading); }
.avatares { display: flex; }
.avatares img { width: 36px; height: 36px; border-radius: var(--radio-full); object-fit: cover; border: var(--borde-grueso) solid var(--bg-page); }
.avatares img + img { margin-left: -10px; }

.portada__cifras { position: relative; margin-top: var(--sp-12); display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.cifra-tarjeta {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-6); border-radius: var(--radio-md);
  background: var(--bg-glass); border: var(--borde-fino) solid var(--border-glass);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.cifra-tarjeta--acento { background: var(--bg-brand-glass); border-color: transparent; }
.cifra-tarjeta__num { font: var(--font-metric-l); color: var(--text-heading); }
.cifra-tarjeta__txt { font: var(--font-body-s); color: var(--text-heading); max-width: 22ch; }

@media (min-width: 1024px) {
  .portada__cifras { position: absolute; right: var(--margen-lateral); bottom: var(--sp-16); margin: 0; width: auto; max-width: none; padding: 0; grid-template-columns: repeat(2, 210px); }
  .portada { padding-bottom: var(--sp-16); }
  .portada__fondo { left: 32%; }
  .portada__fondo img { object-position: 60% 20%; }
  .portada__fondo::after {
    background:
      radial-gradient(ellipse at 60% 35%, var(--bg-brand-glow), transparent 60%),
      linear-gradient(90deg, var(--bg-page) 0%, var(--bg-overlay-subtle) 35%, transparent 70%),
      linear-gradient(0deg, var(--bg-page) 0%, transparent 35%);
  }
}

/* ---------- Banda de cifras ---------- */
.banda-cifras { border-top: var(--borde-fino) solid var(--border-neutral); border-bottom: var(--borde-fino) solid var(--border-neutral); }
.banda-cifras__fila { display: grid; grid-template-columns: 1fr 1fr; }
.banda-cifras__fila > div { padding: var(--sp-8) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); border-bottom: var(--borde-fino) solid var(--border-neutral); }
.banda-cifras__fila > div:nth-child(odd) { border-right: var(--borde-fino) solid var(--border-neutral); }
.banda-cifras__num { font: var(--font-metric-s); color: var(--text-heading); }
.banda-cifras__txt { font: var(--font-body-s); color: var(--text-subtle); }
@media (min-width: 768px) {
  .banda-cifras__fila { grid-template-columns: repeat(4, 1fr); }
  .banda-cifras__fila > div { border-bottom: 0; border-right: var(--borde-fino) solid var(--border-neutral); }
  .banda-cifras__fila > div:last-child { border-right: 0; }
}

/* ---------- Cabeza de sección ---------- */
.cabeza-seccion { display: grid; gap: var(--sp-6); margin-bottom: var(--sp-12); }
.cabeza-seccion__lado { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-6); max-width: 44ch; }
.cabeza-seccion--centro { text-align: center; justify-items: center; }
@media (min-width: 1024px) {
  .cabeza-seccion { grid-template-columns: 1fr auto; align-items: end; }
  .cabeza-seccion--centro { grid-template-columns: 1fr; }
}

/* ---------- Programas ---------- */
.programas { display: grid; border: var(--borde-fino) solid var(--border-neutral); border-radius: var(--radio-md); overflow: hidden; }
.programa {
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-8); background: var(--bg-page);
  border-bottom: var(--borde-fino) solid var(--border-neutral);
  transition: background var(--transicion);
}
.programa:last-child { border-bottom: 0; }
.programa:hover { background: var(--bg-surface); }
.programa__num { font: var(--font-label); color: var(--text-brand); letter-spacing: 0.1em; padding-bottom: var(--sp-4); border-bottom: var(--borde-fino) solid var(--border-brand); }
.programa h3 { font: var(--font-heading-m); text-transform: uppercase; }
.programa p { font: var(--font-body-s); flex: 1; }
.programa--destacado { background: var(--bg-brand-bold); position: relative; }
.programa__insignia {
  position: absolute; top: var(--sp-6); right: var(--sp-6);
  padding: var(--sp-1) var(--sp-3); background: var(--text-heading); color: var(--bg-page);
  border-radius: var(--radio-sm); font: var(--font-label); letter-spacing: 0.08em; text-transform: uppercase;
}
.programa--destacado:hover { background: var(--bg-brand-hover); }
.programa--destacado .programa__num { color: var(--text-inverse); border-color: var(--text-inverse); }
.programa--destacado p { color: var(--text-inverse); }
.programa--destacado .enlace-flecha:hover { color: var(--text-inverse); }
@media (min-width: 768px) {
  .programas { grid-template-columns: 1fr 1fr; }
  .programa { border-right: var(--borde-fino) solid var(--border-neutral); }
  .programa:nth-child(2n) { border-right: 0; }
  .programa:nth-child(n+3) { border-bottom: 0; }
}
@media (min-width: 1024px) {
  .programas { grid-template-columns: repeat(4, 1fr); }
  .programa { border-bottom: 0; border-right: var(--borde-fino) solid var(--border-neutral); min-height: 340px; }
  .programa:nth-child(2n) { border-right: var(--borde-fino) solid var(--border-neutral); }
  .programa:last-child { border-right: 0; }
}

/* ---------- Por qué ---------- */
.por-que { display: grid; gap: var(--sp-12); align-items: center; }
.por-que__foto { border-radius: var(--radio-md); overflow: hidden; aspect-ratio: 4 / 5; }
.por-que__foto img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.25) contrast(1.05); }
.ventajas { margin-top: var(--sp-8); display: grid; gap: var(--sp-6); }
.ventajas li { display: flex; gap: var(--sp-4); align-items: flex-start; padding-bottom: var(--sp-6); border-bottom: var(--borde-fino) solid var(--border-neutral); }
.ventajas li:last-child { border-bottom: 0; padding-bottom: 0; }
.ventajas__icono { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radio-sm); background: var(--bg-surface-raised); color: var(--text-brand); }
.ventajas h3 { font: var(--font-heading-s); text-transform: uppercase; margin-bottom: var(--sp-1); }
.ventajas p { font: var(--font-body-s); }
@media (min-width: 1024px) {
  .por-que { grid-template-columns: 5fr 6fr; gap: var(--sp-16); }
}

/* ---------- Horario ---------- */
.horario-dias { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-2); margin-bottom: var(--sp-6); }
.dia-boton {
  flex: none; min-width: 52px; min-height: 44px; padding: var(--sp-2) var(--sp-4);
  background: var(--bg-surface); color: var(--text-neutral);
  border: var(--borde-fino) solid var(--border-neutral); border-radius: var(--radio-sm);
  font: var(--font-label); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
}
.dia-boton.activo { background: var(--bg-brand-bold); border-color: var(--bg-brand-bold); color: var(--text-inverse); }

.horario { display: grid; gap: var(--sp-3); }
.horario__col { display: none; flex-direction: column; gap: var(--sp-2); }
.horario__col.activo { display: flex; }
.horario__col h3 { display: none; font: var(--font-heading-s); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.08em; padding-bottom: var(--sp-3); border-bottom: var(--borde-fino) solid var(--border-neutral); margin-bottom: var(--sp-2); }

.clase {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-surface); border-radius: var(--radio-sm);
  border-left: 3px solid var(--clase-color, var(--bg-brand-bold));
  font: var(--font-body-s);
}
.clase span { font-family: var(--font-titular); font-weight: 600; color: var(--text-subtle); }
.clase strong { color: var(--text-heading); font-weight: 600; }
.clase em { font-style: normal; color: var(--text-subtle); }
.clase--fuerza    { --clase-color: var(--clase-fuerza); }
.clase--hiit      { --clase-color: var(--clase-hiit); }
.clase--boxeo     { --clase-color: var(--clase-boxeo); }
.clase--movilidad { --clase-color: var(--clase-movilidad); }

.leyenda { margin-top: var(--sp-6); display: flex; flex-wrap: wrap; gap: var(--sp-6); font: var(--font-body-s); color: var(--text-subtle); }
.leyenda li { display: flex; align-items: center; gap: var(--sp-2); }
.punto { width: 10px; height: 10px; border-radius: 2px; }
.punto--fuerza    { background: var(--clase-fuerza); }
.punto--hiit      { background: var(--clase-hiit); }
.punto--boxeo     { background: var(--clase-boxeo); }
.punto--movilidad { background: var(--clase-movilidad); }

@media (min-width: 1024px) {
  .horario-dias { display: none; }
  .horario { grid-template-columns: repeat(6, 1fr); }
  .horario__col, .horario__col.activo { display: flex; }
  .horario__col h3 { display: block; }
  .clase { grid-template-columns: 1fr; gap: 0; padding: var(--sp-3); }
}

/* ---------- Precios ---------- */
.precios { display: grid; gap: var(--sp-6); align-items: stretch; }
.plan {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-8); background: var(--bg-page);
  border: var(--borde-fino) solid var(--border-neutral); border-radius: var(--radio-md);
}
.plan__nombre { font: var(--font-heading-m); font-weight: 900; text-transform: uppercase; }
.plan__desc { font: var(--font-body-s); }
.plan__precio { font: var(--font-body-s); color: var(--text-subtle); padding-bottom: var(--sp-6); border-bottom: var(--borde-fino) solid var(--border-neutral); }
.plan__precio span { font: var(--font-metric-l); color: var(--text-heading); margin-right: var(--sp-1); }
.plan__lista { display: grid; gap: var(--sp-3); flex: 1; margin-bottom: var(--sp-4); }
.plan__lista li { position: relative; padding-left: var(--sp-8); font: var(--font-body-s); }
.plan__lista li::before { content: '✓'; position: absolute; left: 0; color: var(--text-brand); font-weight: 600; }
.plan--destacado { background: var(--bg-brand-bold); border-color: var(--bg-brand-bold); }
.plan--destacado .plan__desc,
.plan--destacado .plan__lista li,
.plan--destacado .plan__precio { color: var(--text-inverse); }
.plan--destacado .plan__precio { border-color: var(--border-inverse-subtle); }
.plan--destacado .plan__lista li::before { color: var(--text-inverse); }
.plan__insignia {
  position: absolute; top: calc(-1 * var(--sp-3)); left: var(--sp-8);
  padding: var(--sp-1) var(--sp-3); background: var(--text-heading); color: var(--bg-page);
  border-radius: var(--radio-sm); font: var(--font-label); letter-spacing: 0.08em; text-transform: uppercase;
}
.precios__nota { margin-top: var(--sp-8); text-align: center; font: var(--font-body-s); color: var(--text-heading); }
@media (min-width: 1024px) {
  .precios { grid-template-columns: repeat(3, 1fr); }
  .plan--destacado { transform: translateY(calc(-1 * var(--sp-4))); }
}

/* ---------- Equipo ---------- */
.equipo { display: grid; gap: var(--sp-8); }
.entrenador__foto { aspect-ratio: 4 / 5; border-radius: var(--radio-md); overflow: hidden; margin-bottom: var(--sp-4); background: var(--bg-surface); }
.entrenador__foto img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter 0.5s ease, transform 0.5s ease; }
.entrenador:hover .entrenador__foto img { filter: grayscale(0); transform: scale(1.03); }
.entrenador h3 { font: var(--font-heading-m); text-transform: uppercase; }
.entrenador__rol { font: var(--font-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-brand); margin-top: var(--sp-1); }
@media (min-width: 768px) { .equipo { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Galería ---------- */
.galeria { display: grid; grid-template-columns: 1fr 1fr; }
.galeria img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: grayscale(0.4) brightness(0.85); transition: filter var(--transicion); }
.galeria img:hover { filter: none; }
@media (min-width: 768px) { .galeria { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Opiniones ---------- */
.opiniones { display: grid; gap: var(--sp-6); }
.opinion { margin: 0; display: flex; flex-direction: column; gap: var(--sp-6); padding: var(--sp-8); background: var(--bg-surface); border: var(--borde-fino) solid var(--border-neutral); border-radius: var(--radio-md); }
.estrellas { color: var(--text-brand); letter-spacing: 0.15em; font: var(--font-body-s); }
.opinion blockquote { margin: 0; flex: 1; color: var(--text-heading); font: var(--font-body-m); }
.opinion figcaption { display: flex; align-items: center; gap: var(--sp-3); }
.opinion figcaption img { width: 44px; height: 44px; border-radius: var(--radio-full); object-fit: cover; }
.opinion figcaption strong { display: block; color: var(--text-heading); font: var(--font-body-s); font-weight: 600; }
.opinion figcaption span { font: var(--font-body-s); color: var(--text-subtle); }
@media (min-width: 1024px) { .opiniones { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Preguntas frecuentes ---------- */
.faq { display: grid; gap: var(--sp-8); }
.faq__lista { display: grid; }
.faq__item { border-bottom: var(--borde-fino) solid var(--border-neutral); }
.faq__item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
  min-height: 44px; padding: var(--sp-6) 0; color: var(--text-heading); font: var(--font-body-m-strong);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: '+'; flex: none; font: var(--font-heading-m); color: var(--text-brand); transition: transform var(--transicion); }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { padding-bottom: var(--sp-6); max-width: 60ch; }
@media (min-width: 1024px) {
  .faq { grid-template-columns: minmax(0, 5fr) 7fr; gap: var(--sp-16); }
  .faq .titulo-seccion { font-size: clamp(2.25rem, 3.6vw, 3.25rem); }
}

/* ---------- Llamada final ---------- */
.llamada { position: relative; overflow: hidden; padding: var(--seccion) 0; }
.llamada__fondo { position: absolute; inset: 0; }
.llamada__fondo img { width: 100%; height: 100%; object-fit: cover; }
.llamada__fondo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg-brand-overlay), var(--bg-brand-overlay-2)); }
.llamada__contenido { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-8); }
.llamada h2 { font: var(--font-heading-l); letter-spacing: var(--tracking-titular); text-transform: uppercase; color: var(--text-inverse); }
.llamada p { margin-top: var(--sp-3); font: var(--font-body-l); color: var(--text-inverse); }
@media (min-width: 1024px) { .llamada__contenido { flex-direction: row; align-items: center; justify-content: space-between; } }

/* ---------- Reserva ---------- */
.reserva { display: grid; gap: var(--sp-12); }
.reserva__info > p { margin-top: var(--sp-6); max-width: 42ch; }
.contacto { margin-top: var(--sp-8); display: grid; gap: var(--sp-4); }
.contacto li { display: flex; align-items: center; gap: var(--sp-3); font: var(--font-body-s); color: var(--text-heading); }
.contacto svg { color: var(--text-brand); flex: none; }
.contacto a:hover { color: var(--text-brand); }

.formulario { display: grid; gap: var(--sp-4); padding: var(--sp-6); background: var(--bg-surface); border: var(--borde-fino) solid var(--border-neutral); border-radius: var(--radio-md); }
.formulario__fila { display: grid; gap: var(--sp-4); }
.formulario label { display: grid; gap: var(--sp-2); font: var(--font-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); }
.formulario input:not([type="checkbox"]), .formulario select, .formulario textarea {
  width: 100%; min-height: 48px; padding: var(--sp-3) var(--sp-4);
  background: var(--bg-page); color: var(--text-heading);
  border: var(--borde-fino) solid var(--border-input); border-radius: var(--radio-sm);
  font: var(--font-body-m); text-transform: none; letter-spacing: 0;
  transition: border-color var(--transicion);
}
.formulario input:focus-visible, .formulario select:focus-visible, .formulario textarea:focus-visible { outline: var(--borde-grueso) solid var(--border-brand); outline-offset: 0; border-color: var(--border-brand); }
.formulario .invalido { border-color: var(--text-danger); }
.formulario textarea { resize: vertical; }
.formulario input[type="date"] { color-scheme: dark; }
.casilla { display: flex !important; align-items: flex-start; gap: var(--sp-3) !important; text-transform: none !important; letter-spacing: 0 !important; font: var(--font-body-s) !important; color: var(--text-neutral) !important; }
.casilla input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--bg-brand-bold); }
.casilla.invalido span { color: var(--text-danger); }
.casilla a { color: var(--text-heading); text-decoration: underline; }
.formulario__error { font: var(--font-body-s); color: var(--text-danger); }
.formulario__legal { font: var(--font-body-s); color: var(--text-subtle); }
.formulario__legal strong { color: var(--text-neutral); font-weight: 600; }
.formulario__legal a { color: var(--text-neutral); text-decoration: underline; }
.formulario__ok { padding: var(--sp-6); border-radius: var(--radio-sm); background: var(--bg-success-subtle); border: var(--borde-fino) solid var(--text-success); }
.formulario__ok strong { display: block; color: var(--text-heading); font: var(--font-heading-s); text-transform: uppercase; margin-bottom: var(--sp-1); }
@media (min-width: 768px) { .formulario__fila { grid-template-columns: 1fr 1fr; } .formulario { padding: var(--sp-8); } }
@media (min-width: 1024px) { .reserva { grid-template-columns: 5fr 7fr; gap: var(--sp-16); } }

/* ---------- Pie ---------- */
.pie { padding: var(--sp-16) 0 var(--sp-24); border-top: var(--borde-fino) solid var(--border-neutral); }   /* abajo, sitio para el botón del chat */
.pie__fila { display: grid; gap: var(--sp-8); }
.pie__fila > div { display: flex; flex-direction: column; gap: var(--sp-3); font: var(--font-body-s); }
.pie__fila h3 { font: var(--font-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-subtle); }
.pie__fila a:hover { color: var(--text-heading); }
.pie__marca p { max-width: 32ch; }
.redes { display: flex; gap: var(--sp-3); }
.redes a { width: 44px; height: 44px; display: grid; place-items: center; border: var(--borde-fino) solid var(--border-neutral); border-radius: var(--radio-sm); transition: border-color var(--transicion), color var(--transicion); }
.redes a:hover { border-color: var(--border-brand); color: var(--text-brand); }
.redes svg { width: 18px; height: 18px; }
.pie__legal { margin-top: var(--sp-12); padding-top: var(--sp-6); border-top: var(--borde-fino) solid var(--border-neutral); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3); font: var(--font-body-s); color: var(--text-subtle); }
.pie__legal div { display: flex; gap: var(--sp-6); }
.pie__legal a:hover { color: var(--text-heading); }
@media (min-width: 768px) { .pie__fila { grid-template-columns: 2fr 1fr 1fr; } }

/* ---------- Páginas legales ---------- */
.pagina-legal .cabecera { position: sticky; }
.legal { padding: var(--sp-12) 0 var(--sp-16); }
.legal__contenedor { max-width: calc(var(--cont-estrecho) + 2 * var(--margen-lateral)); margin: 0 auto; padding: 0 var(--margen-lateral); }
.legal__titulo { font: var(--font-heading-l); letter-spacing: var(--tracking-titular); text-transform: uppercase; }
.legal__nav { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-6) 0 var(--sp-12); }
.legal__nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-4);
  border: var(--borde-fino) solid var(--border-neutral); border-radius: var(--radio-sm);
  font: var(--font-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-neutral);
}
.legal__nav a:hover { color: var(--text-heading); border-color: var(--border-input); }
.legal__nav a[aria-current="page"] { background: var(--bg-surface-raised); color: var(--text-heading); border-color: var(--border-input); }
.legal__texto { font: var(--font-body-m); color: var(--text-neutral); }
.legal__texto > * + * { margin-top: var(--sp-4); }
.legal__texto h2 { margin-top: var(--sp-12); font: var(--font-heading-s); font-size: 1.25rem; text-transform: uppercase; color: var(--text-heading); }
.legal__texto p:first-child em { color: var(--text-subtle); font-style: normal; font: var(--font-body-s); }
.legal__texto strong { color: var(--text-heading); }
.legal__texto a { color: var(--text-brand); text-decoration: underline; text-underline-offset: 3px; }
.legal__texto ul { padding-left: var(--sp-6); list-style: disc; }
.legal__texto li + li { margin-top: var(--sp-2); }
.legal__tabla { overflow-x: auto; border: var(--borde-fino) solid var(--border-neutral); border-radius: var(--radio-md); }
.legal__tabla table { width: 100%; border-collapse: collapse; font: var(--font-body-s); }
.legal__tabla th, .legal__tabla td { padding: var(--sp-3) var(--sp-4); text-align: left; vertical-align: top; border-bottom: var(--borde-fino) solid var(--border-neutral); }
.legal__tabla th { background: var(--bg-surface); color: var(--text-heading); font-weight: 600; }
.legal__tabla tr:last-child td { border-bottom: 0; }
.pie--legal { padding: 0 0 var(--sp-12); border-top: 0; }

/* ---------- Aparición suave ---------- */
.revelar { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.revelar.visible { opacity: 1; transform: none; }
.sin-js .revelar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .revelar { opacity: 1; transform: none; }
  .menu.abierto > a, .menu.abierto .menu__pie { opacity: 1; transform: none; }
}

/* ---------- Chat de n8n (COMPONENTES/chat-web.md) ----------
   Van en body y no en :root: así ganan a los del widget aunque su hoja de
   estilos cargue después de la nuestra. */
body {
  --chat--color--primary: var(--bg-brand-bold);
  --chat--color--primary-shade-50: var(--bg-brand-hover);
  --chat--color--primary--shade-100: var(--bg-brand-hover);
  --chat--color--secondary: var(--bg-brand-bold);
  --chat--color-secondary-shade-50: var(--bg-brand-hover);
  --chat--color-white: var(--text-heading);
  --chat--color-light: var(--bg-surface);
  --chat--color-dark: var(--text-heading);
  --chat--color-medium: var(--border-neutral);
  --chat--font-family: var(--font-cuerpo);
  --chat--border-radius: var(--radio-md);
  --chat--window--width: 380px;
  --chat--window--height: 560px;
  --chat--window--border: var(--borde-fino) solid var(--border-glass);
  --chat--window--border-radius: var(--radio-md);
  --chat--header--background: var(--bg-surface-raised);
  --chat--header--color: var(--text-heading);
  --chat--header-height: auto;
  --chat--body--background: var(--bg-surface);
  --chat--footer--background: var(--bg-surface);
  --chat--footer--border-top: var(--borde-fino) solid var(--border-glass);
  --chat--message--bot--background: var(--bg-surface-raised);
  --chat--message--bot--color: var(--text-heading);
  --chat--message--user--background: var(--bg-brand-bold);
  --chat--message--user--color: var(--text-inverse);
  --chat--message--border-radius: var(--radio-md);
  --chat--input--background: var(--bg-surface-raised);
  --chat--input--text-color: var(--text-heading);
  --chat--input--border: var(--borde-fino) solid var(--border-input);
  --chat--input--container--background: var(--bg-surface-raised);
  --chat--input--container--border: var(--borde-fino) solid var(--border-neutral);
  --chat--input--send--button--color: var(--text-brand);
  --chat--input--send--button--background: transparent;
  --chat--input--send--button--background-hover: var(--bg-surface);
  --chat--input--send--button--color-hover: var(--text-heading);
  --chat--toggle--background: var(--bg-brand-bold);
  --chat--toggle--hover--background: var(--bg-brand-hover);
  --chat--toggle--active--background: var(--bg-brand-hover);
  --chat--toggle--color: var(--text-inverse);
  --chat--toggle--size: 60px;
}

/* Lo que el widget no deja cambiar con variables */
.chat-window { box-shadow: var(--sombra-lg); }
.n8n-chat .chat-layout .chat-header {
  display: grid; grid-template-columns: auto 1fr; column-gap: var(--sp-3); align-items: center;
  padding: var(--sp-4) var(--sp-6);
  border-top: 3px solid var(--bg-brand-bold);
  border-bottom: var(--borde-fino) solid var(--border-glass);
}
.n8n-chat .chat-layout .chat-header::before {
  content: ''; grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: var(--radio-full);
  background: var(--chat-avatar) center / cover;
  box-shadow: 0 0 0 2px var(--bg-surface-raised), 0 0 0 3px var(--border-glass);
}
.n8n-chat .chat-layout .chat-header .chat-heading { grid-column: 2; }
.n8n-chat .chat-layout .chat-header h1 { font: var(--font-heading-s); letter-spacing: 0.02em; }
.n8n-chat .chat-layout .chat-header p {
  grid-column: 2; display: flex; align-items: center; gap: var(--sp-2);
  margin: 0; font: var(--font-body-s); color: var(--text-neutral);
}
.n8n-chat .chat-layout .chat-header p::before {
  content: ''; flex: none; width: 8px; height: 8px; border-radius: var(--radio-full);
  background: var(--text-success); box-shadow: 0 0 0 3px var(--success-halo);
}
.n8n-chat .chat-footer .chat-aviso { margin: var(--sp-2) 0 0; font: var(--font-body-s); color: var(--text-subtle); text-align: center; }
.n8n-chat .chat-footer .chat-aviso a { color: var(--text-neutral); text-decoration: underline; }
.chat-window * { scrollbar-width: thin; scrollbar-color: var(--bg-surface-raised) transparent; }

/* ---------- Demo (01/10/2026): franja fija, avisos de ejemplo e iniciales ----------
   Contraste: --gris-1000 #0B0B0C sobre --gris-50 #F5F5F4 18,03:1 (franja clara sobre web oscura,
   para que se vea como aviso y no como parte de la marca) */
:root { --franja-demo: 36px; }
.franja-demo {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70; height: var(--franja-demo);
  display: flex; align-items: center; justify-content: center; padding: 0 var(--margen-lateral);
  background: var(--gris-50); color: var(--gris-1000); font: var(--font-body-s); font-weight: 600; text-align: center;
}
body { padding-top: var(--franja-demo); }
.cabecera { top: var(--franja-demo); }
html { scroll-padding-top: calc(var(--franja-demo) + var(--cabecera-alto)); }
@media (max-width: 1023.98px) { .menu.abierto { top: calc(var(--franja-demo) + var(--cabecera-alto)); } }
.pagina-legal .cabecera { top: var(--franja-demo); }
.aviso-demo {
  display: inline-block; margin-top: var(--sp-4); padding: var(--sp-2) var(--sp-4);
  border: var(--borde-fino) solid var(--border-neutral); border-radius: var(--radio-sm);
  background: var(--bg-surface-raised); color: var(--text-neutral); font: var(--font-body-s);
}
.opinion__inicial {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border-radius: var(--radio-full);
  background: var(--bg-surface-raised); color: var(--text-brand); font: var(--font-body-m); font-weight: 600;
}