.scroll-track{
  position:fixed; top:0; left:0; right:0; height:6px; z-index:1200;
  background:rgba(255,255,255,.5); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(8,12,65,.06);
  display:none;
}
.scroll-progress{
  position:relative; height:100%; width:0%; overflow:visible;
  background:linear-gradient(90deg, var(--route-navy) 0%, var(--route-blue) 45%, var(--route-sky) 100%);
  box-shadow:0 0 10px rgba(53,154,204,.45), inset 0 1px 0 rgba(255,255,255,.25);
  transition:width .22s cubic-bezier(.22,1.4,.36,1);
  transform-origin:left center;
}
.scroll-progress::after{
  content:''; position:absolute; top:50%; right:0; width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle at 35% 32%, #ffffff, var(--route-sky) 55%, var(--route-blue) 100%);
  transform:translate(50%, -50%); box-shadow:0 0 0 4px rgba(53,154,204,.16), 0 2px 8px rgba(8,12,65,.35);
  transition:box-shadow .3s ease, background .3s ease;
}
.scroll-progress.is-scrolling::after{ animation:liquidPulse 1.1s ease-in-out infinite; }
.scroll-progress.wobble-down{ animation:liquidWobbleDown .55s cubic-bezier(.34,1.8,.4,1) both; }
.scroll-progress.wobble-up{ animation:liquidWobbleUp .55s cubic-bezier(.34,1.8,.4,1) both; }
.scroll-progress.is-settled{ box-shadow:0 0 6px rgba(53,154,204,.25), inset 0 1px 0 rgba(255,255,255,.2); }
.scroll-progress.is-settled::after{ animation:none; box-shadow:0 0 0 3px rgba(53,154,204,.12), 0 1px 4px rgba(8,12,65,.25); }
.scroll-progress.is-complete{
  background:linear-gradient(90deg, var(--route-navy) 0%, var(--route-blue) 38%, var(--route-sky) 76%, var(--route-lime) 100%);
}
.scroll-progress.is-complete::after{
  background:radial-gradient(circle at 35% 32%, #ffffff, var(--route-lime) 55%, var(--route-sky) 100%);
  box-shadow:0 0 0 4px rgba(199,245,71,.28), 0 2px 10px rgba(8,12,65,.35);
}

@keyframes liquidPulse{
  0%,100%{ transform:translate(50%, -50%) scale(1); }
  50%{ transform:translate(50%, -50%) scale(1.2); }
}
@keyframes liquidPulseV{
  0%,100%{ transform:translate(-50%, 50%) scale(1); }
  50%{ transform:translate(-50%, 50%) scale(1.2); }
}
@keyframes liquidWobbleDown{
  0%{ transform:scaleY(1); }
  30%{ transform:scaleY(2.2); }
  60%{ transform:scaleY(.65); }
  100%{ transform:scaleY(1); }
}
@keyframes liquidWobbleUp{
  0%{ transform:scaleY(1); }
  30%{ transform:scaleY(.5); }
  60%{ transform:scaleY(1.7); }
  100%{ transform:scaleY(1); }
}
header.navbar{
  position:sticky; top:0; z-index:1000;
}
.navbar-top{
  position:relative; z-index:2;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid rgba(8,12,65,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 1px 0 rgba(8,12,65,.04), 0 22px 40px -26px rgba(8,12,65,.35);
  transition:background .3s ease, box-shadow .3s ease;
}
.navbar-top-inner{
  display:flex; align-items:center; justify-content:space-between;
  max-width:1200px; margin:0 auto; padding:0 32px;
  transition:padding .3s ease;
}
.nav-logo{display:flex; align-items:center; border-radius:10px; transition:transform .2s ease;}
.nav-logo img{height:120px; transition:height .3s ease;}
.nav-logo:hover{transform:scale(1.03);}
.nav-logo:active{transform:scale(.97);}
.nav-utility{display:flex; align-items:center; gap:22px;}
.portal-link{
  font-size:.88rem; font-weight:600; color:var(--route-navy); position:relative; padding:8px 10px; border-radius:8px;
  transition:color .2s ease, background .2s ease;
}
.portal-link::after{
  content:''; position:absolute; left:10px; right:10px; bottom:3px; height:2px; width:0; background:var(--route-sky); transition:width .2s ease;
}
.portal-link:hover, .portal-link:focus-visible{color:var(--route-blue); background:rgba(53,154,204,.08);}
.portal-link:hover::after, .portal-link:focus-visible::after{width:calc(100% - 20px);}
.portal-link:active{transform:scale(.97);}
.navbar-route{
  background:linear-gradient(
    180deg,
    rgba(8,12,65,.90) 0%,
    rgba(17,64,118,.85) 75%,
    rgba(21,71,114,.85) 100%
  );

  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);

  border-bottom:1px solid rgba(8,12,65,.35);

  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 12px 22px -18px rgba(8,12,65,.45);
}
.nav-links{
  position:relative; display:flex; align-items:flex-start; justify-content:center;
  gap:52px; max-width:1200px; margin:0 auto; padding:0 32px;
  --route-line-thickness:4px;
  --route-line-y:49px;
}
.nav-links::before{
  content:''; position:absolute; left:var(--route-line-start, 32px); right:32px;
  top:var(--route-line-y); height:var(--route-line-thickness);
  transform:translateY(-50%);
  transition:left .34s cubic-bezier(.4,0,.2,1);
  border-radius:calc(var(--route-line-thickness) / 2);
  background:linear-gradient(90deg,
    rgba(53,154,204,.4) 0%,
    rgba(251,254,255,.4) 100%);
  z-index:0;
}
.route-fill-line{
  position:absolute; left:0; top:var(--route-line-y);
  height:var(--route-line-thickness); width:0; z-index:0;
  transform:translateY(-50%);
  background:linear-gradient(90deg, var(--route-navy) 0%, var(--route-blue) 45%, var(--route-sky) 100%);
  border-radius:calc(var(--route-line-thickness) / 2);
  box-shadow:0 0 8px rgba(53,154,204,.4), inset 0 1px 0 rgba(255,255,255,.25);
  transition:width .3s cubic-bezier(.22,1.3,.36,1), left .3s ease, box-shadow .3s ease;
}
.route-fill-line::after{
  content:''; position:absolute; top:50%; right:0; width:16px; height:16px; border-radius:50%;
  background:radial-gradient(circle at 35% 32%, #ffffff, var(--route-sky) 55%, var(--route-blue) 100%);
  transform:translate(50%, -50%); box-shadow:0 0 0 4px rgba(53,154,204,.16), 0 2px 8px rgba(8,12,65,.35);
  transition:box-shadow .25s ease, background .25s ease;
}
.route-fill-line.is-scrolling::after{ animation:liquidPulse 1.1s ease-in-out infinite; }
.route-fill-line.is-settled{ box-shadow:0 0 5px rgba(53,154,204,.22), inset 0 1px 0 rgba(255,255,255,.2); }
.route-fill-line.is-settled::after{ animation:none; box-shadow:0 0 0 3px rgba(53,154,204,.12), 0 1px 4px rgba(8,12,65,.25); }
.route-fill-line.at-node::after{
  background:radial-gradient(circle at 35% 32%, #ffffff, var(--route-lime) 55%, var(--route-green) 100%);
  box-shadow:0 0 0 4px rgba(199,245,71,.3), 0 2px 10px rgba(8,12,65,.35);
}
.route-link{
  position:relative; z-index:1; display:flex; flex-direction:column; align-items:center;
  gap:10px; padding:14px 3px 15px; color:rgba(251,254,255,.78); text-align:center; border-radius:10px;
  transition:transform .15s ease;
}
.route-label{
  font-size:.87rem; font-weight:500; white-space:nowrap;
  transition:color .2s ease, transform .2s ease;
}
.route-node{
  width:11px; height:11px; border-radius:50%;
  background:var(--white); border:2px solid var(--line);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.route-link:nth-of-type(1) .route-node{border-color:#359ACC;}
.route-link:nth-of-type(2) .route-node{border-color:#67B3D9;}
.route-link:nth-of-type(3) .route-node{border-color:#98CCE6;}
.route-link:nth-of-type(4) .route-node{border-color:#CAE5F2;}
.route-link:nth-of-type(5) .route-node{border-color:#FBFEFF;}
.route-link:hover .route-label,
.route-link:focus-visible .route-label{
  color:var(--route-sky); transform:translateY(-2px);
}
.route-link:hover .route-node,
.route-link:focus-visible .route-node{
  border-color:var(--route-sky); background:var(--route-sky);
  box-shadow:0 0 0 6px rgba(53,154,204,.16);
  transform:scale(1.25);
}
.route-link:focus-visible{outline:none;}
.route-link:active{transform:scale(.96);}
.route-link.passed .route-label{color:rgba(251,254,255,.94);}
.route-link.passed .route-node{
  background:var(--route-sky); border-color:var(--route-sky);
  box-shadow:0 0 0 4px rgba(53,154,204,.12);
}
.route-link.current .route-label{color:var(--route-white-neg); font-weight:600;}
.route-link.current .route-node{
  background:var(--route-lime); border-color:var(--route-sky);
  box-shadow:0 0 0 6px rgba(53,154,204,.22), 0 0 0 2px rgba(8,12,65,.15) inset;
  transform:scale(1.3);
}
.route-link.pulse .route-node::after,
.drawer-link.pulse .drawer-node::after{
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid var(--route-sky); opacity:1; transform:scale(.4);
  animation:routePing .5s ease-out forwards;
}
.route-link.at-node .route-label{color:var(--route-white-neg); font-weight:600;}
.route-link.at-node .route-node{
  background:var(--route-lime); border-color:var(--route-green);
  box-shadow:0 0 0 6px rgba(199,245,71,.32), 0 0 0 2px rgba(29,89,73,.2) inset;
  transform:scale(1.3);
}
.route-node, .drawer-node{position:relative;}

.route-link .badge-soon{margin-left:6px;}

@keyframes routePing{
  to{ opacity:0; transform:scale(1.9); }
}
header.navbar.navbar-scrolled .navbar-top-inner{padding:2px 32px;}
header.navbar.navbar-scrolled .nav-logo img{height:96px;}

header.navbar.navbar-scrolled .navbar-top{
  background:rgba(255,255,255,.94);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 16px 34px -18px rgba(8,12,65,.32), 0 2px 0 rgba(8,12,65,.05);
}
.navbar-route{position:relative;}
.route-logo{
  position:absolute; top:50%; z-index:2;
  left:max(69px, calc((100% - 1200px) / 2 + 69px));
  opacity:0; pointer-events:none;
  transform:translateY(-50%) translateX(-12px) scale(.92);
  transition:opacity .34s ease .06s, transform .38s cubic-bezier(.22,1.2,.36,1) .06s;
}
.route-logo img{display:block; width:var(--route-logo-w, 72px); height:auto;}
@media (min-width:721px){
  header.navbar{
    transition:transform .45s cubic-bezier(.4,0,.2,1);
  }
  header.navbar.navbar-hidetop{
    transform:translateY(calc(-1 * var(--navbar-top-h, 101px)));
  }
  header.navbar.navbar-hidetop .route-logo{
    opacity:1; pointer-events:auto;
    transform:translateY(-50%) translateX(0) scale(1);
  }
  header.navbar.navbar-hidetop .nav-links{
    --route-line-start:calc(69px + var(--route-logo-w, 72px) + 24px);
  }
}

.badge-soon{
  font-family:'Poppins',sans-serif; font-size:.6rem; letter-spacing:.08em; background:var(--route-lime);
  color:var(--route-navy); padding:2px 6px; border-radius:20px; margin-left:6px; vertical-align:middle; font-weight:700;
}
.lang-select{position:relative;}
.lang-btn{
  background:rgba(255,255,255,.5); border:1px solid var(--line); border-radius:20px; padding:7px 13px; font-size:.85rem; color:var(--route-navy);
  display:flex; align-items:center; gap:6px; transition:border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.lang-btn:hover{border-color:var(--route-sky); box-shadow:0 6px 16px -8px rgba(53,154,204,.35);}
.lang-btn:active{transform:scale(.96);}
.lang-dropdown{
  display:none; position:absolute; top:calc(100% + 8px); right:0; background:#fff; border:1px solid var(--line);
  border-radius:10px; box-shadow:0 18px 34px -14px rgba(8,12,65,.3); min-width:130px; overflow:hidden; z-index:10;
}
.lang-select.open .lang-dropdown{display:block;}
.lang-dropdown a{display:block; padding:9px 14px; font-size:.85rem; transition:background .15s ease;}
.lang-dropdown a:hover{background:var(--mist); color:var(--route-blue);}
.lang-dropdown a.active{color:var(--route-blue); font-weight:600;}
.btn-contacto{
  background:var(--route-navy); color:#fff !important; padding:11px 22px; border-radius:30px; font-weight:600; font-size:.88rem;
  box-shadow:0 10px 22px -10px rgba(8,12,65,.55);
  transition:background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.btn-contacto:hover{background:var(--route-sky); box-shadow:0 14px 28px -10px rgba(53,154,204,.55); transform:translateY(-2px);}
.btn-contacto:active{transform:translateY(0) scale(.97);}
.hamburger{
  display:none; position:relative; align-items:center; justify-content:center;
  width:48px; height:48px; padding:0; border:none; border-radius:50%;
  background:#fff; cursor:pointer;
  box-shadow:0 8px 18px -12px rgba(8,12,65,.55);
  transition:box-shadow .25s ease, transform .15s ease, width .3s ease, height .3s ease;
}
.hamburger::before{
  content:''; position:absolute; inset:0; border-radius:50%; padding:2px;
  background:linear-gradient(135deg, var(--route-sky), var(--route-navy));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.hamburger:hover{box-shadow:0 10px 24px -10px rgba(53,154,204,.7);}
.hamburger:active{transform:scale(.94);}
.hamburger:focus-visible{outline:3px solid var(--route-sky); outline-offset:3px;}
.hamburger-bars{position:relative; display:block; width:20px; height:14px;}
.hamburger-bars span{
  position:absolute; right:0; height:2.5px; border-radius:2px; background:var(--route-navy);
  transition:width .3s cubic-bezier(.2,.8,.2,1), transform .3s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
}
.hamburger-bars span:nth-child(1){top:0; width:20px;}
.hamburger-bars span:nth-child(2){top:6px; width:12px; background:var(--route-sky);}
.hamburger-bars span:nth-child(3){top:12px; width:16px;}
.hamburger:hover .hamburger-bars span,
.hamburger:focus-visible .hamburger-bars span,
.hamburger.active .hamburger-bars span{width:20px;}
.hamburger.active .hamburger-bars span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.hamburger.active .hamburger-bars span:nth-child(2){opacity:0; transform:scaleX(0);}
.hamburger.active .hamburger-bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
.nav-overlay{
  position:fixed; inset:0; background:rgba(8,12,65,.55); backdrop-filter:blur(2px);
  opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:1300;
}
.nav-overlay.open{opacity:1; pointer-events:auto;}

.nav-drawer{
  position:fixed; top:0; right:0; width:min(84vw,340px); height:100dvh; z-index:1400;
  background:linear-gradient(160deg, var(--route-navy) 0%, #0c2f56 55%, var(--route-blue) 100%);
  transform:translateX(100%);
  visibility:hidden;
  transition:transform .32s cubic-bezier(.22,1.1,.36,1), visibility 0s linear .32s;
  display:flex; flex-direction:column; overflow-y:auto;
  box-shadow:-20px 0 46px -18px rgba(0,0,0,.5);
}
.nav-drawer.open{transform:translateX(0); visibility:visible; transition-delay:0s;}
.drawer-top{
  display:flex; align-items:center; justify-content:space-between; padding:18px 20px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.drawer-logo-wrap{display:inline-flex; align-items:center;}
.drawer-logo{height:48px; width:auto; display:block;}
.drawer-close{
  background:none; border:none; width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  color:#fff; border-radius:10px; transition:background .2s ease, transform .15s ease;
}
.drawer-close:hover{background:rgba(255,255,255,.12);}
.drawer-close:active{transform:scale(.9);}
.drawer-close:focus-visible{outline:3px solid var(--route-lime); outline-offset:2px;}
.drawer-close svg{width:20px; height:20px;}

.drawer-route{
  position:relative; display:flex; flex-direction:column; padding:22px 24px 8px; gap:2px;
  --route-line-thickness:3px;
  --route-line-x:28px;
}
.drawer-route::before{
  content:''; position:absolute; left:var(--route-line-x); top:26px; bottom:26px;
  width:var(--route-line-thickness); transform:translateX(-50%);
  border-radius:calc(var(--route-line-thickness) / 2);
  background:linear-gradient(180deg, rgba(53,154,204,.3) 0%, rgba(199,245,71,.35) 100%);
}
.route-fill-line-v{
  position:absolute; left:var(--route-line-x); top:0;
  width:var(--route-line-thickness); height:0; z-index:0;
  transform:translateX(-50%);
  background:linear-gradient(180deg, var(--route-sky) 0%, var(--route-lime) 100%);
  border-radius:calc(var(--route-line-thickness) / 2);
  box-shadow:0 0 8px rgba(53,154,204,.35);
  transition:height .3s cubic-bezier(.22,1.3,.36,1), top .3s ease, box-shadow .3s ease;
}
.route-fill-line-v::after{
  content:''; position:absolute; left:50%; bottom:0; width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle at 35% 32%, #ffffff, var(--route-lime) 55%, var(--route-sky) 100%);
  transform:translate(-50%, 50%); box-shadow:0 0 0 4px rgba(199,245,71,.2), 0 2px 8px rgba(8,12,65,.4);
  transition:box-shadow .25s ease, background .25s ease;
}
.route-fill-line-v.is-scrolling::after{ animation:liquidPulseV 1.1s ease-in-out infinite; }
.route-fill-line-v.is-settled::after{ animation:none; box-shadow:0 0 0 3px rgba(199,245,71,.15), 0 1px 4px rgba(8,12,65,.3); }
.route-fill-line-v.at-node::after{
  background:radial-gradient(circle at 35% 32%, #ffffff, var(--route-lime) 55%, var(--route-green) 100%);
  box-shadow:0 0 0 4px rgba(199,245,71,.32), 0 2px 10px rgba(8,12,65,.4);
}
.drawer-link{
  position:relative; z-index:1; display:flex; align-items:center; gap:16px; min-height:44px;
  padding:10px 8px; color:#dbe6ec; font-size:.98rem; font-weight:500; border-radius:10px;
  transition:color .2s ease, background .2s ease, transform .15s ease;
}
.drawer-node{
  width:12px; height:12px; border-radius:50%; flex:0 0 auto;
  background:var(--route-navy); border:2px solid rgba(255,255,255,.35);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.drawer-link:hover, .drawer-link:focus-visible{color:#fff; background:rgba(255,255,255,.06); transform:translateX(4px);}
.drawer-link:hover .drawer-node,
.drawer-link:focus-visible .drawer-node{
  border-color:var(--route-sky); background:var(--route-sky);
  box-shadow:0 0 0 6px rgba(53,154,204,.22); transform:scale(1.2);
}
.drawer-link:active{transform:translateX(4px) scale(.98);}
.drawer-link:focus-visible{outline:none;}
.drawer-link.passed{color:#eef4f6;}
.drawer-link.passed .drawer-node{
  background:var(--route-sky); border-color:var(--route-sky);
  box-shadow:0 0 0 4px rgba(53,154,204,.18);
}
.drawer-link.current{color:#fff; font-weight:600;}
.drawer-link.current .drawer-node{
  background:var(--route-lime); border-color:var(--route-sky);
  box-shadow:0 0 0 6px rgba(53,154,204,.28);
  transform:scale(1.2);
}
.drawer-link .badge-soon{margin-left:2px;}

.drawer-footer{
  margin-top:auto; padding:20px 24px 28px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-direction:column; gap:14px;
}
.drawer-portal{color:#dbe6ec; font-size:.92rem; font-weight:600; transition:color .2s ease;}
.drawer-portal:hover, .drawer-portal:focus-visible{color:#7fc4e3;}
.drawer-footer .btn-contacto{text-align:center;}
.drawer-lang .lang-btn{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.25); color:#fff; width:100%; justify-content:space-between;}
.drawer-lang .lang-btn:hover{border-color:var(--route-sky); box-shadow:none;}
.drawer-lang .lang-dropdown{
  position:static; display:block; box-shadow:none; border:none; background:rgba(255,255,255,.06);
  border-radius:10px; margin-top:8px; max-height:0; overflow:hidden; transition:max-height .2s ease; padding:0;
}
.drawer-lang.open .lang-dropdown{max-height:160px; padding:4px 0;}
.drawer-lang .lang-dropdown a{color:#dbe6ec;}
.drawer-lang .lang-dropdown a.active{color:var(--route-sky);}
.drawer-lang .lang-dropdown a:hover{background:rgba(255,255,255,.08);}

body.nav-drawer-open{overflow:hidden;}

@media (prefers-reduced-motion: reduce){
  .nav-drawer, .nav-overlay, .route-label, .route-node, .drawer-node, .hamburger-bars span,
  header.navbar, .route-logo, .nav-links::before,
  .navbar-top, .navbar-top-inner, .nav-logo img, .nav-logo, .btn-contacto, .lang-btn,
  .portal-link, .hamburger, .drawer-close, .drawer-link,
  .scroll-progress, .scroll-progress::after, .route-fill-line, .route-fill-line::after,
  .route-fill-line-v, .route-fill-line-v::after{
    transition:none !important; animation:none !important;
  }
}
@media (max-width:720px){
  .navbar-route{display:none;}
  .scroll-track{display:block;}
  .nav-utility .portal-link,
  .nav-utility .lang-select,
  .nav-utility .btn-contacto{display:none;}
  .navbar-top-inner{padding:14px 20px;}
  .nav-logo img{height:58px;}
  header.navbar.navbar-scrolled .navbar-top-inner{padding:6px 20px;}
  header.navbar.navbar-scrolled .nav-logo img{height:42px;}
  .hamburger{display:flex;}
  header.navbar.navbar-scrolled .hamburger{width:42px; height:42px;}
}