/* ============================================================
   downloaderV · CAPA PRO  (pro.css)
   Animaciones premium añadidas encima de styles.css.
   Todo respeta prefers-reduced-motion y no toca la lógica existente.
   ============================================================ */

:root{
  --pro-grad:linear-gradient(120deg,#E91E63,#8B5CF6 45%,#EC4899 80%,#F59E0B);
  --pro-ease:cubic-bezier(.16,1,.3,1);
  --pro-spring:cubic-bezier(.34,1.56,.64,1);
}

/* ============================================================
   1 · INTRO DE MARCA (preloader)
   ============================================================ */
.pro-intro{position:fixed; inset:0; z-index:1000; display:grid; place-items:center;
  background:radial-gradient(120% 90% at 50% 40%,#111a33 0%,#070a12 70%); color:#fff;
  clip-path:inset(0 0 0 0); transition:clip-path 1s var(--pro-ease), visibility 0s 1s;
  animation:proIntroSafety .01s 4.5s forwards}           /* red de seguridad si falla el JS */
.pro-intro.out{clip-path:inset(0 0 100% 0); visibility:hidden}
html.pro-skip .pro-intro{display:none}
@keyframes proIntroSafety{to{clip-path:inset(0 0 100% 0); visibility:hidden}}

.pro-intro-in{display:flex; flex-direction:column; align-items:center; gap:22px}
.pro-intro-logo{position:relative; width:96px; height:96px; border-radius:26px; background:#fff; display:grid; place-items:center;
  box-shadow:0 30px 80px -20px rgba(233,30,99,.65); transform:scale(.4) rotate(-14deg); opacity:0;
  animation:proLogoIn .9s var(--pro-spring) .1s forwards}
.pro-intro-logo img{width:74px; height:74px; border-radius:18px}
.pro-intro-logo::before{content:""; position:absolute; inset:-10px; border-radius:34px; padding:2px;
  background:conic-gradient(from var(--ang,0deg),#E91E63,#8B5CF6,#EC4899,#06B6D4,#E91E63);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  animation:rotateBorder 1.6s linear infinite}
.pro-intro-logo::after{content:""; position:absolute; inset:-30px; border-radius:50%; border:2px solid rgba(139,92,246,.5);
  animation:proRingOut 1.4s ease-out .4s infinite}
@keyframes proLogoIn{to{transform:none; opacity:1}}
@keyframes proRingOut{0%{transform:scale(.6); opacity:.9}100%{transform:scale(1.7); opacity:0}}

.pro-intro-name{font-family:var(--font-display); font-weight:700; font-size:clamp(30px,6vw,46px); letter-spacing:-.03em; display:flex; overflow:hidden}
.pro-intro-name span{display:inline-block; transform:translateY(110%); opacity:0; animation:proLetter .7s var(--pro-ease) forwards}
.pro-intro-name span.v{background:var(--pro-grad); -webkit-background-clip:text; background-clip:text; color:transparent}
@keyframes proLetter{to{transform:none; opacity:1}}

.pro-intro-bar{width:180px; height:3px; border-radius:3px; background:rgba(255,255,255,.1); overflow:hidden}
.pro-intro-bar i{display:block; height:100%; width:0; background:var(--pro-grad); border-radius:3px; box-shadow:0 0 14px rgba(139,92,246,.8);
  animation:proBar 1.15s var(--pro-ease) .35s forwards}
@keyframes proBar{to{width:100%}}
.pro-intro-tag{font-size:12px; font-weight:600; letter-spacing:2.4px; text-transform:uppercase; color:#8592ad; opacity:0; animation:proFade .6s ease .7s forwards}
@keyframes proFade{to{opacity:1}}

/* Mientras dura la intro, el hero espera */
html.pro-loading body{overflow:hidden}

/* ============================================================
   2 · HERO · entrada cinematográfica
   ============================================================ */
.pro-ready .hero{transform-origin:50% 0; will-change:transform}
.pro-js .hero .hero-pill,
.pro-js .hero h1 .l1,
.pro-js .hero h1 .l2,
.pro-js .hero p.sub,
.pro-js .hero .chips .chip,
.pro-js .hero #heroDl,
.pro-js .hero .pro-demo,
.pro-js .hero .badge-row .glass{opacity:0}

.pro-hero-go .hero .badge-row .glass{animation:proDrop .8s var(--pro-ease) forwards}
.pro-hero-go .hero .badge-row .glass:nth-child(2){animation-delay:.08s}
.pro-hero-go .hero .hero-pill{animation:proPop .8s var(--pro-spring) .05s forwards, float 6s ease-in-out 1s infinite}
.pro-hero-go .hero h1 .l1{animation:proLineUp 1.1s var(--pro-ease) .15s forwards}
.pro-hero-go .hero h1 .l2{animation:proLineUp 1.1s var(--pro-ease) .3s forwards, gradMove 8s linear infinite}
.pro-hero-go .hero p.sub{animation:proBlurUp 1s var(--pro-ease) .55s forwards}
.pro-hero-go .hero .chips .chip{animation:proChip .7s var(--pro-spring) forwards}
.pro-hero-go .hero #heroDl{animation:proPop .9s var(--pro-spring) 1.15s forwards}
.pro-hero-go .hero .pro-demo{animation:proBlurUp 1s var(--pro-ease) 1.3s forwards}

@keyframes proDrop{from{opacity:0; transform:translateY(-16px)}to{opacity:1; transform:none}}
@keyframes proPop{from{opacity:0; transform:scale(.6)}to{opacity:1; transform:none}}
@keyframes proLineUp{from{opacity:0; transform:translateY(60%) rotateX(-40deg); filter:blur(14px); clip-path:inset(0 0 100% 0)}
                     to{opacity:1; transform:none; filter:blur(0); clip-path:inset(-20% -5% -25% -5%)}}
@keyframes proBlurUp{from{opacity:0; transform:translateY(22px); filter:blur(10px)}to{opacity:1; transform:none; filter:blur(0)}}
@keyframes proChip{from{opacity:0; transform:translateY(18px) scale(.85)}to{opacity:1; transform:none}}
.hero h1{perspective:800px}

/* Paralaje del ratón en el hero (las variables las pone el JS) */
.hero{--px:0; --py:0}
.hero .orb{translate:calc(var(--px) * 38px) calc(var(--py) * 30px); transition:translate .6s var(--pro-ease)}
.hero .orb.o2,.hero .orb.o4{translate:calc(var(--px) * -52px) calc(var(--py) * -40px)}
.hero .aurora{translate:calc(var(--px) * 18px) calc(var(--py) * 14px); transition:translate .9s var(--pro-ease)}
.hero .hero-dots{translate:calc(var(--px) * -10px) calc(var(--py) * -8px); transition:translate .9s var(--pro-ease)}
.hero .pro-hero-light{position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0; transition:opacity .5s;
  background:radial-gradient(520px circle at var(--hx,50%) var(--hy,30%), rgba(139,92,246,.22), transparent 60%)}
.hero:hover .pro-hero-light{opacity:1}

/* Partículas que suben en el hero */
.pro-sparks{position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden}
.pro-sparks i{position:absolute; bottom:-10px; width:3px; height:3px; border-radius:50%; background:#fff; opacity:0;
  box-shadow:0 0 8px 2px rgba(139,92,246,.7); animation:proSpark linear infinite}
@keyframes proSpark{0%{transform:translateY(0) translateX(0); opacity:0}10%{opacity:.9}90%{opacity:.5}
  100%{transform:translateY(-110vh) translateX(var(--dx,20px)); opacity:0}}

/* ============================================================
   3 · DEMO VIVA "Pega el enlace" dentro del hero
   ============================================================ */
.pro-demo{width:min(640px,100%); margin-top:44px; text-align:left; font-family:var(--font-body,'Inter'),system-ui,sans-serif}
.pro-demo-card{position:relative; border-radius:24px; padding:10px; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.08)}
.pro-demo-card::before{content:""; position:absolute; inset:-1px; border-radius:25px; padding:1px; pointer-events:none;
  background:conic-gradient(from var(--ang,0deg),transparent 0 70%,rgba(139,92,246,.9),rgba(236,72,153,.9),transparent 98%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  animation:rotateBorder 5s linear infinite}

.pro-demo-bar{display:flex; align-items:center; gap:10px; background:rgba(5,8,18,.55); border-radius:16px; padding:8px 8px 8px 10px}
.pro-plat{position:relative; flex:none; width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:rgba(255,255,255,.08); transition:background .45s ease, transform .45s var(--pro-spring)}
.pro-plat svg{width:20px; height:20px; position:absolute; opacity:0; transform:scale(.4) rotate(-30deg); transition:opacity .3s, transform .45s var(--pro-spring)}
.pro-plat svg.on{opacity:1; transform:none}
.pro-plat.bump{transform:scale(1.15)}
.pro-url{flex:1; min-width:0; scrollbar-width:none; color:#e6ebf5; font-size:14.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:clip; letter-spacing:-.1px}
.pro-url .ph{color:#7d889e; font-weight:500}
.pro-url .caret{display:inline-block; width:2px; height:17px; background:#a78bfa; margin-left:1px; vertical-align:-3px; animation:caret 1s steps(1) infinite}
.pro-go{flex:none; border:none; cursor:default; border-radius:12px; padding:11px 16px; font:inherit; font-size:12.5px; font-weight:800; letter-spacing:.4px; color:#fff;
  background:linear-gradient(135deg,#E91E63,#8B5CF6); display:inline-flex; align-items:center; gap:7px; transition:transform .2s, filter .2s; position:relative; overflow:hidden}
.pro-go svg{width:15px; height:15px}
.pro-go.press{transform:scale(.92); filter:brightness(1.2)}
.pro-go .spin{width:14px; height:14px; border-radius:50%; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; animation:spin .7s linear infinite; display:none}
.pro-go.busy .spin{display:block}.pro-go.busy .arr{display:none}

.pro-res{display:grid; grid-template-rows:0fr; transition:grid-template-rows .6s var(--pro-ease)}
.pro-res.open{grid-template-rows:1fr}
.pro-res > div{overflow:hidden}
.pro-res-in{display:flex; gap:14px; align-items:center; padding:14px 8px 6px}
.pro-thumb{flex:none; position:relative; width:104px; aspect-ratio:16/10; border-radius:12px; overflow:hidden; background:#1b2440}
.pro-thumb::before{content:""; position:absolute; inset:0; background:var(--thumb,linear-gradient(160deg,#1b3a5b,#0d2138))}
.pro-thumb::after{content:""; position:absolute; inset:0; background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.25),transparent 70%); transform:translateX(-100%); animation:proShimmer 1.6s ease-in-out infinite}
.pro-thumb b{position:absolute; right:5px; bottom:5px; font-size:9.5px; font-weight:800; color:#fff; background:rgba(0,0,0,.6); padding:2px 5px; border-radius:5px}
.pro-thumb .pl{position:absolute; left:50%; top:50%; translate:-50% -50%; width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.22); backdrop-filter:blur(4px); display:grid; place-items:center}
.pro-thumb .pl::before{content:""; border-left:8px solid #fff; border-top:5px solid transparent; border-bottom:5px solid transparent; margin-left:2px}
@keyframes proShimmer{to{transform:translateX(100%)}}
.pro-meta{flex:1; min-width:0}
.pro-meta strong{display:block; color:#fff; font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pro-meta small{display:block; color:#8b97ad; font-size:11.5px; margin-top:2px}
.pro-qs{display:flex; flex-wrap:wrap; gap:6px; margin-top:9px}
.pro-q{font-size:10.5px; font-weight:800; letter-spacing:.3px; color:#c9d3e6; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1);
  padding:4px 9px; border-radius:999px; opacity:0; transform:translateY(8px) scale(.8); transition:opacity .35s, transform .45s var(--pro-spring), background .3s, color .3s, border-color .3s}
.pro-q.in{opacity:1; transform:none}
.pro-q.sel{background:linear-gradient(135deg,#F59E0B,#EC4899); color:#fff; border-color:transparent; box-shadow:0 6px 18px -6px rgba(236,72,153,.8)}
.pro-prog{display:flex; align-items:center; gap:10px; padding:4px 8px 6px}
.pro-track{flex:1; height:6px; border-radius:6px; background:rgba(255,255,255,.08); overflow:hidden}
.pro-track i{display:block; height:100%; width:0; border-radius:6px; background:linear-gradient(90deg,#E91E63,#8B5CF6,#EC4899,#22D3EE); background-size:200% 100%; animation:gradMove 2s linear infinite}
.pro-pct{font-family:var(--font-display); font-weight:700; font-size:12.5px; color:#a78bfa; min-width:96px; text-align:right; font-variant-numeric:tabular-nums}
.pro-pct.done{color:#34D399}
.pro-demo-foot{display:flex; justify-content:center; gap:16px; margin-top:12px; font-size:11.5px; color:#7f8aa1; font-weight:600}
.pro-demo-foot span{display:inline-flex; align-items:center; gap:6px}
.pro-demo-foot i{width:6px; height:6px; border-radius:50%; background:#34D399; box-shadow:0 0 8px #34D399}

/* ============================================================
   4 · CURSOR PERSONALIZADO (solo PC)
   ============================================================ */
.pro-cursor,.pro-cursor-dot{position:fixed; top:0; left:0; pointer-events:none; z-index:300; border-radius:50%; opacity:0; transition:opacity .3s}
.pro-cursor{width:38px; height:38px; margin:-19px 0 0 -19px; border:1.5px solid rgba(139,92,246,.75);
  transition:opacity .3s, width .35s var(--pro-ease), height .35s var(--pro-ease), margin .35s var(--pro-ease), background .35s, border-color .35s;
  display:grid; place-items:center; backdrop-filter:blur(0px)}
.pro-cursor-dot{width:6px; height:6px; margin:-3px 0 0 -3px; background:linear-gradient(135deg,#E91E63,#EC4899)}
.pro-has-cursor .pro-cursor,.pro-has-cursor .pro-cursor-dot{opacity:1}
.pro-cursor.hover{width:64px; height:64px; margin:-32px 0 0 -32px; background:rgba(139,92,246,.10); border-color:rgba(236,72,153,.6)}
.pro-cursor.down{width:30px; height:30px; margin:-15px 0 0 -15px}
.pro-cursor span{display:none}
.pro-cursor.label{width:96px; height:96px; margin:-48px 0 0 -48px; background:transparent; border:2px solid rgba(236,72,153,.85);
  box-shadow:0 0 0 6px rgba(139,92,246,.12), 0 0 30px rgba(236,72,153,.35)}
.pro-cursor.hide,.pro-cursor-dot.hide{opacity:0 !important}

/* ============================================================
   5 · TITULARES · aparición palabra por palabra
   ============================================================ */
.pro-w{display:inline-block; overflow:hidden; vertical-align:top; padding:.06em .02em .12em; margin:-.06em -.02em -.12em}
.pro-w > span{display:inline-block; transform:translateY(105%) rotate(4deg); opacity:0;
  transition:transform 1s var(--pro-ease), opacity .6s ease; transition-delay:calc(var(--i) * 55ms)}
.pro-split.in .pro-w > span{transform:none; opacity:1}
/* las piezas con degradado (.g) se animan como un bloque para no romper el color */
.pro-w > .g{display:inline-block}

/* Eyebrows: la línea se dibuja */
.pro-js .sec-head .eyebrow::before,.pro-js .sec-head .eyebrow::after{transform:scaleX(0); transition:transform .9s var(--pro-ease) .15s}
.pro-js .sec-head .eyebrow::before{transform-origin:right}.pro-js .sec-head .eyebrow::after{transform-origin:left}
.pro-js .sec-head.in .eyebrow::before,.pro-js .sec-head.in .eyebrow::after{transform:none}

/* Rejillas: las tarjetas entran en cascada con giro 3D */
.pro-js .pro-stagger > *{opacity:0; transform:perspective(900px) translateY(40px) rotateX(14deg) scale(.96);
  transition:opacity .8s ease, transform 1s var(--pro-ease); transition-delay:calc(var(--si,0) * 90ms)}
.pro-js .pro-stagger.in > *{opacity:1; transform:none}
.pro-js .pro-stagger.done > *{transition:opacity .3s ease, transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s; transition-delay:0s}

/* ============================================================
   6 · NAV inteligente + raíl de secciones + volver arriba
   ============================================================ */
.nav{transition:box-shadow .3s, transform .5s var(--pro-ease)}
.nav.pro-hidden{transform:translateY(-110%)}
.nav-links a{position:relative}
.nav-links a:not(.nav-cta)::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; border-radius:2px; background:var(--pro-grad);
  transform:scaleX(0); transform-origin:right; transition:transform .45s var(--pro-ease)}
.nav-links a:not(.nav-cta):hover::after,.nav-links a.pro-active::after{transform:scaleX(1); transform-origin:left}
.nav-cta{position:relative; overflow:hidden; isolation:isolate}
.nav-cta::before{content:""; position:absolute; inset:0; z-index:-1; background:var(--pro-grad); background-size:200% 100%; opacity:0; transition:opacity .35s}
.nav-cta:hover::before{opacity:1; animation:gradMove 3s linear infinite}

.pro-rail{position:fixed; right:22px; top:50%; translate:0 -50%; z-index:70; display:flex; flex-direction:column; gap:12px;
  opacity:0; pointer-events:none; transition:opacity .5s}
.pro-rail.show{opacity:1; pointer-events:auto}
.pro-rail button{position:relative; width:10px; height:10px; padding:0; border:none; border-radius:50%; cursor:pointer;
  background:rgba(120,130,150,.35); transition:transform .35s var(--pro-spring), background .3s, height .35s var(--pro-ease)}
.pro-rail button:hover{transform:scale(1.4)}
.pro-rail button.on{height:26px; border-radius:6px; background:linear-gradient(180deg,#E91E63,#8B5CF6,#EC4899)}
.pro-rail button span{position:absolute; right:22px; top:50%; translate:0 -50%; white-space:nowrap; font-size:11.5px; font-weight:700; color:#fff;
  background:rgba(10,14,26,.88); backdrop-filter:blur(8px); padding:6px 11px; border-radius:9px; opacity:0; transform:translateX(8px);
  transition:opacity .25s, transform .3s var(--pro-ease); pointer-events:none}
.pro-rail button:hover span{opacity:1; transform:none}
@media (max-width:1180px){ .pro-rail{display:none} }

.pro-top{position:fixed; right:22px; bottom:22px; z-index:70; width:54px; height:54px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.9); backdrop-filter:blur(12px); box-shadow:0 16px 36px -14px rgba(10,14,26,.4); display:grid; place-items:center;
  opacity:0; transform:translateY(20px) scale(.7); pointer-events:none; transition:opacity .4s, transform .5s var(--pro-spring)}
.pro-top.show{opacity:1; transform:none; pointer-events:auto}
.pro-top svg.ring{position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg)}
.pro-top svg.ring circle{fill:none; stroke-width:3}
.pro-top .arrow{width:20px; height:20px; color:#0A0E1A; transition:transform .3s var(--pro-ease)}
.pro-top:hover .arrow{transform:translateY(-3px)}

/* ============================================================
   7 · BOTÓN DE DESCARGA · borde vivo, ondas y ráfaga
   ============================================================ */
.dl-btn .pro-ripple{position:absolute; border-radius:50%; pointer-events:none; background:radial-gradient(circle,rgba(139,92,246,.45),rgba(233,30,99,.15) 60%,transparent 70%);
  transform:scale(0); animation:proRipple .8s var(--pro-ease) forwards; z-index:0}
@keyframes proRipple{to{transform:scale(1); opacity:0}}
.dl-btn > span{position:relative; z-index:1}
.pro-particle{position:fixed; z-index:400; pointer-events:none; left:0; top:0}

.pro-toast{position:fixed; left:50%; bottom:26px; z-index:420; display:flex; align-items:center; gap:13px; min-width:300px; max-width:calc(100vw - 32px);
  background:rgba(10,14,26,.94); color:#fff; backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:13px 16px 15px 13px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.6); transform:translate(-50%,140%); transition:transform .7s var(--pro-spring); overflow:hidden}
.pro-toast.show{transform:translate(-50%,0)}
.pro-toast img{width:40px; height:40px; border-radius:11px; background:#fff; flex:none}
.pro-toast b{display:block; font-size:14px; font-weight:700}
.pro-toast small{display:block; font-size:12px; color:#9aa6bd; margin-top:2px}
.pro-toast .tb{position:absolute; left:0; bottom:0; height:3px; width:100%; background:var(--pro-grad); transform-origin:left; transform:scaleX(0)}
.pro-toast.show .tb{animation:proToastBar 4.2s linear forwards}
@keyframes proToastBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.pro-toast .ok{position:relative; flex:none}
.pro-toast .ok i{position:absolute; right:-4px; bottom:-4px; width:18px; height:18px; border-radius:50%; background:#10B981; display:grid; place-items:center; border:2px solid #0a0e1a}
.pro-toast .ok i svg{width:10px; height:10px}

/* ============================================================
   8 · MARQUEE con inercia de scroll (el JS mueve la pista)
   ============================================================ */
.pro-js .marquee .track{animation:none}
.marquee .mq-item{transition:transform .3s ease, filter .3s, opacity .3s}
.marquee .track.pro-skew .mq-item{transform:skewX(var(--skew,0deg))}
.marquee:hover .mq-item{opacity:.45; filter:grayscale(.6)}
.marquee .mq-item:hover{opacity:1; filter:none; transform:translateY(-3px) scale(1.06)}

/* ============================================================
   9 · FOOTER · la marca gigante se escribe sola + foco de luz
   ============================================================ */
.foot-watermark{display:flex}
.foot-watermark .pro-l{display:inline-block; transform:translateY(70%); opacity:0;
  transition:transform 1.2s var(--pro-ease), opacity .9s ease; transition-delay:calc(var(--i) * 65ms)}
.foot-watermark.in .pro-l{transform:none; opacity:1}
.foot-watermark::after{content:attr(data-t); position:absolute; inset:0; white-space:nowrap; pointer-events:none;
  background:radial-gradient(260px circle at var(--fx,-400px) 55%, rgba(139,92,246,.55), rgba(236,72,153,.28) 40%, transparent 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent; opacity:0; transition:opacity .6s}
footer:hover .foot-watermark.in::after{opacity:1}
.foot-brand .brand img{transition:transform .6s var(--pro-spring)}
.foot-brand .brand:hover img{transform:rotate(-12deg) scale(1.12)}

/* ============================================================
   10 · Detalles extra
   ============================================================ */
/* Barra de progreso superior más gruesa al hacer scroll rápido */
.scroll-progress{transition:width .1s linear, height .3s}
/* Selección de texto con la marca */
::selection{background:rgba(139,92,246,.28)}
/* Botón fantasma con relleno al hover */
.btn-ghost{position:relative; overflow:hidden; isolation:isolate}
.btn-ghost::after{content:""; position:absolute; inset:0; z-index:-1; background:var(--pro-grad); transform:translateY(101%); transition:transform .5s var(--pro-ease)}
.btn-ghost:hover::after{transform:none}
.btn-ghost:hover{color:#fff !important; border-color:transparent !important}
/* Iconos de tarjetas: rebote al entrar */
.pro-stagger.in .ico{animation:icoPop .8s var(--pro-spring) both; animation-delay:calc(var(--si,0) * 90ms + .25s)}

/* ============================================================
   Responsive + accesibilidad
   ============================================================ */
@media (max-width:640px){
  .pro-demo{margin-top:34px}
  .pro-url{font-size:13px}
  .pro-go .lbl{display:none}
  .pro-go{padding:11px 12px}
  .pro-thumb{width:84px}
  .pro-pct{min-width:70px; font-size:11.5px}
  .pro-demo-foot{flex-wrap:wrap; gap:8px 14px}
  .pro-top{right:14px; bottom:14px; width:48px; height:48px}
  .pro-toast{bottom:16px; min-width:0; width:calc(100vw - 32px)}
}
@media (hover:none), (pointer:coarse){ .pro-cursor,.pro-cursor-dot{display:none} }

@media (prefers-reduced-motion: reduce){
  .pro-intro{display:none}
  .pro-js .hero *, .pro-js .pro-stagger > *, .pro-w > span, .foot-watermark .pro-l{opacity:1 !important; transform:none !important; filter:none !important; transition:none !important}
  .pro-cursor,.pro-cursor-dot,.pro-sparks{display:none}
}

/* Pastilla final del marquee */
.mq-item.pro-more b{background:var(--pro-grad); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:800}

/* ############################################################
   PARTE 2 · TODA LA PARTE DE ABAJO AL MISMO NIVEL
   ############################################################ */

/* ---------- A · Secciones oscuras: se expanden al entrar + rejilla viva ---------- */
.sec-dark{clip-path:inset(0 var(--cx,0%) round var(--cr,0px))}
.sec-dark > .wrap{position:relative; z-index:1}
.pro-grid-bg{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.pro-grid-bg::before{content:""; position:absolute; inset:-60px 0 0; opacity:.5;
  background-image:linear-gradient(rgba(148,163,184,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.07) 1px,transparent 1px);
  background-size:56px 56px; animation:proGridMove 18s linear infinite;
  -webkit-mask-image:radial-gradient(80% 60% at 50% 40%,#000,transparent 75%); mask-image:radial-gradient(80% 60% at 50% 40%,#000,transparent 75%)}
@keyframes proGridMove{to{transform:translateY(56px)}}
.pro-grid-bg::after{content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg,transparent,#E91E63,#8B5CF6,#EC4899,transparent); background-size:200% 100%; animation:gradMove 6s linear infinite; opacity:.8}
.pro-grid-bg i{position:absolute; width:520px; height:520px; border-radius:50%; filter:blur(90px); opacity:.18; animation:drift 22s ease-in-out infinite}
.pro-grid-bg i:nth-child(1){background:#E91E63; left:-120px; top:10%}
.pro-grid-bg i:nth-child(2){background:#8B5CF6; right:-140px; top:45%; animation-delay:-7s}
.pro-grid-bg i:nth-child(3){background:#EC4899; left:35%; bottom:-260px; animation-delay:-13s; opacity:.12}

/* ---------- B · Borde de luz que sigue al ratón en TODAS las tarjetas ---------- */
.pro-edge-host{position:relative}
.pro-edge{position:absolute; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none; z-index:4; opacity:0; transition:opacity .35s;
  background:radial-gradient(240px circle at var(--ex,-999px) var(--ey,-999px), rgba(139,92,246,1), rgba(236,72,153,.7) 30%, rgba(233,30,99,.25) 55%, transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude}
.pro-edge-zone:hover .pro-edge{opacity:1}


/* ---------- C · Línea de tiempo en todos los pasos ---------- */
.pro-tl{position:absolute; left:-38px; width:2px; border-radius:2px; background:rgba(148,163,184,.22); pointer-events:none}
.pro-tl .fill{position:absolute; left:0; top:0; width:100%; height:0; border-radius:2px; background:var(--tlc,linear-gradient(180deg,#E91E63,#8B5CF6,#EC4899));
  box-shadow:0 0 12px var(--tlg,rgba(139,92,246,.7))}
.pro-tl .fill::after{content:""; position:absolute; left:50%; bottom:-6px; width:12px; height:12px; margin-left:-6px; border-radius:50%; background:#fff;
  box-shadow:0 0 0 3px var(--tlg,rgba(139,92,246,.6)), 0 0 18px var(--tlg,rgba(139,92,246,.9))}
.pro-tl b{position:absolute; left:50%; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background:#cbd5e1; border:2px solid #fff;
  transition:transform .5s var(--pro-spring), background .4s, box-shadow .4s}
.sec-dark .pro-tl b{background:#334155; border-color:#0A0E1A}
.pro-tl b.on{transform:scale(1.35); background:var(--tld,#8B5CF6); box-shadow:0 0 0 4px rgba(139,92,246,.18)}
.step{transition:transform .3s, box-shadow .5s, border-color .5s, background .5s}
.step .num{transition:transform .5s var(--pro-spring), filter .5s}
.pro-js .step:not(.pro-lit) .num{filter:saturate(.35) brightness(.95)}
.step.pro-lit .num{animation:proNumPop .7s var(--pro-spring)}
.step.pro-lit{box-shadow:inset 3px 0 0 var(--tld,#8B5CF6), 0 18px 40px -26px rgba(233,30,99,.35)}
@keyframes proNumPop{0%{transform:scale(.8)}60%{transform:scale(1.15)}100%{transform:none}}
@media (max-width:900px){ .pro-tl{display:none} }

/* ---------- D · Estudio de clonación de voz en directo ---------- */
.pro-vs{position:relative}
.pro-vs-top{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px}
.pro-vs-st{display:inline-flex; align-items:center; gap:9px; color:#fff; font-weight:700; font-size:14px}
.pro-vs-st .rec{width:10px; height:10px; border-radius:50%; background:#EF4444; box-shadow:0 0 0 0 rgba(239,68,68,.7); animation:proRec 1.2s ease-out infinite}
.pro-vs[data-ph="train"] .pro-vs-st .rec{background:#F59E0B; animation-name:proRecA}
.pro-vs[data-ph="ready"] .pro-vs-st .rec{background:#10B981; animation-name:proRecG}
@keyframes proRec{to{box-shadow:0 0 0 10px rgba(239,68,68,0)}}
@keyframes proRecA{0%{box-shadow:0 0 0 0 rgba(245,158,11,.7)}100%{box-shadow:0 0 0 10px rgba(245,158,11,0)}}
@keyframes proRecG{0%{box-shadow:0 0 0 0 rgba(16,185,129,.7)}100%{box-shadow:0 0 0 10px rgba(16,185,129,0)}}
.pro-vs-t{font-family:var(--font-display); font-weight:700; font-size:13px; color:#A78BFA; font-variant-numeric:tabular-nums}
.pro-vs canvas{display:block; width:100%; height:110px}
.pro-vs-scan{position:absolute; left:0; right:0; top:34px; height:110px; pointer-events:none; opacity:0; transition:opacity .4s;
  background:linear-gradient(90deg,transparent,rgba(245,158,11,.25),transparent); background-size:30% 100%; background-repeat:no-repeat; animation:proScan 1.4s linear infinite}
.pro-vs[data-ph="train"] .pro-vs-scan{opacity:1}
@keyframes proScan{from{background-position:-40% 0}to{background-position:140% 0}}
.pro-vs-line{min-height:44px; display:flex; align-items:center; justify-content:center; text-align:center; color:#cbd5e1; font-size:13px; font-weight:500; padding:4px 6px}
.pro-vs-line .say{color:#fff; font-weight:600; background:linear-gradient(135deg,rgba(139,92,246,.25),rgba(236,72,153,.18)); border:1px solid rgba(167,139,250,.35);
  padding:9px 14px; border-radius:14px 14px 14px 4px}
.pro-vs-line .say::after{content:""; display:inline-block; width:2px; height:14px; background:#F472B6; margin-left:2px; vertical-align:-2px; animation:caret 1s steps(1) infinite}
.pro-vs-bar{height:4px; border-radius:4px; background:rgba(255,255,255,.08); overflow:hidden; margin:4px 4px 14px}
.pro-vs-bar i{display:block; height:100%; width:0; background:linear-gradient(90deg,#F59E0B,#EC4899,#8B5CF6)}
.pro-vs-steps{display:flex; gap:6px}
.pro-vs-steps span{flex:1; text-align:center; font-size:11px; font-weight:700; letter-spacing:.3px; color:#64748B; padding:8px 4px; border-radius:10px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); transition:all .4s var(--pro-ease)}
.pro-vs-steps span.on{color:#fff; background:linear-gradient(135deg,rgba(139,92,246,.45),rgba(236,72,153,.35)); border-color:rgba(236,72,153,.45); transform:translateY(-2px)}
.pro-vs-steps span.ok{color:#34D399}

/* ---------- E · Biblioteca de voces que "suena" ---------- */
.vrow{position:relative; overflow:hidden; cursor:pointer}
.vrow .pro-eq{display:flex; align-items:flex-end; gap:3px; height:20px; margin-left:auto; opacity:0; transition:opacity .3s}
.vrow .vbadge + .pro-eq,.vrow .vbadge ~ .pro-eq{margin-left:12px}
.vrow .pro-eq i{width:3px; height:4px; border-radius:2px; background:linear-gradient(180deg,#F472B6,#8B5CF6)}
.vrow.playing .pro-eq{opacity:1}
.vrow.playing .pro-eq i{animation:proEq .5s ease-in-out infinite alternate}
.vrow.playing .pro-eq i:nth-child(2){animation-delay:.12s}.vrow.playing .pro-eq i:nth-child(3){animation-delay:.24s}
.vrow.playing .pro-eq i:nth-child(4){animation-delay:.08s}.vrow.playing .pro-eq i:nth-child(5){animation-delay:.2s}
@keyframes proEq{from{height:4px}to{height:20px}}
.vrow .pro-vbar{position:absolute; left:0; bottom:0; height:3px; width:100%; background:linear-gradient(90deg,#8B5CF6,#EC4899); transform-origin:left; transform:scaleX(0)}
.vrow.playing .pro-vbar{animation:proVbar 3.2s linear forwards}
@keyframes proVbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.vrow.playing{transform:translateX(8px); box-shadow:0 18px 40px -22px rgba(139,92,246,.55); border-color:rgba(139,92,246,.35)}
.vrow.playing .vplay{animation:proVplay 1s ease-in-out infinite}
@keyframes proVplay{0%,100%{box-shadow:0 0 0 0 rgba(139,92,246,.5)}50%{box-shadow:0 0 0 9px rgba(139,92,246,0)}}

/* ---------- F · Estadísticas con línea que se dibuja ---------- */
.stat .pro-spark{display:block; width:100%; height:34px; margin-top:14px; overflow:visible}
.stat .pro-spark path.l{fill:none; stroke-width:2.2; stroke-linecap:round; stroke-dasharray:240; stroke-dashoffset:240; transition:stroke-dashoffset 1.8s var(--pro-ease) .3s}
.stat .pro-spark path.a{opacity:0; transition:opacity 1s ease 1.2s}
.stat .pro-spark circle{opacity:0; transition:opacity .4s ease 1.9s}
.pro-stagger.in .stat .pro-spark path.l{stroke-dashoffset:0}
.pro-stagger.in .stat .pro-spark path.a{opacity:1}
.pro-stagger.in .stat .pro-spark circle{opacity:1; animation:proDotPulse 2s ease-in-out 2s infinite}
@keyframes proDotPulse{50%{r:5}}
.pro-stagger.in .stat .n{animation:proNumGlow 1.2s ease 1.4s}
@keyframes proNumGlow{40%{filter:drop-shadow(0 0 14px rgba(139,92,246,.75)); transform:scale(1.08)}}
.stat .n{display:inline-block}

/* ---------- G · Novedades: línea de progreso + aparición lateral ---------- */
.changelog{position:relative}
.pro-cl-line{position:absolute; left:5px; width:2px; background:rgba(255,255,255,.08); border-radius:2px; pointer-events:none}
.pro-cl-line i{position:absolute; top:0; left:0; width:100%; height:0; border-radius:2px; background:linear-gradient(180deg,#10B981,#22D3EE,#8B5CF6); box-shadow:0 0 12px rgba(16,185,129,.6)}
.clog{position:relative; z-index:1}
.clog .cdot{transition:transform .5s var(--pro-spring), background .4s, box-shadow .4s}
.pro-js .clog:not(.pro-on) .cdot{background:#334155; box-shadow:none}
.pro-js .clog:not(.pro-on) .cdot::after{opacity:0}
.clog.pro-on .cdot{transform:scale(1.15)}
.pro-js .changelog .clog{opacity:.35; transform:translateX(-18px); transition:opacity .7s ease, transform .8s var(--pro-ease), padding-left .25s}
.pro-js .changelog .clog.pro-on{opacity:1; transform:none}
.pro-new{display:inline-flex; align-items:center; gap:5px; margin-left:10px; vertical-align:2px; font-size:10px; font-weight:800; letter-spacing:.8px; color:#fff;
  padding:3px 9px; border-radius:999px; background:linear-gradient(135deg,#10B981,#06B6D4); box-shadow:0 0 18px rgba(16,185,129,.55); animation:proNew 2.2s ease-in-out infinite}
@keyframes proNew{50%{box-shadow:0 0 4px rgba(16,185,129,.2)}}
.clog .cmeta b{transition:color .3s}
.clog:hover .cmeta b{background:linear-gradient(90deg,#fff,#A78BFA,#F472B6); -webkit-background-clip:text; background-clip:text; color:transparent}

/* ---------- H · Panel de soporte: comprobación de estado + luz ---------- */
.support-panel{--sx:50%; --sy:50%}
.support-panel .pro-sp-light{position:absolute; inset:0; pointer-events:none; z-index:0; opacity:0; transition:opacity .4s;
  background:radial-gradient(420px circle at var(--sx) var(--sy), rgba(139,92,246,.22), transparent 60%)}
.support-panel:hover .pro-sp-light{opacity:1}
.sp-left,.sp-right{position:relative; z-index:1}
.sps-pill{transition:all .4s var(--pro-spring)}
.sps-pill.pro-chk{color:#FBBF24; background:rgba(245,158,11,.14); display:inline-flex; align-items:center; gap:6px}
.sps-pill.pro-chk::before{content:""; width:9px; height:9px; border-radius:50%; border:2px solid rgba(251,191,36,.35); border-top-color:#FBBF24; animation:spin .7s linear infinite}
.sps-pill.pro-pop{animation:proPillPop .6s var(--pro-spring)}
@keyframes proPillPop{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:none}}
.sps-row{position:relative}
.sps-row::after{content:""; position:absolute; left:0; right:0; bottom:0; height:100%; pointer-events:none; opacity:0;
  background:linear-gradient(90deg,transparent,rgba(52,211,153,.12),transparent); background-size:40% 100%; background-repeat:no-repeat}
.sps-row.pro-scan::after{opacity:1; animation:proScan .9s linear}
.pro-ecg{display:block; width:100%; height:38px; margin-top:10px}
.pro-ecg path{fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke}
.pro-ecg path.base{stroke:rgba(52,211,153,.18)}
.pro-ecg path.run{stroke:url(#proEcgG); stroke-width:2.4; stroke-dasharray:90 400; animation:proEcg 2.4s linear infinite; filter:drop-shadow(0 0 4px rgba(52,211,153,.8))}
@keyframes proEcg{from{stroke-dashoffset:460}to{stroke-dashoffset:0}}

/* ---------- I · FAQ: buscador, números y apertura suave ---------- */
.pro-faq-search{max-width:780px; margin:0 auto 22px; display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line);
  border-radius:18px; padding:6px 8px 6px 18px; box-shadow:0 18px 40px -28px rgba(10,14,26,.25); transition:box-shadow .3s, border-color .3s; position:relative}
.pro-faq-search:focus-within{border-color:transparent; box-shadow:0 0 0 2px rgba(139,92,246,.55), 0 22px 50px -26px rgba(139,92,246,.45)}
.pro-faq-search svg{width:20px; height:20px; color:#8B5CF6; flex:none}
.pro-faq-search input{flex:1; min-width:0; border:none; outline:none; background:transparent; font:inherit; font-size:15.5px; padding:12px 0; color:var(--ink)}
.pro-faq-search kbd{font:inherit; font-size:11px; font-weight:700; color:#94A3B8; border:1px solid var(--line); border-radius:7px; padding:4px 8px; background:#F7F9FC}
.pro-faq-search .cnt{font-size:12px; font-weight:700; color:#8B5CF6; white-space:nowrap; padding-right:6px}
.faq{counter-reset:faq}
.faq-q{justify-content:flex-start}
.faq-q .plus{margin-left:auto}
.faq-q::before{counter-increment:faq; content:counter(faq,decimal-leading-zero); flex:none; font-size:12px; font-weight:800; letter-spacing:.5px;
  background:var(--pro-grad); -webkit-background-clip:text; background-clip:text; color:transparent; min-width:22px}
.faq-item{position:relative; transition:box-shadow .35s, border-color .35s, transform .35s var(--pro-ease), opacity .35s}
.faq-item::before{content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:3px; background:var(--pro-grad); transform:scaleY(0); transition:transform .45s var(--pro-ease)}
.faq-item.open::before{transform:none}
.faq-item:hover{transform:translateY(-2px)}
.faq-a-inner{opacity:0; transform:translateY(-8px); transition:opacity .4s ease .05s, transform .5s var(--pro-ease)}
.faq-item.open .faq-a-inner{opacity:1; transform:none}
.faq-item.pro-hide{display:none}
.faq-q mark{background:linear-gradient(120deg,rgba(139,92,246,.22),rgba(236,72,153,.22)); color:inherit; border-radius:4px; padding:0 2px}
.pro-faq-empty{max-width:780px; margin:0 auto; text-align:center; padding:34px 20px; border:1.5px dashed #d8dee9; border-radius:20px; color:var(--ink-soft); display:none}
.pro-faq-empty.show{display:block; animation:proBlurUp .5s var(--pro-ease)}
.pro-faq-empty b{display:block; color:var(--ink); font-family:var(--font-display); font-size:18px; margin-bottom:6px}
.pro-faq-empty button{margin-top:16px; border:none; cursor:pointer; font:inherit; font-weight:700; font-size:14px; color:#fff; padding:12px 22px; border-radius:999px;
  background:linear-gradient(135deg,#E91E63,#8B5CF6); box-shadow:0 14px 30px -12px rgba(139,92,246,.6)}

/* ---------- J · CTA final con el nivel del hero ---------- */
.cta{isolation:isolate}
.cta > *:not(.pro-cta-fx){position:relative; z-index:2}
.pro-cta-fx{position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit; overflow:hidden; --px:0; --py:0}
.pro-cta-fx .bl{position:absolute; width:46%; aspect-ratio:1; border-radius:50%; filter:blur(70px); opacity:.45; animation:drift 16s ease-in-out infinite}
.pro-cta-fx .bl:nth-child(1){background:#E91E63; left:-10%; top:-30%}
.pro-cta-fx .bl:nth-child(2){background:#8B5CF6; right:-12%; top:10%; animation-delay:-5s}
.pro-cta-fx .bl:nth-child(3){background:#EC4899; left:30%; bottom:-50%; animation-delay:-10s; opacity:.3}
.pro-cta-fx .gr{position:absolute; inset:0; opacity:.35; background-image:radial-gradient(rgba(255,255,255,.35) 1px,transparent 1px); background-size:30px 30px;
  -webkit-mask-image:radial-gradient(60% 60% at 50% 50%,#000,transparent 75%); mask-image:radial-gradient(60% 60% at 50% 50%,#000,transparent 75%)}
.pro-cta-fx .lt{position:absolute; inset:0; opacity:0; transition:opacity .5s; background:radial-gradient(480px circle at var(--hx,50%) var(--hy,50%), rgba(139,92,246,.28), transparent 60%)}
.cta:hover .pro-cta-fx .lt{opacity:1}
.pro-cta-ring{position:absolute; inset:0; border-radius:inherit; padding:1.5px; z-index:1; pointer-events:none;
  background:conic-gradient(from var(--ang,0deg),transparent 0 60%,#E91E63,#8B5CF6,#EC4899,transparent 95%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:rotateBorder 6s linear infinite}
.pro-bub{position:absolute; width:60px; height:60px; border-radius:18px; display:grid; place-items:center; z-index:1;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 20px 40px -18px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12);
  translate:calc(var(--px) * var(--d,20px)) calc(var(--py) * var(--d,20px)); transition:translate .8s var(--pro-ease);
  animation:proBob 6s ease-in-out infinite; opacity:0}
.pro-bub svg{width:28px; height:28px}
@keyframes proBob{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-14px) rotate(calc(var(--r,0deg) * -1))}}
.cta.in .pro-bub{opacity:1; transition:opacity 1s ease, translate .8s var(--pro-ease)}
@media (max-width:980px){ .pro-bub{display:none} }
.cta-feats span{transition:transform .4s var(--pro-spring)}
.pro-js .cta .cta-feats span{opacity:0; transform:translateY(10px)}
.pro-js .cta.in .cta-feats span{opacity:1; transform:none; transition:opacity .6s ease, transform .7s var(--pro-spring)}
.pro-js .cta.in .cta-feats span:nth-child(2){transition-delay:.1s}
.pro-js .cta.in .cta-feats span:nth-child(3){transition-delay:.2s}
.pro-js .cta.in .cta-feats span:nth-child(4){transition-delay:.3s}

/* ---------- K · Visuales con paralaje, OS y footer ---------- */
.split .visual{translate:0 var(--pv,0px); transition:translate .1s linear}
.os .badge{position:relative; overflow:hidden}
.os .badge::after{content:""; position:absolute; inset:0; background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.45),transparent 70%); transform:translateX(-120%); animation:proShimmer 2.8s ease-in-out infinite}
.os:nth-child(2) .badge::after{animation-delay:.4s}.os:nth-child(3) .badge::after{animation-delay:.8s}.os:nth-child(4) .badge::after{animation-delay:1.2s}
.pro-js .foot-grid > *{opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform 1s var(--pro-ease)}
.pro-js .foot-grid.in > *{opacity:1; transform:none}
.pro-js .foot-grid.in > :nth-child(2){transition-delay:.1s}.pro-js .foot-grid.in > :nth-child(3){transition-delay:.2s}.pro-js .foot-grid.in > :nth-child(4){transition-delay:.3s}
.foot-col a{position:relative; width:max-content}
.foot-col a::before{content:"→"; position:absolute; left:-16px; opacity:0; transform:translateX(-6px); transition:opacity .25s, transform .3s var(--pro-ease); color:#8B5CF6}
.foot-col a:hover::before{opacity:1; transform:none}
.foot-glow{background-size:200% 100% !important; animation:gradMove 5s linear infinite}

@media (prefers-reduced-motion: reduce){
  .sec-dark{clip-path:none}
  .pro-js .changelog .clog,.pro-js .foot-grid > *,.pro-js .cta .cta-feats span,.faq-a-inner{opacity:1 !important; transform:none !important}
  .pro-tl,.pro-cl-line{display:none}
  .step:not(.pro-lit) .num{filter:none}
  .stat .pro-spark path.l{stroke-dashoffset:0}
}
@media (hover:none),(max-width:640px){ .pro-faq-search kbd{display:none} }