/* ═══════════════════════════════════════════════════════════════════════
   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);
  /* la curva de los cajones y hojas (la de Vaul): arranca decidida y frena
     largo, que es lo que hace que un panel se sienta arrastrado y no tirado */
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 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: 12px; font-weight: 800; font-size: 17px; 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: 46px; width: 46px; object-fit: contain; flex: none; }   /* 34 px no se notaba (Xavier, 29-sep) */
@media (max-width: 640px) { .nav-marca img { height: 40px; width: 40px; } .nav-marca { font-size: 16px; } }
.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: var(--marca); color: #0a0a0a; }   /* el verde de WhatsApp no es de la marca (Xavier, 29-sep) */
.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; }
}

/* ── Titán en reposo = una portada (29-sep, Xavier: «debe mantenerse pero en
   reposo la portada» / «debe tener alguna foto grande o algo wao»).
   El video se ve detrás, oscurecido, fuera de las letras; las letras a pleno
   brillo con su contorno. El texto está a la vista desde el primer segundo:
   escritorio con texto a la izquierda y palabra a la derecha (.titan-lado, lo
   pone ajustarTamanoPalabra), celular con la palabra arriba y el texto abajo. ── */
.titan-mascara { background: #2a2a2a; }   /* el video es oscuro: con más gris las letras dejaban de resaltar */
.titan-pie { opacity: 1; bottom: calc(26px + var(--titan-nav, 0px) + env(safe-area-inset-bottom, 0px)); }
/* la portada arranca debajo de la barra superior: sin descontarla, los botones quedaban fuera de la pantalla */
.titan-cej2 { display: none; }
.titan-sombra-pie { height: 62%; background: linear-gradient(to top, #000 22%, rgba(0,0,0,0.86) 52%, rgba(0,0,0,0) 100%); }
.titan-raiz:not(.titan-lado) .titan-mascara,
.titan-raiz:not(.titan-lado) .titan-filo { align-items: flex-start; padding-top: 58px; }
.titan-lado .titan-encima { display: none; }
.titan-lado .titan-mascara,
.titan-lado .titan-filo { padding: 0 3vw 0 46vw; }
.titan-lado .titan-sombra-pie { top: 0; height: auto; right: auto; width: 62%;
  background: linear-gradient(90deg, rgba(0,0,0,0.94) 0, rgba(0,0,0,0.82) 40%, rgba(0,0,0,0.38) 72%, rgba(0,0,0,0) 100%); }
.titan-lado .titan-pie { top: calc(50% - var(--titan-nav, 0px) / 2); bottom: auto; left: clamp(24px, 5vw, 96px); right: auto; transform: translateY(-50%);
  width: min(40vw, 600px); max-width: none; margin: 0; padding: 0; }
.titan-lado .titan-cej2 { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font-size: 13px; font-weight: 800;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--marca); }
.titan-lado .titan-cej2::before { content: ""; width: 38px; height: 2px; background: var(--marca); }
.titan-lado .titan-lema { font-size: clamp(2.4rem, 4.2vw, 4.4rem); max-width: 17ch; margin-bottom: 24px; }
.titan-lado .titan-cifras { margin: 0 0 26px; }
.titan-sub { margin: -6px 0 18px; font-size: 14px; line-height: 1.45; color: #d4d4da; max-width: 46ch; }
.titan-lado .titan-sub { font-size: 17px; margin: -8px 0 26px; }
.titan-lado .titan-cta-wa, .titan-lado .titan-cta-app { flex: 0 0 auto; }

/* la palabra espera su fuente (Anton) para no medirse con la de respaldo; tope de 2,5 s */
.titan-palabra { visibility: hidden; animation: titanMostrar 0s 2.5s forwards; }
.titan-fuente-ok .titan-palabra { visibility: visible; animation: none; }
@keyframes titanMostrar { to { visibility: visible; } }
/* el globo de saludo del Agente se retiró de todas las páginas (Xavier, 28-sep) */
#agente-saludo { display: none !important; }
/* celular: el lanzador del Agente vive abajo a la derecha; los botones de la portada le dejan su lugar */
.titan-raiz:not(.titan-lado) .titan-acciones { padding-right: 78px; }

/* ── 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: var(--marca); color: #0a0a0a; 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: var(--marca); color: #0a0a0a;
  display: flex; align-items: center; justify-content: center; text-decoration: none;
  box-shadow: 0 10px 24px -6px rgba(var(--marca-rgb), 0.5), 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);
}
/* ── EL CARRITO ES UN CAJÓN LATERAL, NO UNA CAJITA EN EL MEDIO (28-sep-2026)
   Xavier: «no se ve bien el carrito ni profesional; ármalo como debería ser,
   a un lado».
   Una caja flotando en el centro tapa la tienda y se lee como un aviso: el
   comprador pierde de vista lo que estaba mirando y, sobre todo, no puede
   seguir agregando sin cerrarla. Un cajón pegado a la derecha —lo que hacen
   todas las tiendas serias— deja la tienda a la vista, ocupa el alto
   completo (así caben el pedido Y los datos sin que nada se apriete) y entra
   desde el borde por donde vive el botón, que es de donde el ojo lo espera.
   En el CELULAR se queda como hoja de abajo: ahí el cajón lateral es el
   patrón equivocado — el pulgar llega al borde inferior, no al derecho. */
@media (min-width: 640px) {
  .carrito-panel { justify-content: flex-end; }
  .carrito-hoja {
    margin: 0 0 0 auto; width: min(440px, 100vw); max-height: none; height: 100%;
    border-radius: 0; border: none; border-left: 1px solid var(--borde);
    padding: 22px 22px calc(22px + env(safe-area-inset-bottom, 0px));
    padding-right: max(22px, env(safe-area-inset-right));
    box-shadow: -24px 0 60px -24px rgba(0,0,0,0.75);
  }
}
@media not (prefers-reduced-motion: reduce) {
  .carrito-hoja { transition: transform var(--dur-hover) var(--ease-sheet, var(--ease-out)), opacity var(--dur-hover) var(--ease-out); }
  @starting-style { .carrito-panel:not(.oculto) .carrito-hoja { transform: translateY(24px); opacity: 0; } }
  /* en escritorio entra desde el borde derecho, no desde abajo */
  @media (min-width: 640px) {
    @starting-style { .carrito-panel:not(.oculto) .carrito-hoja { transform: translateX(100%); opacity: 1; } }
  }
}
.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: 12px; padding: 12px 4px;
  border-bottom: 1px solid var(--borde);
}
/* la miniatura: el comprador eligió con los ojos, y en el carrito tiene que
   reconocer lo que eligió sin leer. `flex:none` + `min-w-0` en el texto para
   que un nombre largo no empuje ni corte la foto. */
.carrito-item-foto {
  flex: none; width: 48px; height: 48px; border-radius: 10px;
  object-fit: cover; background: var(--panel-alt);
  border: 1px solid var(--borde);
}
.carrito-item-foto--vacia { display: block; }
.carrito-item-info { min-width: 0; flex: 1 1 auto; }
.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: var(--marca); color: #0a0a0a; 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; }
}

/* ── EL CHECKOUT DE LA TIENDA SIGUE EN EL MISMO CARRIL (28-sep-2026)
   El carrito ya es un cajón a la derecha; si al tocar «Pagar pedido»
   saltara una caja al centro, el comprador sentiría que cambió de lugar
   justo en el paso que más confianza necesita. Acá la misma columna avanza:
   «Tu pedido» → «Tus datos» → «Cómo pagas», sin que nada se mueva de sitio.
   Se limita a `#chk-tienda-overlay` A PROPÓSITO: el checkout de MEMBRESÍAS
   (js/checkout.js) usa las mismas clases `.chk-*` y no sale de un cajón —
   ahí la caja centrada es lo correcto y no se toca. */
@media (min-width: 640px) {
  #chk-tienda-overlay { align-items: stretch; justify-content: flex-end; }
  #chk-tienda-overlay .chk-modal {
    max-width: min(440px, 100vw); width: min(440px, 100vw);
    max-height: none; height: 100%; border-radius: 0;
    border: none; border-left: 1px solid var(--borde);
    padding: 26px 26px calc(26px + env(safe-area-inset-bottom, 0px));
    padding-right: max(26px, env(safe-area-inset-right));
    box-shadow: -24px 0 60px -24px rgba(0,0,0,0.75);
    transform: translateX(24px);
  }
  #chk-tienda-overlay.chk-abierto .chk-modal { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  #chk-tienda-overlay .chk-modal { transform: none; transition: none; }
}

