/* ═══════════════════════════════════════════════════════════════════════
   Prime Gym — web pública (vende membresías). Sitio estático, sin build.
   El acento SIEMPRE sale de --marca (la fija js/main.js desde la API o los
   valores por defecto). Nunca un hex fijo fuera de este archivo.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --marca: #f5a50a;      /* naranja Prime Gym — CONTRACT_DEFAULTS.marca.primario */
  --marca-rgb: 245, 165, 10;
  --fondo: #0a0a0a;
  --panel: #141414;
  --panel-alt: #191919;
  --borde: #262626;
  --texto: #f4f4f5;
  --texto-tenue: #b7b7c0;
  --texto-mudo: #8a8a94;
  --radio: 16px;
  --max: 1120px;

  /* Color real de Gimnasio Dorian (marca.primario de la demo multi-marca,
     GET /api/public/gimnasio?marca=gimnasio-dorian) — solo para el botón de
     marca de la sección «La app», que a propósito muestra DOS negocios
     reales lado a lado. No es el acento del sitio: eso sigue siendo
     --marca en todos lados. */
  --app-marca-dorian: #e85f1b;

  /* curvas y duraciones — ver skill `animate`: ease-out fuerte para entradas,
     ease-in-out para movimiento en pantalla, todo bajo 300ms salvo el reveal
     de scroll (que es marketing/explicativo, puede ser más largo). */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-press: 140ms;
  --dur-hover: 220ms;
  --dur-reveal: 560ms;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ── foco de teclado, siempre visible ────────────────────────────────── */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--marca); outline-offset: 3px; border-radius: 6px;
}

/* ── respuesta táctil inmediata: sin delay de 300ms, sin flash gris ───── */
a, button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ── revelado al entrar en cuadro ──────────────────────────────────────
   Estado por defecto SIN clases = visible (si main.js no corre, no pasa
   nada raro). Solo cuando JS confirma que puede animar agrega `.reveal-armado`
   (oculto) y luego, al entrar en viewport, `.reveal-in` (visible). El desfase
   entre hermanos lo pone JS vía `transitionDelay` dentro de [data-reveal-grupo]. */
.reveal.reveal-armado {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}
.reveal.reveal-armado.reveal-in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal.reveal-armado { opacity: 1; transform: none; transition: none; }
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; }
.envoltura { max-width: var(--max); margin: 0 auto; padding-inline: 20px; }

h1, h2, h3 { font-family: Anton, 'Roboto Condensed', 'Arial Narrow', system-ui, sans-serif; font-weight: 400; margin: 0; letter-spacing: -0.01em; }

/* ── barra de navegación ─────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(10, 10, 10, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde);
}
.nav-fila {
  max-width: var(--max); margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; gap: 16px;
}
.nav-marca { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; text-decoration: none; margin-right: auto; min-width: 0; }
/* Logo de la barra. `contain` y no `cover`: `cover` RECORTA, y con un logo que
   no sea exactamente cuadrado le comía los bordes. Sin `border-radius`: el
   símbolo de Prime Gym ya es redondo, y a un logo cliente cuadrado el círculo
   le cortaba las esquinas. 34px porque a 30 no se leía. */
.nav-marca img { height: 34px; width: 34px; object-fit: contain; flex: none; }
.nav-marca span { white-space: nowrap; overflow: hidden; text-overflow: clip; }
.nav-links { display: none; gap: 22px; font-size: 14px; font-weight: 600; }
.nav-links a { text-decoration: none; color: var(--texto-tenue); }
.nav-links a:hover { color: var(--texto); }
@media (min-width: 860px) { .nav-links { display: flex; } }
.nav-cta {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--marca); color: #0a0a0a; font-weight: 800; font-size: 13px;
  padding: 10px 16px; border-radius: 999px; text-decoration: none; white-space: nowrap;
  flex: none; transition: transform var(--dur-press) var(--ease-out);
}
.nav-cta:active { transform: scale(0.96); }
.nav-cta svg { width: 16px; height: 16px; flex: none; }

/* ── menú móvil (<860px): <details>/<summary> nativo, sin depender de JS ── */
.nav-menu-movil { position: relative; flex: none; }
@media (min-width: 860px) { .nav-menu-movil { display: none; } }
.nav-burger {
  list-style: none; display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px; cursor: pointer; color: var(--texto);
  background: var(--panel); border: 1px solid var(--borde);
  transition: background-color var(--dur-hover) ease, border-color var(--dur-hover) ease;
}
.nav-burger::-webkit-details-marker { display: none; }
.nav-burger svg { width: 20px; height: 20px; }
.nav-burger .icono-cerrar { display: none; }
.nav-menu-movil[open] .nav-burger .icono-burger { display: none; }
.nav-menu-movil[open] .nav-burger .icono-cerrar { display: block; }
.nav-menu-movil[open] .nav-burger { border-color: rgba(var(--marca-rgb), 0.5); }
.nav-menu-movil-lista {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 45;
  display: flex; flex-direction: column; min-width: 200px; padding: 10px;
  background: var(--panel); border: 1px solid var(--borde); border-radius: 14px;
  box-shadow: 0 20px 40px -16px rgba(0,0,0,0.6);
}
.nav-menu-movil-lista a {
  padding: 12px 14px; border-radius: 9px; text-decoration: none; font-size: 15px;
  font-weight: 600; color: var(--texto-tenue); transition: background-color var(--dur-hover) ease, color var(--dur-hover) ease;
}
.nav-menu-movil-lista a:hover, .nav-menu-movil-lista a:focus-visible { background: rgba(var(--marca-rgb), 0.12); color: var(--texto); }
/* entrada sutil al abrir — solo transform/opacity, y solo si el navegador
   soporta animar el paso de `[hidden]`/`details` (`@starting-style`); si no,
   se abre igual, instantáneo. Nada de esto se ve si prefers-reduced-motion. */
