/* --- NeuroDev preview: ocultar chrome Odoo + fondo + fixes Bootstrap --- */
#top,header#top,.o_header_standard,.o_header_mobile,#oe_main_menu_navbar{display:none!important}
#bottom,footer#bottom,.o_footer{display:none!important}
html,body{background:#04060b!important}
#wrapwrap,#wrapwrap main,#wrap{background:transparent!important;min-height:100vh}
.marq .row{flex-wrap:nowrap!important;margin:0!important;justify-content:flex-start;width:max-content!important}
.marq .row>*{width:auto!important;flex:0 0 auto!important;padding:0!important}
.marq span{color:rgba(255,255,255,.28)!important;-webkit-text-stroke:0!important}
.wa{display:none!important}

:root{
  --bg-0:#04060b; --bg-1:#070b12; --bg-2:#0b111b; --bg-3:#10182400;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.13);
  --ink-0:#eff5f7; --ink-1:#b3bfca; --ink-2:#717d8d; --ink-3:#454f60;
  --teal:#2ee6c5; --cyan:#19b6ff; --acc:#2ee6c5; --acc-soft:rgba(46,230,197,.13);
  --amber:#ffb43a; --amber-soft:rgba(255,180,58,.12); --danger:#ff5e57;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --disp:'Bricolage Grotesque',sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --body:'Hanken Grotesk',sans-serif;
  --maxw:1240px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg-0); color:var(--ink-1); font-family:var(--body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
/* cursor del sistema (sin cursor custom) */
::selection{background:var(--acc); color:#04060b}
a{color:inherit; text-decoration:none}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 30px}

/* WebGL canvas + atmosphere */
#neuro{position:fixed; inset:0; z-index:0; pointer-events:none}
.atmos{position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 80% at 50% -10%,rgba(46,230,197,.07),transparent 55%),radial-gradient(90% 60% at 100% 30%,rgba(25,182,255,.05),transparent 60%)}
.vign{position:fixed; inset:0; z-index:1; pointer-events:none; box-shadow:inset 0 0 240px 60px rgba(4,6,11,.9)}
.grain{position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
main,header,footer,.lawbar{position:relative; z-index:5}

/* custom cursor */
.cur,.cur-d{display:none!important}
.cur{width:34px; height:34px; border:1.5px solid #fff; margin:-17px 0 0 -17px; transition:width .25s,height .25s,margin .25s,background .25s}
.cur-d{width:5px; height:5px; background:#fff; margin:-2.5px 0 0 -2.5px}
.cur.grow{width:58px; height:58px; margin:-29px 0 0 -29px; background:rgba(255,255,255,.12)}
@media (hover:none),(pointer:coarse){.cur,.cur-d{display:none} body{cursor:auto}}

/* scroll progress */
.prog{position:fixed; top:0; left:0; height:2px; width:0; z-index:9998; background:linear-gradient(90deg,var(--teal),var(--cyan)); box-shadow:0 0 12px var(--teal)}

/* lawbar ticker */
.lawbar{border-bottom:1px solid var(--line); overflow:hidden; background:linear-gradient(90deg,rgba(255,180,58,.05),transparent)}
.ticker{display:flex; gap:46px; white-space:nowrap; padding:9px 0; font-family:var(--mono); font-size:12px; letter-spacing:.03em; color:var(--ink-2); width:max-content; animation:scroll-x 36s linear infinite}
.ticker b{color:var(--amber); font-weight:700}.ticker .s{color:var(--teal)}
@keyframes scroll-x{to{transform:translateX(-50%)}}

/* nav */
header{position:sticky; top:0; z-index:50; backdrop-filter:blur(16px); background:rgba(4,6,11,.55); border-bottom:1px solid transparent; transition:border-color .35s,background .35s}
header.stuck{border-bottom-color:var(--line); background:rgba(4,6,11,.82)}
.nav{display:flex; align-items:center; justify-content:space-between; height:70px}
.brand{display:flex; align-items:center; gap:12px; font-family:var(--disp); font-weight:800; font-size:21px; letter-spacing:-.02em; color:var(--ink-0)}
.brand .mk{width:30px; height:30px; position:relative; display:grid; place-items:center}
.brand .mk svg{width:30px; height:30px; overflow:visible}
.brand .mk .nd{fill:var(--teal); filter:drop-shadow(0 0 6px var(--teal))}
.brand span{color:var(--teal)}
.brand-logo{height:50px; width:auto; display:block; mix-blend-mode:screen; filter:drop-shadow(0 0 10px rgba(46,230,197,.35)); animation:logoPulse 3.2s ease-in-out infinite}
.logo-wrap{position:relative; display:inline-block; line-height:0}
.logo-wrap::after{content:""; position:absolute; inset:0; pointer-events:none; -webkit-mask:url(/web/image/1242) left center/contain no-repeat; mask:url(/web/image/1242) left center/contain no-repeat; background:linear-gradient(105deg,transparent 38%,rgba(205,255,250,.92) 50%,transparent 62%); background-size:300% 100%; animation:logoShine 5.5s ease-in-out infinite; mix-blend-mode:screen}
@keyframes logoPulse{0%,100%{filter:drop-shadow(0 0 8px rgba(46,230,197,.28))}50%{filter:drop-shadow(0 0 22px rgba(46,230,197,.62))}}
@keyframes logoShine{0%,16%{background-position:210% 0}66%,100%{background-position:-160% 0}}
.navlinks{display:flex; gap:32px; font-size:14.5px; color:var(--ink-2); font-weight:500}
.navlinks a{position:relative; transition:color .2s}
.navlinks a::after{content:""; position:absolute; left:0; bottom:-7px; width:0; height:1.5px; background:var(--teal); box-shadow:0 0 8px var(--teal); transition:width .3s}
.navlinks a:hover{color:var(--ink-0)} .navlinks a:hover::after{width:100%}
.nav-cta{display:flex; align-items:center; gap:14px}
.btn{position:relative; display:inline-flex; align-items:center; gap:9px; font-family:var(--body); font-weight:600; font-size:14.5px; padding:12px 22px; border-radius:12px; border:1px solid transparent; overflow:hidden; transition:transform .2s,box-shadow .35s,color .2s,border-color .25s; will-change:transform}
.btn .arr{transition:transform .25s}.btn:hover .arr{transform:translateX(5px)}
.btn-primary{background:linear-gradient(120deg,var(--teal),var(--cyan)); color:#04231e; box-shadow:0 8px 30px -8px rgba(46,230,197,.6); font-weight:700}
.btn-primary::before{content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.5),transparent 75%); transform:translateX(-130%); transition:transform .65s}
.btn-primary:hover::before{transform:translateX(130%)}
.btn-primary:hover{box-shadow:0 14px 40px -8px rgba(46,230,197,.8)}
.btn-ghost{border-color:var(--line-2); color:var(--ink-0); background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--teal); color:var(--teal)}
.btn-lg{padding:16px 30px; font-size:16px; border-radius:14px}
.nav-burger{display:none; flex-direction:column; gap:5px; cursor:pointer; padding:6px}
.nav-burger span{width:24px; height:2px; background:var(--ink-0); border-radius:2px}

/* hero */
.hero{padding:90px 0 110px; position:relative}
.hero-grid{display:grid; grid-template-columns:1.08fr .92fr; gap:56px; align-items:center}
.eyebrow{display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--teal); margin-bottom:26px}
.eyebrow::before{content:""; width:30px; height:1px; background:var(--teal); box-shadow:0 0 8px var(--teal)}
h1.htitle{font-family:var(--disp); font-weight:700; font-size:clamp(40px,5.7vw,72px); line-height:1.0; letter-spacing:-.03em; color:var(--ink-0); margin-bottom:26px}
h1.htitle .ln{display:block; overflow:hidden}
h1.htitle .ln>span{display:inline-block; transform:translateY(110%); animation:rise .9s cubic-bezier(.16,.9,.3,1) forwards}
.no-js h1.htitle .ln>span{transform:none; animation:none}
@keyframes rise{to{transform:translateY(0)}}
h1.htitle em{font-family:var(--serif); font-style:italic; font-weight:400; color:transparent; background:linear-gradient(120deg,var(--teal),var(--cyan)); -webkit-background-clip:text; background-clip:text; letter-spacing:0}
.hlead{font-size:20px; color:var(--ink-1); max-width:31ch; margin-bottom:14px; opacity:0; animation:fade .8s .7s forwards}
.hproof{font-size:15.5px; color:var(--ink-2); max-width:43ch; margin-bottom:34px; opacity:0; animation:fade .8s .85s forwards}
.hproof b{color:var(--ink-0); font-weight:600}
.no-js .hlead,.no-js .hproof,.no-js .hctas,.no-js .htrust{opacity:1; animation:none}
@keyframes fade{to{opacity:1}}
.hctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:42px; opacity:0; animation:fade .8s 1s forwards}
.htrust{display:flex; gap:30px; flex-wrap:wrap; padding-top:28px; border-top:1px solid var(--line); opacity:0; animation:fade .8s 1.15s forwards}
.htrust .t b{display:block; font-family:var(--mono); font-size:19px; color:var(--ink-0); font-weight:700; letter-spacing:-.02em}
.htrust .t small{font-size:12.5px; color:var(--ink-3)}

