:root{
  --navy:#0A1838; --navy-d:#060f24; --blue:#2E6BFF; --cyan:#22D3EE;
  --ink:#94A8CC; --ink-d:#6f83a8; --white:#fff;
  --panel:rgba(255,255,255,.045); --panel-border:rgba(255,255,255,.10);
  --maxw:1180px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--navy-d); color:var(--ink);
  font-family:'Inter',system-ui,sans-serif; line-height:1.6;
  overflow-x:hidden;
}
::selection{background:rgba(34,211,238,.3); color:#fff;}

/* ---------- fixed background layers ---------- */
#bg-canvas{position:fixed; inset:0; z-index:0; pointer-events:none;}
.bg-grad{position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(900px 600px at 15% 0%, rgba(46,107,255,.20), transparent 60%),
    radial-gradient(1000px 700px at 100% 100%, rgba(34,211,238,.16), transparent 60%),
    linear-gradient(180deg, var(--navy), var(--navy-d));
}
/* cursor spotlight that follows the mouse (no click needed) */
#spotlight{position:fixed; width:560px; height:560px; border-radius:50%; z-index:1; pointer-events:none;
  background:radial-gradient(circle, rgba(34,211,238,.10), rgba(46,107,255,.06) 40%, transparent 70%);
  transform:translate(-50%,-50%); left:-999px; top:0; transition:opacity .4s; mix-blend-mode:screen;}

/* ---------- top scroll progress ---------- */
#progress{position:fixed; top:0; left:0; height:3px; width:0%; z-index:100;
  background:linear-gradient(90deg,var(--blue),var(--cyan)); box-shadow:0 0 12px var(--cyan);}

/* ---------- neon scroll rail (lights up as you scroll) ---------- */
#rail{position:fixed; left:34px; top:14vh; bottom:14vh; width:2px; z-index:40;
  background:rgba(255,255,255,.06); border-radius:2px;}
#rail-fill{position:absolute; top:0; left:0; width:100%; height:0%;
  background:linear-gradient(180deg,var(--blue),var(--cyan));
  box-shadow:0 0 10px var(--cyan), 0 0 22px rgba(46,107,255,.7); border-radius:2px;}
.rail-node{position:fixed; left:29px; width:12px; height:12px; border-radius:50%; z-index:41;
  background:var(--navy-d); border:2px solid rgba(255,255,255,.18); transition:all .4s;}
.rail-node.on{border-color:var(--cyan); background:var(--cyan);
  box-shadow:0 0 10px var(--cyan), 0 0 20px var(--blue); transform:scale(1.15);}