@media not (prefers-reduced-motion: reduce) {
  .nav-menu-movil[open] .nav-menu-movil-lista {
    transition: opacity var(--dur-hover) var(--ease-out), transform var(--dur-hover) var(--ease-out);
  }
  @starting-style {
    .nav-menu-movil[open] .nav-menu-movil-lista { opacity: 0; transform: translateY(-8px) scale(0.98); }
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Portada «titán» — portada aprobada, portada desde PortadaTitan.jsx.
   El nombre a pantalla completa, video adentro de las letras (multiply).
   ══════════════════════════════════════════════════════════════════════ */

.titan-raiz { position: relative; height: 260svh; background: #000; }
.titan-escenario { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; background: #000; }
.titan-medio {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center;
  filter: contrast(1.14) saturate(1.08) brightness(1.16);
}
.titan-velo { position: absolute; inset: 0; background: #000; transition: opacity 120ms linear; }
.titan-realce { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.13); transition: opacity 120ms linear; }
.titan-filo {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
  pointer-events: none; transform-origin: center center; will-change: transform; transition: opacity 120ms linear;
}
.titan-filo .titan-palabra { color: transparent; -webkit-text-stroke: 1.5px var(--marca); text-stroke: 1.5px var(--marca); }
.titan-mascara {
  position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center;
  background: #000; mix-blend-mode: multiply; will-change: transform; transform-origin: center center;
}
.titan-palabra {
  display: block; font-family: Anton, 'Roboto Condensed', 'Arial Narrow', system-ui, sans-serif;
  font-weight: 400; font-size: 23vw; line-height: 0.8; letter-spacing: -0.03em; color: #fff; margin: 0;
  white-space: nowrap; user-select: none;
}
/* Cortina de arranque: hasta que el video (o su poster) tiene un cuadro, la
   palabra se veía en gris plano por un segundo (blanco × negro + realce). Negro
   hasta que hay imagen, y un fundido corto. Ver iniciarCortinaTitan(). */
.titan-cortina { position: absolute; inset: 0; z-index: 4; background: #000; pointer-events: none; transition: opacity 420ms ease; }
.titan-raiz.titan-listo .titan-cortina { opacity: 0; }
.titan-sombra-pie {
  position: absolute; left: 0; right: 0; bottom: 0; height: 62%; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, #000 6%, rgba(0,0,0,0.78) 34%, rgba(0,0,0,0) 100%);
}
@supports not (mix-blend-mode: multiply) {
  .titan-mascara { background: transparent; mix-blend-mode: normal; }
  .titan-velo { opacity: 0.55 !important; }
}
.titan-encima { position: absolute; top: calc(22px + env(safe-area-inset-top, 0px)); left: 0; right: 0; z-index: 3; text-align: center; }
.titan-cejilla { font-size: 11px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--marca); margin: 0; }
.titan-pie {
  position: absolute; left: 0; right: 0; bottom: calc(26px + env(safe-area-inset-bottom, 0px)); z-index: 3;
  padding-inline: 16px; max-width: 1000px; margin: 0 auto; transition: opacity 160ms linear;
}
.titan-lema {
  font-family: Anton, 'Roboto Condensed', 'Arial Narrow', system-ui, sans-serif; font-weight: 400;
  font-size: clamp(1.4rem, 5.2vw, 2.6rem); line-height: 1.02; letter-spacing: -0.01em; text-transform: uppercase;
  color: #fff; margin: 0 0 16px; text-wrap: balance;
}
.titan-cifras { display: flex; flex-wrap: wrap; gap: 24px; list-style: none; padding: 0; margin: 0 0 18px; }
.titan-cifras li { display: flex; flex-direction: column; }
.titan-cifras strong { font-family: Anton, 'Roboto Condensed', system-ui, sans-serif; font-weight: 400; font-size: clamp(1.6rem, 5.5vw, 2.4rem); line-height: 1; color: var(--marca); }
.titan-cifras span { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #c2c2ca; margin-top: 4px; }
.titan-acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.titan-cta-wa, .titan-cta-app {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 22px; border-radius: 14px;
  font-size: 14px; font-weight: 700; text-decoration: none; flex: 1 1 auto; min-width: 190px; border: none; cursor: pointer;
}
.titan-cta-wa { background: #127C52; color: #fff; }
.titan-cta-app { background: #fff; color: #111; }
.titan-pista {
  position: absolute; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%);
  z-index: 3; width: 2px; height: 46px; background: rgba(255,255,255,0.18); border-radius: 2px; overflow: hidden;
  transition: opacity 160ms linear;
}
.titan-pista span { display: block; width: 100%; height: 45%; background: var(--marca); animation: titanPista 1.9s ease-in-out infinite; }
@keyframes titanPista { 0% { transform: translateY(-110%); } 100% { transform: translateY(240%); } }
@media (prefers-reduced-motion: reduce) {
  .titan-raiz { height: 100svh; }
  .titan-palabra { font-size: 21vw; }
  .titan-pista span { animation: none; }
}

/* ── secciones generales ─────────────────────────────────────────────── */
/* Grano muy sutil (SVG feTurbulence en base64, `mix-blend-mode: overlay` a
   4% de opacidad) para que el panel oscuro no se vea plano/genérico. Vive
   solo dentro de `.bloque` (Instalaciones/Planes/Tienda/La app/Contacto) —
   la portada `.titan-*` es aparte y no tiene `.bloque`, así que esto nunca
   la toca ni la superpone. */
section.bloque {
  position: relative;
  padding: 64px 0;
}
section.bloque::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
section.bloque > .envoltura { position: relative; z-index: 1; }
.bloque-alt { background: var(--panel-alt); }
.encabezado-bloque { max-width: 640px; margin: 0 0 36px; }
.ceja {
  font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--marca); margin: 0 0 10px;
}
.titulo-bloque { font-size: clamp(1.7rem, 5vw, 2.6rem); line-height: 1.05; margin: 0 0 12px; }
.parrafo-bloque { color: var(--texto-tenue); font-size: 16px; line-height: 1.55; margin: 0; }

/* ── galería de instalaciones: horizontal, se arrastra hacia el lado ──── */
.grilla-zonas {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity;
  margin-inline: -20px; padding: 4px 20px 14px; cursor: grab;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(var(--marca-rgb), 0.4) transparent;
}
.grilla-zonas.arrastrando { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.tarjeta-zona {
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden;
  display: flex; flex-direction: column; flex: 0 0 auto; width: min(80vw, 300px); scroll-snap-align: start;
  transition: transform var(--dur-hover) var(--ease-out), border-color var(--dur-hover) ease, box-shadow var(--dur-hover) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .tarjeta-zona:hover {
    transform: translateY(-4px); border-color: rgba(var(--marca-rgb), 0.4);
    box-shadow: 0 16px 32px -18px rgba(var(--marca-rgb), 0.45), 0 6px 14px -6px rgba(0,0,0,0.5);
  }
}
.foto-hueco {
  aspect-ratio: 4 / 3; width: 100%;
  background:
    repeating-linear-gradient(135deg, rgba(var(--marca-rgb), 0.10) 0 12px, rgba(var(--marca-rgb), 0.03) 12px 24px),
    var(--panel-alt);
  border-bottom: 1px solid var(--borde);
  display: flex; align-items: center; justify-content: center; padding: 18px; text-align: center;
}
.foto-hueco span {
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: var(--texto-mudo); line-height: 1.5;
}
.tarjeta-zona-cuerpo { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tarjeta-zona h3 { font-size: 19px; }
.tarjeta-zona p { color: var(--texto-tenue); font-size: 14px; line-height: 1.5; margin: 0; }
.chip-numero {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 6px;
  background: rgba(var(--marca-rgb), 0.14); color: var(--marca); font-weight: 800; font-size: 12px;
  padding: 5px 10px; border-radius: 999px;
}
.total-maquinas {
  margin-top: 28px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  color: var(--texto-tenue); font-size: 14px;
}
.total-maquinas strong { font-family: Anton, system-ui, sans-serif; font-weight: 400; font-size: 2rem; color: var(--marca); }

/* ── planes ───────────────────────────────────────────────────────────── */
.grilla-planes { display: flex; flex-direction: column; gap: 16px; }

/* Mensual es lo que se vende: tarjeta hero, precio grande, sin cartelito de
   "más popular" — el tamaño y el color hacen el trabajo. */
.tarjeta-plan-hero {
  background: linear-gradient(135deg, rgba(var(--marca-rgb), 0.22), var(--panel) 65%);
  border: 1px solid rgba(var(--marca-rgb), 0.45); border-radius: var(--radio);
  padding: 28px; display: flex; flex-wrap: wrap; gap: 22px; align-items: center; justify-content: space-between;
  box-shadow: 0 20px 46px -24px rgba(var(--marca-rgb), 0.5);
  transition: transform var(--dur-hover) var(--ease-out), border-color var(--dur-hover) ease, box-shadow var(--dur-hover) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .tarjeta-plan-hero:hover {
    transform: translateY(-3px); border-color: rgba(var(--marca-rgb), 0.7);
    box-shadow: 0 26px 54px -22px rgba(var(--marca-rgb), 0.6);
  }
}
.hero-etiqueta { font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--marca); margin: 0 0 8px; }
.tarjeta-plan-hero h3 { font-size: clamp(1.6rem, 4vw, 2.1rem); margin: 0 0 8px; text-transform: none; letter-spacing: -0.01em; color: var(--texto); font-family: Anton, system-ui, sans-serif; font-weight: 400; }
.hero-desc { color: var(--texto-tenue); font-size: 14px; margin: 0; max-width: 380px; }
.tarjeta-plan-hero-precio { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.precio-plan-hero { align-items: flex-end; }
.precio-plan-hero .signo { font-size: 1.5rem; font-weight: 800; color: var(--marca); margin-bottom: 8px; }
.precio-plan-hero strong { font-size: 4.2rem; }
.precio-plan-hero .periodo { font-size: 15px; margin-bottom: 10px; }
.btn-plan-hero {
  background: var(--marca); color: #0a0a0a; padding: 15px 26px; font-size: 14.5px; border-radius: 12px; width: 100%;
  transition: transform var(--dur-press) var(--ease-out), filter var(--dur-hover) ease;
}
@media (min-width: 560px) { .btn-plan-hero { width: auto; } }
@media (hover: hover) and (pointer: fine) {
  .btn-plan-hero:hover { filter: brightness(1.08); }
}

.grilla-planes-resto { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 640px) { .grilla-planes-resto { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .grilla-planes-resto { grid-template-columns: repeat(6, 1fr); } }
.tarjeta-plan {
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px;
  display: flex; flex-direction: column; gap: 8px; position: relative;
  transition: transform var(--dur-hover) var(--ease-out), border-color var(--dur-hover) ease, box-shadow var(--dur-hover) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .tarjeta-plan:hover {
    transform: translateY(-4px); border-color: rgba(var(--marca-rgb), 0.4);
    box-shadow: 0 14px 30px -18px rgba(var(--marca-rgb), 0.45), 0 4px 10px -4px rgba(0,0,0,0.5);
  }
}
.tarjeta-plan h3 { font-size: 13.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texto-tenue); font-family: 'Outfit', sans-serif; margin: 0; }
.precio-plan { display: flex; align-items: baseline; gap: 4px; }
.precio-plan strong { font-family: Anton, system-ui, sans-serif; font-weight: 400; font-size: 1.9rem; color: var(--texto); }
.precio-plan span { color: var(--texto-mudo); font-size: 13px; }
.duracion-plan { color: var(--texto-mudo); font-size: 12px; margin: -4px 0 2px; }
.equiv-plan { color: var(--marca); font-size: 12px; font-weight: 700; margin: 0; }
.ahorro-plan { color: var(--marca); font-size: 11.5px; font-weight: 700; margin: 0; line-height: 1.35; }
.btn-plan {
  margin-top: 8px; text-align: center; text-decoration: none; font-weight: 700; font-size: 13px;
  padding: 11px; border-radius: 10px; background: var(--borde); color: var(--texto);
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-hover) ease;
}
.btn-plan:active, .btn-plan-hero:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .btn-plan:hover { background: rgba(var(--marca-rgb), 0.22); }
}
.nota-planes { color: var(--texto-mudo); font-size: 13px; margin-top: 18px; }

/* ── tienda / productos ──────────────────────────────────────────────── */
/* 23-sep-2026: pasó de lista de texto a cuadrícula con foto (pedido de
   Xavier — las fotos ya tratadas con fondo crema por foto_studio.py, mismo
   pipeline de Prime Studio, sin el wordmark que es solo de esa boutique).
   `.grilla-categorias` ahora apila un grupo por categoría; cada grupo trae
   su propia cuadrícula de fotos. */
.grilla-categorias { display: flex; flex-direction: column; gap: 34px; }
.titulo-categoria-tienda { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.icono-categoria {
  width: 38px; height: 38px; border-radius: 10px; background: rgba(var(--marca-rgb), 0.14); color: var(--marca);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.icono-categoria svg { width: 19px; height: 19px; }
.titulo-categoria-tienda h3 { font-size: 16px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texto); font-family: 'Outfit', sans-serif; font-weight: 600; margin: 0; }

.grilla-productos-foto { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 640px) { .grilla-productos-foto { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .grilla-productos-foto { grid-template-columns: repeat(4, 1fr); } }

/* Vista previa del inicio (23-sep-2026): guarda hasta 8 tarjetas en el DOM
   pero en celular solo se ven 4 (2x2) — así no hace falta JS por ancho de
   pantalla, la cuadrícula entera cabe sin scroll largo. El catálogo completo
   (tienda.html) usa `.grilla-productos-foto` sin este modificador. */
@media (max-width: 639px) {
  .grilla-productos-foto--preview > :nth-child(n+5) { display: none; }
}
.btn-ver-tienda {
  display: block; width: fit-content; margin: 22px auto 0; text-align: center; text-decoration: none;
  font-weight: 700; font-size: 13.5px; color: var(--texto); border: 1px solid var(--borde);
  padding: 12px 22px; border-radius: 999px; transition: border-color var(--dur-hover) ease, background-color var(--dur-hover) ease;
}
.btn-ver-tienda:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .btn-ver-tienda:hover { border-color: rgba(var(--marca-rgb), 0.5); background: rgba(var(--marca-rgb), 0.1); }
}

.producto-foto {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  transition: transform var(--dur-hover) var(--ease-out), border-color var(--dur-hover) ease, box-shadow var(--dur-hover) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .producto-foto:hover {
    transform: translateY(-4px); border-color: rgba(var(--marca-rgb), 0.4);
    box-shadow: 0 14px 30px -18px rgba(var(--marca-rgb), 0.45), 0 4px 10px -4px rgba(0,0,0,0.5);
  }
}
.producto-foto-img {
  aspect-ratio: 1 / 1; background: #f5f1ec; /* mismo crema del lienzo tratado: sin salto de color mientras la foto carga */
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.producto-foto-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.producto-foto-marcador {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #b8ae9d;
}
.producto-foto-marcador svg { width: 34px; height: 34px; }
.producto-foto-cuerpo { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.producto-foto-nombre {
  color: var(--texto); font-weight: 600; font-size: 13.5px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(13.5px * 1.3 * 2);
}
.producto-fila-derecha { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: none; }
.precio-producto {
  color: var(--marca); font-weight: 800; white-space: nowrap; font-size: 13px;
  background: rgba(var(--marca-rgb), 0.14); padding: 4px 10px; border-radius: 999px; flex: none;
}
.btn-agregar {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--marca); color: #0a0a0a;
  transition: transform var(--dur-press) var(--ease-out), filter var(--dur-hover) ease;
}
.btn-agregar svg { width: 16px; height: 16px; }
.btn-agregar:active { transform: scale(0.88); }
@media (hover: hover) and (pointer: fine) {
  .btn-agregar:hover { filter: brightness(1.12); }
}
.tienda-proximamente {
  font-size: 13px; color: var(--texto-mudo); margin: 0; font-style: italic;
}

/* ── la app: selector de funciones + captura real ────────────────────────
   Mismo patrón que el selector de carrocería de Amazonia Motors: botones
   reales con aria-pressed (nunca <a> disfrazadas), la primera opción activa
   ya en el HTML. Las capturas son reales (Playwright sobre la app de
   socios, socio demo) — ver ESTADO.md. */
.app-selector {
  display: flex; flex-direction: column; gap: 12px;
  margin-bottom: 28px;
}
.app-tabs {
  display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding-bottom: 2px;
}
.app-tabs::-webkit-scrollbar { display: none; }
.app-tab {
  flex: none; border: 1px solid var(--borde); background: var(--panel); color: var(--texto-tenue);
  font: 700 13.5px 'Outfit', sans-serif; padding: 10px 18px; border-radius: 999px; cursor: pointer;
  transition: background-color var(--dur-hover) ease, color var(--dur-hover) ease, border-color var(--dur-hover) ease;
}
.app-tab[aria-pressed="true"] { background: var(--marca); color: #0a0a0a; border-color: var(--marca); }
@media (hover: hover) and (pointer: fine) {
  .app-tab:not([aria-pressed="true"]):hover { border-color: rgba(var(--marca-rgb), 0.5); color: var(--texto); }
}
.app-marcas { display: flex; gap: 8px; }
.app-marca-btn {
  flex: none; border: 1px solid var(--borde); background: transparent; color: var(--texto-mudo);
  font: 700 12px 'Outfit', sans-serif; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  transition: background-color var(--dur-hover) ease, color var(--dur-hover) ease, border-color var(--dur-hover) ease;
}
/* Prime Gym hereda SIEMPRE --marca (si este sitio corriera para otro
   gimnasio vía ?marca=, este botón seguiría siendo "el propio"). El tan de
   Dorian es su color real registrado en la demo multi-marca — ver
   ESTADO.md; es el único hex fijo de este bloque, y vive aquí, no suelto en
   HTML/JS. */
.app-marca-btn[data-marca="dorian"][aria-pressed="true"] {
  background: var(--app-marca-dorian); color: #0a0a0a; border-color: var(--app-marca-dorian);
}
.app-marca-btn[data-marca="prime"][aria-pressed="true"] {
  background: var(--marca); color: #0a0a0a; border-color: var(--marca);
}

.app-vista {
  display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center;
}
@media (min-width: 760px) {
  .app-vista { flex-direction: row; align-items: center; text-align: left; gap: 48px; }
}
.app-celular {
  position: relative; flex: none; width: min(280px, 72vw);
  background: #050505; border: 1px solid var(--borde); border-radius: 34px; padding: 12px 10px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}
.app-celular-notch {
  position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  width: 54px; height: 6px; border-radius: 999px; background: #1c1c1c; z-index: 1;
}
.app-celular img {
  display: block; width: 100%; height: auto; border-radius: 22px;
  transition: opacity var(--dur-hover) ease;
}
.app-celular img.app-cambiando { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .app-celular img { transition: none; }
}
.app-texto { max-width: 380px; }
.app-texto h3 { font-size: 20px; margin: 0 0 10px; }
.app-texto p { color: var(--texto-tenue); font-size: 14.5px; line-height: 1.6; margin: 0; }

/* ── contacto / footer ───────────────────────────────────────────────── */
.grilla-contacto { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 760px) { .grilla-contacto { grid-template-columns: 1.1fr 0.9fr; align-items: start; } }
.lista-datos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.lista-datos li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--texto-tenue); }
.lista-datos svg { width: 20px; height: 20px; flex: none; color: var(--marca); margin-top: 1px; }
.lista-datos b { color: var(--texto); display: block; }
.lista-datos a { text-decoration: none; transition: color var(--dur-hover) ease; }
@media (hover: hover) and (pointer: fine) {
  .lista-datos a:hover { color: var(--marca); }
}
.tarjeta-cta-final {
  background: linear-gradient(160deg, rgba(var(--marca-rgb),0.18), var(--panel) 70%);
  border: 1px solid var(--borde); border-radius: var(--radio); padding: 26px; text-align: center;
  box-shadow: 0 24px 50px -30px rgba(var(--marca-rgb), 0.5);
}
.tarjeta-cta-final h3 { font-size: 22px; margin-bottom: 10px; }
.tarjeta-cta-final p { color: var(--texto-tenue); font-size: 14px; margin: 0 0 18px; }
.btn-wa-grande {
  display: inline-flex; align-items: center; gap: 8px; background: #127C52; color: #fff; font-weight: 700;
  font-size: 15px; padding: 14px 26px; border-radius: 999px; text-decoration: none;
  transition: transform var(--dur-press) var(--ease-out), filter var(--dur-hover) ease;
}
.btn-wa-grande:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .btn-wa-grande:hover { filter: brightness(1.1); }
}
.btn-wa-grande svg { width: 18px; height: 18px; }

footer.pie {
  border-top: 1px solid var(--borde); padding: 26px 0; color: var(--texto-mudo); font-size: 12.5px;
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center;
}
footer.pie a { color: var(--texto-mudo); text-decoration: none; }
footer.pie a:hover { color: var(--marca); }

/* botón flotante de WhatsApp, siempre a mano. `max()` con env(safe-area-inset)
   para que en un iPhone con home indicator o en horizontal con notch no quede
   pegado al borde/gesto del sistema. */
.wa-flotante {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 50;
  width: 52px; height: 52px; border-radius: 50%; background: #127C52; color: #fff;
  display: flex; align-items: center; justify-content: center; text-decoration: none;
  box-shadow: 0 10px 24px -6px rgba(18, 124, 82, 0.55), 0 3px 8px rgba(0,0,0,0.35);
  transition: transform var(--dur-press) var(--ease-out);
}
.wa-flotante:active { transform: scale(0.93); }
@media (hover: hover) and (pointer: fine) {
  .wa-flotante:hover { transform: translateY(-2px); }
}
.wa-flotante svg { width: 26px; height: 26px; }

/* ── carrito de la tienda ─────────────────────────────────────────────
   Botón flotante espejado al de WhatsApp (izquierda en vez de derecha) +
   panel deslizante. Sin cobro real: el pedido se arma y se manda por
   WhatsApp — ver ESTADO.md. */
.carrito-flotante {
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 50;
  width: 52px; height: 52px; border-radius: 50%; background: var(--marca); color: #0a0a0a;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px -6px rgba(var(--marca-rgb), 0.55), 0 3px 8px rgba(0,0,0,0.35);
  transition: transform var(--dur-press) var(--ease-out);
}
.carrito-flotante:active { transform: scale(0.93); }
@media (hover: hover) and (pointer: fine) {
  .carrito-flotante:hover { transform: translateY(-2px); }
}
.carrito-flotante svg { width: 24px; height: 24px; }
.carrito-badge {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: #d33; color: #fff; font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; border: 2px solid var(--fondo);
}

.carrito-panel { position: fixed; inset: 0; z-index: 60; display: flex; }
.carrito-velo { position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.carrito-hoja {
  position: relative; margin-top: auto; width: 100%; max-height: 84vh;
  background: var(--panel); border-top: 1px solid var(--borde); border-radius: 20px 20px 0 0;
  display: flex; flex-direction: column; padding: 18px 18px calc(16px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -20px 50px -20px rgba(0,0,0,0.7);
}
@media (min-width: 640px) {
  .carrito-panel { align-items: center; justify-content: center; }
  .carrito-hoja { margin: 0; width: min(440px, 92vw); max-height: 80vh; border-radius: var(--radio); border: 1px solid var(--borde); }
}
@media not (prefers-reduced-motion: reduce) {
  .carrito-hoja { transition: transform var(--dur-hover) var(--ease-out), opacity var(--dur-hover) var(--ease-out); }
  @starting-style { .carrito-panel:not(.oculto) .carrito-hoja { transform: translateY(24px); opacity: 0; } }
}
.carrito-cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.carrito-cabecera h3 { font-size: 20px; }
.carrito-cabecera button {
  width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--panel-alt); color: var(--texto);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background-color var(--dur-hover) ease;
}
.carrito-cabecera button svg { width: 17px; height: 17px; }
@media (hover: hover) and (pointer: fine) {
  .carrito-cabecera button:hover { background: var(--borde); }
}
.carrito-lista { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-height: 0; }
.carrito-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 4px;
  border-bottom: 1px solid var(--borde);
}
.carrito-item-info { min-width: 0; }
.carrito-item-info b { display: block; font-size: 14px; color: var(--texto); }
.carrito-item-info span { font-size: 12.5px; color: var(--texto-mudo); }
.carrito-item-controles { display: flex; align-items: center; gap: 8px; flex: none; }
.carrito-stepper { display: flex; align-items: center; gap: 6px; background: var(--panel-alt); border-radius: 999px; padding: 4px; }
.carrito-stepper button {
  width: 24px; height: 24px; border-radius: 50%; border: none; background: var(--borde); color: var(--texto);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background-color var(--dur-hover) ease, transform var(--dur-press) var(--ease-out);
}
.carrito-stepper button:active { transform: scale(0.88); }
.carrito-stepper button svg { width: 13px; height: 13px; }
@media (hover: hover) and (pointer: fine) {
  .carrito-stepper button:hover { background: rgba(var(--marca-rgb), 0.3); }
}
.carrito-stepper span { min-width: 16px; text-align: center; font-size: 13.5px; font-weight: 700; }
.carrito-item-quitar {
  width: 26px; height: 26px; border-radius: 50%; border: none; background: transparent; color: var(--texto-mudo);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: color var(--dur-hover) ease, background-color var(--dur-hover) ease;
}
.carrito-item-quitar svg { width: 15px; height: 15px; }
@media (hover: hover) and (pointer: fine) {
  .carrito-item-quitar:hover { color: #e05555; background: rgba(224, 85, 85, 0.12); }
}
.carrito-vacio { color: var(--texto-mudo); font-size: 14px; text-align: center; padding: 24px 8px; }
.carrito-pie { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--borde); display: flex; flex-direction: column; gap: 10px; }
.carrito-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; color: var(--texto-tenue); }
.carrito-total strong { font-family: Anton, system-ui, sans-serif; font-weight: 400; font-size: 1.7rem; color: var(--texto); }
.carrito-btn-wa { justify-content: center; width: 100%; }
.carrito-btn-wa.oculto { display: none; }

/* ═══ Pagar el pedido en la página (23-sep-2026, js/checkout-tienda.js) ═══
   Botón PRINCIPAL cuando el backend de este gimnasio tiene el cobro
   encendido (GET /api/public/tienda/estado) — abre el mismo modal .chk-*
   que ya usa el checkout de membresías. Con el cobro apagado (otro
   gimnasio), este botón sigue oculto y `#carrito-wa` sigue siendo el único
   camino, exactamente como hoy. */
.carrito-btn-pagar {
  width: 100%; border: none; border-radius: 999px; padding: 14px 20px;
  background: var(--marca); color: #0a0a0a; font-weight: 800; font-size: 15px;
  cursor: pointer; transition: transform var(--dur-press) var(--ease-out), filter var(--dur-hover) ease;
}
.carrito-btn-pagar.oculto { display: none; }
.carrito-btn-pagar:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .carrito-btn-pagar:hover { filter: brightness(1.08); } }

/* WhatsApp queda como salida SECUNDARIA y discreta una vez que el cobro en
   línea está disponible — se nota de un vistazo que ya no es la acción
   principal (chico, sin fondo, sin ícono grande). */
.carrito-wa-discreta.btn-wa-grande {
  width: auto; align-self: center; background: none; color: var(--texto-mudo);
  padding: 6px 10px; font-size: 12.5px; font-weight: 600; box-shadow: none;
}
.carrito-wa-discreta svg { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) {
  .carrito-wa-discreta:hover { filter: none; color: var(--texto); }
}

.carrito-vaciar {
  background: none; border: none; color: var(--texto-mudo); font-size: 12.5px; text-decoration: underline;
  cursor: pointer; padding: 4px; align-self: center;
}
@media (hover: hover) and (pointer: fine) {
  .carrito-vaciar:hover { color: var(--texto); }
}

/* utilidades */
.oculto { display: none !important; }
@media (max-width: 389px) {
  .envoltura { padding-inline: 16px; }
}


/* Mientras se resuelve un `?marca=`, la palabra y el acento quedan neutros.
   `visibility` y no `display` para que no salte la maquetación. Lo activa un
   script en línea que corre antes del primer pintado (ver index.html): si se
   dejaba para cuando carga main.js, se alcanzaba a ver «PRIME» en dorado con
   el link de otro gimnasio. */
html[data-marca-pendiente] .titan-palabra,
html[data-marca-pendiente] #nav-logo,
html[data-marca-pendiente] #nav-nombre,
html[data-marca-pendiente] #titan-cejilla,
html[data-marca-pendiente] #pie-nombre,
.titan-palabra-esperando { visibility: hidden; }

/* El acento tampoco puede mostrarse hasta saber cuál es: el dorado de Prime Gym
   en la portada de otro gimnasio es el mismo error que su nombre. */
html[data-marca-pendiente] { --marca: #8c8c93; --marca-rgb: 140,140,147; }


/* ── Sedes y servicios ──────────────────────────────────────────────
   Solo se ven si la API los trae (gimnasios con varias sucursales). Mismos
   tokens que el resto de tarjetas: cero hex fijo nuevo. */
.grilla-sedes { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .grilla-sedes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .grilla-sedes { grid-template-columns: repeat(4, 1fr); } }
.tarjeta-sede {
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px;
  display: flex; flex-direction: column; gap: 8px;
  transition: transform var(--dur-hover) var(--ease-out), border-color var(--dur-hover) ease, box-shadow var(--dur-hover) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .tarjeta-sede:hover {
    transform: translateY(-4px); border-color: rgba(var(--marca-rgb), 0.4);
    box-shadow: 0 14px 30px -18px rgba(var(--marca-rgb), 0.45), 0 4px 10px -4px rgba(0,0,0,0.5);
  }
}
.tarjeta-sede .chip-numero { align-self: flex-start; }
.tarjeta-sede h3 { font-family: 'Outfit', sans-serif; font-size: 19px; font-weight: 700; margin: 0; color: var(--texto); letter-spacing: -0.01em; }
.tarjeta-sede p { margin: 0; color: var(--texto-tenue); font-size: 15px; line-height: 1.45; }
.tarjeta-sede .sede-sector { color: var(--texto-mudo); font-size: 13px; }
.tarjeta-sede .sede-acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 8px; }
.chips-servicios { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chip-servicio {
  display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px; border-radius: 999px;
  border: 1px solid var(--borde); background: var(--panel); color: var(--texto); font-weight: 600; font-size: 15px;
}

/* ═══════════════════════════════════════════════════════════════════════
   AGENTE DE IA — chat conectado al mismo cerebro que atiende WhatsApp.
   23-sep-2026 (Xavier: «como las páginas... flotante que se mueve, usa el
   mismo»): el LANZADOR pasó de pestañita pegada al borde a la burbuja
   redonda flotante y arrastrable que ya usan las vitrinas de clientes
   (Armoni, ISOLAB...) — portada tal cual desde el widget estándar de la
   casa (app/services/demo_web.py, `_W_CSS`/`_W_JS`, modo "vitrina"): mismo
   tamaño (56px), misma posición (borde derecho, mitad de pantalla), mismo
   destello (chispa que da 3 vueltas al cargar y vuelve a girar al pasar el
   mouse), mismo arrastre vertical con la posición recordada. La MECÁNICA
   del chat de adentro (chip «IA», saludo una vez por sesión, «pensando…»
   con brillo) es la misma de siempre — acento SIEMPRE por --marca, nunca un
   hex fijo. La lógica de arrastre vive en js/agente-ia.js.
   ══════════════════════════════════════════════════════════════════════ */

/* mientras el Agente de IA está abierto, el botón de WhatsApp se aparta
   (regla de la casa: nunca los dos flotando juntos) */
body.agente-abierto #wa-flotante { display: none; }

.agente-tab {
  position: fixed; right: 16px; top: 58%; bottom: auto;
  z-index: 55; display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; padding: 0; border: none; border-radius: 50%;
  background: var(--marca); color: #fff;
  cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,0.28), 0 0 0 3px rgba(255,255,255,0.14);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-hover) var(--ease-out), opacity var(--dur-hover) ease, box-shadow var(--dur-hover) ease;
}
.agente-tab-icono { width: 24px; height: 24px; stroke: currentColor; }
.agente-tab.oculto { display: none; }
.agente-tab.moviendo { transition: none; box-shadow: 0 10px 28px rgba(0,0,0,0.4); }
body.agente-abierto .agente-tab { opacity: 0; pointer-events: none; transform: scale(0.6); }
@media (hover: hover) and (pointer: fine) {
  .agente-tab:hover { transform: scale(1.06); }
}
.agente-tab:active { transform: scale(0.92); }
.agente-tab:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* destello: anillo que da 3 vueltas al cargar la página y ya — vuelve a
   girar (esta vez sin parar) al pasar el mouse. Nada infinito en reposo. */
.agente-tab::before {
  content: ''; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 62%, rgba(255,255,255,0.95) 80%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
}
@media not (prefers-reduced-motion: reduce) {
  .agente-tab::before { animation: agenteChispaGiro 2.2s linear 3; opacity: 0.9; }
  .agente-tab:hover::before { animation: agenteChispaGiro 1.4s linear infinite; }
}
@keyframes agenteChispaGiro { to { transform: rotate(360deg); } }

/* chip «IA»: blanco con la chispa del color de marca — se nota que del otro
   lado hay un Agente, no una persona (mismo criterio que el chip de la
   cabecera del panel, .agente-chip-ia, más abajo). */
.agente-tab-chispa {
  position: absolute; top: -6px; right: -6px; width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: #fff; color: var(--marca); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 5px rgba(0,0,0,0.28);
}
.agente-tab-chispa svg { width: 14px; height: 14px; }

.agente-saludo {
  position: fixed; right: 84px; top: 58%; z-index: 54;
  max-width: min(260px, calc(100vw - 110px)); padding: 10px 14px;
  background: var(--panel); border: 1px solid var(--borde); border-radius: 14px; border-top-right-radius: 6px;
  color: var(--texto); font-size: 13.5px; line-height: 1.45;
  box-shadow: 0 14px 30px -14px rgba(0,0,0,0.65);
  opacity: 0; pointer-events: none; transform: translateY(-50%) translateX(8px);
  transition: opacity var(--dur-hover) ease, transform var(--dur-hover) var(--ease-out);
}
.agente-saludo.on { opacity: 1; transform: translateY(-50%) translateX(0); pointer-events: auto; }
.agente-saludo b { color: var(--marca); }
@media (prefers-reduced-motion: reduce) { .agente-saludo { transition: none; } }
@media (max-width: 480px) {
  .agente-tab { top: auto; bottom: calc(88px + env(safe-area-inset-bottom)); right: 14px; }
  .agente-saludo { top: auto; bottom: calc(96px + env(safe-area-inset-bottom)); right: 12px; transform: translateY(8px); }
  .agente-saludo.on { transform: translateY(0); }
}

.agente-velo {
  position: fixed; inset: 0; z-index: 56; background: rgba(0,0,0,0.55);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-hover) ease;
}
.agente-velo.on { opacity: 1; pointer-events: auto; }
@media (min-width: 640px) { .agente-velo { display: none; } }

.agente-panel {
  position: fixed; z-index: 57; right: 16px; bottom: 16px;
  width: 372px; max-width: calc(100vw - 32px); height: min(560px, 74vh);
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.75);
  opacity: 0; pointer-events: none; transform: translateY(16px) scale(0.98);
  transition: transform var(--dur-hover) var(--ease-out), opacity var(--dur-hover) ease;
}
.agente-panel.abierto { opacity: 1; pointer-events: auto; transform: none; }
@media (prefers-reduced-motion: reduce) { .agente-panel { transition: none; } }
@media (max-width: 639px) {
  .agente-panel {
    right: 0; left: 0; bottom: 0; width: 100%; max-width: 100%;
    height: min(82vh, 640px); border-radius: 18px 18px 0 0;
    transform: translateY(100%);
  }
  .agente-panel.abierto { transform: none; }
}

.agente-cabecera {
  display: flex; align-items: center; gap: 11px; padding: 12px 14px; flex: none;
  background: var(--panel-alt); border-bottom: 1px solid var(--borde);
}
.agente-av {
  width: 36px; height: 36px; border-radius: 50%; flex: none; background: var(--marca); color: #0a0a0a;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px;
}
.agente-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.agente-info b { font-size: 14.5px; color: var(--texto); font-weight: 700; display: flex; align-items: center; flex-wrap: wrap; }
.agente-chip-ia {
  display: inline-flex; align-items: center; margin-left: 7px; padding: 2px 8px; border-radius: 999px;
  font: 800 11.5px/1.4 'Outfit', sans-serif; font-style: normal; letter-spacing: 0.05em;
  color: #0a0a0a; background: var(--marca);
}
.agente-info span { font-size: 12px; color: #29c46a; display: flex; align-items: center; gap: 5px; }
.agente-info span::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #29c46a; flex: none; }
.agente-info span.pensando {
  color: var(--texto-tenue);
  background: linear-gradient(90deg, var(--texto-mudo) 0%, var(--texto) 50%, var(--texto-mudo) 100%);
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
@media not (prefers-reduced-motion: reduce) { .agente-info span.pensando { animation: agenteBrillo 1.3s linear infinite; } }
.agente-info span.pensando::before { background: var(--marca); }
@keyframes agenteBrillo { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.agente-cabecera button {
  background: none; border: none; color: var(--texto-mudo); cursor: pointer; padding: 5px; display: flex; flex: none;
  transition: color var(--dur-hover) ease;
}
.agente-cabecera button svg { width: 19px; height: 19px; }
@media (hover: hover) and (pointer: fine) { .agente-cabecera button:hover { color: var(--texto); } }

#agente-chat {
  flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 7px;
  -webkit-overflow-scrolling: touch; background: var(--fondo);
}
.agente-sis {
  align-self: center; background: var(--panel-alt); color: var(--texto-mudo); font-size: 12px;
  padding: 6px 12px; border-radius: 8px; text-align: center; max-width: 92%; line-height: 1.4;
}
.agente-msg {
  max-width: 86%; padding: 9px 12px; border-radius: 12px; color: var(--texto); font-size: 13.5px;
  line-height: 1.45; white-space: pre-wrap; overflow-wrap: break-word;
}
.agente-msg.in { background: var(--panel-alt); align-self: flex-start; border-top-left-radius: 3px; }
.agente-msg.out { background: rgba(var(--marca-rgb), 0.22); align-self: flex-end; border-top-right-radius: 3px; }
.agente-msg b { color: var(--texto); font-weight: 800; }
.agente-hora { display: inline-block; float: right; margin: 8px -2px -4px 10px; font-size: 10.5px; color: var(--texto-mudo); }
.agente-esc { display: none; align-self: flex-start; gap: 4px; padding: 10px 12px; }
.agente-esc.on { display: flex; }
.agente-esc i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--texto-mudo); display: block;
}
@media not (prefers-reduced-motion: reduce) {
  .agente-esc i { animation: agentePunto 1.1s ease-in-out infinite; }
  .agente-esc i:nth-child(2) { animation-delay: .15s; }
  .agente-esc i:nth-child(3) { animation-delay: .3s; }
}
@keyframes agentePunto { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.agente-chips { display: flex; gap: 8px; overflow-x: auto; padding: 8px 12px 0; flex: none; scrollbar-width: none; }
.agente-chips::-webkit-scrollbar { display: none; }
.agente-chip {
  flex: none; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--borde); background: var(--panel-alt);
  color: var(--texto); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: border-color var(--dur-hover) ease, background-color var(--dur-hover) ease;
}
@media (hover: hover) and (pointer: fine) {
  .agente-chip:hover { border-color: rgba(var(--marca-rgb), 0.5); background: rgba(var(--marca-rgb), 0.14); }
}

.agente-barra { display: flex; gap: 8px; padding: 10px; flex: none; background: var(--panel-alt); }
.agente-barra input {
  flex: 1; min-width: 0; background: var(--panel); border: 1px solid var(--borde); outline: none;
  border-radius: 22px; padding: 11px 15px; color: var(--texto); font-size: 16px;
}
.agente-barra input::placeholder { color: var(--texto-mudo); }
#agente-enviar {
  flex: none; width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--marca); color: #0a0a0a;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: transform var(--dur-press) var(--ease-out);
}
#agente-enviar:active { transform: scale(0.92); }
#agente-enviar svg { width: 17px; height: 17px; }