.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; }

/* El formulario de tarjeta, dentro del checkout (28-sep-2026). La página que
   carga trae el fondo transparente a propósito, así que hereda el del modal y
   no se ve un recuadro pegado encima.

   ALTO FIJO, y no medido: se intentó medir el contenido desde el JS (el marco
   es del mismo origen, así que se puede) y no sirve — la Cajita trae iframes
   anidados que se estiran al alto del marco, así que medir devuelve el alto
   que uno acaba de poner (comprobado: 1400→1400, 900→900) y encoger se
   realimenta hasta colapsar el formulario. 820 px es holgado para el caso
   completo: método + tarjeta + titular + documento + botón Pagar. */
.chk-tarjeta-marco {
  display: block; width: 100%; height: 820px; border: 0; margin: 4px 0 0;
  background: transparent; color-scheme: normal;
}

.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%; } }


/* ═══════════════════════════════════════════════════════════════════════
   29-sep-2026 — Web v2: piezas nuevas + auditoría móvil / accesibilidad.
   Todo este bloque va al FINAL a propósito: no cambia ninguna regla de arriba,
   solo suma piezas nuevas y sube lo que quedaba corto (textos < 14 px,
   táctiles < 44 px). La portada `.titan-*` NO se toca en ninguna línea de acá.
   Cero hex fijo en HTML/JS: los pocos colores de estado viven en estos tokens.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --abierto: #3ddc84;   /* punto de «Abierto ahora» */
  --cerrado: #f87171;   /* punto de «Cerrado ahora» y errores */
  --aviso: #fbbf24;     /* «revisa este dato» (no bloquea) */
  --marca-sobre: #0a0a0a; /* texto sobre el color de marca (el mismo de los botones) */
}

