/* arcg.css — estilos de la landing ArcG (extraídos de arcg.html). NO inline. */
/* ============================================================
   ArcG 2030 — Sistema oscuro futurista naranja
   Fondo #0A0712 · Neón #EA580C/#FB923C · Tipografía Space Grotesk + Space Mono + Inter
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Marca naranja */
  --O:#EA580C;--Ol:#FB923C;--Od:#C2410C;--Oy:#FBBF24;
  /* Morado de apoyo */
  --P:#6C52E3;--Pl:#9B7FF8;
  /* Fondos oscuros */
  --BG:#0A0712;--BG2:#0C0910;--BG3:#110E18;--BG4:#16121F;
  /* Superficies glass */
  --S1:rgba(var(--GLr),.03);--S2:rgba(var(--GLr),.05);
  /* Bordes */
  --BD:rgba(var(--GLr),.08);--BD2:rgba(var(--GLr),.13);--BDO:rgba(234,88,12,.35);
  /* Texto */
  --TX:#FFFDFB;--MT:rgba(var(--TXr),.62);--MT2:rgba(var(--TXr),.52);
  /* Sombras */
  --SH:0 2px 20px rgba(0,0,0,.4);--SH2:0 8px 48px rgba(0,0,0,.6);
  /* Glows naranja */
  --GO:rgba(234,88,12,.28);--GOB:0 0 0 1px rgba(234,88,12,.3),0 8px 32px rgba(234,88,12,.25);
  /* Herencia de color para mockup interno */
  --W:#0F0D14;--W2:#161220;--DK:#060409;--DK2:#0C0910;--DK3:#110E18;
  /* Canales RGB para rgba() temables */
  --TXr:255,250,245;   /* tinta (texto) */
  --BGr:10,7,18;       /* fondo de página */
  --GLr:255,255,255;   /* glass / bordes claros */
  /* Superficies puntuales (mockup, tarjetas, footer) */
  --WINBG:#0F0C18;--WINBAR:#0C0A16;--CARDBG:#12101C;
  --QR1:#1A1526;--QR2:#110E1C;--FOOTBG:#060409;
}
html{scroll-behavior:auto;color-scheme:dark}
body{font-family:'Inter',system-ui,sans-serif;background:var(--BG);color:var(--TX);overflow-x:hidden;-webkit-font-smoothing:antialiased}
/* Textura blueprint grid sutil naranja sobre todo el fondo */
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(234,88,12,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(234,88,12,.04) 1px,transparent 1px);
  background-size:44px 44px;mask-image:radial-gradient(ellipse 80% 80% at 50% 20%,#000 40%,transparent 100%)}
::-webkit-scrollbar{width:3px}::-webkit-scrollbar-thumb{background:var(--O);border-radius:2px}
[data-lucide]{width:16px;height:16px;stroke-width:2;vertical-align:middle;display:inline-block}
.skip-link{position:absolute;left:-9999px;top:8px;z-index:9999;background:#EA580C;color:#fff;padding:10px 16px;border-radius:8px;font-weight:700;text-decoration:none}
.skip-link:focus{left:8px}
a{color:inherit}
:focus-visible{outline:2px solid var(--O);outline-offset:3px;border-radius:4px}
/* 1400px: en monitores grandes el contenido ocupaba solo el centro (se veía
   agrupado); ahora respira como las landings de referencia (Stripe). */
.wrap{max-width:1400px;margin:0 auto;padding:0 32px;position:relative;z-index:1}
/* Color naranja sólido en lugar de gradient-text (accesible) */
.go{color:var(--Ol)}
.tc{text-align:center}
h1,h2,h3{text-wrap:balance;font-family:'Space Grotesk','Inter',system-ui,sans-serif}
p{text-wrap:pretty}
/* Eyebrow mono con punto neón */
.eyebrow{font-family:'Space Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--Ol);margin-bottom:14px;display:inline-flex;align-items:center;gap:8px}
.eyebrow::before{content:'// ';color:var(--O);opacity:.7}
h2{font-family:'Space Grotesk','Inter',system-ui,sans-serif;font-size:clamp(28px,3.6vw,50px);font-weight:700;letter-spacing:-1.8px;line-height:1.07;margin-bottom:14px}
.sec-sub{font-size:16px;color:var(--MT);line-height:1.7;max-width:560px}
/* Estados iniciales de animación: SOLO si hay JS (html.js). Sin JS todo queda visible. */
html.js .reveal{opacity:0;transform:translateY(34px)}
html.js .stagger>*{opacity:0;transform:translateY(26px)}

/* ── NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:300;height:62px;display:flex;align-items:center;
  padding:0 24px;background:rgba(var(--BGr),0);backdrop-filter:blur(20px);border-bottom:1px solid transparent;transition:.4s}
nav.scrolled{background:rgba(var(--BGr),.92);border-bottom:1px solid var(--BD);box-shadow:0 4px 32px rgba(0,0,0,.5)}
.nav-in{max-width:1400px;margin:0 auto;width:100%;padding:0 32px;display:flex;align-items:center;justify-content:space-between}
.nl{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:700;font-size:17px;letter-spacing:-.4px;color:var(--TX);font-family:'Space Grotesk','Inter',system-ui,sans-serif}
.nl b{color:var(--Ol)}.nl span{font-weight:400;opacity:.85}
.nav-links{display:flex;gap:26px;list-style:none}
.nav-links a{text-decoration:none;font-family:'Space Mono',monospace;font-size:11.5px;font-weight:400;color:var(--MT);transition:.2s;letter-spacing:.5px}
.nav-links a:hover{color:var(--Ol)}
.nav-r{display:flex;align-items:center;gap:10px}
.nav-back{font-family:'Space Mono',monospace;font-size:11px;color:var(--MT2);text-decoration:none;display:flex;align-items:center;gap:5px;transition:.2s;letter-spacing:.3px}
.nav-back:hover{color:var(--Ol)}
/* Iniciar sesión — botón fantasma (consistente con el nav de ArcGestor). Antes salía SIN estilo (subrayado). */
.nav-login{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--BD2);color:var(--MT);font-family:'Space Mono',monospace;font-size:11px;font-weight:400;padding:8px 15px;border-radius:8px;text-decoration:none;transition:all .2s;letter-spacing:.3px;white-space:nowrap}
.nav-login:hover{border-color:var(--Ol);color:var(--TX)}
.nav-login svg,.nav-login [data-lucide]{width:14px;height:14px}
/* Botón primario naranja con glow */
.btn-o{display:inline-flex;align-items:center;gap:8px;background:var(--O);color:#fff;font-family:'Space Mono',monospace;font-weight:700;font-size:12px;padding:10px 20px;border-radius:8px;text-decoration:none;border:none;cursor:pointer;transition:.25s;box-shadow:0 4px 16px rgba(234,88,12,.4),0 0 0 1px rgba(234,88,12,.2);letter-spacing:.4px}
.btn-o:hover{background:var(--Od);transform:translateY(-2px);box-shadow:0 10px 32px rgba(234,88,12,.55),0 0 0 1px rgba(234,88,12,.4)}
/* Botón ghost */
.btn-gh{display:inline-flex;align-items:center;gap:8px;background:var(--S1);color:var(--TX);font-family:'Space Mono',monospace;font-weight:400;font-size:12px;padding:10px 18px;border-radius:8px;text-decoration:none;border:1px solid var(--BD2);cursor:pointer;transition:.2s;letter-spacing:.3px}
.btn-gh:hover{border-color:var(--BDO);color:var(--Ol);background:rgba(234,88,12,.06)}
/* ── Menú móvil ── */
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;background:var(--S1);border:1px solid var(--BD);border-radius:8px;cursor:pointer;padding:0 10px;flex-shrink:0;transition:border-color .2s}
.nav-burger:hover{border-color:var(--BDO)}
.nav-burger span{display:block;height:2px;width:100%;background:var(--TX);border-radius:2px;transition:transform .3s,opacity .2s}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mm-overlay{position:fixed;inset:0;background:rgba(var(--BGr),.72);backdrop-filter:blur(4px);z-index:590;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.mm-overlay.open{opacity:1;visibility:visible}
.mobile-menu{position:fixed;top:0;right:0;bottom:0;width:min(86vw,358px);background:var(--BG4);border-left:1px solid var(--BD);z-index:600;box-shadow:-20px 0 80px rgba(0,0,0,.7);transform:translateX(100%);transition:transform .38s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;padding:80px 22px 26px;overflow-y:auto;gap:2px}
.mobile-menu.open{transform:none}
.mm-x{position:absolute;top:20px;right:20px;width:38px;height:38px;border:1px solid var(--BD);background:transparent;border-radius:8px;cursor:pointer;color:var(--MT);display:flex;align-items:center;justify-content:center}
.mm-x:hover{color:var(--Ol);border-color:var(--BDO)}
.mm-link{display:flex;align-items:center;padding:14px 12px;font-family:'Space Mono',monospace;font-size:13px;font-weight:400;color:var(--TX);text-decoration:none;border-radius:8px;transition:background .15s;letter-spacing:.3px}
.mm-link:hover{background:var(--S2)}
.mm-foot{margin-top:auto;padding-top:20px;display:flex;flex-direction:column;gap:10px}
.mm-foot a{width:100%;justify-content:center;text-align:center;padding:13px;font-size:12px}
.mm-back{display:inline-flex;align-items:center;gap:6px;color:var(--MT);font-family:'Space Mono',monospace;font-size:11px;font-weight:400;text-decoration:none;border:1px solid var(--BD2);border-radius:8px;padding:10px 16px;letter-spacing:.3px}
.mm-back:hover{border-color:var(--BDO);color:var(--Ol)}

/* ── HERO ── */
#hero{min-height:100vh;display:flex;align-items:center;padding:110px 0 70px;position:relative;overflow:hidden;background:var(--BG)}
/* Aurora futurista oscura */
#hero::before{content:'';position:absolute;inset:-10%;z-index:0;pointer-events:none;
  background:radial-gradient(38% 46% at 82% 14%,rgba(234,88,12,.18),transparent 62%),
            radial-gradient(34% 42% at 6% 86%,rgba(108,82,227,.14),transparent 62%),
            radial-gradient(30% 38% at 62% 92%,rgba(251,146,60,.10),transparent 60%);
  animation:heroAurora 18s ease-in-out infinite alternate;will-change:transform}
@keyframes heroAurora{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-3%,2.5%,0) scale(1.14)}}
@media(prefers-reduced-motion:reduce){#hero::before{animation:none}}
/* canvas de partículas naranja sobre oscuro */
#hero{background:var(--BG) !important}
#hero .hero-ptx{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;opacity:.7}
/* Orbe propio del hero RETIRADO (2026-08): el objeto que sigue al mouse ahora es la
   luna compartida (#cur.x-moon en enhance.css/js, piel oscura teñida por --x-accent),
   igual que en las demás landings. La flecha de cristal vuelve a verse en el hero. */
#hero .hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,var(--BG) 0%,rgba(var(--BGr),.92) 26%,rgba(var(--BGr),.6) 50%,rgba(var(--BGr),.2) 72%,transparent 100%),
            linear-gradient(to top,rgba(var(--BGr),.7),transparent 28%,transparent 84%,rgba(var(--BGr),.5) 100%)}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