/* ── WhatsApp DENTRO del widget (23-sep-2026) — «un botón arriba del wpp
   para ir directo a mi wpp del bot del gym». Va justo debajo de la cabecera:
   verde de WhatsApp a propósito, para que se note de un vistazo que ESO es
   otra cosa (irse del chat) y no una opción más del Agente. Con `?marca=`
   de otro gimnasio usa SU número (js/agente-ia.js); sin número cargado, no
   se muestra — nunca se ofrece un WhatsApp que no es de este negocio. ── */
.agente-wa-top {
  display: flex; align-items: center; justify-content: center; gap: 8px; flex: none;
  margin: 10px 12px 0; padding: 9px 12px; border-radius: 999px;
  background: #127C52; color: #fff; text-decoration: none;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.01em;
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-hover) ease;
}
.agente-wa-top.oculto { display: none; }
.agente-wa-top svg { width: 15px; height: 15px; flex: none; }
.agente-wa-top:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .agente-wa-top:hover { background: #159463; }
}

.chip-servicio::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--marca); flex: none; }

/* ═══ CHECKOUT DE MEMBRESÍAS (23-sep-2026, js/checkout.js) ═══════════════
   Modal para pagar un plan sin salir del sitio (tarjeta o transferencia/QR).
   Solo se activa cuando el backend responde con GYM_CHECKOUT_PUBLICO
   encendido — con la bandera apagada (default) este CSS no se usa nunca. */
