.lab-header {
  position: fixed;
  top: 16px;
  left: 0;
  width: 100%;
  z-index: 9999;
  padding: 0 14px;
  pointer-events: none;
}

.lab-header__shell {
  position: relative;
  width: min(1180px, 100%);
  margin: 0 auto;

  min-height: 58px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  padding: 9px 10px 9px 14px;
  border-radius: 999px;

  background:
    linear-gradient(
      135deg,
      rgba(210, 210, 205, .74),
      rgba(255, 255, 255, .48)
    );

  border: 1px solid rgba(255,255,255,.72);

  backdrop-filter: blur(42px) saturate(1.18);
  -webkit-backdrop-filter: blur(42px) saturate(1.18);

  box-shadow:
    0 18px 60px rgba(20, 16, 12, .16),
    inset 0 1px 0 rgba(255,255,255,.82);

  pointer-events: auto;
  overflow: visible;
}

.lab-header__shell::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;

  background:
    url("/img/fondo-laboratorio-estudio/fondo-laboratorio-editorial.jpg")
    center/cover no-repeat;

  filter: blur(32px) saturate(.9) brightness(1.08);
  opacity: .28;
  transform: scale(1.08);
  z-index: -2;
}

.lab-header__shell::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;

  background:
    linear-gradient(
      120deg,
      rgba(255,255,255,.52),
      rgba(190,190,184,.18) 48%,
      rgba(255,255,255,.42)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    inset 0 -1px 0 rgba(100,100,96,.10);

  pointer-events: none;
  z-index: -1;
}

/* BRAND */

.lab-brand {
  position: relative;
  z-index: 3;

  display: flex;
  flex-direction: column;

  color: #15120f;
  text-decoration: none;
  flex-shrink: 0;
}

.lab-brand__title {
  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .12em;
}

.lab-brand__sub {
  margin-top: 4px;

  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-size: 9px;
  letter-spacing: .32em;
  text-transform: uppercase;

  opacity: .58;
}

/* NAV */

.lab-nav {
  position: relative;
  z-index: 3;

  display: flex;
  align-items: center;
  gap: 7px;
}

.lab-main-link,
.lab-dd-toggle,
.lab-nav__cta {
  min-height: 40px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 0 15px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.46);

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.34),
      rgba(210,210,205,.18)
    );

  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;

  color: rgba(21,18,15,.78);

  cursor: pointer;

  backdrop-filter: blur(22px) saturate(1.12);
  -webkit-backdrop-filter: blur(22px) saturate(1.12);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 8px 22px rgba(20,16,12,.05);

  transition:
    transform .42s cubic-bezier(.19,1,.22,1),
    background .42s ease,
    color .42s ease,
    box-shadow .42s ease;
}

.lab-main-link:hover,
.lab-dd-toggle:hover {
  transform: translateY(-2px);
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.54),
      rgba(210,210,205,.28)
    );
  color: #15120f;
}

.lab-dd-toggle span {
  font-size: 14px;
  line-height: 1;
  opacity: .62;
  transition: transform .35s ease;
}

.lab-dd.is-open .lab-dd-toggle span {
  transform: rotate(45deg);
}

.lab-nav__cta {
  background: #15120f;
  color: #fffaf3;
  border-color: rgba(21,18,15,.9);
  padding: 0 20px;
}

.lab-nav__cta:hover {
  transform: translateY(-2px) scale(1.02);
}

/* DROPDOWN ESCALERA LATERAL */

.lab-dd {
  position: relative;
}

.lab-dd-menu {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;

  width: 280px;

  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;

  padding: 0;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateX(18px);

  transition:
    opacity .35s ease,
    visibility .35s ease,
    transform .45s cubic-bezier(.19,1,.22,1);
}

.lab-dd.is-open .lab-dd-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}

.lab-dd-menu a {
  min-height: 40px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: fit-content;
  max-width: 100%;

  padding: 0 15px;
  border-radius: 999px;

  background:
    linear-gradient(
      135deg,
      rgba(225,225,220,.88),
      rgba(255,255,255,.62)
    );

  border: 1px solid rgba(255,255,255,.72);

  backdrop-filter: blur(34px) saturate(1.14);
  -webkit-backdrop-filter: blur(34px) saturate(1.14);

  box-shadow:
    0 16px 38px rgba(20,16,12,.14),
    inset 0 1px 0 rgba(255,255,255,.82);

  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;

  color: rgba(21,18,15,.78);

  opacity: 0;
  transform: translateX(34px);

  transition:
    opacity .42s ease,
    transform .5s cubic-bezier(.19,1,.22,1),
    background .35s ease,
    color .35s ease;
}

.lab-dd.is-open .lab-dd-menu a {
  opacity: 1;
  transform: translateX(0);
}

.lab-dd.is-open .lab-dd-menu a:nth-child(1) {
  transition-delay: .03s;
  margin-right: 0;
}

.lab-dd.is-open .lab-dd-menu a:nth-child(2) {
  transition-delay: .08s;
  margin-right: 28px;
}

.lab-dd.is-open .lab-dd-menu a:nth-child(3) {
  transition-delay: .13s;
  margin-right: 56px;
}