/* Lockup de marca ARC × MITIC (estilo colaboración deportiva): la plataforma
   madre en trazo fino, la × en naranja, el producto en peso completo. */
.brand-lockup{display:flex;align-items:baseline;gap:14px;font-family:'Space Grotesk','Inter',sans-serif;font-size:clamp(20px,1.9vw,30px);letter-spacing:4px;margin-bottom:18px}
.bl-arc{font-weight:400;color:var(--MT)}
.bl-x{font-weight:400;color:var(--O);font-size:.8em;transform:translateY(-2px)}
.bl-mitic{font-weight:700;color:var(--TX)}
.h-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(234,88,12,.10);border:1px solid rgba(234,88,12,.3);border-radius:100px;padding:5px 14px;font-family:'Space Mono',monospace;font-size:10px;font-weight:700;color:var(--Ol);letter-spacing:.8px;text-transform:uppercase;margin-bottom:22px}
.bdot{width:6px;height:6px;border-radius:50%;background:var(--O);animation:blink 2s infinite;box-shadow:0 0 6px var(--O)}
@keyframes blink{0%,100%{opacity:1;box-shadow:0 0 6px var(--O)}50%{opacity:.4;box-shadow:none}}
#hero h1{font-family:'Space Grotesk','Inter',system-ui,sans-serif;font-size:clamp(40px,5vw,68px);font-weight:700;line-height:1.04;letter-spacing:-2.5px;margin-bottom:20px}
.h-sub{font-size:17px;color:var(--MT);line-height:1.7;max-width:480px;margin-bottom:30px}
.h-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px}
.h-ctas .btn-o,.h-ctas .btn-gh{padding:13px 24px;font-size:12px}
.h-proof{display:flex;align-items:center;gap:12px}
.avs{display:flex}
.av{width:32px;height:32px;border-radius:50%;border:2px solid var(--BD);margin-left:-8px;background-size:cover;background-position:center;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.av:first-child{margin-left:0}
.proof-info{font-size:12.5px;color:var(--MT)}.proof-info strong{color:var(--TX)}
.stars{color:#FB923C;font-size:11px}

/* ── MOCKUP dashboard gym (oscuro futurista) ── */
.hero-vis{position:relative;perspective:1300px}
.mock-glow{position:absolute;inset:-50px;background:radial-gradient(ellipse at 60% 40%,rgba(234,88,12,.22),transparent 65%);z-index:0}
.win{position:relative;z-index:1;background:var(--WINBG);border-radius:16px;border:1px solid var(--BD);box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(234,88,12,.08);overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d;will-change:transform}
.fcard{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.row{transition:background .2s;border-radius:8px;cursor:default}
.row:hover{background:rgba(234,88,12,.06)}
.wa-btn{transition:.2s;border:none;font-family:inherit}
.wa-btn:hover{background:rgba(34,197,94,.2)}
.wa-btn.sending{background:rgba(234,88,12,.18);color:#FB923C}
.wa-btn.sent{background:rgba(34,197,94,.16);color:#4ADE80}
.row.resolved .rp{color:#4ADE80;font-weight:600}
.wa-spin{width:8px;height:8px;border:1.5px solid rgba(234,88,12,.3);border-top-color:#EA580C;border-radius:50%;animation:waSpin .6s linear infinite;display:inline-block}
@keyframes waSpin{to{transform:rotate(360deg)}}
/* toast de check-in */
.checkin-toast{position:absolute;left:-28px;top:-20px;z-index:6;display:flex;align-items:center;gap:9px;background:var(--CARDBG);border:1px solid var(--BD);border-radius:12px;padding:9px 13px;box-shadow:0 14px 40px rgba(0,0,0,.6),0 0 0 1px rgba(234,88,12,.1);opacity:0;transform:translateY(8px) scale(.96);transition:opacity .4s,transform .4s;pointer-events:none;white-space:nowrap}
.checkin-toast.show{opacity:1;transform:none}
.checkin-toast .ci-ic{width:30px;height:30px;border-radius:8px;background:rgba(234,88,12,.15);color:#EA580C;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.checkin-toast .ci-t{font-size:12px;font-weight:700;color:var(--TX);letter-spacing:-.2px}
.checkin-toast .ci-s{font-size:10.5px;color:var(--MT)}
@media(prefers-reduced-motion:reduce){.win,.fcard{transition:none!important}}
.win-bar{background:var(--WINBAR);padding:10px 14px;display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--BD)}
.dot{width:9px;height:9px;border-radius:50%}
.win-url{flex:1;background:rgba(var(--GLr),.05);border-radius:5px;padding:4px 10px;font-family:'Space Mono',monospace;font-size:9.5px;color:var(--MT2);text-align:center;margin:0 6px}
.win-b{padding:16px}
.win-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.win-t{font-size:12px;font-weight:700;color:var(--TX)}
.live{font-size:9.5px;color:#4ADE80;display:flex;align-items:center;gap:4px}
.live i{width:6px;height:6px;border-radius:50%;background:#22C55E;display:inline-block;box-shadow:0 0 5px #22C55E}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:13px}
.kpi{border:1px solid var(--BD);border-radius:9px;padding:10px;background:var(--S1)}
.kl{font-family:'Space Mono',monospace;font-size:8px;color:var(--MT2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px}
.kv{font-size:20px;font-weight:700;letter-spacing:-.5px;line-height:1;font-family:'Space Grotesk','Inter',system-ui,sans-serif}
.kc{font-size:8.5px;margin-top:2px}
.cg{color:#4ADE80}.cy{color:#FBBF24}.cr{color:#F87171}.cb{color:var(--Ol)}
.rows .row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--BD)}
.rows .row:last-child{border:none}
.rav{width:26px;height:26px;border-radius:50%;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
/* Iniciales del mockup: temables (antes inline, fallaban contraste en oscuro) */
.rav-a{background:rgba(34,197,94,.15);color:#4ADE80}
.rav-y{background:rgba(251,191,36,.13);color:#FBBF24}
.rav-r{background:rgba(248,113,113,.13);color:#F87171}
html[data-theme="light"] .rav-a{background:rgba(22,163,74,.10);color:#15803D}
html[data-theme="light"] .rav-y{background:rgba(180,83,9,.10);color:#B45309}
html[data-theme="light"] .rav-r{background:rgba(220,38,38,.10);color:#DC2626}
/* Solo lectores de pantalla */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.rinfo{flex:1}.rn{font-size:11px;font-weight:600;color:var(--TX)}.rp{font-size:9.5px;color:var(--MT)}
.rbg{font-size:8px;font-weight:700;padding:3px 8px;border-radius:5px}
.bg-a{background:rgba(34,197,94,.12);color:#4ADE80}.bg-y{background:rgba(251,191,36,.12);color:#FBBF24}.bg-r{background:rgba(248,113,113,.12);color:#F87171}
.wa-btn{font-size:8px;font-weight:700;padding:3px 8px;border-radius:5px;background:rgba(34,197,94,.10);color:#4ADE80;display:flex;align-items:center;gap:3px;cursor:pointer}
.fcard{position:absolute;z-index:5;background:var(--CARDBG);border:1px solid var(--BD);border-radius:13px;padding:10px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 12px 40px rgba(0,0,0,.6),0 0 0 1px rgba(234,88,12,.08);min-width:185px}
.fcard.f1{right:-26px;top:14px}.fcard.f2{left:-30px;bottom:-24px}
.fcard-ic{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fcard-t{font-size:11.5px;font-weight:700;color:var(--TX)}.fcard-s{font-size:9.5px;color:var(--MT);margin-top:1px}

/* ── SECTIONS ── */
section.sec{padding:84px 0;position:relative}
.sec-head{max-width:600px}
.sec-head.center{margin:0 auto;text-align:center}
.sec-head.center .eyebrow{justify-content:center}

/* ── ONDA (transición hero → pain) ── */
.wave-div{position:relative;height:88px;margin-top:-88px;z-index:5;pointer-events:none;line-height:0;overflow:hidden}
.wave-div svg{position:absolute;bottom:-1px;left:0;width:200%;height:100%}
.wave-div .wv1{fill:var(--BG)}
.wave-div .wv2{fill:rgba(234,88,12,.12)}
.wave-div .crest{fill:none;stroke:url(#waveg);stroke-width:2.5}
.wave-div .wv,.wave-div .crest{animation:waveFlow linear infinite;will-change:transform}
.wave-div .wv1,.wave-div .crest{animation-duration:13s}
.wave-div .wv2{animation-duration:19s;animation-direction:reverse;opacity:.9}
@keyframes waveFlow{from{transform:translateX(0)}to{transform:translateX(-1440px)}}
@media(prefers-reduced-motion:reduce){.wave-div .wv,.wave-div .crest{animation:none}}

/* ── PAIN ── */
#pain{background:var(--BG2)}
.ptx-band{position:relative;background:var(--BG3);min-height:380px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ptx-band::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 85% at 50% 50%,rgba(234,88,12,.14),transparent 70%)}
.ptx-canvas{display:block;width:100%;max-width:1000px;height:auto}
.ptx-cap{position:absolute;bottom:24px;left:0;right:0;text-align:center;font-family:'Space Mono',monospace;font-size:12px;color:rgba(var(--GLr),.3);font-weight:400;letter-spacing:.6px;z-index:2}
.pain-g{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:46px}
.pain-c{background:var(--S1);border:1px solid var(--BD);border-radius:16px;padding:26px 22px;transition:.25s;position:relative;overflow:hidden}
.pain-c::after{content:'';position:absolute;inset:0;border-radius:16px;background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(234,88,12,.08),transparent 42%);opacity:0;transition:opacity .3s;pointer-events:none}
.pain-c:hover{border-color:var(--BDO);transform:translateY(-4px);box-shadow:0 18px 44px -8px rgba(234,88,12,.2)}
.pain-c:hover::after{opacity:1}
.pain-ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;background:rgba(220,38,38,.10);border:1px solid rgba(220,38,38,.15)}
.pain-c h3{font-family:'Space Grotesk','Inter',system-ui,sans-serif;font-size:15px;font-weight:600;margin-bottom:8px;letter-spacing:-.2px;color:var(--TX)}
.pain-c p{font-size:13px;color:var(--MT);line-height:1.6}
.pain-stat{font-family:'Space Grotesk','Inter',system-ui,sans-serif;font-size:30px;font-weight:700;letter-spacing:-1.5px;color:var(--Ol);line-height:1;margin-bottom:6px;font-variant-numeric:tabular-nums}

/* ── FEATURES ── */
.feat-g{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
.feat-c{background:var(--S1);border:1px solid var(--BD);border-radius:18px;padding:28px 24px;transition:.28s;position:relative;overflow:hidden}
.feat-c::before{content:'';position:absolute;inset:0;z-index:0;background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(234,88,12,.12),transparent 42%);opacity:0;transition:opacity .3s;pointer-events:none}
.feat-c>*{position:relative;z-index:1}
.feat-c:hover{transform:translateY(-4px);border-color:var(--BDO);box-shadow:0 18px 44px -14px rgba(234,88,12,.3)}
.feat-c:hover::before{opacity:1}
@keyframes ctaPulse{0%,100%{box-shadow:0 8px 24px rgba(234,88,12,.4),0 0 0 1px rgba(234,88,12,.2)}50%{box-shadow:0 8px 32px rgba(234,88,12,.65),0 0 0 5px rgba(234,88,12,.10)}}
.cta-pulse{animation:ctaPulse 2.8s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.cta-pulse{animation:none}}
.feat-ic{width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;background:rgba(234,88,12,.10);border:1px solid rgba(234,88,12,.2)}
.feat-c h3{font-family:'Space Grotesk','Inter',system-ui,sans-serif;font-size:17px;font-weight:600;margin-bottom:9px;letter-spacing:-.2px;position:relative;color:var(--TX)}
.feat-c p{font-size:13.5px;color:var(--MT);line-height:1.62;position:relative}
.killer{display:inline-flex;align-items:center;gap:4px;background:rgba(234,88,12,.10);border:1px solid rgba(234,88,12,.25);color:var(--Ol);font-family:'Space Mono',monospace;font-size:8px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:3px 9px;border-radius:5px;margin-top:12px;position:relative}

/* ── GYM CODE ── */
#gymcode{background:var(--BG3);color:var(--TX);overflow:hidden;position:relative;border-top:1px solid var(--BD);border-bottom:1px solid var(--BD)}
#gymcode::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 60% at 80% 20%,rgba(234,88,12,.18),transparent 60%),radial-gradient(ellipse 40% 40% at 10% 80%,rgba(108,82,227,.1),transparent 50%);pointer-events:none}
#gymcode .eyebrow{color:var(--Ol)}
#gymcode h2{color:var(--TX)}
#gymcode .sec-sub{color:var(--MT)}
.gc-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:54px;align-items:center;margin-top:10px;position:relative}
.gc-qr{position:relative;display:flex;justify-content:center;align-items:center}
.qr-card{background:linear-gradient(160deg,var(--QR1),var(--QR2));border:1px solid var(--BD);border-radius:22px;padding:30px;width:280px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 0 1px rgba(234,88,12,.1),0 0 60px rgba(234,88,12,.08)}
.qr-box{width:170px;height:170px;margin:0 auto 16px;border-radius:16px;background:#fff;border:2px solid var(--O);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;box-shadow:0 0 20px rgba(234,88,12,.3)}
.qr-box svg{width:130px;height:130px}
.qr-scan{position:absolute;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--O),transparent);box-shadow:0 0 12px var(--O),0 0 24px rgba(234,88,12,.5);animation:scan 2.4s ease-in-out infinite}
@keyframes scan{0%,100%{top:8%}50%{top:88%}}
.qr-code{font-family:'Space Mono',monospace;font-size:20px;font-weight:700;letter-spacing:3px;color:var(--Ol);font-variant-numeric:tabular-nums}
.qr-gym{font-family:'Space Mono',monospace;font-size:11px;color:var(--MT);margin-top:4px;letter-spacing:.5px}
.gc-steps{list-style:none;display:flex;flex-direction:column;gap:6px}
.gc-step{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--BD)}
.gc-step:last-child{border:none}
.gc-n{width:30px;height:30px;border-radius:8px;background:rgba(234,88,12,.15);color:var(--Ol);font-family:'Space Mono',monospace;font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid rgba(234,88,12,.2)}
.gc-st{font-family:'Space Grotesk','Inter',system-ui,sans-serif;font-size:14px;font-weight:600;margin-bottom:3px;color:var(--TX)}
.gc-sd{font-size:12.5px;color:var(--MT);line-height:1.55}
.gc-uses{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;position:relative}
.gc-use{font-family:'Space Mono',monospace;font-size:10px;font-weight:400;color:var(--MT);background:var(--S1);border:1px solid var(--BD);border-radius:100px;padding:6px 14px;letter-spacing:.3px}

/* ── HOW ── */
#how{background:var(--BG2)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:46px}
.step{background:var(--S1);border:1px solid var(--BD);border-radius:16px;padding:30px 26px;position:relative;transition:.25s}
.step:hover{border-color:var(--BDO);box-shadow:0 18px 48px -8px rgba(234,88,12,.2);transform:translateY(-5px)}
.step-nb{position:absolute;top:18px;right:22px;font-family:'Space Mono',monospace;font-size:42px;font-weight:700;color:var(--O);opacity:.08;line-height:1;letter-spacing:-2px}
.step-lord{width:58px;height:58px;border-radius:15px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;background:rgba(234,88,12,.10);border:1px solid rgba(234,88,12,.2)}
.step h3{font-family:'Space Grotesk','Inter',system-ui,sans-serif;font-size:17px;font-weight:600;margin-bottom:8px;letter-spacing:-.2px;color:var(--TX)}
.step p{font-size:13.5px;color:var(--MT);line-height:1.62}

/* ── PRICING ── */
#pricing{background:var(--BG)}
.price-note{font-family:'Space Mono',monospace;font-size:10.5px;color:var(--MT2);text-align:center;margin-top:18px;letter-spacing:.2px}
/* PLAN ÚNICO */
.plan-single{max-width:780px;margin:46px auto 0;background:var(--S1);border:1px solid var(--BD);border-radius:24px;box-shadow:var(--SH2),0 0 0 1px rgba(234,88,12,.07);overflow:hidden;position:relative}
.plan-single::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 0%,var(--O) 30%,var(--Ol) 60%,transparent 100%);box-shadow:0 0 20px rgba(234,88,12,.5)}
.plan-head{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:34px 38px;background:rgba(234,88,12,.04);border-bottom:1px solid var(--BD);flex-wrap:wrap}
.plan-name{font-family:'Space Mono',monospace;font-size:10.5px;font-weight:700;color:var(--Ol);text-transform:uppercase;letter-spacing:2px;margin-bottom:8px}
.plan-v{font-family:'Space Grotesk','Inter',system-ui,sans-serif;font-size:58px;font-weight:700;letter-spacing:-2.5px;line-height:1;color:var(--TX)}
.plan-v sup{font-size:24px;vertical-align:top;margin-top:8px;font-weight:600;color:var(--Ol)}
.plan-v span{font-size:18px;font-weight:400;color:var(--MT);letter-spacing:0}
.plan-cta{padding:14px 26px;font-size:12px;white-space:nowrap}
/* .plan-col / .plan-col-t: usados también en #testimonials (t-c.plan-col) */
.plan-col-t{font-family:'Space Mono',monospace;font-size:10px;font-weight:700;color:var(--Ol);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:14px}
.plan-col ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.plan-col li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--TX);line-height:1.4}
.plan-col li [data-lucide]{width:16px;height:16px;color:var(--Ol);flex-shrink:0;margin-top:1px}
.soon-tag{font-family:'Space Mono',monospace;font-size:10px;font-weight:700;color:var(--Ol);background:rgba(234,88,12,.10);border:1px solid rgba(234,88,12,.22);border-radius:100px;padding:4px 12px;letter-spacing:.5px}
@media(max-width:680px){.plan-head{flex-direction:column;align-items:flex-start}}

/* ── Tarjetas de precio: grid de 4 + capacidad (2026-08-29, rehecho) ── */
/* Antes cada tarjeta listaba funciones ("Todo lo de Gratis, más...") que
   sugerían que Pro/Promax desbloquean funciones — falso: PlanLimits solo
   limita socios/sedes/usuarios (api/app/Support/PlanLimits.php), ninguna
   función se capa. Ahora lo primero bajo el precio es la capacidad real,
   y las funciones (iguales en todos los planes) se explican una sola vez
   en la matriz de comparación de abajo (#compara). */
.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:46px;align-items:stretch}
.pricing-grid .plan-single{margin:0;max-width:none;display:flex;flex-direction:column}
.pricing-grid .plan-head{flex-direction:column;align-items:flex-start;padding:28px 26px 4px;gap:14px;background:none;border-bottom:none}
.pricing-grid .plan-head .plan-cta{width:100%;justify-content:center}
.plan-featured{border-color:var(--O);box-shadow:0 0 0 2px var(--O),var(--SH2)}
.plan-badge{position:absolute;top:16px;right:16px;background:var(--O);color:#fff;font-size:10px;font-weight:700;padding:4px 10px;border-radius:20px;font-family:'Space Mono',monospace;letter-spacing:.5px;text-transform:uppercase}
.plan-annual{font-size:12px;color:var(--MT);margin-top:4px}
/* Franja de capacidad: 3 cifras grandes (socios/sedes/usuarios), lo que de
   verdad distingue un plan de otro. */
.plan-caps{display:flex;gap:8px;padding:18px 26px 0;margin-top:auto}
.plan-cap{flex:1;min-width:0;text-align:center;background:var(--S2);border:1px solid var(--BD);border-radius:12px;padding:12px 6px}
.pcv{font-family:'Space Grotesk','Inter',system-ui,sans-serif;font-size:21px;font-weight:700;color:var(--TX);letter-spacing:-.5px;line-height:1.1;font-variant-numeric:tabular-nums}
.pcl{font-family:'Space Mono',monospace;font-size:9px;color:var(--MT);text-transform:uppercase;letter-spacing:.6px;margin-top:5px}
.plan-extra{font-size:11.5px;color:var(--MT);padding:12px 26px 0;text-align:center}
.plan-extra b{color:var(--Ol);font-weight:700}
.plan-foot{display:flex;align-items:center;gap:7px;padding:16px 26px 26px;margin-top:14px;border-top:1px solid var(--BD);font-size:11.5px;color:var(--MT);line-height:1.4}
.plan-foot [data-lucide]{width:15px;height:15px;color:var(--Ol);flex-shrink:0}
.plan-foot a{color:var(--Ol);text-decoration:none;font-weight:700}
.plan-foot a:hover{text-decoration:underline}
@media(max-width:1200px){.pricing-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:980px){.pricing-grid{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto}}

/* ── Matriz "Compara nuestros planes" (ref. estructura: pricing de Hostinger;
   look & feel 100% del sistema ArcG, sin copiar su estética) ── */
.cmp{margin-top:60px}
.cmp-head{max-width:640px;margin:0 auto 20px;text-align:center}
.cmp-head h3{font-family:'Space Grotesk','Inter',system-ui,sans-serif;font-size:clamp(21px,2.4vw,28px);font-weight:700;letter-spacing:-1px;color:var(--TX);margin-bottom:8px}
.cmp-head p{font-size:13.5px;color:var(--MT);line-height:1.65}
.cmp-hint{display:none;align-items:center;justify-content:center;gap:6px;font-family:'Space Mono',monospace;font-size:10.5px;color:var(--MT2);margin-bottom:10px;letter-spacing:.3px}
.cmp-hint [data-lucide]{width:13px;height:13px}
.cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--BD);border-radius:18px;background:var(--S1);box-shadow:var(--SH2)}
/* table-layout:fixed a propósito: con layout automático, el <th colspan="6">
   de las filas de sección ("Todo incluido, en cualquier plan") inflaba el
   ancho de la columna 1 a ~350px (el navegador reparte el texto largo del
   colspan entre las columnas que abarca) y rompía la columna fija. Fixed +
   <colgroup> deja el ancho de cada columna predecible sin importar el
   contenido de esas filas. */
.cmp-table{table-layout:fixed;border-collapse:separate;border-spacing:0;width:100%;min-width:820px}
.cmp-table .cmp-col-label{width:220px}
.cmp-table caption{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.cmp-table th,.cmp-table td{padding:13px 14px;font-size:12.5px;text-align:center;border-bottom:1px solid var(--BD);color:var(--TX)}
.cmp-table thead th,.cmp-table tbody td{white-space:nowrap}
.cmp-table thead th{padding:18px 14px 15px;font-family:'Space Mono',monospace;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--Ol);background:var(--S2)}
.cmp-table thead th .cmp-badge{display:block;margin:4px auto 0;width:max-content;background:var(--O);color:#fff;font-size:8.5px;font-weight:700;padding:2px 8px;border-radius:20px;letter-spacing:.4px}
.cmp-table .cmp-corner{position:sticky;left:0;z-index:3;background:var(--S2);border-top-left-radius:17px;box-shadow:1px 0 0 var(--BD)}
.cmp-table th[scope="row"]{position:sticky;left:0;z-index:2;text-align:left;background:var(--CARDBG);font-family:'Inter',system-ui,sans-serif;font-size:13px;font-weight:600;box-shadow:1px 0 0 var(--BD)}
.cmp-table .cmp-group th{background:var(--BG2);color:var(--Ol);font-family:'Space Mono',monospace;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.3px;text-align:left;padding:12px 14px}
.cmp-table .cmp-group:first-child th{padding-top:14px}
.cmp-table td.cmp-featured,.cmp-table th.cmp-featured{background:rgba(234,88,12,.07)}
.cmp-table tr:last-child th,.cmp-table tr:last-child td{border-bottom:none}
.cmp-yes{display:inline-flex;align-items:center;gap:4px;color:#16A34A;font-weight:600}
.cmp-yes [data-lucide]{width:14px;height:14px}
html[data-theme="light"] .cmp-yes{color:#15803D}
@media(max-width:820px){.cmp-hint{display:flex}}

/* ── TESTIMONIALS ── */
#testimonials{background:var(--BG2)}
.t-g{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:46px}
.t-c{background:var(--S1);border:1px solid var(--BD);border-radius:16px;padding:24px;transition:.25s;position:relative;overflow:hidden}
.t-c::before{content:'"';position:absolute;top:-8px;left:18px;font-size:80px;color:var(--O);opacity:.07;font-family:'Space Grotesk','Inter',system-ui,sans-serif;font-weight:700;line-height:1;pointer-events:none}
.t-c:hover{border-color:var(--BDO);box-shadow:0 16px 40px -8px rgba(234,88,12,.2);transform:translateY(-4px)}
.t-stars{color:#FB923C;font-size:13px;letter-spacing:2px;margin-bottom:11px}
.t-text{font-size:13.5px;color:var(--MT);line-height:1.7;font-style:italic;margin-bottom:16px}
.t-author{display:flex;align-items:center;gap:10px}
.t-av{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-family:'Space Mono',monospace;font-size:12px}
.t-name{font-size:13px;font-weight:600;color:var(--TX)}.t-role{font-family:'Space Mono',monospace;font-size:10px;color:var(--MT);letter-spacing:.3px}

/* ── FAQ ── */
#faq{background:var(--BG)}
.faq-wrap{max-width:760px;margin:44px auto 0;display:flex;flex-direction:column;gap:10px}
.faq{background:var(--S1);border:1px solid var(--BD);border-radius:14px;overflow:hidden;transition:box-shadow .2s,border-color .2s}
.faq[open]{border-color:var(--BDO);box-shadow:0 8px 32px -4px rgba(234,88,12,.18)}
.faq summary{list-style:none;cursor:pointer;padding:19px 24px;font-size:15px;font-weight:600;color:var(--TX);display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:'Space Grotesk','Inter',system-ui,sans-serif}
.faq summary::-webkit-details-marker{display:none}
.faq summary .q-ic{width:20px;height:20px;flex-shrink:0;color:var(--Ol);transition:transform .25s}
.faq[open] summary .q-ic{transform:rotate(45deg)}
.faq-a{padding:0 24px 22px;font-size:14px;color:var(--MT);line-height:1.66;max-width:660px}

/* ── CTA ── */
#cta{padding:92px 0;text-align:center;position:relative;overflow:hidden;color:#fff;background:#0C0910}
#cta::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(234,88,12,.22),transparent 65%),
            radial-gradient(ellipse 40% 40% at 80% 20%,rgba(108,82,227,.12),transparent 55%);
  animation:ctaBg 12s ease-in-out infinite alternate}
@keyframes ctaBg{0%{opacity:.8;transform:scale(1)}100%{opacity:1;transform:scale(1.08)}}
@media(prefers-reduced-motion:reduce){@keyframes ctaBg{0%,100%{transform:none}}}
/* dot grid sutil sobre CTA */
#cta::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:28px 28px;opacity:.6}
#cta .cta-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}
#cta .cta-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(135deg,rgba(10,7,18,.88),rgba(234,88,12,.45) 50%,rgba(10,7,18,.92))}
#cta>.wrap{position:relative;z-index:3}
#cta h2{font-family:'Space Grotesk','Inter',system-ui,sans-serif;color:#fff;font-size:clamp(32px,4.6vw,56px);max-width:680px;margin:0 auto 14px;font-weight:700}
#cta p{font-size:16px;color:rgba(255,250,245,.72);margin-bottom:28px}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn-w{display:inline-flex;align-items:center;gap:9px;background:#fff;color:#C2410C;font-family:'Space Mono',monospace;font-weight:700;font-size:13px;padding:15px 30px;border-radius:8px;text-decoration:none;box-shadow:0 8px 32px rgba(0,0,0,.4);transition:.25s;letter-spacing:.4px}
.btn-w:hover{transform:translateY(-2px);box-shadow:0 16px 48px rgba(0,0,0,.5)}
.btn-wt{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);color:#fff;font-family:'Space Mono',monospace;font-weight:400;font-size:13px;padding:15px 26px;border-radius:8px;text-decoration:none;border:1px solid rgba(255,255,255,.2);transition:.2s;letter-spacing:.3px}
.btn-wt:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35)}
.cta-meta{font-family:'Space Mono',monospace;font-size:11px;color:rgba(255,250,245,.5);margin-top:16px;letter-spacing:.3px}

/* ── FOOTER ── */
footer{background:var(--FOOTBG);color:var(--MT2);padding:48px 0 26px;border-top:1px solid var(--BD)}
.foot-in{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:24px;padding-bottom:28px;border-bottom:1px solid var(--BD)}
.foot-brand{max-width:280px}
.foot-brand p{font-size:13px;line-height:1.7;margin-top:12px;color:var(--MT2)}
.foot-links{display:flex;gap:48px;flex-wrap:wrap}
.foot-col h3{font-family:'Space Mono',monospace;font-size:9.5px;font-weight:700;color:var(--Ol);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:14px}
.foot-col a{display:block;font-size:13px;color:var(--MT2);text-decoration:none;margin-bottom:8px;transition:.2s}
.foot-col a:hover{color:var(--TX)}
.foot-bot{padding-top:20px;display:flex;justify-content:space-between;font-family:'Space Mono',monospace;font-size:10.5px;color:var(--MT2);flex-wrap:wrap;gap:8px;letter-spacing:.3px}

/* ── RESPONSIVE ── */
@media(max-width:920px){
  .hero-grid,.gc-grid{grid-template-columns:1fr;gap:36px}
  .pain-g{grid-template-columns:1fr 1fr}
  .feat-g,.steps,.t-g{grid-template-columns:1fr}
  .nav-links{display:none}
  .nav-burger{display:flex}
  .nav-r .nav-back{display:none}
  /* CTA + login viven en el menú hamburguesa (mm-foot) en móvil: en el nav sobraban y
     descuadraban el layout en pantallas angostas. Quedan logo + tema + burger. */
  .nav-r .nav-login,.nav-r .btn-o{display:none}
  .fcard{display:none}
  .gc-qr{order:-1}
}
@media(prefers-reduced-motion:reduce){
  .reveal,.stagger>*,#hero .h-badge,#hero h1,.h-sub,.h-ctas,.h-ctas-note,.h-proof,.hero-vis .win,.fcard{opacity:1!important;transform:none!important}
  .win-scan{display:none!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ───── capa de elevación Awwwards (segundo bloque) ───── */
/* ── Tipografía dominante ── */
/* Tope 84px (antes 108px): a 108px dentro de la columna del hero cada línea
   se re-partía y el titular quedaba en 6 renglones apretados al centro. */
#hero h1{
  font-size:clamp(44px,4.6vw,84px)!important;
  line-height:.97!important;
  letter-spacing:-3px!important;
  margin-bottom:22px!important;
}
@media(max-width:600px){
  #hero h1{letter-spacing:-2px!important}
}
.h-sub{max-width:520px;color:rgba(var(--TXr),.52)}

/* ── Glow naranja sobre el mockup ── */
.hero-vis{
  filter:drop-shadow(0 0 48px rgba(234,88,12,.28));
}

/* ── Marco técnico ── */
.hero-frame{
  position:absolute;
  inset:84px max(20px,calc(50vw - 602px)) 60px;
  z-index:2;
  pointer-events:none;
  border:1px solid rgba(var(--GLr),.06);
}
.hero-frame::before,
.hero-frame::after,
.hf-bl,
.hf-br{
  content:'';
  position:absolute;
  width:13px;
  height:13px;
  border:1.5px solid rgba(251,146,60,.6);
}
.hero-frame::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.hero-frame::after{top:-1px;right:-1px;border-left:0;border-bottom:0}
.hf-bl{bottom:-1px;left:-1px;border-right:0;border-top:0}
.hf-br{bottom:-1px;right:-1px;border-left:0;border-top:0}

/* ── Etiquetas mono en esquinas ── */
.hero-meta{
  position:absolute;
  z-index:3;
  pointer-events:none;
  font-family:'Space Mono',monospace;
  font-size:9.5px;
  line-height:1.7;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:rgba(var(--TXr),.38);
}
.hero-meta.tl{top:96px;left:max(30px,calc(50vw - 590px))}
.hero-meta.tr{top:96px;right:max(30px,calc(50vw - 590px));text-align:right}
.hero-meta b{color:rgba(251,146,60,.85);font-weight:400}
.hero-meta .on{color:#34D399}

/* ── Ticker al pie del hero ── */
.hero-ticker{
  position:absolute;
  left:0;right:0;bottom:0;
  z-index:3;
  height:44px;
  display:flex;
  align-items:center;
  overflow:hidden;
  border-top:1px solid rgba(var(--GLr),.08);
  background:linear-gradient(rgba(234,88,12,.05),transparent);
}
.hero-ticker .tk{
  display:flex;
  white-space:nowrap;
  animation:tk 28s linear infinite;
  font-family:'Space Mono',monospace;
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:rgba(var(--TXr),.5);
}
.hero-ticker .tk span{
  display:inline-flex;
  align-items:center;
  gap:34px;
  padding-left:34px;
}
.hero-ticker .tk i{
  width:5px;height:5px;
  border-radius:50%;
  background:#EA580C;
  box-shadow:0 0 9px rgba(234,88,12,.9);
  font-style:normal;
  flex-shrink:0;
}
.hero-ticker strong{color:var(--TX);font-weight:400}
@keyframes tk{to{transform:translateX(-50%)}}
/* ════ MENÚ MEJORADO: barra glass + cápsula segmentada (naranja) ════ */
nav{height:66px!important;background:rgba(var(--BGr),.42)!important;backdrop-filter:blur(18px) saturate(1.2)!important;-webkit-backdrop-filter:blur(18px) saturate(1.2)!important;border-bottom:1px solid rgba(var(--GLr),.06)!important}
nav.scrolled{background:rgba(var(--BGr),.82)!important}
nav::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(234,88,12,.55),transparent);opacity:.65;pointer-events:none}
.nl{font-size:17px!important}
.nl::after{content:'GYM';font-family:'Space Mono',monospace;font-size:8.5px;letter-spacing:1px;color:rgba(251,146,60,.8);border:1px solid rgba(234,88,12,.4);border-radius:4px;padding:2px 5px;margin-left:4px;text-transform:uppercase;align-self:center}
.nav-links{background:rgba(var(--GLr),.07)!important;border:1px solid rgba(var(--GLr),.12)!important;box-shadow:inset 0 1px 0 rgba(var(--GLr),.06),0 4px 16px rgba(0,0,0,.35)!important;border-radius:100px!important;padding:5px 7px!important;gap:2px!important;backdrop-filter:blur(10px)!important}
.nav-links li{display:flex}
.nav-links a{font-family:'Space Grotesk',sans-serif!important;font-size:13px!important;text-transform:none!important;letter-spacing:-.1px!important;font-weight:500!important;color:rgba(var(--TXr),.62)!important;padding:8px 15px!important;border-radius:100px!important;transition:background .2s,color .2s!important}
.nav-links a:hover{background:rgba(234,88,12,.18)!important;color:var(--TX)!important}

/* ════ RIELES LATERALES (naranja) ════ */
.hero-rail{position:absolute;z-index:3;top:50%;transform:translateY(-50%);font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:2.5px;text-transform:uppercase;color:rgba(var(--TXr),.34);writing-mode:vertical-rl;display:flex;align-items:center;gap:16px;pointer-events:none}
.hero-rail.l{left:28px}
.hero-rail.r{right:28px;transform:translateY(-50%) rotate(180deg)}
.hero-rail i{width:42px;height:1px;background:linear-gradient(rgba(234,88,12,.7),transparent);box-shadow:0 0 7px rgba(234,88,12,.5);flex-shrink:0}
.hero-rail .dn{animation:railpulse 2.4s ease-in-out infinite}
@keyframes railpulse{0%,100%{opacity:.4}50%{opacity:1}}
.hero-angular{position:absolute;z-index:1;pointer-events:none;left:-4%;bottom:8%;width:340px;height:1px;background:linear-gradient(90deg,transparent,rgba(234,88,12,.4),transparent);transform:rotate(-34deg);transform-origin:left;opacity:.6}

/* ── Responsive: ocultar overlays en móvil ── */
@media(max-width:960px){.hero-rail,.hero-angular{display:none}}
@media(max-width:900px){
  .hero-frame,.hero-meta,.hero-ticker{display:none}
  .nav-links{background:transparent!important;border:0!important}
}
@media(prefers-reduced-motion:reduce){
  .hero-ticker .tk{animation:none}
}
/* Pulido de detalle: dark nativo + selección de marca naranja */
html{color-scheme:dark}
::selection{background:rgba(234,88,12,.32);color:var(--TX)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:var(--BG2)}
::-webkit-scrollbar-thumb{background:rgba(234,88,12,.55);border-radius:6px;border:2px solid var(--BG2)}
/* Microcopy de baja fricción bajo el CTA del hero */
.h-ctas-note{margin:18px 0 0;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.3px;color:rgba(var(--TXr),.64);display:flex;align-items:center;gap:7px}
.h-ctas-note b{color:rgba(251,146,60,.9);font-weight:400}
/* Móvil: grids a 1 columna + menos padding */
@media(max-width:600px){
  .pain-g,.feat-g,.steps,.t-g{grid-template-columns:1fr!important}
  .h-ctas-note{font-size:10.5px}
}

/* ============================================================
   ArcG — MODO CLARO (html[data-theme="light"])
   Mismo sistema de variables; energía gym conservada:
   blancos cálidos + naranja #EA580C (oscurecido a #C2410C
   donde es texto, para contraste AA). El CTA final y la banda
   se quedan oscuros a propósito (banda de marca).
   ============================================================ */
html[data-theme="dark"]{color-scheme:dark}
html[data-theme="light"]{color-scheme:light}
html[data-theme="light"]{
  /* Naranja: #EA580C para gráficos/glow, #C2410C cuando es texto o fondo de botón (AA con blanco) */
  --O:#C2410C;--Ol:#C2410C;--Od:#9A3412;--Oy:#B45309;
  --P:#5B45C7;--Pl:#6C52E3;
  --BG:#FFFFFF;--BG2:#FAFAFA;--BG3:#FFF7F0;--BG4:#FFFFFF;
  --S1:rgba(23,10,2,.03);--S2:rgba(23,10,2,.05);
  --BD:rgba(23,10,2,.10);--BD2:rgba(23,10,2,.17);--BDO:rgba(234,88,12,.45);
  --TX:#1C1108;--MT:rgba(41,23,10,.78);--MT2:rgba(41,23,10,.68);
  --SH:0 2px 20px rgba(120,53,15,.07);--SH2:0 12px 48px rgba(120,53,15,.12);
  --GO:rgba(234,88,12,.16);--GOB:0 0 0 1px rgba(234,88,12,.28),0 8px 32px rgba(234,88,12,.18);
  --TXr:28,17,8;--BGr:255,255,255;--GLr:23,10,2;
  --WINBG:#FFFFFF;--WINBAR:#FBF6F1;--CARDBG:#FFFFFF;
  --QR1:#FFFFFF;--QR2:#FFF4EB;--FOOTBG:#FFF7F0;
}
/* Retícula blueprint un pelín más presente sobre blanco */
html[data-theme="light"] body::before{background-image:linear-gradient(rgba(234,88,12,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(234,88,12,.055) 1px,transparent 1px)}
/* Acentos que en oscuro eran naranja claro → naranja legible sobre blanco */
html[data-theme="light"] .hero-meta b{color:#C2410C}
html[data-theme="light"] .nl::after{color:#C2410C;border-color:rgba(194,65,12,.45)}
html[data-theme="light"] .h-ctas-note b{color:#C2410C}
html[data-theme="light"] .stars,html[data-theme="light"] .t-stars{color:#EA580C}
/* Semáforos del mockup (verde/ámbar/rojo oscurecidos para fondo claro) */
html[data-theme="light"] .cg{color:#15803D}
html[data-theme="light"] .cy{color:#B45309}
html[data-theme="light"] .cr{color:#DC2626}
html[data-theme="light"] .bg-a{background:rgba(22,163,74,.10);color:#15803D}
html[data-theme="light"] .bg-y{background:rgba(180,83,9,.10);color:#B45309}
html[data-theme="light"] .bg-r{background:rgba(220,38,38,.10);color:#DC2626}
html[data-theme="light"] .live{color:#15803D}
html[data-theme="light"] .live i{box-shadow:none}
html[data-theme="light"] .wa-btn{background:rgba(22,163,74,.10);color:#15803D}
html[data-theme="light"] .wa-btn.sent{background:rgba(22,163,74,.14);color:#15803D}
html[data-theme="light"] .row.resolved .rp{color:#15803D}
/* Sombras cálidas en vez de negras */
html[data-theme="light"] .win{box-shadow:0 30px 80px rgba(120,53,15,.16),0 0 0 1px rgba(234,88,12,.10)}
html[data-theme="light"] .checkin-toast,html[data-theme="light"] .fcard{box-shadow:0 14px 40px rgba(120,53,15,.14),0 0 0 1px rgba(234,88,12,.08)}
html[data-theme="light"] .qr-card{box-shadow:0 30px 80px rgba(120,53,15,.16),0 0 0 1px rgba(234,88,12,.12)}
html[data-theme="light"] .qr-box{border-color:#EA580C;box-shadow:0 0 20px rgba(234,88,12,.18)}
html[data-theme="light"] nav.scrolled{box-shadow:0 4px 32px rgba(120,53,15,.10)}
html[data-theme="light"] .mobile-menu{box-shadow:-20px 0 80px rgba(120,53,15,.18)}
html[data-theme="light"] .mock-glow{background:radial-gradient(ellipse at 60% 40%,rgba(234,88,12,.13),transparent 65%)}
html[data-theme="light"] .hero-vis{filter:drop-shadow(0 0 42px rgba(234,88,12,.16))}
html[data-theme="light"] .av{box-shadow:0 1px 4px rgba(120,53,15,.25);border-color:#fff}
/* Cápsula del menú: glass oscuro sutil sobre blanco, sin inset blanco */
html[data-theme="light"] .nav-links{box-shadow:0 4px 16px rgba(120,53,15,.08)!important}
/* Botón primario: mantiene texto blanco (fondo #C2410C vía --O) con glow de marca */
html[data-theme="light"] .btn-o{box-shadow:0 4px 16px rgba(234,88,12,.30),0 0 0 1px rgba(234,88,12,.18)}
html[data-theme="light"] .btn-o:hover{box-shadow:0 10px 32px rgba(234,88,12,.40),0 0 0 1px rgba(234,88,12,.32)}
/* Onda hero→pain: la cresta sigue siendo de marca; el relleno hereda --BG */
html[data-theme="light"] .wave-div .wv2{fill:rgba(234,88,12,.10)}
/* Partículas del hero: un poco más suaves sobre blanco */
html[data-theme="light"] .hero-ptx{opacity:.55}

/* ── Toggle de tema (sol/luna) ── */
.theme-tg{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:8px;background:transparent;border:1px solid var(--BD2);color:var(--MT);cursor:pointer;transition:border-color .2s,color .2s,transform .2s;flex-shrink:0;padding:0}
.theme-tg:hover{border-color:var(--Ol);color:var(--Ol)}
.theme-tg:active{transform:scale(.94)}
.theme-tg [data-lucide],.theme-tg svg{width:16px;height:16px}
.theme-tg .tg-moon{display:none}
html[data-theme="light"] .theme-tg .tg-sun{display:none}
html[data-theme="light"] .theme-tg .tg-moon{display:inline-block}
.mm-foot .theme-tg{width:100%;gap:8px;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.3px;padding:12px}
.mm-foot .theme-tg .tg-lbl-d{display:none}
html[data-theme="light"] .mm-foot .theme-tg .tg-lbl-l{display:none}
html[data-theme="light"] .mm-foot .theme-tg .tg-lbl-d{display:inline}
/* Contraste AA del subtítulo del hero en claro (la capa Awwwards lo dejaba a .52) */
html[data-theme="light"] .h-sub{color:rgba(41,23,10,.78)}
html[data-theme="light"] .h-ctas-note{color:rgba(41,23,10,.66)}
html[data-theme="light"] .hero-meta{color:rgba(41,23,10,.55)}
html[data-theme="light"] .hero-rail{color:rgba(41,23,10,.5)}
html[data-theme="light"] .hero-ticker .tk{color:rgba(41,23,10,.62)}

/* ============================================================
   ArcG v6 — "Panel que arranca" (dirección futurista con propósito)
   Tokens con nombre (mapean a las variables existentes):
     Brasa        #EA580C (--O)   acento de marca / energía
     Brasa clara  #FB923C (--Ol)  texto naranja sobre oscuro
     Brasa tinta  #C2410C (--O en claro) naranja AA sobre blanco
     Vacío        #0A0712 (--BG)  fondo profundo
     Señal verde  #4ADE80 / #15803D  estados "activo"
     Tinta cálida #FFFDFB / #1C1108  texto según tema
   Tipos: Space Grotesk (display) · Inter (cuerpo) · Space Mono (datos/HUD)
   ELEMENTO FIRMA: el barrido de escaneo — la línea del Gym Code
   recorre el panel del hero y lo "enciende" (KPIs cuentan, la
   gráfica se dibuja). Un solo momento orquestado; el resto, quieto.
   ============================================================ */

/* Estados iniciales del hero (solo con JS y hasta terminar el arranque; reduced-motion los anula arriba).
   El h1 (candidato a LCP) queda FUERA de esta lista a propósito: debe pintar visible de inmediato sin
   depender de que GSAP cargue/termine. Solo se anima si HASGSAP && !REDUCE (ver arcg.js). */
/* El texto del hero (badge, titular, subtítulo, CTAs, prueba social) se ve AL
   INSTANTE: el mensaje y el botón no esperan a la animación. Solo el panel de la
   derecha y sus tarjetas flotantes entran con un movimiento sutil (detalle, no
   barrera). El barrido de escaneo y la gráfica siguen viviendo dentro del panel. */
html.js:not(.booted) .hero-vis .win{opacity:0;transform:translateY(38px) scale(.965)}
html.js:not(.booted) .fcard.f1,html.js:not(.booted) .fcard.f2{opacity:0;transform:translateY(14px) scale(.92)}

/* Barrido de escaneo (firma) — vive dentro de .win, sobre su contenido */
.win-scan{position:absolute;left:0;right:0;top:0;height:56px;z-index:4;pointer-events:none;opacity:0;
  background:linear-gradient(to bottom,transparent,rgba(234,88,12,.10) 38%,rgba(251,146,60,.5) 50%,rgba(234,88,12,.10) 62%,transparent)}
html[data-theme="light"] .win-scan{background:linear-gradient(to bottom,transparent,rgba(234,88,12,.08) 38%,rgba(234,88,12,.4) 50%,rgba(234,88,12,.08) 62%,transparent)}

/* Sparkline del mockup — check-ins de la semana */
.spark{border:1px solid var(--BD);border-radius:9px;padding:9px 12px 8px;background:var(--S1);margin-bottom:13px}
.spark-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.spark-t{font-family:'Space Mono',monospace;font-size:8px;color:var(--MT2);text-transform:uppercase;letter-spacing:.5px}
.spark-v{font-size:9px;font-weight:700;color:#4ADE80}
html[data-theme="light"] .spark-v{color:#15803D}
.spark svg{display:block;width:100%;height:32px}
.spark-line{fill:none;stroke:var(--Ol);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.spark-dot{fill:var(--Ol)}
html[data-theme="light"] .spark-line{stroke:#EA580C}
html[data-theme="light"] .spark-dot{fill:#EA580C}

/* ── Nav móvil angosto (<500px, medido roto a 377-386px) ──
   Al final de la hoja a propósito: pisa .theme-tg/.nav-burger (misma especificidad,
   definidos arriba) para compactar el nav y dar objetivos táctiles ≥44px sin que
   nada se salga del viewport. */
@media(max-width:500px){
  nav{padding:0 14px}
  .nav-in{padding:0 14px}
  .nav-r{gap:6px}
  .theme-tg{width:44px;height:44px}
  .nav-burger{width:44px;height:44px}
}

/* ── Cinta de color MITIC (paridad con el index, versión nocturna) ──
   Rampa cálida del producto — naranja→ámbar→magenta→violeta — detrás del
   panel y llegando hasta arriba del todo (el nav es cristal). El scrim la
   apaga del lado del texto para conservar la legibilidad. */
.hero-ribbon{position:absolute;right:-10%;top:-8%;width:66%;height:112%;z-index:0;pointer-events:none;border-radius:44%;transform:rotate(-10deg);
  background:linear-gradient(120deg,#EA580C 0%,#F59E0B 30%,#DB2777 62%,#7C5CE0 100%);
  filter:blur(95px) saturate(1.05);opacity:.26}
.hero-ribbon.rb2{right:2%;top:30%;width:34%;height:50%;opacity:.16;transform:rotate(12deg);filter:blur(70px)}