.chk-overlay {
  position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.72);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity var(--dur-hover) var(--ease-out);
}
.chk-overlay.chk-abierto { opacity: 1; pointer-events: auto; }
@media (min-width: 640px) { .chk-overlay { align-items: center; } }

.chk-modal {
  width: 100%; max-width: 460px; max-height: 92vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: 20px 20px 0 0; padding: 22px 20px calc(20px + env(safe-area-inset-bottom));
  transform: translateY(16px); transition: transform var(--dur-hover) var(--ease-out);
  -webkit-overflow-scrolling: touch;
}
.chk-overlay.chk-abierto .chk-modal { transform: translateY(0); }
@media (min-width: 640px) {
  .chk-modal { border-radius: var(--radio); padding: 26px; }
}

.chk-cerrar {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--borde); background: var(--panel-alt); color: var(--texto-tenue);
  display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; line-height: 1;
}
.chk-modal { position: relative; }
.chk-resumen { background: var(--panel-alt); border-radius: 12px; padding: 14px 16px; margin: 6px 0 18px; }
.chk-resumen h3 { margin: 0 0 2px; font-size: 17px; }
.chk-resumen p { margin: 0; color: var(--texto-tenue); font-size: 14px; }
.chk-resumen .chk-precio { color: var(--marca); font-weight: 700; font-size: 22px; }

