*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#05070C}
img{max-width:100%}
.site{overflow-x:clip}
:focus-visible{outline:2px solid #3DD6F5;outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:#F4F7FB;color:#05070C;padding:10px 16px;border-radius:10px;font:600 15px Inter,sans-serif}
.skip:focus{left:12px}
.menu-btn{display:none;width:44px;height:44px;border-radius:12px;border:1px solid rgba(198,207,220,.25);background:transparent;color:#F4F7FB;align-items:center;justify-content:center;cursor:pointer}
@media (max-width:980px){
  .menu-btn{display:inline-flex}
  #site-nav{display:none!important;position:absolute;top:72px;left:0;right:0;flex-direction:column;align-items:stretch!important;gap:4px!important;background:rgba(5,7,12,.97);backdrop-filter:blur(14px);padding:12px 20px 24px;border-bottom:1px solid rgba(198,207,220,.12)}
  #site-nav.open{display:flex!important}
  #site-nav a{padding:12px 0!important;font-size:17px!important}
  #site-nav a:last-child{justify-content:center;margin-top:10px}
}
.demo-panel[hidden]{display:none!important}
.radio-pill{display:flex;align-items:center;gap:10px;border:1px solid #2B3850;border-radius:12px;padding:10px 16px;min-height:44px;font-size:15px;cursor:pointer}
.radio-pill:has(input:checked){border-color:rgba(76,141,255,.6);background:rgba(76,141,255,.10)}
.field{display:flex;flex-direction:column;gap:8px;font-size:15px}
.field input,.field textarea{background:#05070C;border:1px solid #2B3850;border-radius:12px;padding:13px 14px;color:#F4F7FB;font:16px Inter,sans-serif;min-height:44px}
.field textarea{resize:vertical}
.field input:focus,.field textarea:focus{border-color:#4C8DFF;outline:none;box-shadow:0 0 0 3px rgba(76,141,255,.25)}
.field [aria-invalid="true"]{border-color:#FF8A80}
.err{color:#FFB4AB;font-size:13px;min-height:0}
.form-status{margin:0;font-size:15px;border-radius:12px;padding:0}
.form-status.ok{padding:14px 16px;background:rgba(61,214,245,.10);border:1px solid rgba(61,214,245,.45);color:#C9F3FF}
.form-status.fail{padding:14px 16px;background:rgba(255,138,128,.08);border:1px solid rgba(255,138,128,.5);color:#FFD7D2}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
button[disabled]{opacity:.6;cursor:wait}
.legal h2{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:24px;margin:40px 0 10px}
.legal p,.legal li{color:#C9D4E6;font-size:17px}
.legal a{color:#8DB6FF}


a{color:#8DB6FF}a:hover{color:#C9DCFF}
.grad{background:linear-gradient(90deg,#8DB6FF 0%,#3DD6F5 45%,#4C8DFF 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.rot{display:inline-block;height:1.08em;overflow:hidden;vertical-align:bottom}
.rot-in{display:flex;flex-direction:column;animation:words 10s cubic-bezier(.7,0,.2,1) infinite}
.rot-in span{height:1.08em;line-height:1.08em}
@keyframes words{0%,18%{transform:translateY(0)}22%,38%{transform:translateY(-1.08em)}42%,58%{transform:translateY(-2.16em)}62%,78%{transform:translateY(-3.24em)}82%,100%{transform:translateY(-4.32em)}}
.beam{stroke-dasharray:46 954;animation:flow 3.4s linear infinite}
@keyframes flow{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
.blink{animation:blink 1.6s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
.float{animation:float 7s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px)}}
.spin{transform-origin:center;transform-box:fill-box;animation:spin 40s linear infinite}
.spin-r{transform-origin:center;transform-box:fill-box;animation:spin 60s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.breathe{transform-origin:center;transform-box:fill-box;animation:breathe 4s ease-in-out infinite}
@keyframes breathe{50%{opacity:.55;transform:scale(1.06)}}
.marq{display:flex;width:max-content;animation:marq 40s linear infinite}
@keyframes marq{to{transform:translateX(-50%)}}
.c1{animation:c1 9s infinite}.c2{animation:c2 9s infinite}.c3{animation:c3 9s infinite}.c4{animation:c4 9s infinite}.c5{animation:c5 9s infinite}
@keyframes c1{0%,4%{opacity:0;transform:translateY(6px)}9%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes c2{0%,14%{opacity:0}18%,40%{opacity:1}44%,100%{opacity:0}}
@keyframes c3{0%,42%{opacity:0;transform:translateY(6px)}47%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes c4{0%,58%{opacity:0;transform:translateY(6px)}63%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes c5{0%,72%{opacity:0;transform:scale(.9)}77%,92%{opacity:1;transform:none}100%{opacity:0}}
.bar{transform-origin:bottom;animation:bar 3.6s ease-in-out infinite}
@keyframes bar{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.tick{animation:tick 6s infinite}
@keyframes tick{0%,10%{opacity:.2}18%,90%{opacity:1}100%{opacity:.2}}
.node-pulse{animation:np 2.4s ease-in-out infinite}
@keyframes np{0%,100%{box-shadow:0 0 0 0 rgba(76,141,255,.0)}50%{box-shadow:0 0 0 6px rgba(76,141,255,.18),0 0 28px rgba(76,141,255,.35)}}
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
.beam-border{background:conic-gradient(from var(--ang),rgba(76,141,255,.18) 0deg,rgba(76,141,255,.18) 240deg,#3DD6F5 300deg,#FFFFFF 325deg,#4C8DFF 340deg,rgba(76,141,255,.18) 360deg);animation:ang 4.5s linear infinite}
@keyframes ang{to{--ang:360deg}}
.rays{animation:rays 9s ease-in-out infinite alternate;transform-origin:50% 0}
@keyframes rays{0%{opacity:.7;transform:translateX(-50%) rotate(-2.5deg)}100%{opacity:1;transform:translateX(-50%) rotate(2.5deg)}}
.bcn{background-image:linear-gradient(90deg,rgba(5,7,12,0.92) 0%,rgba(5,7,12,0.55) 45%,rgba(5,7,12,0.15) 100%),url(../assets/barcelona.jpg);background-size:cover;background-position:center 40%}
.herobg{background-image:url(../assets/barcelona.jpg);background-size:cover;background-position:center 62%;filter:grayscale(1) brightness(.6) contrast(1.15);-webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 62%,#000 35%,transparent 85%);mask-image:radial-gradient(ellipse 75% 70% at 50% 62%,#000 35%,transparent 85%)}
.view{animation:viewin .55s cubic-bezier(.2,.7,.2,1) both}
@keyframes viewin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.alibg{background-image:url(../assets/alianzas-red.jpg);background-size:cover;background-position:70% 50%;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 30%,#000 60%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 30%,#000 60%);animation:alidrift 30s ease-in-out infinite alternate}
@keyframes alidrift{from{transform:scale(1.04) translateX(0)}to{transform:scale(1.1) translateX(-2%)}}
.globe{animation:globe 26s linear infinite}
@keyframes globe{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
.gyro{animation-name:gyro;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes gyro{from{transform:rotateZ(0)}to{transform:rotateZ(360deg)}}
.sweep{background:conic-gradient(from var(--ang),transparent 0deg,transparent 280deg,rgba(159,233,255,0.55) 355deg,transparent 360deg);animation:ang 3.2s linear infinite;mix-blend-mode:screen}
.xt{animation:xt 18s ease-in-out infinite}
@keyframes xt{0%,16.7%,100%{border-color:rgba(198,207,220,0.14);background-color:rgba(10,14,23,0.92);box-shadow:none;transform:none}2.5%,14%{border-color:rgba(61,214,245,0.75);background-color:rgba(18,32,70,0.95);box-shadow:0 0 0 1px rgba(61,214,245,0.25),0 18px 50px rgba(40,85,217,0.45);transform:translateY(-6px)}}
.xa{animation:xa 18s ease-in-out infinite}
@keyframes xa{0%,16.7%,100%{background:transparent;color:#8DB6FF;border-color:rgba(76,141,255,0.5)}2.5%,14%{background:linear-gradient(135deg,#4C8DFF,#3DD6F5);color:#05070C;border-color:transparent}}
.xp{transform-origin:left;transform:scaleX(0);animation:xp 18s linear infinite}
@keyframes xp{0%{transform:scaleX(0);opacity:1}16.6%{transform:scaleX(1);opacity:1}16.7%,100%{transform:scaleX(0);opacity:0}}
.xgrid:hover .xt,.xgrid:hover .xa,.xgrid:hover .xp{animation-play-state:paused}
.recfill{width:0;animation:recfill 7s linear forwards}
.recfill-long{animation-duration:14s}
@keyframes recfill{to{width:100%}}
.rec:hover .recfill{animation-play-state:paused}
.recin{animation:viewin .6s cubic-bezier(.2,.7,.2,1) both}
.flow-side{display:flex}
.span2{grid-column:span 2}
@media (max-width:820px){.span2{grid-column:auto}.flow-side{display:none}.flow-wrap{aspect-ratio:auto!important;height:340px}}
@media (prefers-reduced-motion: reduce){*{animation:none!important}}