/* Mitic · ajustes de la revisión UX/UI completa (2026-10-20). Se carga AL FINAL: corrige densidad, coherencia y
   movimiento sin tocar las hojas base. Cada bloque dice qué hallazgo resuelve. */

/* ── Encabezado: el enlace activo deja de competir con el botón principal (subrayado en vez de cápsula) ── */
.nav-ind{background:transparent;border-color:transparent;box-shadow:none}
.nav-ind::after{content:'';position:absolute;left:14px;right:14px;bottom:3px;height:2px;border-radius:2px;background:var(--marca)}

/* ── Hero: el fondo fotográfico baja de contraste para que el panel del dueño mande ── */
.isla-foto{filter:saturate(.75) brightness(.78)}

/* ── Problema: cuadrícula quieta en escritorio; carrusel MANUAL de una tarjeta completa en móvil ── */
.pasarela .pasarela-track,.pasarela:not(.mueve) .pasarela-track{display:block;width:auto;max-width:calc(1200px + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter);animation:none}
.pasarela .pain-fila,.pasarela:not(.mueve) .pain-fila{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.pasarela .pain-fila .pain-item,.pasarela:not(.mueve) .pain-fila .pain-item{width:auto;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:20px 20px 22px}
.pain-fila .card-ic{display:grid;width:40px;height:40px;margin:0 0 6px;background:rgba(242,239,233,.12);color:var(--tinta-inv);--ic-acc:#FFD23F}
.sec-marca .pain-fila .pain-stat{font-size:clamp(34px,3vw,44px);margin:0 0 2px}
.sec-marca .pain-fila h3{align-self:auto}
.sec-marca .pain-fila p{max-width:none}
.pasarela-ctrl{display:none}
@media(max-width:820px){.pasarela .pain-fila,.pasarela:not(.mueve) .pain-fila{grid-template-columns:1fr 1fr}}
@media(max-width:620px){
  .pasarela .pain-fila,.pasarela:not(.mueve) .pain-fila{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
  .pain-fila::-webkit-scrollbar{display:none}
  .pasarela .pain-fila .pain-item{flex:0 0 100%;scroll-snap-align:start}
  .pasarela-ctrl{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:14px}
  .pasarela-btn{width:44px;height:44px;border-radius:50%;border:1px solid rgba(242,239,233,.4);background:rgba(26,24,22,.25);color:#F2EFE9;font-size:22px;line-height:1;cursor:pointer}
  .pasarela-btn:focus-visible{outline:3px solid #fff;outline-offset:2px}
  .pasarela-btn:disabled{opacity:.35;cursor:default}
  .pasarela-pos{font-family:var(--f-mono);font-size:13px;color:#F2EFE9;min-width:5ch;text-align:center}
}

/* ── Ventajas: zoom de la foto casi imperceptible; en móvil, acordeón (título visible, detalle al tocar) ── */
html.fx-on .feat-foto:hover img{scale:1.02}
.feat-tg{all:unset;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;width:100%;font:inherit;color:inherit}
.feat-tg::after{content:'+';font-family:var(--f-mono);font-weight:600;color:var(--marca-txt);flex:0 0 auto}
.feat-tg[aria-expanded="true"]::after{content:'−'}
.feat-tg:focus-visible{outline:3px solid var(--foco);outline-offset:3px;border-radius:4px}
@media(max-width:620px){.feat-list li.feat-cerrado p{display:none}}

/* ── Tabla de funciones: leyenda y primera columna fija al desplazar en móvil ── */
.cmp-leyenda{margin:0 0 10px;font-size:13px;color:var(--tinta-3)}
.cmp-table th[scope="row"]{position:sticky;left:0;z-index:1;background:var(--superficie)}

/* ── Cómo funciona: verbos en naranja, QR rotulado como ejemplo, aire entre el paso 3 y el QR en móvil ── */
.how-steps .verbo{color:var(--marca-txt)}
.qr-ejemplo{margin-top:6px;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#C2410C}
@media(max-width:920px){.how-qr{margin-top:36px}}

/* ── Recorrido: título grande de la pantalla activa; pestañas en una sola fila en móvil ── */
.esc-titulo{margin:0 0 16px;text-align:center;font-size:clamp(20px,1.4vw + 12px,28px);font-weight:800;color:#fff;min-height:1.3em}
.esc-escena:focus-visible{outline:3px solid #fff;outline-offset:8px;border-radius:24px}
@media(max-width:620px){
  .esc-cab .tour-tabs{display:flex;flex-wrap:nowrap;width:100%;border-radius:999px}
  .esc-cab .tour-tab{flex:1 1 0;min-width:0;padding:0 8px;font-size:12px;white-space:nowrap}
}

/* ── Precios: frase de apoyo para sedes y usuarios; en móvil el plan recomendado va primero ── */
.pz-tam-sub{margin:14px 0 0;font-size:13.5px;color:var(--tinta-3)}
.pz-tam-extra{margin-top:8px}
@media(max-width:620px){.pz-planes{display:flex;flex-direction:column}.pz-plan.is-reco{order:-1}}

/* ── Preguntas: ventana más baja (las respuestas cortas no se pierden) e indicador +/− además del color ── */
.fq-cuerpo{min-height:220px}
.fq-q{display:flex;align-items:center;justify-content:space-between;gap:12px}
.fq-q::after{content:'+';font-family:var(--f-mono);font-weight:600;flex:0 0 auto;opacity:.8}
.fq-q[aria-expanded="true"]::after{content:'−'}

/* ── Cierre: sin clip de video (la foto oscura basta) y velo más denso en móvil para leer en cualquier recorte ── */
.cta-clip{display:none}
@media(max-width:720px){.cta-scrim{background:linear-gradient(to top,rgba(26,24,22,.96) 0%,rgba(26,24,22,.88) 50%,rgba(26,24,22,.82) 100%)}}

/* ── Movimiento (revisión 2026-10-20): entrada solo la primera vez y sin desenfoque; menos brillo, flotado, pulsos ── */
html.js.fx-on .reveal,html.js.fx-on .stagger>*,html.fx-on .sr{filter:none;translate:0 24px;scale:1;transition:opacity .6s var(--ease-out),translate .7s cubic-bezier(.22,1,.36,1),scale .7s cubic-bezier(.22,1,.36,1)}
html.js.fx-on .reveal.in,html.js.fx-on .stagger.in>*,html.fx-on .sr.in{translate:0 0;scale:1}
html.fx-on .sr-izq:not(.in){translate:-28px 0}
html.fx-on .sr-zoom:not(.in),html.js.fx-on .how-qr.reveal:not(.in),html.js.fx-on .esc-paneles.reveal:not(.in){scale:.95;translate:0 16px}
html.js.fx-on .feat-foto.reveal:not(.in){translate:-32px 0;scale:1}
/* luz del cursor más tenue */
html.fx-on .sec-hierro{background:radial-gradient(520px circle at var(--fx-x,50%) var(--fx-y,40%),rgba(234,88,12,.08),transparent 62%),#1A1816}
html.fx-on .sec-marca{background:radial-gradient(560px circle at var(--fx-x,50%) var(--fx-y,40%),rgba(255,210,63,.07),transparent 62%),var(--marca-hover)}
/* flotado de 4 px (redefine la misma animación) */
@keyframes fx-flota{0%,100%{translate:0 0}50%{translate:0 -4px}}
/* destello solo en el botón principal del héroe y del cierre, y sin el latido de entrada */
html.fx-on .btn-primario{background-image:none}
html.fx-on .hero .btn-primario,html.fx-on .cta .btn-primario{background-image:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.32) 50%,transparent 65%)}
html.fx-on .hero .btn-primario{animation:none}
/* cinta de obra más lenta; brasas quietas; el número de cada paso late una sola vez */
html.fx-on .franja::after{animation-duration:7s}
html.fx-on .sec-marca::before,html.fx-on .prim-side::after,html.fx-on .esc-paneles::before{animation:none}
html.fx-on .how-steps.in .how-n{animation-iteration-count:1}
.feat-list li>div{flex:1;min-width:0}

/* ── "También incluye" (2026-10-20): beneficios extra reales, en una franja compacta bajo las ventajas ── */
.tambien{margin:28px 0 20px;padding:18px 20px;border-radius:18px;background:var(--superficie);border:1px solid var(--borde)}
.tambien-t{margin:0 0 12px;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--marca-txt)}
.tambien-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 20px}
.tambien-l li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.45;color:var(--tinta-2)}
.tambien-l b{display:block;color:var(--tinta);font-size:14px}
.tambien-l .ic{width:18px;height:18px;flex:0 0 auto;margin-top:2px;color:var(--marca-txt)}
@media(max-width:920px){.tambien-l{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.tambien-l{grid-template-columns:1fr}}

/* ── Cómo funciona / Gym Code (2026-10-26, "ya no se escanea"): la tarjeta muestra el código ESCRITO en un campo
   de la app (sin QR) y el flujo real: escribe → el gym aprueba → carnet → asistencia desde el carnet ── */
.gc-campo-et{margin:4px 0 10px;font-size:13px;color:var(--tinta-3)}
.gc-campo{display:flex;align-items:center;justify-content:center;gap:4px;margin:0 auto 12px;padding:16px 14px;border-radius:12px;background:#FBFAF7;border:1.5px dashed rgba(234,88,12,.55)}
.gc-campo .qr-code{font-size:26px}
.gc-campo-cursor{width:2px;height:26px;background:var(--marca);animation:gc-parpadeo 1.1s steps(1) infinite}
@keyframes gc-parpadeo{50%{opacity:0}}
.gc-flujo{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;counter-reset:gc}
.gc-flujo li{counter-increment:gc;font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;padding:4px 8px;border-radius:999px;border:1px solid var(--borde-fuerte);color:var(--tinta-2)}
.gc-flujo li::before{content:counter(gc) " · ";color:#C2410C}
html[data-theme="dark"] .gc-campo{background:rgba(255,255,255,.04);border-color:rgba(251,146,60,.55)}
html[data-theme="dark"] .gc-flujo li::before{color:#FB923C}
@media (prefers-reduced-motion: reduce){.gc-campo-cursor{animation:none}}
/* La tarjeta vive en .sec-hierro (tintas claras) pero en tema claro es de "papel": tintas fijas oscuras. */
.sec-hierro .qr-card .gc-campo-et{color:rgba(26,24,22,.62)}
.sec-hierro .qr-card .gc-flujo li{color:rgba(26,24,22,.78);border-color:rgba(26,24,22,.2)}
html[data-theme="dark"] .sec-hierro .qr-card .gc-campo-et{color:var(--tinta-3)}
html[data-theme="dark"] .sec-hierro .qr-card .gc-flujo li{color:var(--tinta-2);border-color:var(--borde-fuerte)}