/* floating audit object (CSS 3D) */
.float3d{perspective:1600px}
.audit{position:relative; transform-style:preserve-3d; border:1px solid var(--line-2); border-radius:20px; padding:0; overflow:hidden;
  background:linear-gradient(180deg,rgba(12,18,28,.72),rgba(6,10,18,.66)); backdrop-filter:blur(10px);
  box-shadow:0 50px 100px -40px rgba(0,0,0,.95),0 0 50px -20px rgba(46,230,197,.25),inset 0 1px 0 rgba(255,255,255,.06);
  transform:rotateY(-13deg) rotateX(5deg); transition:transform .2s ease-out}
.audit::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(140deg,rgba(46,230,197,.06),transparent 45%)}
.audit-bar{display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.015)}
.audit-bar .l{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12.5px; color:var(--ink-1)}
.ldot{width:8px; height:8px; border-radius:50%; background:var(--teal); box-shadow:0 0 12px var(--teal); animation:blink 1.6s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}
.audit-bar .r{font-family:var(--mono); font-size:11px; color:var(--teal); letter-spacing:.05em}
.audit-body{padding:10px 18px 14px; font-family:var(--mono); font-size:12.5px; min-height:236px}
.lrow{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px dashed rgba(255,255,255,.06); opacity:0; transform:translateX(10px); animation:lin .5s forwards}
@keyframes lin{to{opacity:1; transform:none}}
.lrow .ev{color:var(--ink-1); display:flex; align-items:center; gap:8px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lrow .ev .tg{color:var(--ink-3)}
.lrow .hh{color:var(--cyan); font-size:11.5px; flex-shrink:0}
.lrow.alert .ev{color:var(--amber)} .lrow.alert .hh{color:var(--amber)}
.audit-foot{display:flex; align-items:center; justify-content:space-between; padding:13px 18px; border-top:1px solid var(--line); font-family:var(--mono); font-size:11px; color:var(--ink-2)}
.integ{display:inline-flex; align-items:center; gap:8px; color:var(--teal)}
.integ .b{width:56px; height:4px; border-radius:3px; background:rgba(46,230,197,.18); overflow:hidden}
.integ .b i{display:block; height:100%; width:32%; background:var(--teal); box-shadow:0 0 8px var(--teal); animation:scan 2.6s ease-in-out infinite}
@keyframes scan{0%{transform:translateX(-110%)}100%{transform:translateX(330%)}}
.audit .seal{position:absolute; right:-14px; top:-14px; width:84px; height:84px; transform:translateZ(60px); font-family:var(--mono); font-size:9px; color:var(--teal); display:grid; place-items:center; text-align:center; border:1px solid var(--teal); border-radius:50%; background:rgba(4,6,11,.7); box-shadow:0 0 24px -4px var(--teal); animation:spin 14s linear infinite}
@keyframes spin{to{transform:translateZ(60px) rotate(360deg)}}

/* section primitives */
section.blk{padding:104px 0; position:relative}
.kick{font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--teal); margin-bottom:18px; display:flex; align-items:center; gap:10px}
.kick::before{content:"//"; color:var(--ink-3)}
.kick.c{justify-content:center}
h2.st{font-family:var(--disp); font-weight:700; font-size:clamp(30px,3.9vw,48px); line-height:1.06; letter-spacing:-.025em; color:var(--ink-0); max-width:19ch}
h2.st em{font-family:var(--serif); font-style:italic; font-weight:400; color:transparent; background:linear-gradient(120deg,var(--teal),var(--cyan)); -webkit-background-clip:text; background-clip:text}
.st.c{margin:0 auto; text-align:center}
.lead{font-size:18.5px; color:var(--ink-2); max-width:55ch}.lead.c{margin:18px auto 0; text-align:center}

