/* index.css — estilos de la landing ArcGestor (extraídos de index.html). NO inline. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Paleta monocromo ejecutiva en CLARO (papel/plata); grafito como acento.
     Las islas oscuras (collage, #cta, footer) re-declaran estas vars más abajo. */
  --P:#1A1A1A;--Pl:#111111;--Pd:#55524C;
  /* Naranja de MARCA (antes gris — la página quedaba monocroma "quemada").
     --O = naranja vivo para display grande y botones; --Ol = naranja profundo
     legible en texto pequeño sobre crema (contraste AA 5.7:1). */
  --O:#EA580C;--Ol:#C2410C;
  --BASE:#F7F6F3;--BASE2:#F2F1ED;--S1:#EFEDE8;--S2:#FFFFFF;--S3:#E9E7E2;
  --TX:#161616;--TX2:rgba(22,22,22,.72);--TX3:rgba(22,22,22,.48);
  --BD:rgba(20,20,20,.08);--BD2:rgba(20,20,20,.13);--BD3:rgba(20,20,20,.20);
  --GL:rgba(20,20,20,.06);--GL2:rgba(20,20,20,.10);
  --SH:0 2px 20px rgba(0,0,0,.4);
  --SH2:0 8px 48px rgba(0,0,0,.55);
  --FD:'Space Grotesk','Inter',system-ui,sans-serif;
  --FM:'Space Mono',ui-monospace,'SFMono-Regular',monospace;
  --FS:'Fraunces',Georgia,'Times New Roman',serif; /* titular editorial */
}
html{scroll-behavior:auto}
body{font-family:'Inter',system-ui,sans-serif;background:var(--BASE);color:var(--TX);overflow-x:hidden;-webkit-font-smoothing:antialiased}
/* ── ISLAS OSCURAS sobre página clara: el producto (collage), el CTA final y el
     footer conservan el tema ejecutivo oscuro — contraste editorial deliberado. */
.hero-right,#cta,footer{
  /* En las islas oscuras el naranja sube de luminosidad para mantener contraste. */
  --P:#E8E6E2;--Pl:#F2F2F2;--Pd:#8C8C8C;--O:#F97316;--Ol:#FB923C;
  --BASE:#0D0D0D;--BASE2:#101010;--S1:#141414;--S2:#191919;--S3:#212121;
  --TX:#F2F2F2;--TX2:rgba(242,242,242,.70);--TX3:rgba(242,242,242,.44);
  --BD:rgba(255,255,255,.07);--BD2:rgba(255,255,255,.12);--BD3:rgba(255,255,255,.18);
}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-thumb{background:var(--P);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:var(--P);color:#F7F6F3;padding:10px 16px;border-radius:8px;font-weight:700;text-decoration:none}
.skip-link:focus{left:8px}
:focus-visible{outline:2px solid var(--Pl);outline-offset:3px;border-radius:4px}
.btn-orange:focus-visible,.btn-wht:focus-visible,.btn-prim:focus-visible{outline:2px solid rgba(255,255,255,.6);outline-offset:3px;box-shadow:0 0 0 4px var(--P)}
*:focus:not(:focus-visible){outline:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}

/* --- TYPOGRAPHY --- */
h1,h2,h3,.nl,#hero-h1{font-family:var(--FD);letter-spacing:-2px}
.eyebrow,.h-badge,.nav-links a,.btn-prim,.nav-login,.btn-orange,.btn-outline-h,.btn-wht,.btn-trans,.dd-tag,.mm-sec,.proof-info,.step-n,.slb,.kl{font-family:var(--FM)}

/* --- UTILS --- */
.gu{color:var(--Pl)}
.go{color:var(--Ol)}
.tc{text-align:center}
.reveal{opacity:0;transform:translateY(40px)}
.reveal-l{opacity:0;transform:translateX(-44px)}
.reveal-r{opacity:0;transform:translateX(44px)}
.stagger>*{opacity:0;transform:translateY(28px)}
.h1-line{display:block;overflow:hidden;padding-bottom:.05em;margin-bottom:-.05em}
.h1-inner{display:block;will-change:transform}
.h1-inner .gu,.h1-inner .go{display:inline}

/* --- SCROLL PROGRESS --- */
#spb{position:fixed;top:0;left:0;height:2px;width:0%;background:linear-gradient(90deg,#161616,#55524C);z-index:999;transition:width .1s linear;border-radius:0 2px 2px 0}

/* --- LA LUNA: grande ATRÁS del hero cubriendo el fondo; al navegar se encoge,
       vive en el margen derecho, desciende con el scroll y HUYE del mouse. --- */
#cur{position:fixed;left:0;top:0;width:min(82vh,780px);height:min(82vh,780px);border-radius:50%;pointer-events:none;z-index:1;
  mix-blend-mode:multiply;will-change:transform;
  transform:translate(-50%,-50%);transition:width .65s ease,height .65s ease,opacity .5s;opacity:0}
/* superficie de la luna GRAFITO: disco con sombra lateral + respiración */
#cur::before{content:'';position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(circle at 38% 32%,rgba(20,20,20,.07) 0%,rgba(20,20,20,.03) 34%,rgba(20,20,20,.012) 56%,transparent 72%),
    radial-gradient(circle,rgba(20,20,20,.035) 0%,transparent 66%);
  box-shadow:0 0 90px 20px rgba(20,20,20,.05),0 0 240px 70px rgba(20,20,20,.03),inset 0 0 90px rgba(20,20,20,.05);
  animation:moon-breath 7s ease-in-out infinite}
