.header {
  --dock-easing:cubic-bezier(.22,1,.36,1);
  position:sticky;
  top:0;
  z-index:20;
  isolation:isolate;
}

.header .brand-logo {
  width:auto;
  height:var(--navigation-tab-height,41px);
}

/* The menu's capsule grows behind the existing logo, links and contact button. */
.header::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:50%;
  left:var(--navigation-left,50%);
  width:var(--navigation-width,0px);
  height:var(--navigation-height,54px);
  transform:translateY(-50%);
  border:1px solid #d6d6d6;
  border-radius:999px;
  background:rgb(250 250 250 / 95%);
  box-shadow:0 0 0 rgb(0 0 0 / 0%);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  opacity:0;
  pointer-events:none;
  transition:
    left .65s var(--dock-easing),
    width .65s var(--dock-easing),
    height .65s var(--dock-easing),
    opacity .25s ease,
    box-shadow .65s ease;
}

.header.is-docked::before {
  left:var(--dock-left,var(--container-gutter));
  width:var(--dock-width,calc(100% - 2 * var(--container-gutter)));
  height:64px;
  opacity:1;
  box-shadow:0 8px 30px rgb(0 0 0 / 9%);
}

.header .brand,
.header .contact-button,
.header .menu-toggle {
  transition:transform .65s var(--dock-easing);
}

.header.is-docked .brand {
  transform:translateX(var(--dock-brand-shift,0px));
}

.header.is-docked .contact-button {
  transform:translateX(var(--dock-contact-shift,0px));
}

#inicio,#proyectos,#equipo,#contacto,.service-tabs {
  scroll-margin-top:100px;
}

.skip-link { z-index:30; }

@media (min-width:851px) {
  .navigation {
    transition:border-color .3s ease,box-shadow .3s ease;
  }
  .header.is-docked .navigation {
    border-color:transparent;
    box-shadow:inset 0 0 0 2.7px transparent;
  }
}

@media (min-width:851px) and (max-width:1150px) {
  .header.is-docked::before { height:60px; }
}

@media (max-width:850px) {
  .header.is-docked::before {
    left:12px;
    width:calc(100% - 24px);
    height:calc(100% - 8px);
  }
  .header.is-docked .brand { transform:translateX(4px); }
  .header.is-docked .contact-button { transform:none; }
  .header.is-docked .menu-toggle { transform:translateX(-4px); }
  #inicio,#proyectos,#equipo,#contacto,.service-tabs { scroll-margin-top:84px; }
}

@media (prefers-reduced-motion:reduce) {
  .header::before,
  .header .brand,
  .header .contact-button,
  .header .menu-toggle,
  .header .navigation {
    transition:none;
  }
}