/* bloquea el scroll de la página mientras hay una hoja abierta (js/dialogo.js) */
html.pg-lock, html.pg-lock body { overflow: hidden; }

/* «Saltar al contenido» — solo se ve al recibir foco con el teclado */
.saltar {
  position: fixed; left: 12px; top: -80px; z-index: 400;
  background: var(--marca); color: var(--marca-sobre); font-weight: 800; font-size: 15px;
  padding: 13px 18px; border-radius: 10px; text-decoration: none;
}
.saltar:focus { top: 12px; }
#contenido:focus { outline: none; }

/* foco visible también en campos, resúmenes y opciones de radio */
input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--marca); outline-offset: 3px; border-radius: 8px;
}

/* WhatsApp flotante apartado mientras se ve la portada (solo celular; js/web-extra.js) */
@media (max-width: 759px) {
  .wa-flotante { transition: transform var(--dur-press) var(--ease-out), opacity var(--dur-hover) ease, visibility 0s linear 0s; }
  .wa-flotante.wa-tras-portada { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur-hover) ease, visibility 0s linear var(--dur-hover); }
}

/* ── «Abierto ahora» ─────────────────────────────────────────────────── */
.pill-abierto {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  margin-top: 8px; padding: 6px 14px 6px 12px; border-radius: 999px;
  border: 1px solid var(--borde); background: var(--panel-alt);
  font-size: 14px; font-weight: 600; color: var(--texto); line-height: 1.3;
}
.pill-abierto i { width: 9px; height: 9px; border-radius: 50%; background: var(--texto-mudo); flex: none; }
.pill-abierto.pill-on i { background: var(--abierto); box-shadow: 0 0 0 3px rgba(61, 220, 132, 0.18); }
.pill-abierto.pill-off i { background: var(--cerrado); }
.lista-datos .pill-abierto { display: inline-flex; margin-top: 10px; }
.sedes-hoy { margin: 12px 0 0; }
.sedes-hoy .pill-abierto { margin-top: 0; }
.tarjeta-sede .pill-abierto { margin-top: 0; }