/* aro con destello que ORBITA — el color (--moonc) cambia por sección al navegar */
#cur::after{content:'';position:absolute;inset:-1px;border-radius:50%;padding:2px;
  background:conic-gradient(from 0deg,
    rgba(20,20,20,.05),
    color-mix(in srgb,var(--moonc,#161616) 65%,transparent) 12%,
    rgba(20,20,20,.08) 28%,rgba(20,20,20,.04) 56%,
    color-mix(in srgb,var(--moonc,#161616) 30%,transparent) 78%,
    rgba(20,20,20,.05));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  animation:moon-orbit 26s linear infinite;filter:drop-shadow(0 0 7px color-mix(in srgb,var(--moonc,#161616) 25%,transparent));
  transition:filter .6s}
@keyframes moon-orbit{to{transform:rotate(360deg)}}
@keyframes moon-breath{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.015)}}
body.moon-mini #cur{width:150px;height:150px;z-index:60;opacity:.9}
body.moon-mini #cur::before{box-shadow:0 0 34px 6px color-mix(in srgb,var(--moonc,#161616) 16%,transparent),0 0 90px 20px color-mix(in srgb,var(--moonc,#161616) 7%,transparent),inset 0 0 22px color-mix(in srgb,var(--moonc,#161616) 12%,transparent)}
@media(prefers-reduced-motion:reduce){#cur::before,#cur::after{animation:none}}

/* --- GLOBAL GRID TEXTURE --- */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(20,20,20,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(20,20,20,.03) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 100% 100% at 50% 0%,#000 40%,transparent 100%);
}

/* --- NOISE TEXTURE --- */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  background-size:256px 256px;opacity:.4;
}

/* --- NAV --- */
nav{position:fixed;top:0;left:0;right:0;z-index:300;height:60px;padding:0 max(24px,2vw);display:flex;align-items:center;justify-content:space-between;
  background:rgba(10,10,10,0);backdrop-filter:blur(20px);border-bottom:1px solid transparent;
  transition:background .45s ease,border-color .45s ease,box-shadow .45s ease}
nav.scrolled{background:rgba(255,255,255,.92);border-bottom:1px solid transparent;box-shadow:0 4px 24px rgba(20,20,20,.06)}
/* Línea de marca bajo el nav: el mismo gesto cromático del hero, siempre
   presente aunque ya hayas bajado de sección — el encabezado nunca vuelve
   a quedar monocromo plano. */
nav.scrolled::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,#EA580C 0%,#DC2626 16%,#DB2777 34%,#7C5CE0 52%,#2563EB 68%,#0E7490 82%,#059669 100%);
  opacity:.7;
}
.nl{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:700;font-size:16px;letter-spacing:-.4px;color:var(--TX);font-family:var(--FD)}
/* Respiración de color muy sutil (misma rampa que el hero-ribbon, ver el
   degradado del propio glifo): el logo nunca queda estático del todo. */
.nl-ico{width:28px;height:28px;flex-shrink:0;animation:nl-breathe 9s ease-in-out infinite}
@keyframes nl-breathe{0%,100%{filter:hue-rotate(0deg) saturate(1)}50%{filter:hue-rotate(20deg) saturate(1.25)}}
.nav-links{display:flex;align-items:center;gap:26px;list-style:none}
.nav-links a{text-decoration:none;font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:.8px;color:var(--TX3);transition:color .2s;position:relative}
.nav-links a:hover{color:var(--Ol)!important}
.nav-links a.x-active{color:var(--Ol)!important}
.nav-links a span.ul{position:absolute;bottom:-2px;left:0;width:0;height:2px;background:var(--O);border-radius:2px;transition:width .25s ease}
.nav-links a:hover span.ul{width:100%}

/* Dropdown */
.has-dd{position:relative}
.has-dd>a{display:flex;align-items:center;gap:4px}
.has-dd>a [data-lucide]{width:13px;height:13px;transition:transform .25s}
.has-dd:hover>a [data-lucide]{transform:rotate(180deg)}
.dd{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px);
  background:var(--S2);border:1px solid var(--BD2);border-radius:16px;box-shadow:0 16px 48px rgba(0,0,0,.6),0 0 0 1px var(--BD);
  padding:8px;width:310px;opacity:0;visibility:hidden;transition:opacity .22s,transform .22s}
.has-dd:hover .dd,.has-dd:focus-within .dd{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dd::before{content:'';position:absolute;top:-16px;left:0;right:0;height:18px}
.dd-item{display:flex;align-items:center;gap:12px;padding:9px 11px;border-radius:11px;text-decoration:none;transition:background .15s,border-color .2s,box-shadow .2s;border:1px solid transparent}
.dd-item:hover{background:var(--S3)}
.dd-ic{flex:0 0 34px;width:34px;min-width:34px;max-width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.dd-ic>*,.dd-ic [data-lucide],.dd-ic svg{width:17px!important;height:17px!important;flex:0 0 auto}
.dd-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.dd-item.featured{background:linear-gradient(100deg,rgba(150,148,144,.12),rgba(180,178,174,.04));border-color:rgba(150,148,144,.28);box-shadow:0 4px 16px -6px rgba(150,148,144,.3)}
.dd-item.featured:hover{background:linear-gradient(100deg,rgba(150,148,144,.18),rgba(180,178,174,.07));border-color:rgba(150,148,144,.5)}
.dd-item.featured .dd-ic{box-shadow:0 0 0 3px rgba(150,148,144,.15)}
.dd-nm{font-size:13px;font-weight:700;color:var(--TX);letter-spacing:-.2px;font-family:var(--FD)}
.dd-nm b{font-weight:800}
.dd-ds{font-size:11px;color:var(--TX3);font-family:'Inter',sans-serif}
.dd-tag{font-size:8px;font-weight:700;padding:3px 7px;border-radius:5px;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}
.dd-tag.ok{background:rgba(34,197,94,.12);color:#22C55E}
.dd-tag.soon{background:rgba(234,179,8,.10);color:#D97706}
.dd-item.disabled{opacity:.55}
.nav-r{display:flex;align-items:center;gap:10px}
.nav-login{background:rgba(234,88,12,.05);border:1px solid rgba(234,88,12,.22);color:var(--TX2);font-size:11px;font-weight:400;padding:7px 15px;border-radius:7px;cursor:pointer;text-decoration:none;transition:all .2s;font-family:var(--FM);letter-spacing:.3px}
.nav-login:hover{background:rgba(234,88,12,.09);border-color:rgba(234,88,12,.42);color:var(--TX)}
/* CTA del nav en naranja de marca: el color de accion es UNO en toda la pagina. */
/* CTA principal: la misma rampa del hero-ribbon en vez de naranja sólido,
   respirando lentamente (background-position) — naranja sigue siendo el
   color de entrada/salida, así el botón no pierde su lectura de "acción". */
.btn-prim{background:linear-gradient(90deg,#EA580C 0%,#DB2777 25%,#7C5CE0 50%,#2563EB 75%,#EA580C 100%);background-size:300% 100%;animation:btn-grad-drift 7s ease infinite;color:#fff;font-size:11px;font-weight:700;padding:8px 17px;border-radius:8px;cursor:pointer;text-decoration:none;border:none;transition:box-shadow .2s,transform .2s;font-family:var(--FM);letter-spacing:.3px;box-shadow:0 4px 18px rgba(234,88,12,.30),inset 0 1px 0 rgba(255,255,255,.20)}
.btn-prim:hover{box-shadow:0 0 0 4px rgba(234,88,12,.13),0 8px 28px rgba(234,88,12,.38);transform:translateY(-1px)}
@keyframes btn-grad-drift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* Mobile menu */
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;background:transparent;border:1px solid var(--BD2);border-radius:10px;cursor:pointer;padding:0 10px;flex-shrink:0;transition:border-color .2s}
.nav-burger:hover{border-color:var(--Pl)}
.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(10,10,10,.7);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(--S2);border-left:1px solid var(--BD2);z-index:600;box-shadow:-20px 0 60px rgba(0,0,0,.6);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:4px}
.mobile-menu.open{transform:none}
.mm-x{position:absolute;top:20px;right:20px;width:38px;height:38px;border:1px solid var(--BD2);background:transparent;border-radius:9px;cursor:pointer;color:var(--TX3);display:flex;align-items:center;justify-content:center}
.mm-x:hover{color:var(--Pl);border-color:var(--Pl)}
.mm-link{display:flex;align-items:center;justify-content:space-between;padding:14px 12px;font-size:15px;font-weight:600;color:var(--TX);text-decoration:none;border-radius:11px;transition:background .15s;font-family:var(--FD)}
.mm-link:hover{background:var(--S3)}
.mm-link [data-lucide]{width:17px;height:17px;color:var(--TX3)}
.mm-sec{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--TX3);padding:14px 12px 6px;font-family:var(--FM)}
.mm-prod{display:flex;align-items:center;gap:11px;padding:11px 12px;text-decoration:none;border-radius:12px;border:1px solid var(--BD);transition:.15s;margin-bottom:2px}
.mm-prod:hover{border-color:var(--O);background:rgba(150,148,144,.06)}
.mm-prod .dd-ic{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mm-prod .dd-ic [data-lucide]{width:18px;height:18px}
.mm-prod .pn{flex:1;font-size:14px;font-weight:700;color:var(--TX);font-family:var(--FD)}
.mm-prod .pd{font-size:11px;color:var(--TX3);font-weight:400;font-family:'Inter',sans-serif}
.mm-sub{font-size:13px;color:var(--Pl);font-weight:700;padding:11px 12px;font-family:var(--FM)}
.mm-foot{margin-top:auto;padding-top:20px;display:flex;flex-direction:column;gap:10px}
.mm-foot .nav-login,.mm-foot .btn-prim{width:100%;justify-content:center;text-align:center;padding:13px;font-size:14px}

/* --- HERO --- */
#hero{
  min-height:100vh;position:relative;overflow:hidden;display:flex;align-items:center;
  padding:100px max(20px,calc(50vw - 720px)) 80px;
  background:var(--BASE);
}
#hero::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  /* cromo líquido CLARO: sombras plata + brillos blancos sobre papel */
  background:
    radial-gradient(ellipse 62% 72% at 80% -5%,rgba(120,118,112,.14),transparent 56%),
    radial-gradient(ellipse 52% 60% at -3% 96%,rgba(150,148,142,.10),transparent 54%),
    radial-gradient(ellipse 44% 52% at 10% 30%,rgba(255,255,255,.85),transparent 60%),
    radial-gradient(ellipse 90% 60% at 50% 115%,rgba(140,138,132,.08),transparent 55%);
}
#hero::after{content:'';position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  background-size:256px 256px;pointer-events:none;z-index:1;opacity:.32}
.hero-grid-bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(20,20,20,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(20,20,20,.05) 1px,transparent 1px);
  background-size:62px 62px;
  mask-image:radial-gradient(ellipse 78% 72% at 32% 42%,#000,transparent 76%)}

/* (globo retirado — su lugar lo ocupa la luz-anillo #cur que sigue al usuario) */

.hero-blob{position:absolute;border-radius:50%;filter:blur(110px);pointer-events:none;z-index:0;will-change:transform;animation:blob-drift var(--bd,14s) ease-in-out infinite alternate}
/* CINTA DE COLOR multi-vertical (referencia Stripe del dueño): los 6 negocios
   de la plataforma en un solo gesto cromático detrás del panel — color CON
   significado (gym naranja, taller azul, salón rosa, tienda verde, resto rojo,
   clínica cian), no decoración. Difuminada para que el panel oscuro y el
   titular sigan mandando. */
.hero-ribbon{position:absolute;right:-8%;top:-14%;width:64%;height:118%;z-index:0;pointer-events:none;border-radius:46%;transform:rotate(-9deg);
  background:linear-gradient(118deg,#EA580C 0%,#DC2626 16%,#DB2777 34%,#7C5CE0 52%,#2563EB 68%,#0E7490 82%,#059669 100%);
  filter:blur(85px) saturate(1.05);opacity:.36}
/* Banda NÍTIDA que toca el borde superior (referencia Stripe): el gesto de
   color es parte de la cabecera, no un fondo tímido. */
.hero-ribbon.rb3{right:3%;top:-16%;width:27%;height:82%;opacity:.5;transform:rotate(-17deg);filter:blur(36px) saturate(1.18);border-radius:34%}
.hero-ribbon.rb2{right:-2%;top:24%;width:38%;height:56%;opacity:.20;transform:rotate(14deg);filter:blur(65px)}
/* Los 6 puntos de color del badge: la plataforma entera en 30 píxeles. */
.vdots{display:inline-flex;gap:4px;margin-right:2px}
.vdots i{width:6px;height:6px;border-radius:50%;display:inline-block}
@keyframes blob-drift{0%{transform:translate(0px,0px) scale(1)}50%{transform:translate(var(--bx,30px),var(--by,-40px)) scale(1.12)}100%{transform:translate(calc(var(--bx,30px)*-.6),calc(var(--by,-40px)*.5)) scale(.93)}}}
.aurora-layer{position:absolute;inset:-40%;width:180%;height:180%;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 55% 40% at 20% 30%,rgba(214,212,208,.18) 0%,transparent 60%),
    radial-gradient(ellipse 45% 35% at 80% 20%,rgba(150,148,144,.12) 0%,transparent 60%),
    radial-gradient(ellipse 60% 45% at 55% 75%,rgba(214,212,208,.15) 0%,transparent 65%);
  animation:aurora-drift 18s ease-in-out infinite alternate;will-change:transform}
@keyframes aurora-drift{0%{transform:translate(0%,0%) rotate(0deg)}33%{transform:translate(3%,-4%) rotate(1.5deg)}66%{transform:translate(-2%,5%) rotate(-1deg)}100%{transform:translate(4%,2%) rotate(2deg)}}
#hero-grad-anim{position:absolute;inset:0;z-index:0;pointer-events:none}

/* intro loader retirado (2026-08): entrada limpia sin barrera de pantalla completa */

/* hero inner */
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.18fr;gap:68px;align-items:center;width:100%;max-width:1460px;margin:0 auto}
.h-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(20,20,20,.05);border:1px solid rgba(20,20,20,.16);border-radius:6px;padding:6px 13px;font-size:11px;font-weight:400;color:#55524C;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:20px;font-family:var(--FM)}
.eyebrow{color:var(--Ol)}
.bdot{width:6px;height:6px;border-radius:50%;background:var(--O);box-shadow:0 0 0 3px rgba(234,88,12,.16);animation:blink 2s infinite}
/* Ancla de PRECIO del hero: transparencia de precio temprana (reduce la
   ansiedad de "¿cuánto me costará?" típica del dueño de PYME) + el "GRATIS"
   como gancho de entrada. Píldora cálida, no compite con el CTA. */
.h-price{display:inline-flex;align-items:center;gap:10px;margin-top:16px;background:rgba(234,88,12,.07);border:1px solid rgba(234,88,12,.28);border-radius:100px;padding:9px 18px;font-size:13.5px;color:var(--TX2);font-weight:500}
.h-price b{color:var(--Ol);font-weight:700}
.h-price .hp-free{background:var(--Ol);color:#fff;font-family:var(--FM);font-size:10.5px;font-weight:700;letter-spacing:.6px;padding:3px 9px;border-radius:100px;text-transform:uppercase}
@keyframes blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.75)}}
#hero h1{font-size:clamp(42px,5.2vw,76px);font-weight:600;line-height:1.03;letter-spacing:-3px;color:var(--TX);margin-bottom:20px;font-family:var(--FD)}
.h-sub{font-size:16px;color:var(--TX2);line-height:1.73;max-width:460px;margin-bottom:32px}
.h-ctas{display:flex;align-items:center;gap:12px;margin-bottom:36px;flex-wrap:wrap}
/* CTA primario = NARANJA DE MARCA (antes negro: se camuflaba con el titular).
   Aislamiento cromático (efecto Von Restorff): el único elemento naranja sólido
   de la zona clara es el botón de acción → el ojo aterriza ahí.
   Base #C2410C (blanco encima = AA 4.8:1) con brillo #EA580C arriba. */
.btn-orange{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(90deg,#EA580C 0%,#DB2777 25%,#7C5CE0 50%,#2563EB 75%,#EA580C 100%);background-size:300% 100%;animation:btn-grad-drift 8s ease infinite;color:#fff;font-size:13px;font-weight:700;padding:13px 26px;border-radius:8px;text-decoration:none;border:none;cursor:pointer;font-family:var(--FM);letter-spacing:-.2px;transition:box-shadow .25s,transform .25s;position:relative;overflow:hidden;box-shadow:0 8px 26px rgba(234,88,12,.32),inset 0 1px 0 rgba(255,255,255,.22)}
.btn-orange::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.18) 0%,transparent 60%);opacity:0;transition:opacity .2s}
.btn-orange:hover{transform:translateY(-2px);box-shadow:0 0 0 4px rgba(234,88,12,.14),0 14px 38px rgba(234,88,12,.40)}
.btn-orange:hover::before{opacity:1}
.btn-wh{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.07);color:#fff;font-size:13px;font-weight:600;padding:13px 22px;border-radius:8px;text-decoration:none;border:1px solid rgba(255,255,255,.14);cursor:pointer;font-family:var(--FM);transition:all .2s;backdrop-filter:blur(10px)}
.btn-wh:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28)}
.btn-outline-h{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.6);color:var(--TX);font-size:13px;font-weight:600;padding:13px 22px;border-radius:8px;text-decoration:none;border:1px solid rgba(20,20,20,.22);cursor:pointer;font-family:var(--FM);letter-spacing:-.2px;transition:all .2s;backdrop-filter:blur(8px)}
.btn-outline-h:hover{border-color:rgba(20,20,20,.5);background:#fff;color:#000}
/* proof editorial (sin avatares genéricos) */
.h-proof-ed{display:flex;align-items:center;gap:16px}
.hp-star{font-family:var(--FM);font-size:12px;letter-spacing:2.5px;color:#33312D;white-space:nowrap}
.hp-sep{width:46px;height:1px;background:rgba(20,20,20,.28);flex-shrink:0}
.hp-line{font-family:var(--FS);font-style:italic;font-size:16px;color:var(--TX2);letter-spacing:.2px}
.hp-line strong{color:var(--TX);font-weight:600}

/* hero mockup */
.hero-right{position:relative;padding-bottom:195px;perspective:1300px} /* espacio para la fila de ventanas + perspectiva del desarme 3D */
/* --- SCROLLYTELLING: captions del desarme/armado (estilo Apple) --- */
.hero-cap{position:absolute;left:max(28px,calc(50vw - 720px));top:42%;z-index:4;pointer-events:none;
  font-family:var(--FS);font-size:clamp(26px,2.6vw,44px);font-weight:400;color:rgba(22,22,22,.8);
  letter-spacing:-.5px;line-height:1.18;opacity:0}
.hero-cap b{font-weight:600;color:#000}
.mock-win .mb,.mock-win .mp-area,.mock-win .kpis,.mock-win .mgrid{will-change:transform}
@media(max-width:960px){.hero-cap{display:none}}
.mock-glow{position:absolute;inset:-80px;background:radial-gradient(ellipse at 50% 50%,rgba(20,20,20,.10) 0%,transparent 65%);z-index:0;pointer-events:none}
.mock-win{position:relative;z-index:1;background:rgba(19,19,19,.97);border-radius:14px;border:1px solid var(--BD2);box-shadow:0 32px 100px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,.08);overflow:visible;transform-style:preserve-3d} /* overflow visible: las piezas VUELAN fuera en el desarme */
.mbody{transform-style:preserve-3d}
.mb{border-radius:14px 14px 0 0}
.mb{background:rgba(12,12,12,.9);padding:10px 14px;display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--BD)}
.md{width:9px;height:9px;border-radius:50%}
.mu{flex:1;background:rgba(255,255,255,.05);border-radius:5px;padding:4px 10px;font-size:10px;color:var(--TX3);text-align:center;margin:0 6px;font-family:var(--FM)}
.mbody{padding:16px}
.mh{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.mt{font-size:11px;font-weight:700;color:var(--TX);font-family:var(--FD)}
.ml{font-size:9.5px;color:#22C55E;display:flex;align-items:center;gap:4px;font-family:var(--FM)}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:12px}
.kpi{background:rgba(255,255,255,.04);border:1px solid var(--BD);border-radius:8px;padding:9px}
.kl{font-size:8px;color:var(--TX3);text-transform:uppercase;letter-spacing:.8px;margin-bottom:2px;font-family:var(--FM)}
.kv{font-size:18px;font-weight:900;letter-spacing:-.5px;line-height:1;color:var(--TX);font-family:var(--FD)}
.kc{font-size:8px;margin-top:1px;font-family:var(--FM)}
.cg{color:#22C55E}.cr{color:#EF4444}.cb{color:var(--Pl)}
.chart{display:flex;align-items:flex-end;gap:3px;height:40px;margin-bottom:12px}
.bar{flex:1;border-radius:2px 2px 0 0;background:rgba(255,255,255,.10)}
.bar.hi{background:var(--pa,var(--Pl))} /* --pa = acento por producto (carrusel de verticales) */
/* --- dashboard multipanel ejecutivo --- */
.mgrid{display:grid;grid-template-columns:1.55fr 1fr;gap:8px;margin-bottom:8px}
.mpanel{background:rgba(255,255,255,.025);border:1px solid var(--BD);border-radius:9px;padding:9px 10px}
.mpt{font-size:7.5px;color:var(--TX3);text-transform:uppercase;letter-spacing:.9px;font-weight:700;margin-bottom:7px;font-family:var(--FM)}
.mp-chart .chart{margin-bottom:0;height:58px}
/* --- gráfico de área grande (Ingresos vs. gastos, estilo executive) --- */
.mp-area{margin-bottom:8px}
.mp-area .mpt{display:flex;justify-content:space-between;align-items:center}
.leg{display:inline-flex;align-items:center;gap:5px;font-size:7px;color:var(--TX3);letter-spacing:.4px}
.leg i{width:9px;height:2.5px;border-radius:2px;display:inline-block}
.mp-area .area{width:100%;height:104px;display:block}
.a-fill{fill:rgba(255,255,255,.09)}
.a-line{fill:none;stroke:#E8E6E2;stroke-width:2;stroke-linecap:round}
.a-line2{fill:none;stroke:rgba(255,255,255,.30);stroke-width:1.5;stroke-dasharray:4 4}
.a-months{display:flex;justify-content:space-between;font-family:var(--FM);font-size:7px;color:var(--TX3);margin-top:6px;text-transform:uppercase;letter-spacing:.5px}
.mp-ring{display:flex;flex-direction:column;align-items:center;text-align:center}
.ring{width:56px;height:56px;border-radius:50%;background:conic-gradient(var(--pa,var(--Pl)) calc(var(--p,90)*1%),rgba(255,255,255,.08) 0);display:flex;align-items:center;justify-content:center;position:relative;margin:1px 0 5px}
.ring::before{content:'';position:absolute;inset:6px;border-radius:50%;background:#191919}
.ring b{position:relative;font-family:var(--FD);font-size:15px;font-weight:900;color:var(--TX);letter-spacing:-.5px}
.ring b i{font-size:8.5px;font-weight:700;color:var(--TX3);font-style:normal;margin-left:1px}
.ring-cap{font-size:7.5px;color:var(--TX3);line-height:1.2;font-family:'Inter',sans-serif}
.mp-list{padding-top:9px}
/* --- COLLAGE EJECUTIVO: ventanas satélite flotando alrededor del panel --- */
.mwin{position:absolute;z-index:8;background:rgba(21,21,21,.86);backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15);border:1px solid var(--BD2);border-radius:14px;box-shadow:0 28px 80px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.05),inset 0 1px 0 rgba(255,255,255,.09);padding:17px 19px;
  transition:box-shadow .3s ease,border-color .3s ease}
.mwin:hover{z-index:30;border-color:rgba(255,255,255,.30);box-shadow:0 38px 96px rgba(0,0,0,.82),0 0 0 1px rgba(255,255,255,.12),0 0 44px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.14)}
.mwt{font-size:10px;color:var(--TX3);text-transform:uppercase;letter-spacing:1.1px;font-weight:700;margin-bottom:12px;font-family:var(--FM)}
/* CASCADA compacta, UNA SOLA ORIENTACIÓN (sin rotar): principal arriba,
   caja e indicadores/seguimiento pegados solapando sus bordes */
.mw-fin{left:-34px;bottom:78px;width:272px}
.mw-kpi{right:-46px;top:100px;width:322px}
.mw-list{right:-28px;bottom:38px;width:400px}
.mw-list .mrow{padding:7px 0}
.mw-list .mn{font-size:11.5px}
.mw-list .mp{font-size:10px}
.mw-list .mav{width:28px;height:28px;font-size:9.5px}
.mw-list .mbg{font-size:9px;padding:3px 9px}
.krow{display:flex;align-items:center;gap:10px;padding:7.5px 0;border-bottom:1px solid var(--BD)}
.krow:last-child{border:none}
.krow .mbg{font-size:9px;padding:3px 9px}
.kn{flex:1;font-size:11.5px;font-weight:600;color:var(--TX2);font-family:var(--FD)}
.kspark{width:58px;height:16px;flex-shrink:0}
.kspark polyline{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mw-fin .fv{font-size:32px;font-weight:900;color:var(--TX);letter-spacing:-.5px;line-height:1;font-family:var(--FD)}
.mw-fin .fc{font-size:10px;color:var(--TX3);margin-top:4px;font-family:var(--FM)}
.mw-fin .fbars{display:flex;align-items:flex-end;gap:4px;height:40px;margin-top:12px}
.mw-fin .fbars i{flex:1;background:rgba(255,255,255,.12);border-radius:2px 2px 0 0}
.mw-fin .fbars i.hi{background:#E8E6E2}
@media(prefers-reduced-motion:reduce){.mwin{animation:none}}
.mrow{display:flex;align-items:center;gap:7px;padding:6px 0;border-bottom:1px solid var(--BD)}
.mrow:last-child{border:none}
.mav{width:24px;height:24px;border-radius:50%;font-size:8.5px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--FM)}
.mi{flex:1}
.mn{font-size:10px;font-weight:700;color:var(--TX);font-family:var(--FD)}
.mp{font-size:9px;color:var(--TX3);font-family:'Inter',sans-serif}
.mbg{font-size:8px;font-weight:700;padding:2px 7px;border-radius:4px;font-family:var(--FM)}
.bg{background:rgba(34,197,94,.12);color:#22C55E}
.by{background:rgba(202,138,4,.10);color:#D97706}
.br{background:rgba(239,68,68,.12);color:#EF4444}
.fb{position:absolute;z-index:12;background:rgba(12,12,12,.92);backdrop-filter:blur(20px);border:1px solid var(--BD2);border-radius:14px;padding:14px 20px;display:flex;align-items:center;gap:12px;box-shadow:0 8px 40px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.04) inset;min-width:240px;
  transition:box-shadow .3s ease,border-color .3s ease}
.fb:hover{z-index:30;border-color:rgba(255,255,255,.30);box-shadow:0 14px 52px rgba(0,0,0,.65),0 0 34px rgba(255,255,255,.06),0 0 0 1px rgba(255,255,255,.10) inset}
.fb.fb1{right:-40px;top:372px}      /* Pago recibido: bajo los indicadores, sobre el borde derecho */
.fb.fb2{left:196px;bottom:210px}    /* 8 por vencer: sobre la unión caja/seguimiento (como la ref) */
.fb-ic{font-size:20px;line-height:1}
.fb-t{font-size:12px;font-weight:700;color:var(--TX);font-family:var(--FD)}
.fb-s{font-size:10.5px;color:var(--TX3);margin-top:1px;font-family:'Inter',sans-serif}

/* --- SCROLL HINT --- */
@keyframes scroll-arrow{0%,100%{transform:translateY(0);opacity:.8}50%{transform:translateY(8px);opacity:.3}}
#scroll-hint{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none}
#scroll-hint svg{animation:scroll-arrow 1.8s ease-in-out infinite}
#scroll-hint span{font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--TX3);font-family:var(--FM)}

/* --- SECTION BASE --- */
.sec{padding:88px max(20px,calc(50vw - 720px));position:relative;z-index:2}
.sec-in{max-width:1440px;margin:0 auto}
.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--Pl);margin-bottom:12px;display:flex;align-items:center;gap:8px;font-family:var(--FM)}
/* El "//" de cada encabezado lleva la misma rampa del hero-ribbon: un toque
   de marca que se repite en cada sección, no solo en el hero. */
.eyebrow::before{
  content:'//';font-size:10px;letter-spacing:0;font-weight:700;
  background:linear-gradient(90deg,#EA580C,#DB2777,#7C5CE0,#2563EB);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
h2{font-size:clamp(28px,3.5vw,52px);font-weight:600;letter-spacing:-2px;line-height:1.07;margin-bottom:14px;color:var(--TX);text-wrap:balance;font-family:var(--FD)}
#hero h1,h2,h3{text-wrap:balance}
.h-sub,.sec-sub,.fd,p{text-wrap:pretty}
.sec-sub{font-size:16px;color:var(--TX2);line-height:1.72;max-width:500px}
.tc .sec-sub{margin:0 auto}
.tc .eyebrow{justify-content:center}

/* --- CIFRAS EDITORIALES (reemplazó al strip marquee + tarjetas de stats) --- */
#stats{padding:76px max(20px,calc(50vw - 720px));background:var(--S1);border-top:1px solid var(--BD);border-bottom:1px solid var(--BD)}
.sg-ed{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
.se{padding:8px 40px;border-left:1px solid var(--BD2)}
.se:first-child{border-left:none;padding-left:0}
.se-n{font-family:var(--FS);font-size:clamp(44px,4.4vw,66px);font-weight:500;line-height:1;color:#161616;letter-spacing:-1px;display:flex;align-items:baseline;gap:9px}
.se-n i{font-style:normal;font-family:var(--FM);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--TX3)}
.se-l{margin-top:13px;font-family:var(--FM);font-size:10.5px;line-height:1.7;letter-spacing:.6px;text-transform:uppercase;color:var(--TX3)}

/* --- PROBLEM --- */
.prob-g{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--BD);border:1px solid var(--BD);border-radius:20px;overflow:hidden;margin-top:52px}
.prob-c{background:var(--S1);padding:40px 30px;position:relative;overflow:hidden;transition:transform .3s}
.prob-c:hover{transform:scale(1.015);z-index:2}
.prob-c::before{content:'';position:absolute;inset:0;background:linear-gradient(160deg,var(--S2) 0%,var(--S1) 100%)}
.pc{position:relative;z-index:1}
.p-ic{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;border:1px solid var(--BD2)}
.p-ic [data-lucide]{width:21px;height:21px}
.prob-c h3{font-size:18px;font-weight:600;margin-bottom:9px;letter-spacing:-.3px;color:var(--TX);font-family:var(--FD)}
.prob-c p{font-size:13.5px;color:var(--TX2);line-height:1.65}

/* --- PRODUCT --- */
.prod-g{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.p-tag{display:inline-flex;align-items:center;gap:6px;background:rgba(150,148,144,.09);border:1px solid rgba(150,148,144,.22);border-radius:6px;padding:4px 12px;font-size:10px;font-weight:700;color:var(--Ol);text-transform:uppercase;letter-spacing:.8px;margin-bottom:20px;font-family:var(--FM)}
.feat-list{margin-top:24px}
.feat-row{display:flex;gap:14px;padding:15px 0;border-bottom:1px solid var(--BD);transition:background .2s,transform .2s,padding-left .2s}
.feat-row:last-child{border:none}
.feat-row:hover{background:rgba(214,212,208,.06);transform:translateX(5px);border-radius:10px;padding-left:8px}
.fic{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:rgba(150,148,144,.10)}
.fic [data-lucide]{width:16px;height:16px;color:var(--Ol)}
.ft_{font-size:14px;font-weight:700;margin-bottom:3px;letter-spacing:-.2px;color:var(--TX);font-family:var(--FD)}
.fd{font-size:13px;color:var(--TX2);line-height:1.62}
.prod-cta{display:flex;align-items:center;gap:14px;margin-top:28px;flex-wrap:wrap}
.prod-note{font-size:11px;color:var(--TX3);font-family:var(--FM)}
.kl-tag{display:inline-flex;align-items:center;gap:4px;background:rgba(150,148,144,.08);border:1px solid rgba(150,148,144,.18);color:var(--Ol);font-size:8px;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:2px 8px;border-radius:4px;margin-top:5px;font-family:var(--FM)}
.ph-w{display:flex;justify-content:center;position:relative}
.ph-glow{position:absolute;width:300px;height:300px;background:radial-gradient(circle,rgba(150,148,144,.18) 0%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%)}
.phone{width:245px;background:#0A0A0A;border-radius:38px;border:7px solid #1C1C1C;box-shadow:0 40px 100px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.04);overflow:hidden;position:relative;z-index:1}
.ph-n{height:24px;background:#0A0A0A;display:flex;align-items:center;justify-content:center}
.ph-pill{width:72px;height:18px;background:#000;border-radius:0 0 12px 12px}
.ph-screen{padding:11px;background:#0A0A0A;min-height:450px}
.phs{font-size:7.5px;font-weight:700;color:rgba(255,255,255,.28);text-transform:uppercase;letter-spacing:1px;margin-bottom:7px;font-family:var(--FM)}
.ph-ks{display:flex;gap:5px;margin-bottom:9px}
.ph-k{flex:1;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);border-radius:8px;padding:8px 5px;text-align:center}
.ph-kv{font-size:15px;font-weight:900;letter-spacing:-.5px;font-family:var(--FD)}
.ph-kl{font-size:7px;color:rgba(255,255,255,.3);margin-top:1px;text-transform:uppercase;font-family:var(--FM)}
.ph-r{display:flex;align-items:center;gap:7px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.ph-r:last-child{border:none}
.ph-av{width:21px;height:21px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;flex-shrink:0;font-family:var(--FM)}
.ph-nm{font-size:9px;font-weight:700;flex:1;color:#F1F0FF;font-family:var(--FD)}
.ph-wa{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.2);color:#22C55E;font-size:7.5px;font-weight:700;padding:2px 7px;border-radius:5px;font-family:var(--FM)}
.ph-box{margin-top:9px;background:rgba(150,148,144,.09);border:1px solid rgba(150,148,144,.18);border-radius:9px;padding:9px;text-align:center}
.ph-bt{font-size:8.5px;color:var(--Ol);font-weight:800;margin-bottom:3px;font-family:var(--FM)}
.ph-bs{font-size:7.5px;color:rgba(255,255,255,.35);font-family:'Inter',sans-serif}

/* --- VERTICALS --- */
.v-g{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(20,20,20,.08);border:1px solid var(--BD);border-radius:20px;overflow:hidden;margin-top:48px}
.v-c{position:relative;overflow:hidden;padding:28px 22px;
  background:#FFFFFF;backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid rgba(20,20,20,.06)!important;border-top-color:rgba(20,20,20,.10)!important;
  transition:transform .5s cubic-bezier(.23,1,.32,1),box-shadow .5s;cursor:pointer;min-height:310px;display:flex;flex-direction:column;
  transform-style:preserve-3d;transform:perspective(900px) rotateX(0deg) rotateY(0deg)}
.v-c::before{content:'';position:absolute;inset:0;background:linear-gradient(170deg,rgba(255,255,255,.90) 0%,rgba(255,255,255,.74) 55%,rgba(255,255,255,.94) 100%);transition:opacity .4s}
.v-c::after{content:'';position:absolute;top:0;left:20px;right:20px;height:1px;background:linear-gradient(90deg,transparent,rgba(22,22,22,.30) 35%,rgba(22,22,22,.18) 65%,transparent);z-index:2;pointer-events:none}
.v-c:hover{background:#FFFFFF!important;box-shadow:0 8px 48px rgba(20,20,20,.14),0 0 0 1px rgba(20,20,20,.16)!important;z-index:3}
.v-c:hover::before{opacity:.5}
.v-cnt{position:relative;z-index:1;display:flex;flex-direction:column;height:100%}
.v-avail{position:absolute;top:14px;right:14px;font-size:8px;font-weight:700;padding:3px 9px;border-radius:100px;text-transform:uppercase;letter-spacing:.4px;font-family:var(--FM)}
.avy{background:rgba(34,197,94,.12);color:#22C55E;border:1px solid rgba(34,197,94,.18)}
.avs_{background:rgba(20,20,20,.05);color:rgba(22,22,22,.5);border:1px solid rgba(20,20,20,.10)}
.v-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.v-ico{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow .35s;position:relative}
.v-ico [data-lucide]{width:24px;height:24px;stroke-width:2}
.v-c:hover .v-ico{transform:scale(1.14) rotate(-7deg)}
.v-name{font-size:21px;font-weight:700;letter-spacing:-.6px;color:#161616;line-height:1;font-family:var(--FD)}
.v-name b{font-weight:700}
.v-tag{font-size:8px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:2px 8px;border-radius:4px;margin-bottom:8px;display:inline-block;width:fit-content;font-family:var(--FM)}
.v-desc{font-size:12.5px;color:rgba(22,22,22,.78);line-height:1.6;margin-bottom:10px;flex:1}
.v-feats{list-style:none;display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.v-feats li{font-size:11px;color:rgba(22,22,22,.6);display:flex;align-items:center;gap:6px;font-family:'Inter',sans-serif}
.v-feats li [data-lucide]{display:none}
.v-feats li::before{content:'';width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.55;flex-shrink:0;margin-top:1px}
.v-avail-date{background:rgba(234,179,8,.10)!important;color:#D97706!important;border:1px solid rgba(234,179,8,.22)!important;font-size:9px;font-weight:800;letter-spacing:.5px}
.v-price{font-size:20px;font-weight:700;letter-spacing:-1px;color:#161616;margin-top:auto;font-family:var(--FD)}
.v-price span{font-size:11.5px;font-weight:400;color:rgba(22,22,22,.5)}
.v-link{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:rgba(22,22,22,.72);text-decoration:none;opacity:.85;transition:gap .25s,opacity .2s,color .2s;font-family:var(--FM);letter-spacing:.3px}
.v-link [data-lucide]{width:13px;height:13px}
.v-c:hover .v-link{opacity:1;gap:11px;color:var(--Ol)}
.vc-glow{position:absolute;inset:0;pointer-events:none;z-index:6;
  border:2px solid transparent;
  background:radial-gradient(250px 250px at var(--gx,-999px) var(--gy,-999px),rgba(20,20,20,.45),transparent 72%) border-box;
  background-attachment:fixed;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);mask-composite:exclude;
  opacity:0;transition:opacity .35s}
.v-c:hover .vc-glow{opacity:1}
/* --- V-STAT: estadística animada por producto (ecualizador + dato) --- */
.v-stat{display:flex;align-items:center;gap:11px;margin:2px 0 14px;padding:8px 11px;background:rgba(20,20,20,.035);border:1px solid rgba(20,20,20,.09);border-radius:10px}
.v-spark{display:flex;align-items:flex-end;gap:2.5px;height:24px;flex-shrink:0}
.v-spark i{width:4px;height:100%;border-radius:2px;background:currentColor;transform-origin:bottom;transform:scaleY(.25);animation:vsp 2.2s ease-in-out infinite}
.v-spark i:nth-child(2){animation-delay:.18s}.v-spark i:nth-child(3){animation-delay:.36s}.v-spark i:nth-child(4){animation-delay:.54s}.v-spark i:nth-child(5){animation-delay:.72s}.v-spark i:nth-child(6){animation-delay:.9s}
@keyframes vsp{0%,100%{transform:scaleY(.22);opacity:.5}50%{transform:scaleY(1);opacity:1}}
.v-stat-t{font-size:10px;color:rgba(22,22,22,.58);font-family:var(--FM);line-height:1.35;letter-spacing:.2px}
.v-stat-t b{display:block;font-size:16px;font-weight:800;color:#161616;font-family:var(--FD);letter-spacing:-.5px;margin-bottom:1px}
@media(prefers-reduced-motion:reduce){.v-spark i{animation:none;transform:scaleY(.7)}}

/* --- STEPS --- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.step{background:#FFFFFF;border:1px solid var(--BD);border-radius:16px;padding:32px 26px;transition:all .25s;position:relative;overflow:hidden;box-shadow:0 2px 12px rgba(20,20,20,.04)}
.step:hover{transform:translateY(-4px);border-color:rgba(20,20,20,.24);box-shadow:0 18px 44px -14px rgba(20,20,20,.16)}
.step-nb{position:absolute;top:20px;right:22px;font-size:52px;font-weight:700;color:var(--Pl);opacity:.05;line-height:1;letter-spacing:-3px;font-variant-numeric:tabular-nums;font-family:var(--FD)}
.step:hover .step-nb{opacity:.10;transition:opacity .3s}
.step-n{font-size:9px;font-weight:700;letter-spacing:2px;color:var(--TX3);text-transform:uppercase;margin-bottom:16px;display:flex;align-items:center;gap:7px;font-family:var(--FM)}
.step-n [data-lucide]{width:14px;height:14px;color:var(--Pl)}
.step h3{font-size:17px;font-weight:600;letter-spacing:-.4px;margin-bottom:9px;color:var(--TX);font-family:var(--FD)}
.step p{font-size:13px;color:var(--TX2);line-height:1.65}
.step::before{content:"";position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .3s;pointer-events:none;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(20,20,20,.06),transparent 42%)}
.step>*{position:relative;z-index:1}
.step:hover::before{opacity:1}
.step-lord{width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;
  background:linear-gradient(135deg,rgba(20,20,20,.06),rgba(20,20,20,.03));border:1px solid rgba(20,20,20,.10);transition:background .3s,box-shadow .3s}
.step:hover .step-lord{background:linear-gradient(135deg,rgba(20,20,20,.10),rgba(20,20,20,.05));box-shadow:0 8px 32px rgba(20,20,20,.10)}
.feat-lord{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:rgba(150,148,144,.10);transition:background .2s,transform .2s}
.feat-row:hover .feat-lord{background:rgba(150,148,144,.18);transform:scale(1.1)}
lord-icon{display:block!important}

/* --- TESTIMONIALS --- */
.t-g{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.tc_{background:#FFFFFF;border:1px solid var(--BD);border-radius:16px;padding:24px 20px;transition:all .25s;box-shadow:0 2px 12px rgba(20,20,20,.04)}
.tc_:hover{box-shadow:0 12px 40px rgba(20,20,20,.12),0 0 0 1px rgba(20,20,20,.14);transform:translateY(-5px);border-color:rgba(20,20,20,.14)}
.tc_.ft{border-color:rgba(20,20,20,.18);background:linear-gradient(135deg,rgba(20,20,20,.03),#FFFFFF)}
.t-stars{color:#55524C;font-size:13px;margin-bottom:11px;letter-spacing:2px}
.t-text{font-size:13.5px;color:var(--TX2);line-height:1.73;margin-bottom:16px;font-style:italic}
.t-text::before{content:'"';color:var(--Pl);font-size:22px;font-style:normal;line-height:0;vertical-align:-7px;margin-right:2px}
.t-author{display:flex;align-items:center;gap:10px}
.t-av{width:38px;height:38px;border-radius:50%;background-size:cover;background-position:center;flex-shrink:0;border:1.5px solid var(--BD2)}
.t-name{font-size:13px;font-weight:700;color:var(--TX);font-family:var(--FD)}
.t-role{font-size:11px;color:var(--TX3);font-family:'Inter',sans-serif}

/* --- CTA --- */
#cta{
  padding:96px max(20px,calc(50vw - 720px));
  text-align:center;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#262626 0%,#161616 48%,#0D0D0D 100%);
}
#cta::before{content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:28px 28px;opacity:.5}
#cta h2{color:#fff!important;font-size:clamp(34px,5vw,62px);letter-spacing:-2.5px;max-width:700px;margin:0 auto 16px}
#cta p{font-size:16px;color:rgba(255,255,255,.72);margin-bottom:30px}
.cta-btns{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.btn-wht{display:inline-flex;align-items:center;gap:9px;background:#fff;color:#0D0D0D;font-size:14px;font-weight:800;padding:15px 32px;border-radius:11px;text-decoration:none;border:none;cursor:pointer;font-family:var(--FM);transition:all .25s;box-shadow:0 8px 32px rgba(0,0,0,.25)}
.btn-wht:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(0,0,0,.35)}
.btn-wht [data-lucide]{color:#0D0D0D}
.btn-trans{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.10);color:#fff;font-size:14px;font-weight:700;padding:15px 26px;border-radius:11px;text-decoration:none;border:1px solid rgba(255,255,255,.20);cursor:pointer;font-family:var(--FM);transition:all .2s}
.btn-trans:hover{background:rgba(255,255,255,.18)}
.cta-meta{font-size:12px;color:rgba(255,255,255,.55);font-family:var(--FM)}
.cta-meta span{margin:0 6px;opacity:.4}
/* Mismo degradado del hero-ribbon, reutilizado aquí para cerrar la página
   con la misma firma cromática (2026-08-21). Estático a propósito — el
   pase de calma del 2026-08-20 quitó movimiento, no color. */
.cta-ribbon{position:absolute;left:50%;top:50%;width:78%;height:150%;transform:translate(-50%,-50%) rotate(-9deg);border-radius:46%;
  background:linear-gradient(118deg,#EA580C 0%,#DC2626 16%,#DB2777 34%,#7C5CE0 52%,#2563EB 68%,#0E7490 82%,#059669 100%);
  filter:blur(110px) saturate(1.05);opacity:.24;pointer-events:none;z-index:0}
#cta-spot{position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.12) 0%,transparent 60%);pointer-events:none;transform:translate(-50%,-50%);opacity:0;transition:opacity .4s ease;z-index:1}
@keyframes ring-expand{0%{transform:translate(-50%,-50%) scale(.3);opacity:.6}100%{transform:translate(-50%,-50%) scale(2.8);opacity:0}}
.cta-ring{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.08);pointer-events:none;z-index:0;animation:ring-expand 5s ease-out infinite}
@keyframes ctaPulse{0%,100%{box-shadow:0 8px 24px rgba(20,20,20,.22)}50%{box-shadow:0 8px 32px rgba(20,20,20,.34),0 0 0 5px rgba(20,20,20,.08)}}
.cta-pulse{animation:ctaPulse 2.8s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.cta-pulse{animation:none}}
#cta-lottie-wrap{position:absolute;right:5%;top:50%;transform:translateY(-50%);opacity:.15;pointer-events:none;z-index:1;animation:lottie-float 6s ease-in-out infinite}
@keyframes lottie-float{0%,100%{transform:translateY(-50%) scale(1)}50%{transform:translateY(calc(-50% - 16px)) scale(1.04)}}
@media(max-width:960px){#cta-lottie-wrap{display:none}}

/* --- FOOTER --- */
footer{background:var(--BASE2);border-top:1px solid var(--BD);padding:52px max(20px,calc(50vw - 720px)) 28px}
.foot-in{max-width:1440px;margin:0 auto 44px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px}
.foot-brand p{font-size:13px;color:var(--TX3);line-height:1.75;margin-top:12px;max-width:210px}
.fc_{display:flex;flex-direction:column;gap:2px}
.fc_ h4{font-size:10px;font-weight:700;color:var(--TX3);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:12px;font-family:var(--FM)}
.fc_ ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.fc_ ul a{text-decoration:none;font-size:13px;color:var(--TX3);transition:color .2s}
.fc_ ul a:hover{color:var(--TX)}
.fc_ ul a.act{color:var(--Ol)}
.foot-bot{max-width:1440px;margin:0 auto;padding-top:20px;border-top:1px solid var(--BD);display:flex;justify-content:space-between;font-size:12px;color:rgba(245,243,255,.28);flex-wrap:wrap;gap:6px;font-family:'Inter',sans-serif}

/* --- DIVIDERS --- */
.divider{display:block;width:100%;overflow:hidden;line-height:0;margin:0;padding:0}
.divider svg{display:block;width:100%}

/* --- FAQ --- */
.faq-wrap{max-width:760px;margin:44px auto 0;display:flex;flex-direction:column;gap:10px}
.faq{background:#FFFFFF;border:1px solid var(--BD);border-radius:14px;overflow:hidden;transition:box-shadow .2s,border-color .2s}
.faq[open]{box-shadow:0 8px 24px rgba(20,20,20,.10),0 0 0 1px rgba(20,20,20,.14);border-color:rgba(20,20,20,.16)}
.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:var(--FD)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .q-ic{width:20px;height:20px;flex-shrink:0;color:var(--Pl);transition:transform .25s}
.faq[open] summary .q-ic{transform:rotate(45deg)}
.faq-a{padding:0 24px 22px;font-size:14px;color:var(--TX2);line-height:1.66}

/* --- SHIMMER --- */
.shimmer{
  /* misma rampa del hero-ribbon/botones, en vez del barrido grafito mono */
  background:linear-gradient(110deg,#EA580C 0%,#DB2777 25%,#7C5CE0 50%,#2563EB 75%,#EA580C 100%);
  background-size:250% 100%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;
  animation:shimmer-move 5s linear infinite;
}
@keyframes shimmer-move{0%{background-position:200% center}100%{background-position:-50% center}}
@media(prefers-reduced-motion:reduce){.shimmer{animation:none;background-size:100% 100%}}

/* --- SPARKLES --- */
@keyframes sparkle-twinkle{0%,100%{opacity:0;transform:scale(0) rotate(0deg)}50%{opacity:.85;transform:scale(1) rotate(180deg)}}
.sparkle-dot{position:absolute;pointer-events:none;z-index:1;border-radius:50%;animation:sparkle-twinkle var(--st,3s) ease-in-out infinite var(--sd,0s)}

/* (icon-pulse retirado junto con las tarjetas de stats) */

/* --- MAG --- */
.mag{will-change:transform;transition:box-shadow .25s!important}

/* --- LENIS --- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}

/* --- RESPONSIVE --- */
@media(max-width:960px){
  .hero-inner,.prod-g{grid-template-columns:1fr}
  .hero-right{display:flex;justify-content:center;max-width:360px;margin:0 auto;padding-bottom:0}
  .hero-right .fb,.hero-right .mwin{display:none}
  .hero-right .mock-win{width:100%;max-width:340px}
  .prob-g,.v-g,.steps,.t-g,.p-g_{grid-template-columns:1fr}
  .sg-ed{grid-template-columns:repeat(2,1fr);row-gap:38px}
  .se{padding:0 26px}
  .se:nth-child(odd){border-left:none;padding-left:0}
  .foot-in{grid-template-columns:1fr 1fr}
  .nav-links,.sls{display:none}
  .nav-burger{display:flex}
  .nav-r .nav-login{display:none}
}
@media(max-width:430px){.nav-r .btn-prim{padding:7px 13px}}
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal-l,.reveal-r,.stagger>*,.h1-inner{opacity:1!important;transform:none!important}
  .fb,.strip-track{animation:none!important}
  #cur{display:none!important}
  .aurora-layer,.hero-blob{animation:none!important}
  .nl-ico{animation:none!important}
  .btn-prim,.btn-orange{animation:none!important;background-position:0% 50%!important}
}
@media(max-width:900px){.hero-grid-bg{background-size:46px 46px}}

/* ───── segundo bloque de estilos ───── */
/* ═══════════════════════════════════════════════════════════════════════
   ELEVACIÓN AWARD-QUALITY (inspirado en exebenus/cipher/lamalama/breedlove):
   tipografía dominante + globo protagonista + capa de detalle técnico.
   ═══════════════════════════════════════════════════════════════════════ */
/* 1 · Tipografía que domina el viewport */
/* Titular EDITORIAL: serif Fraunces, mayúsculas, monocromo blanco cálido (estilo ejecutivo). */
#hero-h1{font-family:var(--FS)!important;font-size:clamp(38px,6.4vw,94px)!important;line-height:1.02!important;letter-spacing:-1px!important;font-weight:500;text-transform:uppercase;color:#161616}
/* "gestión" queda en tinta (editorial); "TODO EN UNO." lleva el naranja de
   marca — un solo golpe de color en el titular = la promesa que se recuerda. */
#hero-h1 .gu{color:#161616}
#hero-h1 .go{color:var(--Ol)}
@media(max-width:600px){#hero-h1{letter-spacing:-.5px!important;font-size:clamp(34px,10vw,60px)!important}}
.h-sub{font-size:16px;max-width:440px;color:rgba(22,22,22,.66)}

/* 2 · Globo retirado: lo reemplaza la luz-anillo #cur que acompaña la navegación */

/* 3-4 · Marco de esquinas y ficha de ubicación ELIMINADOS a pedido */

/* 5 · Ticker móvil ELIMINADO a pedido */
#scroll-hint{display:none!important}

/* ════ MENÚ MEJORADO: barra glass + cápsula segmentada de links ════ */
/* Nav CRISTAL arriba (pedido del dueño: "que el color llegue hasta arriba"):
   en el tope el fondo es transparente con blur suave — la cinta de color de la
   plataforma respira detrás del menú; al scrollear se vuelve sólido y legible. */
nav{height:66px!important;background:transparent!important;backdrop-filter:blur(10px) saturate(1.15)!important;-webkit-backdrop-filter:blur(10px) saturate(1.15)!important;border-bottom:1px solid transparent!important}
nav.scrolled{background:rgba(255,255,255,.88)!important;backdrop-filter:blur(18px) saturate(1.2)!important;-webkit-backdrop-filter:blur(18px) saturate(1.2)!important;border-bottom:1px solid rgba(20,20,20,.06)!important}
/* hairline grafito bajo el nav */
nav::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(22,22,22,.30),transparent);opacity:.65;pointer-events:none}
.nl{font-size:17px!important}
/* badge 'SaaS' eliminado a pedido */
/* cápsula que contiene los links (segmented control) */
.nav-links{background:rgba(20,20,20,.05)!important;border:1px solid rgba(20,20,20,.10)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 4px 16px rgba(20,20,20,.06)!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:var(--FD)!important;font-size:13px!important;text-transform:none!important;letter-spacing:-.1px!important;font-weight:500!important;color:rgba(22,22,22,.65)!important;padding:8px 15px!important;border-radius:100px!important;transition:background .2s,color .2s!important}
.nav-links a:hover{background:rgba(20,20,20,.08)!important;color:#111!important}
.nav-links a span.ul{display:none!important}
/* botones del nav un poco más grandes y legibles */
.nav-login{font-size:12px!important;padding:9px 16px!important;border-radius:9px!important}
.btn-prim{font-size:12px!important;padding:9px 17px!important;border-radius:9px!important}

/* ════ RIELES LATERALES: ocupar los márgenes vacíos del hero ════ */
.hero-rail{position:absolute;z-index:3;top:50%;transform:translateY(-50%);font-family:var(--FM);font-size:9.5px;letter-spacing:2.5px;text-transform:uppercase;color:rgba(22,22,22,.4);writing-mode:vertical-rl;display:flex;align-items:center;gap:16px;pointer-events:none}
.hero-rail.l{left:28px}
.hero-rail i{width:42px;height:1px;background:linear-gradient(rgba(22,22,22,.5),transparent);flex-shrink:0}
.hero-rail .dn{animation:railpulse 2.4s ease-in-out infinite}
@keyframes railpulse{0%,100%{opacity:.4}50%{opacity:1}}
/* acento angular sutil (energía geométrica) */
.hero-angular{position:absolute;z-index:1;pointer-events:none;left:-4%;bottom:8%;width:340px;height:1px;background:linear-gradient(90deg,transparent,rgba(22,22,22,.28),transparent);transform:rotate(-34deg);transform-origin:left;opacity:.6}
.hero-angular::before{content:'';position:absolute;left:38%;top:-90px;width:1px;height:180px;background:linear-gradient(transparent,rgba(22,22,22,.22),transparent);transform:rotate(-34deg)}

.nav-links a{font-family:var(--FD)!important}
/* Pulido de detalle: dark nativo + selección de marca + scrollbar fino */
html{color-scheme:light}
::selection{background:rgba(22,22,22,.14);color:#111}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:#EFEDE8}
::-webkit-scrollbar-thumb{background:rgba(22,22,22,.35);border-radius:6px;border:2px solid #EFEDE8}
::-webkit-scrollbar-thumb:hover{background:rgba(22,22,22,.55)}
/* Microcopy de baja fricción bajo los CTA del hero */
.h-ctas-note{margin:-22px 0 36px;font-family:var(--FM);font-size:11px;letter-spacing:.3px;color:rgba(22,22,22,.55);display:flex;align-items:center;gap:7px}
.h-ctas-note b{color:#33312D;font-weight:400}
@media(prefers-reduced-motion:reduce){.hero-ticker .tk{animation:none}.hero-rail .dn{animation:none}}
@media(max-width:960px){.hero-rail{display:none}.hero-angular{display:none}}
@media(max-width:900px){.hero-ticker{display:none}.nav-links{background:transparent!important;border:0!important}}
@media(max-width:600px){.sec{padding:58px 20px}#cta{padding:64px 20px}footer{padding:44px 20px 26px}.h-ctas-note{margin:-12px 0 28px}}
/* Pase de calma 2026-08-20: la luna que seguía al mouse se retiró (ver enhance.js). */
#cur{display:none!important}