.chk-titulo { font-size: 20px; font-weight: 700; margin: 0 0 4px; padding-right: 30px; }
.chk-sub { color: var(--texto-tenue); font-size: 14px; margin: 0 0 16px; }

.chk-campo { margin-bottom: 14px; }
.chk-campo label { display: block; font-size: 13px; color: var(--texto-tenue); margin-bottom: 6px; }
.chk-campo input {
  width: 100%; background: var(--fondo); border: 1px solid var(--borde); border-radius: 10px;
  padding: 12px 14px; color: var(--texto); font-size: 16px; outline: none;
}
.chk-campo input:focus { border-color: var(--marca); }

.chk-metodos { display: flex; gap: 10px; margin-bottom: 18px; }
.chk-metodo {
  flex: 1; padding: 14px 10px; border-radius: 12px; border: 1px solid var(--borde);
  background: var(--panel-alt); color: var(--texto); text-align: center; cursor: pointer; font-size: 14px;
}
.chk-metodo.chk-activo { border-color: var(--marca); box-shadow: 0 0 0 1px var(--marca) inset; }
.chk-metodo strong { display: block; margin-bottom: 2px; }

/* Transferencia / QR / Tarjeta como caminos SEPARADOS, uno debajo del otro
   (23-sep-2026) — antes salía todo en una sola lista mezclada. */