.lab-dd.is-open .lab-dd-menu a:nth-child(4) {
  transition-delay: .18s;
  margin-right: 84px;
}

.lab-dd.is-open .lab-dd-menu a:nth-child(5) {
  transition-delay: .23s;
  margin-right: 112px;
}

.lab-dd-menu a:hover,
.lab-dd-menu a.is-active {
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.84),
      rgba(205,205,198,.42)
    );

  color: #15120f;
  transform: translateX(-4px);
}

/* BURGER */

.lab-burger {
  display: none;

  width: 46px;
  height: 46px;

  border: 1px solid rgba(255,255,255,.56);
  border-radius: 999px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.42),
      rgba(210,210,205,.22)
    );

  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8);

  cursor: pointer;
}

.lab-burger span {
  display: block;

  width: 17px;
  height: 1.5px;

  margin: 5px auto;

  background: #15120f;

  transition:
    transform .35s ease,
    opacity .35s ease;
}

.lab-burger.is-open span:first-child {
  transform: translateY(3.25px) rotate(45deg);
}

.lab-burger.is-open span:last-child {
  transform: translateY(-3.25px) rotate(-45deg);
}

/* MOBILE */

@media (max-width: 1100px) {

  .lab-header {
    top: 12px;
    padding: 0 12px;
  }

  .lab-header__shell {
    min-height: 58px;
    padding: 8px 10px 8px 14px;
  }

  .lab-brand__title {
    font-size: 15px;
  }

  .lab-brand__sub {
    font-size: 8px;
    letter-spacing: .28em;
  }

  .lab-burger {
    display: block;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
  }

  .lab-nav {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;

    width: min(340px, calc(100vw - 24px));
    max-height: calc(100vh - 92px);
    overflow-y: auto;
    overflow-x: visible;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 9px;

    padding: 12px;
    border-radius: 28px;

    background:
      linear-gradient(
        145deg,
        rgba(215,215,210,.82),
        rgba(255,255,255,.58)
      );

    border: 1px solid rgba(255,255,255,.76);

    backdrop-filter: blur(56px) saturate(1.18);
    -webkit-backdrop-filter: blur(56px) saturate(1.18);

    box-shadow:
      0 32px 90px rgba(20,16,12,.24),
      inset 0 1px 0 rgba(255,255,255,.86);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateX(18px);

    transition:
      opacity .38s ease,
      visibility .38s ease,
      transform .48s cubic-bezier(.19,1,.22,1);
  }

  .lab-nav::before {
    content: "";
    position: absolute;
    inset: -26px;

    background:
      url("/img/fondo-laboratorio-estudio/fondo-laboratorio-editorial.jpg")
      center/cover no-repeat;

    filter: blur(48px) saturate(.9) brightness(1.08);
    opacity: .34;
    transform: scale(1.08);

    z-index: -2;
  }

  .lab-nav::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
      linear-gradient(
        125deg,
        rgba(255,255,255,.46),
        rgba(180,180,174,.18) 48%,
        rgba(255,255,255,.38)
      );

    z-index: -1;
    border-radius: inherit;
  }

  .lab-nav.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
  }

  .lab-main-link,
  .lab-dd-toggle,
  .lab-nav__cta {
    width: 100%;
    min-height: 44px;

    justify-content: center;

    padding: 0 14px;

    font-size: 11px;
    letter-spacing: .18em;

    background:
      linear-gradient(
        135deg,
        rgba(255,255,255,.42),
        rgba(210,210,205,.20)
      );

    border-color: rgba(255,255,255,.56);
    color: #15120f;
  }

  .lab-dd {
    width: 100%;
  }

  .lab-dd-menu {
    position: relative;
    top: auto;
    right: auto;

    width: 100%;

    margin-top: 8px;

    display: flex;
    align-items: flex-end;
    gap: 7px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    max-height: 0;
    overflow: visible;

    transform: translateX(20px);

    transition:
      opacity .35s ease,
      visibility .35s ease,
      max-height .45s cubic-bezier(.19,1,.22,1),
      transform .45s cubic-bezier(.19,1,.22,1);
  }

  .lab-dd.is-open .lab-dd-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    max-height: 360px;
    transform: translateX(0);
  }

  .lab-dd-menu a {
    min-height: 38px;

    padding: 0 13px;

    font-size: 10px;
    letter-spacing: .11em;

    text-align: center;
    white-space: normal;
  }

  .lab-dd.is-open .lab-dd-menu a:nth-child(1) {
    margin-right: 0;
  }

  .lab-dd.is-open .lab-dd-menu a:nth-child(2) {
    margin-right: 20px;
  }

  .lab-dd.is-open .lab-dd-menu a:nth-child(3) {
    margin-right: 40px;
  }

  .lab-dd.is-open .lab-dd-menu a:nth-child(4) {
    margin-right: 60px;
  }

  .lab-dd.is-open .lab-dd-menu a:nth-child(5) {
    margin-right: 80px;
  }

  .lab-nav__cta {
    min-height: 48px;
    background: #15120f;
    color: #fffaf3;
  }
}