@media(max-width:980px){#rail,.rail-node{display:none;}}

/* ---------- nav ---------- */
header{position:fixed; top:0; left:0; right:0; z-index:90; transition:all .35s;}
header.scrolled{background:rgba(8,15,36,.72); backdrop-filter:blur(14px); border-bottom:1px solid var(--panel-border);}
nav{max-width:var(--maxw); margin:0 auto; padding:18px 28px; display:flex; align-items:center; justify-content:space-between;}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none;}
.brand svg{width:34px; height:34px;}
.brand .wm{font-family:'Sora',sans-serif; font-weight:700; font-size:20px; color:#fff; letter-spacing:.2px;}
.brand .wm em{font-style:normal; color:var(--cyan);}
.nav-links{display:flex; gap:30px; align-items:center;}
.nav-links a{color:var(--ink); text-decoration:none; font-size:14.5px; font-weight:500; transition:color .2s; position:relative;}
.nav-links a:hover{color:#fff;}
.nav-links a.btn{padding:10px 20px; border-radius:10px; color:#fff;
  background:linear-gradient(120deg,var(--blue),var(--cyan)); box-shadow:0 6px 22px rgba(46,107,255,.4);}
.nav-links a.btn:hover{filter:brightness(1.08);}
@media(max-width:760px){.nav-links a:not(.btn){display:none;}}

/* ---------- layout ---------- */
main{position:relative; z-index:2;}
section{max-width:var(--maxw); margin:0 auto; padding:120px 28px;}
.eyebrow{font-size:13px; font-weight:600; letter-spacing:3px; text-transform:uppercase; color:var(--cyan); margin-bottom:18px;}
h1,h2,h3{font-family:'Sora',sans-serif; color:#fff; line-height:1.05; letter-spacing:-.5px;}
.gr{background:linear-gradient(120deg,var(--blue) 10%,var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;}
.lead{color:var(--ink); font-size:19px; max-width:680px;}

/* hero */
#hero{min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding-top:140px;}
#hero h1{font-size:clamp(42px,7vw,84px); font-weight:800; max-width:980px;}
#hero .lead{margin-top:26px; font-size:21px;}
.hero-cta{display:flex; gap:16px; margin-top:40px; flex-wrap:wrap;}
.cta{display:inline-flex; align-items:center; gap:9px; padding:15px 28px; border-radius:12px;
  font-weight:600; font-size:16px; text-decoration:none; transition:all .25s; cursor:pointer;}
.cta.primary{color:#fff; background:linear-gradient(120deg,var(--blue),var(--cyan)); box-shadow:0 10px 34px rgba(46,107,255,.42);}
.cta.primary:hover{transform:translateY(-2px); box-shadow:0 16px 44px rgba(34,211,238,.5);}
.cta.ghost{color:#dCe7ff; border:1px solid var(--panel-border); background:var(--panel);}
.cta.ghost:hover{border-color:var(--cyan); color:#fff;}
.scroll-hint{margin-top:64px; color:var(--ink-d); font-size:13px; letter-spacing:2px; text-transform:uppercase; display:flex; align-items:center; gap:10px;}
.scroll-hint .dot{width:22px; height:34px; border:2px solid var(--panel-border); border-radius:12px; position:relative;}
.scroll-hint .dot::after{content:""; position:absolute; left:50%; top:7px; width:4px; height:7px; border-radius:3px; background:var(--cyan); transform:translateX(-50%); animation:scrolly 1.6s infinite;}
@keyframes scrolly{0%{opacity:0; top:7px;}40%{opacity:1;}80%{opacity:0; top:18px;}100%{opacity:0;}}

/* page hero (standalone pages like /empleo) */
.page-hero{padding-top:170px;}

/* trust */
.trust{max-width:var(--maxw); margin:0 auto; padding:0 28px 40px;}
.trust .label{font-size:12px; letter-spacing:3px; text-transform:uppercase; color:var(--ink-d); margin-bottom:18px;}
.trust .logos{display:flex; gap:34px; align-items:baseline; flex-wrap:wrap; font-size:30px; color:#cdd9ef;}
.lg-mayoral{font-family:'Quicksand',sans-serif; font-weight:600; text-transform:lowercase; letter-spacing:.2px;}
.lg-revolut{font-family:'Manrope',sans-serif; font-weight:800; letter-spacing:-1px;}
.lg-internaco{font-family:'Archivo',sans-serif; font-weight:700;}
.lg-ikea{font-family:'Jost',sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:2px;}

/* section heading */
.sec-head{margin-bottom:54px; max-width:760px;}
.sec-head h2{font-size:clamp(30px,4.4vw,48px); font-weight:800;}
.sec-head p{margin-top:16px; font-size:18px;}

/* panels / cards */
.panel{background:var(--panel); border:1px solid var(--panel-border); border-radius:18px; padding:28px;
  backdrop-filter:blur(12px); transition:transform .3s, border-color .3s, box-shadow .3s; position:relative; overflow:hidden;}
.panel:hover{transform:translateY(-6px); border-color:rgba(34,211,238,.4); box-shadow:0 18px 50px rgba(8,15,36,.6);}
.panel::before{content:""; position:absolute; inset:0; opacity:0; transition:opacity .35s; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(34,211,238,.12), transparent 45%);}
.panel:hover::before{opacity:1;}
.chip{width:50px; height:50px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  background:rgba(46,107,255,.14); border:1px solid var(--panel-border); margin-bottom:18px;}
.chip svg{width:25px; height:25px; stroke:var(--cyan); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
.panel h3{font-size:19px; font-weight:700; margin-bottom:9px;}
.panel p{font-size:14.5px; color:var(--ink); line-height:1.5;}

.grid{display:grid; gap:22px;}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}
.g2{grid-template-columns:repeat(2,1fr);}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr;}}

/* method/steps */
.step .num{font-family:'Sora',sans-serif; font-weight:800; font-size:30px; color:rgba(148,168,204,.4); margin-bottom:8px;}

/* stats */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr);}}
.stat{padding:30px 26px;}
.stat .n{font-family:'Sora',sans-serif; font-weight:800; font-size:clamp(40px,5vw,62px); color:#fff; line-height:1; letter-spacing:-2px;}
.stat .l{margin-top:14px; font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color:var(--cyan); font-weight:600;}

/* pills */
.pill{display:inline-block; margin-top:16px; padding:7px 14px; border-radius:999px; font-size:12.5px; font-weight:600;
  background:rgba(34,211,238,.10); border:1px solid var(--panel-border); color:var(--cyan); letter-spacing:.4px;}

/* results layout */
.split{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
@media(max-width:860px){.split{grid-template-columns:1fr;}}
.check{display:flex; gap:15px; align-items:flex-start; margin-bottom:22px;}
.check .tick{flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--blue),var(--cyan)); box-shadow:0 0 16px rgba(34,211,238,.45);}
.check .tick svg{width:17px; height:17px; stroke:#06122e; stroke-width:2.6; fill:none; stroke-linecap:round; stroke-linejoin:round;}
.check b{color:#fff; font-family:'Sora',sans-serif; font-weight:600; font-size:16px;}
.check span{color:var(--ink); font-size:14.5px;}
/* bar chart */
.chart{display:flex; align-items:flex-end; gap:22px; height:280px; padding:20px 6px 0;}
.catcol{flex:1; display:flex; flex-direction:column; align-items:center; height:100%;}
.bars{display:flex; gap:9px; align-items:flex-end; height:100%; width:100%; justify-content:center;}
.bar{width:30px; border-radius:7px 7px 0 0; position:relative; height:0; transition:height 1.1s cubic-bezier(.2,.8,.2,1);}
.bar.before{background:rgba(255,255,255,.13); border:1px solid var(--panel-border);}
.bar.after{background:linear-gradient(180deg,var(--blue),var(--cyan)); box-shadow:0 0 16px rgba(34,211,238,.4);}
.bar .v{position:absolute; top:-22px; left:50%; transform:translateX(-50%); font-size:12px; color:var(--ink); font-weight:600;}
.catlabel{margin-top:12px; font-size:12.5px; color:var(--ink);}
.legend{display:flex; gap:22px; margin-top:14px; font-size:13px; color:var(--ink);}
.legend i{display:inline-block; width:14px; height:14px; border-radius:4px; margin-right:7px; vertical-align:-2px;}
.legend .b1{background:rgba(255,255,255,.18);} .legend .b2{background:linear-gradient(180deg,var(--blue),var(--cyan));}

/* final CTA */
#contact{text-align:center; padding-bottom:80px;}
#contact h2{font-size:clamp(34px,5.5vw,66px); font-weight:800; max-width:900px; margin:0 auto;}
#contact .lead{margin:24px auto 0; text-align:center;}
.contact-card{margin-top:46px; display:inline-flex; flex-direction:column; gap:18px; align-items:center;
  padding:40px 56px; border-radius:22px; background:var(--panel); border:1px solid var(--panel-border); backdrop-filter:blur(14px);}
.contact-card .mail{font-family:'Sora',sans-serif; font-weight:700; font-size:clamp(18px,2.4vw,24px); color:#fff;}

/* forms */
.form{display:grid; gap:14px; text-align:left;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media(max-width:560px){.form-row{grid-template-columns:1fr;}}
.field label{display:block; font-size:13px; color:var(--ink); margin-bottom:6px; font-weight:500;}
.field input,.field textarea{width:100%; background:rgba(255,255,255,.04); border:1px solid var(--panel-border);
  border-radius:10px; padding:13px 15px; color:#fff; font-family:'Inter',sans-serif; font-size:15px; transition:border-color .2s, background .2s;}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-d);}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--cyan); background:rgba(255,255,255,.06);}
.field textarea{resize:vertical; min-height:108px;}
.form button[type=submit]{border:none; cursor:pointer; font-family:inherit; justify-content:center; width:100%; margin-top:4px;}
.form button[type=submit]:disabled{opacity:.6; cursor:default;}
.form-status{font-size:14.5px; min-height:20px; text-align:center;}
.form-status.ok{color:var(--cyan);} .form-status.err{color:#ff8d8d;}
.form-status.err a{color:#ff8d8d; text-decoration:underline;}
.form-foot{font-size:13px; color:var(--ink-d); text-align:center;}
.form-foot a{color:var(--ink);} .form-foot a:hover{color:var(--cyan);}
.honeypot{display:none !important;}

/* footer */
footer{position:relative; z-index:2; border-top:1px solid var(--panel-border); margin-top:60px;}
.foot-in{max-width:var(--maxw); margin:0 auto; padding:34px 28px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px;}
.foot-links{display:flex; gap:24px; flex-wrap:wrap;}
.foot-links a{color:var(--ink); text-decoration:none; font-size:14px; font-weight:500;}
.foot-links a:hover{color:var(--cyan);}
.foot-in .muted{font-size:13px; color:var(--ink-d);}
.foot-in .muted a{color:var(--ink); text-decoration:none;}
.foot-in .muted a:hover{color:var(--cyan);}

/* reveal on scroll */
.reveal{opacity:0; transform:translateY(34px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1; transform:none;}
.reveal.d1{transition-delay:.08s;} .reveal.d2{transition-delay:.16s;} .reveal.d3{transition-delay:.24s;}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none;} #bg-canvas{display:none;}}