.chk-metodos-col { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
.chk-metodo-fila {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%;
  padding: 14px 16px; border-radius: 12px; border: 1px solid var(--borde);
  background: var(--panel-alt); color: var(--texto); text-align: left; cursor: pointer; font-size: 14px;
  font-family: inherit;
}
.chk-metodo-fila:active { transform: scale(0.98); }
.chk-metodo-fila strong { font-size: 15px; }
.chk-metodo-fila span { color: var(--texto-tenue); font-size: 13px; }

/* Selector de banco: uno por fila, con su nota si tiene (ej. "solo local") */
.chk-bancos { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.chk-banco {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%;
  padding: 13px 16px; border-radius: 12px; border: 1px solid var(--borde);
  background: var(--panel-alt); color: var(--texto); text-align: left; cursor: pointer; font-size: 14px;
  font-family: inherit;
}
.chk-banco:active { transform: scale(0.98); }
.chk-banco span { color: var(--texto-tenue); font-size: 12px; }

/* QR grande y descargable — mucha gente lo escanea desde otro teléfono */
.chk-qr-link { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 4px 0 16px; text-decoration: none; }
.chk-qr-grande { width: 100%; max-width: 260px; border-radius: 14px; display: block; background: #fff; padding: 10px; }
.chk-qr-link span { color: var(--marca); font-size: 13px; font-weight: 600; }

.chk-cuenta-numero { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0; }
.chk-cuenta-numero span { font-size: 15px; font-weight: 700; letter-spacing: .3px; }
.chk-cuenta-nota { color: var(--texto-tenue); font-size: 12px; margin-top: 4px; }
.chk-copiar {
  flex-shrink: 0; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--borde);
  background: transparent; color: var(--marca); font-size: 12px; font-weight: 600; cursor: pointer;
}

.chk-btn {
  width: 100%; padding: 15px; border-radius: 12px; border: none; background: var(--marca);
  color: #0a0a0a; font-weight: 700; font-size: 16px; cursor: pointer;
  transition: transform var(--dur-press) var(--ease-out);
}
.chk-btn:active { transform: scale(0.98); }
.chk-btn:disabled { opacity: .55; cursor: default; }
.chk-btn-secundario {
  width: 100%; padding: 13px; border-radius: 12px; border: 1px solid var(--borde); background: transparent;
  color: var(--texto-tenue); font-size: 14px; cursor: pointer; margin-top: 10px;
}

.chk-error { color: #f87171; font-size: 14px; margin: 0 0 14px; }
.chk-nota { color: var(--texto-mudo); font-size: 12px; margin-top: 14px; line-height: 1.5; }

.chk-cuenta {
  background: var(--panel-alt); border: 1px dashed var(--borde); border-radius: 10px;
  padding: 12px 14px; margin: 6px 0 10px; font-size: 14px;
}
.chk-cuenta b { color: var(--texto); }

.chk-pin {
  text-align: center; margin: 10px 0 18px;
}
.chk-pin .chk-pin-num {
  font-size: 32px; font-weight: 800; letter-spacing: 6px; color: var(--marca);
  background: var(--panel-alt); border-radius: 12px; padding: 12px 20px; display: inline-block;
}

.chk-spinner {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(10,10,10,.35);
  border-top-color: #0a0a0a; display: inline-block; vertical-align: -3px; margin-right: 8px;
  animation: chk-girar .7s linear infinite;
}
@keyframes chk-girar { to { transform: rotate(360deg); } }

/* ── Temporada: Navidad ─────────────────────────────────────────────
   Se enciende con la clase .tema-navidad en <html> (js/main.js:pintarTemporada,
   desde `temporada` de la config o `?tema=navidad`). Va ENCIMA de la marca, no
   en su lugar: una guirnalda de luces cálidas bajo el menú, una cinta traslúcida
   con el aviso de temporada dentro de la portada (velo, no placa) y nieve suave
   con profundidad. Nada de esto existe sin la clase. */
.tema-navidad .nav { position: relative; }
.tema-navidad .nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 14px; pointer-events: none;
  background-image:
    radial-gradient(circle at 12px 7px, #ffd166 0 2.6px, rgba(255,209,102,.35) 3.6px, transparent 6px),
    radial-gradient(circle at 46px 9px, #ff5a5f 0 2.6px, rgba(255,90,95,.35) 3.6px, transparent 6px),
    radial-gradient(circle at 80px 6px, #3ddc84 0 2.4px, rgba(61,220,132,.35) 3.4px, transparent 6px),
    radial-gradient(circle at 114px 9px, #ffd166 0 2.6px, rgba(255,209,102,.35) 3.6px, transparent 6px),
    linear-gradient(180deg, transparent 6px, rgba(255,255,255,.18) 6px, rgba(255,255,255,.18) 7px, transparent 7px);
  background-size: 136px 14px, 136px 14px, 136px 14px, 136px 14px, 100% 14px;
  background-repeat: repeat-x;
  animation: temporadaLuces 2.4s ease-in-out infinite alternate;
}
@keyframes temporadaLuces { from { filter: brightness(.85); } to { filter: brightness(1.25); } }
.temporada-banda {
  position: absolute; left: 50%; transform: translateX(-50%); top: clamp(88px, 14vh, 150px); z-index: 4;
  max-width: min(92%, 640px); padding: 10px 18px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(120,16,28,.78), rgba(179,32,44,.78)); color: #fff7ea;
  border: 1px solid rgba(255,209,102,.55); box-shadow: 0 8px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  text-align: center; font-weight: 700; font-size: clamp(13px, 1.6vw, 15px); line-height: 1.35;
}
.temporada-nieve { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 3; }
.temporada-nieve i { position: absolute; top: -28px; font-style: normal; line-height: 1; color: #fff;
  font-size: 16px; text-shadow: 0 0 6px rgba(255,255,255,.55); opacity: .8;
  animation: temporadaCopo linear infinite; will-change: transform; }
.temporada-nieve i:nth-child(3n) { font-size: 11px; opacity: .55; filter: blur(.4px); }
.temporada-nieve i:nth-child(4n) { font-size: 22px; opacity: .9; }
.temporada-nieve i:nth-child(5n) { animation-name: temporadaCopoB; }
@keyframes temporadaCopo  { to { transform: translate3d(22px, 110vh, 0) rotate(360deg); } }
@keyframes temporadaCopoB { to { transform: translate3d(-26px, 110vh, 0) rotate(-300deg); } }
@media (prefers-reduced-motion: reduce) { .temporada-nieve, .tema-navidad .nav::after { animation: none; } .temporada-nieve { display: none; } }
.tema-navidad .titan-cejilla::before { content: "🎄 "; }
@media (max-width: 640px) { .temporada-banda { top: 74px; padding: 7px 14px; font-size: 12.5px; max-width: 88%; } }