.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px calc(var(--gutter) + 16px);
  transition: transform .6s var(--ease), padding .4s var(--ease), background .4s;
}
.header.is-scrolled {
  padding-top: 12px; padding-bottom: 12px;
  background: rgba(249,248,246,.82);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--linea);
}
.header.is-hidden { transform: translateY(-110%); }

.brand { display: flex; align-items: center; gap: 14px; line-height: 1; }
.brand__name { font-family: var(--f-display); font-size: 19px; letter-spacing: .06em; line-height: 1.02; }
.brand__rule { width: 1px; height: 34px; background: var(--topo); }
.brand__tag { font-size: 8.5px; letter-spacing: .22em; text-transform: uppercase; line-height: 1.45; color: var(--topo-oscuro); }

.nav__list {
  display: flex; gap: 4px; list-style: none; margin: 0; padding: 6px;
  border-radius: 100px;
  background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.85);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.nav__link {
  position: relative; display: block; padding: 9px 18px; border-radius: 100px;
  font-size: 13.5px; font-weight: 500;
  transition: background .35s, color .35s;
}
@media (hover: hover) and (pointer: fine) { .nav__link:hover { background: rgba(28,27,26,.06); } }
.nav__link.is-active { background: var(--ebano); color: var(--alabastro); }

.header__actions { display: flex; align-items: center; gap: 12px; }
.burger { display: none; width: 46px; height: 46px; border-radius: 50%; background: var(--ebano); position: relative; }
.burger i { position: absolute; left: 14px; right: 14px; height: 1.5px; background: var(--alabastro); transition: transform .5s var(--ease), top .5s var(--ease); }
.burger i:first-child { top: 19px; }
.burger i:last-child { top: 26px; }
.menu-open .burger i:first-child { top: 22.5px; transform: rotate(45deg); }
.menu-open .burger i:last-child { top: 22.5px; transform: rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 90;
  background: var(--alabastro);
  padding: 120px var(--gutter) 40px;
  display: flex; flex-direction: column; justify-content: space-between;
  clip-path: circle(0% at calc(100% - 44px) 44px);
  transition: clip-path .8s var(--ease-in-out);
  visibility: hidden;
}
.menu-open .menu { clip-path: circle(150% at calc(100% - 44px) 44px); visibility: visible; }
.menu__list { list-style: none; margin: 0; padding: 0; }
.menu__list li { overflow: hidden; border-bottom: 1px solid var(--linea); }
.menu__list a {
  display: block; padding: 14px 0;
  font-family: var(--f-display); font-size: clamp(30px, 8vw, 44px); text-transform: uppercase;
  transform: translateY(100%); transition: transform .7s var(--ease);
}
.menu-open .menu__list a { transform: translateY(0); }
.menu-open .menu__list li:nth-child(2) a { transition-delay: .05s; }
.menu-open .menu__list li:nth-child(3) a { transition-delay: .1s; }
.menu-open .menu__list li:nth-child(4) a { transition-delay: .15s; }
.menu-open .menu__list li:nth-child(5) a { transition-delay: .2s; }
.menu-open .menu__list li:nth-child(6) a { transition-delay: .25s; }
.menu-open .menu__list li:nth-child(7) a { transition-delay: .3s; }
.menu__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--topo-oscuro); letter-spacing: .1em; text-transform: uppercase; }

.skip {
  position: fixed; left: 16px; top: 12px; z-index: 200;
  padding: 12px 20px; border-radius: 100px;
  background: var(--ebano); color: var(--alabastro); font-size: 14px; font-weight: 600;
  transform: translateY(-160%); transition: transform 200ms var(--ease);
}
.skip:focus-visible { transform: translateY(0); }

.brand__mark { flex: none; width: 26px; height: 30px; background: var(--ebano); -webkit-mask: url(../img/ds-mark.png) center / contain no-repeat; mask: url(../img/ds-mark.png) center / contain no-repeat; }