/* ── sedes: acciones con tamaño de dedo ─────────────────────────────── */
.tarjeta-sede .sede-acciones .btn-plan { flex: 1 1 auto; }
.btn-plan-prim { background: var(--marca); color: var(--marca-sobre); }
@media (hover: hover) and (pointer: fine) {
  .btn-plan-prim:hover { background: var(--marca); filter: brightness(1.08); }
}

/* ── planes: calculadora por duración ───────────────────────────────── */
.tarjeta-plan-calc {
  align-items: flex-start;
  /* Mismo degradado que la tarjeta «Mensual» de siempre, pero con las dos
     puntas OPACAS (color-mix sobre el fondo de la sección) en lugar de un
     rgba: se ve igual y un medidor de contraste puede calcular el fondo. */
  background-image: linear-gradient(135deg, color-mix(in srgb, var(--marca) 22%, var(--panel-alt)), var(--panel) 65%);
}
.tarjeta-plan-calc .tarjeta-plan-hero-info { flex: 1 1 280px; min-width: 0; }
.tarjeta-plan-calc .tarjeta-plan-hero-precio { flex: 0 1 auto; min-width: 0; }
.calc-rotulo { margin: 20px 0 8px; font-size: 14px; font-weight: 700; color: var(--texto); }
.calc-dur { display: flex; flex-wrap: wrap; gap: 8px; }
.calc-op {
  flex: 1 1 64px; max-width: 96px; min-height: 56px; padding: 8px 6px; border-radius: 12px;
  border: 1px solid var(--borde); background: rgba(10, 10, 10, 0.45); color: var(--texto);
  font-family: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  transition: background-color var(--dur-hover) ease, border-color var(--dur-hover) ease, transform var(--dur-press) var(--ease-out);
}
.calc-op b { font-family: Anton, system-ui, sans-serif; font-weight: 400; font-size: 1.5rem; line-height: 1.1; }
.calc-op small { font-size: 14px; color: var(--texto-tenue); line-height: 1.2; }
.calc-op:active { transform: scale(0.96); }
.calc-op[aria-checked="true"] { background: var(--marca); border-color: var(--marca); color: var(--marca-sobre); }
.calc-op[aria-checked="true"] small { color: var(--marca-sobre); }
@media (hover: hover) and (pointer: fine) {
  .calc-op[aria-checked="false"]:hover { border-color: rgba(var(--marca-rgb), 0.6); }
}
.calc-linea { margin: -4px 0 0; font-size: 14px; font-weight: 700; color: var(--marca); line-height: 1.4; max-width: 300px; }
.calc-linea:empty { display: none; }
.grilla-planes-cortos { margin-top: 0; }
@media (min-width: 980px) { .grilla-planes-cortos { grid-template-columns: repeat(3, 1fr); } }