/* reveal */
.rv{opacity:0; transform:translateY(34px); filter:blur(6px); transition:opacity .8s cubic-bezier(.16,.8,.3,1),transform .8s cubic-bezier(.16,.8,.3,1),filter .8s}
.rv.in{opacity:1; transform:none; filter:none}
.no-js .rv{opacity:1; transform:none; filter:none}

/* marquee editorial */
.marq{border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; padding:30px 0; background:linear-gradient(180deg,transparent,rgba(46,230,197,.02),transparent)}
.marq .row{display:flex; gap:40px; width:max-content; animation:scroll-x 30s linear infinite; align-items:center}
.marq span{font-family:var(--disp); font-weight:700; font-size:clamp(30px,4.5vw,58px); letter-spacing:-.02em; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.22); white-space:nowrap}
.marq b{font-family:var(--disp); font-weight:700; font-size:clamp(30px,4.5vw,58px); color:var(--teal); -webkit-text-stroke:0; white-space:nowrap}
.marq .dotsep{color:var(--ink-3); -webkit-text-stroke:0; font-size:30px}

/* qualify */
.qg{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:44px}
.q{display:flex; align-items:flex-start; gap:15px; padding:24px 26px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.012); transition:border-color .35s,background .35s,transform .35s}
.q:hover{border-color:var(--line-2); background:var(--acc-soft); transform:translateX(5px)}
.q .ck{flex-shrink:0; width:27px; height:27px; border-radius:9px; border:1px solid var(--teal); color:var(--teal); display:grid; place-items:center; font-size:12px; margin-top:2px; transition:background .3s,color .3s}
.q:hover .ck{background:var(--teal); color:#04231e}
.q p{font-size:16px; color:var(--ink-1)}

/* stats */
.stg{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:48px}
.stt{padding:32px 26px; border:1px solid var(--line); border-radius:17px; background:linear-gradient(180deg,rgba(255,255,255,.018),transparent); position:relative; overflow:hidden}
.stt::before{content:""; position:absolute; top:0; left:0; width:100%; height:2px; background:linear-gradient(90deg,var(--teal),transparent); opacity:.6}
.stt.am::before{background:linear-gradient(90deg,var(--amber),transparent)}
.stt .n{font-family:var(--disp); font-weight:800; font-size:clamp(32px,3.8vw,50px); letter-spacing:-.03em; color:var(--ink-0); line-height:1}
.stt.am .n{color:var(--amber)}
.stt small{display:block; margin-top:13px; font-size:13.5px; color:var(--ink-2); line-height:1.45}

/* pillars */
.pl{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:50px}
.pc{padding:36px 30px; border:1px solid var(--line); border-radius:19px; background:linear-gradient(180deg,rgba(12,18,28,.45),rgba(6,10,18,.2)); position:relative; overflow:hidden; transition:transform .4s,border-color .4s; isolation:isolate}
.pc::before{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(440px circle at var(--mx,50%) var(--my,0%),var(--acc-soft),transparent 62%); opacity:0; transition:opacity .4s}
.pc:hover{transform:translateY(-7px); border-color:var(--line-2)} .pc:hover::before{opacity:1}
.pic{width:54px; height:54px; border-radius:14px; border:1px solid var(--line-2); display:grid; place-items:center; font-size:25px; color:var(--teal); margin-bottom:24px; background:var(--acc-soft); font-family:var(--serif)}
.pc h3{font-family:var(--disp); font-weight:600; font-size:22px; color:var(--ink-0); margin-bottom:13px; letter-spacing:-.01em}
.pc p{font-size:15px; color:var(--ink-2)}

/* steps */
.steps{position:relative; margin-top:58px}
.sline{position:absolute; top:36px; left:6%; right:6%; height:1px; background:var(--line)}
.sline i{position:absolute; inset:0; width:0; background:linear-gradient(90deg,var(--teal),var(--cyan)); box-shadow:0 0 10px var(--teal); transition:width 1.5s ease}
.steps.in .sline i{width:100%}
.sg{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; position:relative}
.sp{padding:0 14px}
.sp .node{width:15px; height:15px; border-radius:50%; background:var(--bg-0); border:2px solid var(--ink-3); margin-bottom:32px; transition:border-color .4s,box-shadow .4s}
.sp.lit .node{border-color:var(--teal); box-shadow:0 0 0 5px var(--acc-soft),0 0 16px var(--teal)}
.sp .num{font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; color:var(--ink-3); margin-bottom:11px}
.sp.lit .num{color:var(--teal)}
.sp h3{font-family:var(--disp); font-weight:600; font-size:19px; color:var(--ink-0); margin-bottom:9px}
.sp p{font-size:14px; color:var(--ink-2)}
.sp .bdg{display:inline-block; margin-top:15px; font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--teal); border:1px solid var(--teal); border-radius:20px; padding:4px 12px}
.sp.key h3{color:var(--teal)}

