:root{--accent:#5a4bff;--ink:#0a2540;--muted:#3f5470;--soft:#5b6b80;--line:#e3e8ef;--bg2:#f6f9fc}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font-family:'Manrope',system-ui,sans-serif;line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
section{position:relative}
h1,h2,h3{margin:0}
h2{font-weight:800;font-size:clamp(30px,4.4vw,54px);letter-spacing:-1.6px;line-height:1.08}
.lead{font-size:19px;color:var(--muted);margin:14px 0 0;max-width:640px}
.pad{padding:100px 0}

/* progreso de scroll */
.progress{position:sticky;top:0;height:3px;z-index:60;background:linear-gradient(90deg,#5a4bff,#ff4fa3,#ff8a4c);transform-origin:left;transform:scaleX(0)}

/* NAV */
.topnav{position:relative;z-index:30;background:rgba(255,255,255,.88)}
.topnav .wrap{display:flex;align-items:center;gap:28px;padding-top:14px;padding-bottom:14px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:21px;letter-spacing:-.6px;margin-right:12px}
.brand .mark{width:32px;height:32px;border-radius:9px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px}
.nav-item{position:relative;padding:10px 4px;font-weight:600;font-size:15px}
.nav-item:hover{color:var(--accent)}
.nav-item .menu{display:none;position:absolute;top:100%;left:-24px;min-width:300px;background:#fff;border-radius:14px;box-shadow:0 30px 60px -12px rgba(10,37,64,.25),0 18px 36px -18px rgba(0,0,0,.2);padding:14px;z-index:20}
.nav-item:hover .menu,.nav-item:focus-within .menu{display:block;animation:rise .18s ease-out}
.menu a{display:block;padding:8px 10px;border-radius:8px;font-weight:600;font-size:14.5px;color:var(--ink)}
.menu a:hover{background:#f1f4ff;color:var(--accent)}
.menu small{display:block;font-weight:500;color:var(--soft);font-size:12.5px}
.nav-right{margin-left:auto;display:flex;gap:10px;align-items:center}
.btn{display:inline-block;white-space:nowrap;position:relative;overflow:hidden;border-radius:99px;font-weight:700;font-size:15px;padding:15px 28px;transition:transform .15s,box-shadow .15s,border-color .15s;cursor:pointer;border:0;font-family:inherit}
.btn.sm{padding:10px 20px;font-size:14px}
.btn.main{background:var(--accent);color:#fff;animation:glow 2.6s ease-in-out infinite}
.btn.main::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);animation:sweep 3.2s ease-in-out infinite}
.btn.main:hover{transform:translateY(-2px)}
.btn.line{background:#fff;border:1.5px solid #d5dce6;padding:14px 26px}
.btn.line:hover{border-color:var(--accent);color:var(--accent)}
#burger{display:none;margin-left:auto;background:none;border:1.5px solid #d5dce6;border-radius:10px;padding:8px 14px;font-weight:700;font-family:inherit;cursor:pointer}
#mobile-nav{display:none;background:#fff;border-bottom:1px solid var(--line);padding:8px 24px 16px}
#mobile-nav a{display:block;padding:11px 0;font-weight:700;border-bottom:1px solid #f0f3f7}
#mobile-nav.open{display:block}

/* HERO */
.hero{position:relative;overflow:hidden;margin-top:-62px;padding-top:62px}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(55px);opacity:.85;animation:drift 8s ease-in-out infinite alternate,hue 10s ease-in-out infinite alternate}
.fade-b{position:absolute;left:0;right:0;bottom:0;height:160px;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff)}
.hero .wrap{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:40px;align-items:center;padding-top:88px;padding-bottom:70px}
.hero-copy{flex:1.35 1 560px;min-width:0}
.pill{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;background:rgba(255,255,255,.75);border:1px solid var(--line);padding:6px 14px;border-radius:99px;margin-bottom:26px}
.live{width:8px;height:8px;border-radius:50%;background:#1fb56b;animation:pulse 1.2s ease-in-out infinite}
.hero h1{font-weight:800;font-size:clamp(38px,5.4vw,76px);line-height:1.04;letter-spacing:-2.4px;margin-bottom:24px}
.w{display:inline-block;opacity:0;animation:wordin .9s cubic-bezier(.2,.8,.2,1) forwards}
.grad-text{background:linear-gradient(100deg,var(--accent),#ff4fa3,#ff8a4c,var(--accent));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 4s linear infinite}
.hero p.sub{font-size:20px;color:var(--muted);max-width:560px;margin:0 0 34px;animation:rise .9s ease-out .7s both}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;animation:rise .9s ease-out .95s both}
.hero-art{flex:1 1 380px;min-width:0;position:relative;min-height:440px}
.fc{position:absolute;background:#fff;border-radius:16px;box-shadow:0 30px 60px -20px rgba(10,37,64,.35)}
.fc-a{left:4%;top:10px;width:300px;max-width:90%;padding:20px;animation:pop .9s cubic-bezier(.2,1.2,.3,1) .2s both,float 5s ease-in-out 1.1s infinite}
.fc-b{right:0;top:140px;width:250px;max-width:70%;padding:16px 18px;display:flex;gap:12px;align-items:center;animation:pop .9s cubic-bezier(.2,1.2,.3,1) .5s both,float 6s ease-in-out 1.4s infinite}
.fc-c{left:14%;top:262px;width:200px;background:var(--ink);color:#fff;border-radius:28px;padding:14px 12px 18px;animation:pop .9s cubic-bezier(.2,1.2,.3,1) .8s both,float 7s ease-in-out 1.7s infinite}
.fc small{color:var(--soft);font-weight:600;font-size:13px}
.skeleton{height:12px;border-radius:6px;background:#eef2f7;margin:10px 0 16px;width:62%}
.bars{display:flex;align-items:flex-end;gap:7px;height:70px}
.bars i{flex:1;border-radius:4px;transform-origin:bottom;animation:grow 1.4s cubic-bezier(.2,.8,.2,1) both,breathe 2s ease-in-out infinite alternate}
.check{width:38px;height:38px;border-radius:10px;background:#e6f7ee;color:#1fb56b;display:flex;align-items:center;justify-content:center;font-weight:800;position:relative;flex-shrink:0}
.check::after{content:'';position:absolute;inset:0;border-radius:10px;border:2px solid #1fb56b;animation:ring 1.8s ease-out infinite}
.fc-c .l1,.fc-c .l2{height:8px;border-radius:4px;background:#1d3a5c;margin-bottom:7px}
.fc-c .l2{width:70%;margin-bottom:14px}
.fc-c .go{background:var(--accent);text-align:center;padding:9px;border-radius:10px;font-weight:700;font-size:13px}

/* MARQUEE */
.stack{border-top:1px solid #eef2f7;border-bottom:1px solid #eef2f7;padding:22px 0;overflow:hidden}
.stack .cap{font-size:13px;letter-spacing:1.2px;font-weight:700;color:#8895a7;margin-bottom:14px}
.marquee{display:flex;gap:14px;width:max-content;animation:scroll 18s linear infinite}
.marquee.rev{animation-direction:reverse;animation-duration:24s;margin-top:12px}
.mq:hover .marquee{animation-play-state:paused}
.marquee span{padding:9px 20px;border:1px solid var(--line);border-radius:99px;font-weight:700;color:#425466;white-space:nowrap}

/* PRODUCTOS */
.bg2{background:var(--bg2)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:34px 0 28px}
.tabs button{background:#fff;color:var(--ink);border:1.5px solid #d5dce6;padding:10px 20px;border-radius:99px;font-weight:700;font-size:14.5px;font-family:inherit;cursor:pointer;transition:background .15s,color .15s}
.tabs button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.grid-p{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.tile{background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:12px;min-height:168px;transition:transform .2s,box-shadow .2s,border-color .2s}
.tile:hover{transform:translateY(-8px) rotate(-.6deg);box-shadow:0 30px 50px -18px rgba(90,75,255,.35);border-color:#a9b6ff}
.tilepop{animation:pop2 .8s cubic-bezier(.2,.8,.2,1) backwards}
.cover{position:relative;height:140px;border-radius:12px;overflow:hidden}
.mock{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.tile:hover .mock{transform:translateY(-8px) scale(1.04)}
.mock.saas{position:absolute;left:12%;right:-8%;top:22px;bottom:-20px;background:#fff;border-radius:12px;box-shadow:0 18px 36px -14px rgba(10,37,64,.35);padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.mock .dots{display:flex;gap:5px}.mock .dots i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.mock .skel{display:flex;gap:8px}.mock .skel b{flex:1;height:22px;border-radius:6px;background:#f1f4f9}
.mock .mbars{display:flex;align-items:flex-end;gap:6px;height:46px}.mock .mbars i{flex:1;border-radius:3px}
.mock.phone{position:absolute;left:50%;margin-left:-42px;top:20px;width:84px;height:170px;background:var(--ink);border-radius:18px;padding:8px 7px;box-shadow:0 18px 36px -12px rgba(10,37,64,.5)}
.phone .notch{display:block;width:26px;height:4px;border-radius:2px;background:#2a4568;margin:0 auto 8px}
.phone .hero-blk{display:block;height:36px;border-radius:8px;margin-bottom:7px}
.phone .ln{display:block;height:6px;border-radius:3px;background:#1d3a5c;margin-bottom:5px}.phone .ln.short{width:70%;margin-bottom:9px}
.phone .pair{display:flex;gap:5px}.phone .pair i{flex:1;height:28px;border-radius:6px;background:#17314f}
.trow{display:flex;justify-content:space-between;align-items:center}
.letter{width:40px;height:40px;border-radius:11px;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px}
.badge{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.5px;padding:4px 9px;border-radius:99px}
.b-live{background:#e6f7ee;color:#12864f}.b-dev{background:#fff3dc;color:#a76400}.b-review{background:#e8efff;color:#2f4fd1}.b-soon{background:#eef2f7;color:var(--soft)}
.tname{font-weight:800;font-size:19px;letter-spacing:-.4px}
.tdesc{color:var(--soft);font-size:14.5px}
.tkind{margin-top:auto;font-size:12.5px;font-weight:700;color:#8895a7}.tkind.accent{color:var(--accent);font-size:15px}
.tile.ghost{background:transparent;border-style:dashed;border-color:#c5cedd;justify-content:center}
.gtitle{font-weight:800;font-size:22px;letter-spacing:-.4px}

/* CIFRAS */
@property --n{syntax:'<integer>';inherits:false;initial-value:0}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));border-top:1px solid var(--line);margin-top:44px}
.stat{padding:30px 24px 30px 0;border-bottom:1px solid var(--line)}
.stat .num{font-weight:800;font-size:56px;letter-spacing:-2px;color:var(--accent);line-height:1}
.stat p{margin:10px 0 0;font-weight:600;color:#425466}
.count{counter-reset:n var(--n)}.count::after{content:counter(n)}
.count.n3{animation:c3 2.2s cubic-bezier(.2,.8,.2,1) .2s both}
.count.n106{animation:c106 2.2s cubic-bezier(.2,.8,.2,1) .2s both}
.count.n15{animation:c15 2.2s cubic-bezier(.2,.8,.2,1) .2s both}

/* AUDIENCIAS */
.aud{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;margin-top:40px}
.card{background:#fff;border:1.5px solid var(--line);border-radius:20px;padding:32px;display:flex;flex-direction:column;gap:14px;transition:transform .2s,box-shadow .2s,border-color .2s}
.card:hover{transform:translateY(-8px) rotate(-.6deg);box-shadow:0 30px 50px -18px rgba(90,75,255,.35);border-color:#a9b6ff}
.card .art{height:120px;border-radius:14px;background-size:220% 220%;animation:gshift 5s ease-in-out infinite alternate}
.card h3{font-weight:800;font-size:22px;letter-spacing:-.5px}
.card p{margin:0;color:var(--soft)}
.card .more{color:var(--accent);font-weight:700;margin-top:auto}

/* DEV */
.dev{background:var(--ink);color:#fff;overflow:hidden}
.dev .wrap{display:flex;flex-wrap:wrap;gap:56px;align-items:center;position:relative}
.dev h2{margin-bottom:18px}
.dev p{font-size:18px;color:#b6c6dc;margin:0 0 26px}
.dev li{list-style:none;display:flex;gap:12px;margin-bottom:14px}
.dev ul{padding:0;margin:0}
.dev li span{color:#7ad3ff;font-weight:800}
.dev li small{display:block;color:#9fb3cc;font-size:15px}
.code{flex:1 1 440px;min-width:0;background:#06182c;border:1px solid #1d3a5c;border-radius:16px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.code .bar{padding:12px 18px;border-bottom:1px solid #1d3a5c;font-family:'JetBrains Mono',monospace;font-size:12px;color:#7f95b3}
.code pre{margin:0;padding:22px;font-family:'JetBrains Mono',monospace;font-size:13.5px;line-height:1.7;color:#cfe0f5;overflow-x:auto;animation:wipe 2.4s steps(48) .3s both}
.code .k{color:#7ad3ff}.code .s{color:#ffb27a}.code .c{color:#7f95b3}
.cursor{display:inline-block;width:8px;height:15px;background:#7ad3ff;vertical-align:-2px;animation:blink 1s steps(2) infinite}
.code .note{padding:0 22px 16px;font-size:12px;color:#7f95b3}

/* CONTACTO */
.contact{overflow:hidden}
.contact .wrap{position:relative;display:flex;flex-wrap:wrap;gap:56px;padding-top:100px;padding-bottom:100px}
.contact h2{font-size:clamp(34px,5vw,62px);letter-spacing:-2px;line-height:1.04;margin-bottom:20px}
.contact .col{flex:1 1 380px;min-width:0}
.mail{font-family:'JetBrains Mono',monospace;font-size:16px;color:var(--accent)}
form{background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px;display:flex;flex-direction:column;gap:16px;box-shadow:0 30px 60px -30px rgba(10,37,64,.25)}
form label{font-size:13.5px;color:var(--soft);font-weight:600}
form input,form textarea{width:100%;background:#fff;border:1.5px solid #d5dce6;border-radius:8px;padding:13px 14px;font-size:16px;font-family:inherit;color:var(--ink)}
form input:focus,form textarea:focus{outline:2px solid #c9d2ff;border-color:var(--accent)}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
#form-note{font-size:13.5px;color:var(--soft);min-height:20px}

/* FOOTER */
footer{border-top:1px solid var(--line);padding:56px 0 32px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:32px}
.fgrid h4{font-size:14px;font-weight:800;margin:0 0 12px}
.fgrid a{display:block;color:var(--soft);font-size:14px;padding:4px 0}.fgrid a:hover{color:var(--accent)}
.fgrid p{color:var(--soft);font-size:14px;margin:0}
.fbottom{border-top:1px solid var(--line);margin-top:40px;padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:#8895a7;font-size:13.5px}

/* Animaciones */
.reveal{animation:rise .7s ease-out both}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes drift{0%{transform:translate(0,0) scale(1) rotate(0)}50%{transform:translate(-90px,70px) scale(1.25) rotate(25deg)}100%{transform:translate(60px,-40px) scale(.9) rotate(-20deg)}}
@keyframes hue{from{filter:blur(55px) hue-rotate(-30deg)}to{filter:blur(55px) hue-rotate(30deg)}}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-22px) rotate(1.6deg)}}
@keyframes pop{from{opacity:0;transform:translateY(60px) scale(.8) rotate(-4deg)}to{opacity:1;transform:none}}
@keyframes pop2{from{opacity:0;transform:translateY(40px) scale(.92)}to{opacity:1;transform:none}}
@keyframes wordin{from{opacity:0;transform:translateY(40px) rotate(3deg);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes shine{to{background-position:-300% 0}}
@keyframes grow{from{transform:scaleY(.05)}to{transform:scaleY(1)}}
@keyframes breathe{from{scale:1 1}to{scale:1 .82}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
@keyframes ring{from{transform:scale(1);opacity:.8}to{transform:scale(1.8);opacity:0}}
@keyframes scroll{to{transform:translateX(-50%)}}
@keyframes prog{to{transform:scaleX(1)}}
@keyframes c3{to{--n:3}}@keyframes c106{to{--n:106}}@keyframes c15{to{--n:15}}
@keyframes wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes blink{50%{opacity:0}}
@keyframes gshift{from{background-position:0% 50%}to{background-position:100% 50%}}
@keyframes sweep{0%,55%{left:-60%}100%{left:140%}}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(90,75,255,0)}50%{box-shadow:0 8px 28px -4px rgba(90,75,255,.55)}}
@supports (animation-timeline: view()){
  .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
  .tilepop{animation:pop2 linear backwards;animation-timeline:view();animation-range:entry 0% entry 45%}
  .count.n3,.count.n106,.count.n15{animation-timeline:view();animation-range:entry 10% entry 80%;animation-duration:auto}
  .code pre{animation-timeline:view();animation-range:entry 10% entry 85%;animation-duration:auto}
}
@supports (animation-timeline: scroll()){.progress{animation:prog linear both;animation-timeline:scroll(root)}}

@media (max-width:820px){
  .hide-m{display:none !important}
  #burger{display:block}
  .pad{padding:72px 0}
  .hero .wrap{padding-top:64px}
  .hero-art{min-height:420px}
  .blob{opacity:.5}
  .btn.sm{padding:9px 16px;font-size:13.5px}
  .topnav .wrap{gap:12px}
  .nav-right{margin-left:auto}
  #burger{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .w{opacity:1 !important}.progress{display:none}
  .count.n3{--n:3}.count.n106{--n:106}.count.n15{--n:15}
}

.flegal a:hover{text-decoration:underline}