/* ── preguntas frecuentes ───────────────────────────────────────────── */
.faq-lista { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.faq-item { background: var(--panel); border: 1px solid var(--borde); border-radius: 14px; }
.faq-item[open] { border-color: rgba(var(--marca-rgb), 0.4); }
.faq-item summary {
  list-style: none; cursor: pointer; position: relative; display: flex; align-items: center;
  min-height: 56px; padding: 12px 52px 12px 18px; font-weight: 600; font-size: 16px; line-height: 1.35;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ''; position: absolute; right: 20px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--marca); border-bottom: 2px solid var(--marca);
  transform: translateY(-70%) rotate(45deg); transition: transform var(--dur-hover) var(--ease-out);
}
.faq-item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-resp { padding: 0 18px 16px; color: var(--texto-tenue); font-size: 15px; line-height: 1.6; }
.faq-resp p { margin: 0; max-width: 62ch; }
.faq-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.faq-acciones .btn-plan { margin-top: 0; padding-inline: 18px; }
@media (prefers-reduced-motion: reduce) { .faq-item summary::after { transition: none; } }

/* ── galería + visor deslizable ─────────────────────────────────────── */
.galeria-grilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px) { .galeria-grilla { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .galeria-grilla { grid-template-columns: repeat(4, 1fr); } }
.galeria-foto {
  position: relative; padding: 0; border: 1px solid var(--borde); border-radius: 14px; overflow: hidden;
  aspect-ratio: 1 / 1; background: var(--panel-alt); cursor: zoom-in; display: block;
}
.galeria-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .galeria-foto:hover img { transform: scale(1.05); } }
.visor {
  position: fixed; inset: 0; z-index: 500; background: rgba(0, 0, 0, 0.94);
  display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.visor-cab { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 0 20px; flex: none; }
.visor-n { font-size: 15px; font-weight: 700; color: var(--texto-tenue); }
.visor-x, .visor-flecha {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(20, 20, 20, 0.7); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.visor-x svg, .visor-flecha svg { width: 22px; height: 22px; }
.visor-escena { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 8px 64px; }
.visor-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.visor-img.arrastrando { cursor: grabbing; }
.visor-flecha { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; }
.visor-prev { left: 8px; }
.visor-sig { right: 8px; }
.visor-ayuda { flex: none; margin: 0; padding: 8px 16px 14px; text-align: center; font-size: 14px; color: var(--texto-mudo); }
@media (max-width: 639px) {
  .visor-escena { padding: 8px 8px; }
  .visor-flecha { top: auto; bottom: 8px; transform: none; }
  .visor-ayuda { padding-bottom: 66px; }
}

/* ═══ Checkout de membresías v2 — pasos, progreso, total en vivo ═════════
   `.chk-v2` solo lo lleva la hoja de membresías (js/checkout.js). La del
   pedido de la tienda usa las mismas piezas de progreso pero mantiene su
   cajón lateral. */
.chk-overlay { visibility: hidden; transition: opacity var(--dur-hover) var(--ease-out), visibility 0s linear var(--dur-hover); }
.chk-overlay.chk-abierto { visibility: visible; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .chk-overlay { transition: none; } }

.chk-cab { position: relative; }
.chk-paso { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--texto-tenue); padding-right: 52px; }
.chk-barra { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 14px; }
.chk-barra-3 { grid-template-columns: repeat(3, 1fr); }
.chk-barra i { height: 4px; border-radius: 999px; background: var(--borde); display: block; transition: background-color var(--dur-hover) ease; }
.chk-barra i.hecho { background: rgba(var(--marca-rgb), 0.55); }
.chk-barra i.actual { background: var(--marca); }
.chk-modal .chk-cerrar { top: 6px; right: 6px; width: 44px; height: 44px; font-size: 22px; }

.chk-modal.chk-v2 {
  padding: 0; display: flex; flex-direction: column; overflow: hidden;
  max-height: min(92vh, 92dvh);
}
@media (min-width: 640px) { .chk-modal.chk-v2 { padding: 0; } }
.chk-v2 .chk-cab { padding: 18px 20px 0; flex: none; }
.chk-v2 .chk-cerrar { top: 8px; right: 8px; }
.chk-cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px 20px; -webkit-overflow-scrolling: touch; }
.chk-pie {
  flex: none; padding: 12px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--borde); background: var(--panel);
}
/* el título de la hoja sigue siendo texto de interfaz (Outfit 700), como cuando era un <p>:
   ahora es un <h2> (para lectores de pantalla) y no debe heredar Anton con negrita sintética */