/* modules carousel */
.mh{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap}
.car{margin-top:48px; position:relative}
.vp{overflow:hidden; border-radius:24px}
.trk{display:flex; will-change:transform; cursor:grab}
.trk:active{cursor:grabbing}
.sl{min-width:82%; padding:0 12px; box-sizing:border-box}
.mod{display:grid; grid-template-columns:1.08fr 1fr; border:1px solid var(--line-2); border-radius:24px; overflow:hidden; background:linear-gradient(180deg,rgba(12,18,28,.55),rgba(6,10,18,.35)); min-height:400px; position:relative; isolation:isolate; transition:border-color .4s,box-shadow .4s,transform .4s}
.mod::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(560px circle at var(--mx,50%) var(--my,50%),rgba(46,230,197,.14),transparent 56%); opacity:0; transition:opacity .45s}
.mod:hover{border-color:var(--teal); box-shadow:0 0 60px -14px rgba(46,230,197,.45)}
.mod:hover::before{opacity:1}
.mi,.mv{position:relative; z-index:1}
.mi{padding:48px 46px; display:flex; flex-direction:column; justify-content:center}
.mtag{font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:18px}
.mod h3{font-family:var(--disp); font-weight:700; font-size:clamp(27px,3.1vw,38px); letter-spacing:-.02em; color:var(--ink-0); margin-bottom:15px}
.mod h3 .v{color:transparent; background:linear-gradient(120deg,var(--teal),var(--cyan)); -webkit-background-clip:text; background-clip:text}
.mod .ds{font-size:16px; color:var(--ink-2); margin-bottom:26px; max-width:40ch}
.mf{display:flex; flex-direction:column; gap:12px; margin-bottom:30px}
.mf span{display:flex; align-items:center; gap:12px; font-size:14.5px; color:var(--ink-1)}
.mf span::before{content:""; width:6px; height:6px; border-radius:2px; background:var(--teal); box-shadow:0 0 8px var(--teal); flex-shrink:0}
.mfo{display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.pr{font-family:var(--mono); font-size:14px; color:var(--ink-2)}.pr b{color:var(--ink-0); font-size:21px; font-weight:700}.pr s{color:var(--ink-3); margin-right:7px}
.mlink{display:inline-flex; align-items:center; gap:8px; color:var(--teal); font-weight:600; font-size:15px}
.mlink .arr{transition:transform .25s}.mlink:hover .arr{transform:translateX(5px)}
.mv{position:relative; background:radial-gradient(130% 90% at 75% 30%,var(--acc-soft),transparent 72%); display:grid; place-items:center; padding:24px; overflow:visible; perspective:1150px}
.mv .gb{position:absolute; inset:0; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:30px 30px; opacity:.4; mask-image:radial-gradient(circle at 60% 40%,#000,transparent 75%)}
/* animated animal mascots (owl / hawk) */
.animal{position:relative; z-index:2; width:100%; max-width:420px; aspect-ratio:1/1; display:grid; place-items:center; transition:transform .15s ease-out; transform-style:preserve-3d; will-change:transform}
.animal::after{content:""; position:absolute; bottom:2%; left:18%; right:18%; height:22px; background:radial-gradient(ellipse at center,rgba(0,0,0,.6),transparent 72%); filter:blur(10px); transform:translateZ(-80px); z-index:-1; opacity:.65}
.animal img{width:100%; height:100%; object-fit:contain; animation:floaty 6s ease-in-out infinite; will-change:transform,filter}
.animal.owl img{animation:floaty 6s ease-in-out infinite,glowO 3.4s ease-in-out infinite}
.animal.hawk img{animation:floaty 7s ease-in-out infinite,glowH 3.8s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(-9px)}50%{transform:translateY(11px)}}
@keyframes glowO{0%,100%{filter:drop-shadow(0 0 16px rgba(46,230,197,.28))}50%{filter:drop-shadow(0 0 36px rgba(46,230,197,.6))}}
@keyframes glowH{0%,100%{filter:drop-shadow(0 0 18px rgba(168,85,247,.32))}50%{filter:drop-shadow(0 0 40px rgba(255,140,60,.5))}}
.animal .rfx{position:absolute; inset:9%; border-radius:50%; border:1px dashed rgba(255,255,255,.07); animation:spin 26s linear infinite}
.animal .rfx::before{content:""; position:absolute; inset:-1px; border-radius:50%; border-top:2px solid var(--teal); opacity:.55; filter:blur(.3px)}
.animal.hawk .rfx::before{border-top-color:#b06ff2}
.animal .lbl{position:absolute; bottom:2%; left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); white-space:nowrap; background:rgba(4,6,11,.6); padding:4px 10px; border-radius:20px; border:1px solid var(--line)}
/* odoo wordmark + badge */
.odoo-badge{display:inline-flex; align-items:center; gap:10px; padding:9px 16px; border:1px solid var(--line-2); border-radius:30px; background:rgba(255,255,255,.03); font-family:var(--mono); font-size:12px; color:var(--ink-2)}
.odoo-wm{font-family:'Baloo 2',sans-serif; font-weight:800; font-size:19px; color:#b283e0; letter-spacing:-.03em; line-height:1; text-shadow:0 0 18px rgba(178,131,224,.4)}
.odoo-badge .v{color:var(--ink-3)}
.odoo-badge .dot{width:5px; height:5px; border-radius:50%; background:#b283e0; box-shadow:0 0 8px #b283e0}
.chain{display:flex; flex-direction:column; gap:10px; z-index:2; width:100%; max-width:285px}
.blk2{display:flex; align-items:center; gap:12px; padding:14px 15px; border:1px solid var(--line-2); border-radius:11px; background:rgba(6,10,18,.7); font-family:var(--mono); font-size:11.5px}
.blk2 .ic{width:8px;height:8px;border-radius:2px;background:var(--teal);box-shadow:0 0 8px var(--teal)}
.blk2 .hh{color:var(--cyan)}.blk2 .ll{color:var(--ink-2)}
.blk2.seal{border-color:var(--teal); box-shadow:0 0 0 1px var(--acc-soft)}
.lk{height:14px; width:1px; background:linear-gradient(var(--teal),transparent); margin:-6px auto; opacity:.6}
.fr{z-index:2; width:100%; max-width:300px; font-family:var(--mono)}
.fr .al{display:flex; align-items:center; gap:9px; font-size:12px; color:var(--amber); margin-bottom:18px; padding:10px 13px; border:1px solid rgba(255,180,58,.3); border-radius:9px; background:var(--amber-soft)}
.fb{display:flex; align-items:center; gap:12px; margin-bottom:11px; font-size:11px; color:var(--ink-2)}
.fb .lab{width:80px; text-align:right}
.fb .tr{flex:1; height:9px; border-radius:5px; background:rgba(255,255,255,.06); overflow:hidden}
.fb .tr i{display:block; height:100%; border-radius:5px; background:linear-gradient(90deg,var(--teal),var(--cyan)); width:0; transition:width 1.1s ease}
.fb.hot .tr i{background:linear-gradient(90deg,var(--amber),var(--danger))}
.gauge{z-index:2; text-align:center; font-family:var(--mono)}
.ring{width:172px; height:172px; border-radius:50%; margin:0 auto 18px; background:conic-gradient(var(--teal) 0 62%,rgba(255,255,255,.06) 62% 100%); display:grid; place-items:center; position:relative; box-shadow:0 0 40px -10px var(--teal)}
.ring::before{content:""; position:absolute; inset:13px; border-radius:50%; background:var(--bg-1)}
.ring .val{position:relative; z-index:2}.ring .val b{font-family:var(--disp); font-size:36px; color:var(--teal); display:block; line-height:1}
.ring .val small{font-size:10px; color:var(--ink-3); letter-spacing:.1em; text-transform:uppercase}
.gc{display:flex; gap:22px; justify-content:center; font-size:11.5px}.gc div b{display:block; color:var(--ink-0); font-size:15px}.gc .real b{color:var(--teal)}
.cc{display:flex; align-items:center; justify-content:space-between; margin-top:28px}
.drag-hint{font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; color:var(--ink-3); text-transform:uppercase; user-select:none}
.dts{display:flex; gap:10px}
.dt{width:9px; height:9px; border-radius:50%; background:var(--ink-3); cursor:pointer; border:none; transition:width .3s,background .3s; padding:0}
.dt.on{background:var(--teal); width:28px; border-radius:6px; box-shadow:0 0 10px var(--teal)}
.ar{display:flex; gap:10px}
.arw{width:48px; height:48px; border-radius:13px; border:1px solid var(--line-2); background:rgba(255,255,255,.02); color:var(--ink-0); cursor:pointer; display:grid; place-items:center; font-size:19px; transition:border-color .25s,color .25s,transform .2s}
.arw:hover{border-color:var(--teal); color:var(--teal)}.arw:active{transform:scale(.92)}
.chips{display:flex; gap:11px; flex-wrap:wrap; margin-top:36px; justify-content:center}
.chip{font-family:var(--mono); font-size:12px; color:var(--ink-2); border:1px solid var(--line); border-radius:30px; padding:9px 17px; background:rgba(255,255,255,.012)}.chip .s{color:var(--teal)}
.promo{margin-top:30px; padding:18px 24px; border:1px dashed rgba(255,180,58,.4); border-radius:14px; background:var(--amber-soft); font-size:14.5px; color:var(--ink-1); text-align:center}
.promo b{color:var(--amber)}.promo s{color:var(--ink-3)}.promo .pp{color:var(--ink-0); font-weight:700}

/* resource */
.res{display:grid; grid-template-columns:1.6fr 1fr; gap:42px; align-items:center; padding:46px; border:1px solid var(--line-2); border-radius:24px; background:linear-gradient(120deg,rgba(12,18,28,.5),rgba(6,10,18,.28))}
.doc{aspect-ratio:3/4; border:1px solid var(--line-2); border-radius:17px; background:linear-gradient(180deg,var(--bg-2),var(--bg-1)); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:13px; padding:26px; text-align:center; transform:rotate(2.5deg); transition:transform .45s; box-shadow:0 36px 70px -34px rgba(0,0,0,.85)}
.doc:hover{transform:rotate(0) translateY(-5px)}.doc .di{font-size:48px}
.doc h4{font-family:var(--disp); font-weight:600; color:var(--ink-0); font-size:18px}.doc p{font-family:var(--mono); font-size:11px; color:var(--ink-3)}

/* about */
.ab{max-width:780px; margin:0 auto; text-align:center}
.ab .av{width:78px; height:78px; border-radius:50%; margin:0 auto 26px; background:linear-gradient(135deg,#16202e,#070b12); border:1px solid var(--line-2); display:grid; place-items:center; font-family:var(--disp); font-weight:800; font-size:27px; color:var(--teal); box-shadow:0 0 30px -8px var(--teal)}

/* final cta */
.fin{text-align:center; padding:74px 46px; border:1px solid var(--line-2); border-radius:28px; background:radial-gradient(120% 150% at 50% 0%,var(--acc-soft),transparent 55%),linear-gradient(180deg,rgba(12,18,28,.5),rgba(6,10,18,.3)); position:relative; overflow:hidden}
.fin::before{content:""; position:absolute; inset:0; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:50px 50px; opacity:.3; mask-image:radial-gradient(circle at 50% 0%,#000,transparent 70%)}
.fin>*{position:relative}

/* footer */
.brand-outro{padding:100px 0 34px; text-align:center; position:relative}
.bo-logo{display:inline-block; line-height:0}
.bo-logo img{height:clamp(72px,12vw,154px); width:auto; mix-blend-mode:screen; filter:drop-shadow(0 0 32px rgba(46,230,197,.38)); animation:logoPulse 3.4s ease-in-out infinite}
.bo-tag{font-family:var(--mono); font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); margin-top:22px}
footer{border-top:1px solid var(--line); padding:50px 0 42px; margin-top:0}
.ft{display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap}
.ft-grid{display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center}
.ft-links{display:flex; gap:28px; flex-wrap:wrap; justify-content:center}
.ft-links a{font-size:14px; color:var(--ink-2); transition:color .2s}
.ft-links a:hover{color:var(--teal)}
.ft .mut{font-size:13px; color:var(--ink-3); font-family:var(--mono)}

/* whatsapp */
.wa{position:fixed; bottom:28px; right:28px; z-index:60; width:60px; height:60px; border-radius:50%; background:#1faf54; display:grid; place-items:center; box-shadow:0 14px 34px -8px rgba(31,175,84,.65); animation:bob 3s ease-in-out infinite; cursor:pointer}
.wa:hover{transform:scale(1.1)}.wa svg{width:31px; height:31px; fill:#fff}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

@media (max-width:940px){
  .hero-grid{grid-template-columns:1fr; gap:48px}.audit{transform:none}
  .qg,.stg,.pl,.sg{grid-template-columns:1fr 1fr}
  .mod{grid-template-columns:1fr}.mv{border-left:none; border-top:1px solid var(--line); min-height:300px}
  .res{grid-template-columns:1fr}.doc{max-width:250px; margin:0 auto}
  .navlinks,.nav-cta .btn-ghost{display:none}.nav-burger{display:flex}.sline{display:none}
}
@media (max-width:560px){.qg,.stg,.pl,.sg{grid-template-columns:1fr}.wrap{padding:0 20px}section.blk{padding:68px 0}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}.rv{opacity:1;transform:none;filter:none}}