.chk-titulo { outline: none; font-family: inherit; font-weight: 700; letter-spacing: 0; line-height: 1.25; }
.chk-v2 .chk-titulo { font-size: 22px; padding-right: 0; margin: 0 0 6px; }
.chk-total { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.chk-total > span { font-size: 14px; color: var(--texto-tenue); font-weight: 600; }
.chk-total small { display: block; font-size: 14px; color: var(--texto-mudo); font-weight: 400; }
.chk-total b { font-family: Anton, system-ui, sans-serif; font-weight: 400; font-size: 1.9rem; color: var(--texto); }
.chk-botones { display: flex; gap: 10px; }
.chk-botones .chk-btn { flex: 1 1 auto; width: auto; min-height: 52px; }
.chk-btn-atras {
  flex: none; min-height: 52px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--borde);
  background: transparent; color: var(--texto-tenue); font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.chk-btn-atras:only-child { flex: 1 1 auto; }
.chk-btn-enlace { display: flex; align-items: center; justify-content: center; min-height: 52px; text-decoration: none; width: 100%; }
.chk-btn:disabled { cursor: default; }
.chk-btn, .chk-btn-secundario, .chk-btn-atras, .chk-copiar, .chk-campo input, .chk-metodo-fila, .chk-banco { font-family: inherit; }
.carrito-btn-pagar { font-family: inherit; }

/* plan y duración: opciones grandes, con radio nativo (teclado y lector) */
.chk-opciones { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 6px; }
.chk-opcion { position: relative; display: block; }
.chk-opcion input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.chk-opcion-caja {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 12px 16px;
  border: 1px solid var(--borde); border-radius: 12px; background: var(--panel-alt);
  transition: border-color var(--dur-hover) ease, background-color var(--dur-hover) ease;
}
.chk-opcion input:checked + .chk-opcion-caja { border-color: var(--marca); box-shadow: 0 0 0 1px var(--marca) inset; background: rgba(var(--marca-rgb), 0.1); }
.chk-opcion input:focus-visible + .chk-opcion-caja { outline: 2px solid var(--marca); outline-offset: 3px; }
.chk-opcion-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.chk-opcion-txt b { font-size: 16px; }
.chk-opcion-txt span { font-size: 14px; color: var(--texto-tenue); }
.chk-opcion-txt em { font-style: normal; font-size: 14px; font-weight: 700; color: var(--marca); }
.chk-opcion strong { font-family: Anton, system-ui, sans-serif; font-weight: 400; font-size: 1.4rem; flex: none; }

/* campos con mensaje propio */
.chk-campo label, .chk-campo .chk-etiqueta { display: block; font-size: 14px; color: var(--texto-tenue); margin-bottom: 6px; font-weight: 600; }
.chk-campo input:not([type=file]) { min-height: 50px; }
.chk-campo input.chk-malo { border-color: var(--cerrado); }
.chk-campo input.chk-bueno { border-color: rgba(var(--marca-rgb), 0.6); }
.chk-campo-e { margin: 6px 0 0; font-size: 14px; line-height: 1.4; color: var(--cerrado); }
.chk-campo-e:empty { display: none; }
.chk-campo-e.chk-aviso-campo { color: var(--aviso); }
.chk-ayuda-inline { font-weight: 400; color: var(--texto-mudo); font-size: 14px; }
.chk-error { color: var(--cerrado); outline: none; }

/* formas de pago y bancos: fila con ícono */
.chk-metodo-fila, .chk-banco {
  flex-direction: row; align-items: center; gap: 14px; min-height: 64px; font-family: inherit;
}
.chk-metodo-txt { display: flex; flex-direction: column; gap: 2px; text-align: left; min-width: 0; }
.chk-metodo-txt strong { font-size: 16px; }
.chk-metodo-txt span { font-size: 14px; color: var(--texto-tenue); }
.chk-ico { width: 22px; height: 22px; flex: none; }
.chk-ico-grande { width: 26px; height: 26px; color: var(--marca); }
.chk-ico-flecha { margin-left: auto; color: var(--texto-mudo); width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) {
  .chk-metodo-fila:hover, .chk-banco:hover { border-color: rgba(var(--marca-rgb), 0.5); }
}
.chk-monto { margin: 6px 0 12px; font-size: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chk-monto b { color: var(--marca); font-size: 1.3rem; }
.chk-pasos-lista { margin: 14px 0; padding-left: 20px; color: var(--texto-tenue); font-size: 14px; line-height: 1.6; }
.chk-copiar { min-height: 44px; padding: 0 14px; font-size: 14px; font-family: inherit; }
.chk-cuenta { font-size: 15px; }
.chk-cuenta-nota { font-size: 14px; }

/* foto del comprobante */
.chk-campo { position: relative; }
.chk-archivo { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.chk-subida {
  display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 14px 16px; cursor: pointer;
  border: 1.5px dashed rgba(var(--marca-rgb), 0.55); border-radius: 12px; background: var(--panel-alt); color: var(--texto);
}
.chk-subida b { display: block; font-size: 16px; }
.chk-subida small { display: block; font-size: 14px; color: var(--texto-mudo); }
.chk-subida-lista { border-style: solid; }
.chk-archivo:focus-visible + .chk-subida { outline: 2px solid var(--marca); outline-offset: 3px; }
.chk-previa { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px; background: var(--panel-alt); border-radius: 12px; }
.chk-previa img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; flex: none; background: var(--fondo); }
.chk-previa-txt { min-width: 0; display: flex; flex-direction: column; }
.chk-previa-txt b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chk-previa-txt small { font-size: 14px; color: var(--texto-mudo); }
.chk-leyendo, .chk-cargando { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 14px; color: var(--texto-tenue); }
.chk-spinner-claro { border-color: rgba(255, 255, 255, 0.22); border-top-color: var(--marca); margin-right: 0; }

/* pantalla final */
.chk-hecho { display: flex; justify-content: center; margin: 14px 0 12px; }
.chk-ico-hecho { width: 64px; height: 64px; padding: 16px; border-radius: 50%; background: var(--marca); color: var(--marca-sobre); stroke-width: 3; }
@media not (prefers-reduced-motion: reduce) {
  .chk-ico-hecho { animation: chkPop 380ms var(--ease-out); }
  @keyframes chkPop { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
}
.chk-v2 .chk-hecho + .chk-titulo, .chk-v2 .chk-hecho ~ .chk-sub { text-align: center; }
.chk-pin { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.chk-nota { font-size: 14px; }
.chk-resumen p { font-size: 14px; }
.chk-btn-secundario { min-height: 48px; font-family: inherit; }

/* ── carrito de la tienda: dedos y textos ───────────────────────────── */
.carrito-cabecera button { width: 44px; height: 44px; }
.carrito-item { flex-wrap: wrap; }
.carrito-item-info { flex: 1 1 140px; }
.carrito-item-info b { font-size: 15px; }
.carrito-item-info span { font-size: 14px; }
.carrito-item-controles { flex: 1 1 100%; justify-content: flex-end; }
@media (min-width: 640px) {
  .carrito-item-controles { flex: none; }
}
.carrito-stepper { gap: 2px; padding: 2px; }
.carrito-stepper button { width: 44px; height: 44px; }
.carrito-stepper button svg { width: 16px; height: 16px; }
.carrito-stepper span { min-width: 28px; font-size: 16px; }
.carrito-item-quitar { width: 44px; height: 44px; }
.carrito-item-quitar svg { width: 18px; height: 18px; }
.carrito-badge { min-width: 22px; height: 22px; font-size: 13px; }
.carrito-wa-discreta.btn-wa-grande { min-height: 44px; font-size: 14px; padding: 10px 14px; }
.carrito-vaciar { min-height: 44px; font-size: 14px; padding: 10px 14px; }
.carrito-btn-pagar { min-height: 52px; }

/* ── piso de tamaños: textos ≥ 14 px (rótulos en mayúsculas ≥ 13 px) y
      objetivos táctiles ≥ 44 px ───────────────────────────────────────── */
.ceja, .hero-etiqueta { font-size: 13px; }
.precio-plan span, .duracion-plan, .equiv-plan, .ahorro-plan, .nota-planes,
.chip-numero, .tarjeta-sede .sede-sector, .tienda-proximamente,
.precio-producto, .btn-ver-tienda, .producto-foto-nombre,
.chk-campo label, .chk-nota, .chk-metodo-fila span, .chk-banco span, .chk-cuenta-nota,
.chk-qr-link span, .chk-copiar, .chk-resumen p, .chk-sub { font-size: 14px; }
.producto-foto-nombre { min-height: calc(14px * 1.3 * 2); }
.tarjeta-plan h3 { font-size: 14px; }
.btn-plan, .btn-plan-hero {
  display: flex; align-items: center; justify-content: center; min-height: 44px; font-size: 14px; text-decoration: none;
}
.btn-plan-hero { min-height: 52px; font-size: 15px; font-weight: 800; }
.btn-agregar { width: 44px; height: 44px; }
.btn-agregar svg { width: 18px; height: 18px; }
.app-tab, .app-marca-btn { min-height: 44px; font-size: 14px; }
.nav-marca { min-height: 44px; }
.nav-links a { padding: 13px 0; min-width: 44px; display: inline-flex; justify-content: center; }
.nav-cta { min-height: 44px; font-size: 14px; padding: 12px 14px; }
.nav-burger { width: 44px; height: 44px; }
/* el área táctil crece con relleno y margen negativo: el texto no se mueve de su sitio */
.lista-datos a { display: inline-flex; align-items: center; padding: 13px 0; margin: -13px 0; }
footer.pie { font-size: 14px; }
footer.pie a { display: inline-flex; align-items: center; padding: 14px 0; margin: -14px 0; }
.nav-menu-movil-lista a { min-height: 44px; display: flex; align-items: center; }

/* Agente de IA (mismos controles, con tamaño de dedo y letra legible) */
.agente-saludo, .agente-saludo span, .agente-info b, .agente-msg, .agente-sis, .agente-info span,
.agente-chip, .agente-wa-top, .agente-av { font-size: 14px; }
.agente-chip-ia { font-size: 13px; text-transform: uppercase; }
.agente-hora { font-size: 14px; }
.agente-cabecera button { width: 44px; height: 44px; min-width: 44px; flex: none; }
.agente-chip { min-height: 44px; }
.agente-wa-top { min-height: 44px; }
.agente-barra input { min-height: 44px; }
#agente-enviar { width: 44px; height: 44px; }
/* por debajo de 360 px el botón de WhatsApp de la barra queda solo con el ícono
   (44×44, el nombre sigue en el texto oculto para lectores de pantalla): así el
   nombre del gimnasio ya no se corta a 320–360 px */
@media (max-width: 359px) {
  .nav-cta { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .nav-cta svg { width: 22px; height: 22px; }
  .nav-cta span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 380px) {
  .chk-v2 .chk-cab { padding-inline: 16px; }
  .chk-cuerpo { padding-inline: 16px; }
  .chk-pie { padding-inline: 16px; }
  .chk-botones { gap: 8px; }
  .chk-btn-atras { padding: 0 12px; }
}