/* =========================================================
   ORBYTRA HEADER
   Header global sobre el markup real de Astra.
   Aqui vive todo lo relativo al header para no pisar style.css.
========================================================= */

:root{
  --orby-header-top: 14px;
  --orby-header-side: clamp(20px, 2vw, 32px);
  --orby-header-height: 64px;
  --orby-header-compact-height: 56px;
  --orby-header-edge-space: 18px;
  --orby-cyan: #2fc2ff;
}

#masthead{
  position: fixed !important;
  top: calc(var(--orby-header-top) + env(safe-area-inset-top));
  left: 0;
  right: 0;
  width: 100%;
  transform: none !important;
  z-index: 1000;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none;
}

.admin-bar #masthead{
  top: calc(50px + var(--orby-header-top) + env(safe-area-inset-top));
}

#masthead .ast-main-header-wrap,
#masthead .main-header-bar,
#masthead .ast-primary-header,
#masthead .site-primary-header-wrap,
#masthead .ast-builder-grid-row-container,
#masthead .ast-container{
  width: 100%;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#masthead.site-header,
body.ast-theme-transparent-header #masthead.site-header,
body:not(.ast-theme-transparent-header) #masthead.site-header{
  background: transparent !important;
}

#masthead #ast-desktop-header .ast-primary-header-bar,
#masthead #ast-mobile-header .ast-primary-header-bar{
  width: min(1500px, calc(100% - (var(--orby-header-side) * 2))) !important;
  max-width: none;
  min-height: var(--orby-header-height) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 999px;
  background:
    linear-gradient(100deg, rgba(38, 16, 72, .78), rgba(7, 18, 34, .86) 47%, rgba(5, 38, 47, .78)),
    rgba(5, 12, 24, .78) !important;
  box-shadow:
    0 22px 70px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(255,255,255,.04) !important;
  -webkit-backdrop-filter: blur(22px) saturate(135%);
  backdrop-filter: blur(22px) saturate(135%);
  transition: width .3s ease, min-height .3s ease, padding .3s ease, background .3s ease, box-shadow .3s ease;
  pointer-events: auto;
}

#masthead #ast-desktop-header .site-primary-header-wrap,
#masthead #ast-mobile-header .site-primary-header-wrap{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 var(--orby-header-edge-space) !important;
}

body #page #masthead #ast-desktop-header .ast-primary-header-bar,
body #page #masthead #ast-mobile-header .ast-primary-header-bar{
  background:
    linear-gradient(100deg, rgba(38, 16, 72, .78), rgba(7, 18, 34, .86) 47%, rgba(5, 38, 47, .78)),
    rgba(5, 12, 24, .78) !important;
}

#masthead.orbytra-header-scrolled #ast-desktop-header .ast-primary-header-bar,
#masthead.orbytra-header-scrolled #ast-mobile-header .ast-primary-header-bar{
  width: min(1080px, calc(100% - (var(--orby-header-side) * 2))) !important;
  min-height: var(--orby-header-compact-height) !important;
  padding: 0;
  background:
    linear-gradient(105deg, rgba(16, 18, 42, .62), rgba(7, 14, 27, .76) 52%, rgba(19, 25, 45, .62)),
    rgba(6, 11, 23, .66) !important;
  box-shadow:
    0 18px 54px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

#masthead .site-primary-header-wrap,
#masthead .ast-builder-grid-row{
  min-height: unset !important;
  height: 100% !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#masthead .ast-builder-grid-row{
  display: grid !important;
  width: 100% !important;
  align-items: center;
  grid-template-columns: max-content minmax(0, 1fr) max-content !important;
  column-gap: clamp(18px, 2.2vw, 42px);
  height: 100%;
  min-height: var(--orby-header-height) !important;
}

#masthead.orbytra-header-scrolled .ast-builder-grid-row{
  min-height: var(--orby-header-compact-height) !important;
}

#masthead .site-header-section,
#masthead .site-header-primary-section-left,
#masthead .site-header-primary-section-center,
#masthead .site-header-primary-section-right{
  align-items: center !important;
  min-height: 0 !important;
  height: 100%;
}

#masthead .site-header-primary-section-left{
  justify-content: flex-start;
  width: auto !important;
  flex: 0 0 auto !important;
}

#masthead .site-header-primary-section-center{
  width: 100% !important;
  justify-content: center;
  justify-self: center;
  min-width: 0;
}

#masthead .site-header-primary-section-right{
  justify-content: flex-end;
  width: auto !important;
  flex: 0 0 auto !important;
}

#masthead .site-branding,
#masthead .ast-site-identity{
  padding: 0 !important;
  margin: 0 !important;
}

#masthead .site-logo-img .custom-logo{
  display: block;
  width: auto;
  max-width: 154px;
  max-height: 30px;
  object-fit: contain;
}

#masthead.orbytra-header-scrolled .site-logo-img .custom-logo{
  max-width: 128px;
  max-height: 26px;
}

#masthead .site-title,
#masthead .site-title a{
  color: #fff !important;
  font-size: 1.18rem;
  font-weight: 760;
  letter-spacing: -.035em;
}

#masthead #ast-hf-menu-1,
#masthead .ast-builder-menu-1 .main-navigation > ul{
  display: inline-flex;
  align-items: center;
  gap: clamp(8px, 1.2vw, 22px);
  margin: 0;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#masthead #ast-hf-menu-1 > .menu-item,
#masthead .main-header-menu > .menu-item{
  line-height: normal !important;
}

#masthead #ast-hf-menu-1 > .menu-item > .menu-link,
#masthead .main-header-menu > .menu-item > .menu-link{
  min-height: 32px;
  padding: 0 13px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: rgba(255,255,255,.58) !important;
  font-size: clamp(.86rem, .9vw, .98rem);
  font-weight: 440;
  letter-spacing: -.03em;
  line-height: 1 !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}

#masthead #ast-hf-menu-1 > .menu-item > .menu-link:hover,
#masthead #ast-hf-menu-1 > .current-menu-item > .menu-link,
#masthead #ast-hf-menu-1 > .current_page_item > .menu-link,
#masthead #ast-hf-menu-1 > .current-menu-ancestor > .menu-link,
#masthead .main-header-menu > .menu-item > .menu-link:hover,
#masthead .main-header-menu > .current-menu-item > .menu-link,
#masthead .main-header-menu > .current_page_item > .menu-link,
#masthead .main-header-menu > .current-menu-ancestor > .menu-link{
  color: #fff !important;
}

#masthead #ast-hf-menu-1 > .current-menu-item > .menu-link,
#masthead #ast-hf-menu-1 > .current_page_item > .menu-link,
#masthead #ast-hf-menu-1 > .current-menu-ancestor > .menu-link,
#masthead .main-header-menu > .current-menu-item > .menu-link,
#masthead .main-header-menu > .current_page_item > .menu-link,
#masthead .main-header-menu > .current-menu-ancestor > .menu-link{
  background: transparent !important;
  box-shadow: none !important;
  transform: none;
}

#masthead #ast-hf-menu-1:hover > .current-menu-item > .menu-link,
#masthead .main-header-menu:hover > .current-menu-item > .menu-link{
  background: transparent !important;
  box-shadow: none !important;
}

#masthead #ast-hf-menu-1 > .menu-item > .menu-link:hover,
#masthead .main-header-menu > .menu-item > .menu-link:hover{
  background: rgba(255,255,255,.1) !important;
}

#masthead .ast-header-button-1{
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
}

#masthead .ast-header-button-1 .ast-builder-button-wrap{
  display: flex;
  align-items: center;
  margin: 0 !important;
}

#masthead .ast-header-button-1 .ast-builder-button-wrap > .menu-link{
  display: none !important;
}

#masthead .ast-header-button-1 .ast-custom-button-link{
  min-height: 0 !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  line-height: 1 !important;
  margin: 0 !important;
}

#masthead .ast-header-button-1 .ast-custom-button{
  min-height: 46px;
  padding: 0 34px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #06111f !important;
  background: rgba(255,255,255,.96) !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.16) !important;
  font-size: .94rem;
  font-weight: 620;
  letter-spacing: -.02em;
  line-height: 1 !important;
  margin: 0 !important;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

#masthead .ast-header-button-1 .ast-custom-button-link:hover .ast-custom-button,
#masthead .ast-header-button-1 .ast-custom-button:hover{
  transform: translateY(-1px);
  background: #fff !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.22) !important;
}

@media (max-width: 1180px){
  :root{
    --orby-header-side: 18px;
    --orby-header-height: 60px;
    --orby-header-compact-height: 52px;
    --orby-header-edge-space: 16px;
  }

  #masthead #ast-desktop-header .ast-primary-header-bar,
  #masthead #ast-mobile-header .ast-primary-header-bar{
    padding: 0;
  }

  #masthead #ast-desktop-header .site-primary-header-wrap,
  #masthead #ast-mobile-header .site-primary-header-wrap{
    padding: 0 var(--orby-header-edge-space) !important;
  }

  #masthead #ast-hf-menu-1 > .menu-item > .menu-link,
  #masthead .main-header-menu > .menu-item > .menu-link{
    min-height: 30px;
    padding: 0 10px !important;
    font-size: .82rem;
  }

}

@media (max-width: 921px){
  :root{
    --orby-header-top: 12px;
    --orby-header-side: 14px;
    --orby-header-height: 56px;
    --orby-header-compact-height: 50px;
    --orby-header-edge-space: 14px;
  }

  .admin-bar #masthead{
    top: calc(46px + var(--orby-header-top) + env(safe-area-inset-top));
  }

  body.orbytra-mobile-menu-active{
    overflow: hidden;
    overscroll-behavior: none;
  }

  #masthead #ast-mobile-header{
    position: relative;
    left: 50%;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    transform: translateX(-50%);
  }

  #masthead #ast-desktop-header .ast-primary-header-bar,
  #masthead #ast-mobile-header .ast-primary-header-bar,
  #masthead.orbytra-header-scrolled #ast-desktop-header .ast-primary-header-bar,
  #masthead.orbytra-header-scrolled #ast-mobile-header .ast-primary-header-bar{
    position: relative;
    z-index: 3;
    width: calc(100vw - (var(--orby-header-side) * 2)) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding: 0;
  }

  #masthead #ast-desktop-header .site-primary-header-wrap,
  #masthead #ast-mobile-header .site-primary-header-wrap{
    padding: 0 var(--orby-header-edge-space) !important;
  }

  #masthead .site-logo-img .custom-logo,
  #masthead.orbytra-header-scrolled .site-logo-img .custom-logo{
    max-width: 126px;
    max-height: 30px;
  }

  #masthead #ast-mobile-header .ast-mobile-header-content{
    position: fixed !important;
    inset: 0 !important;
    z-index: 2;
    width: 100vw !important;
    height: 100vh;
    height: 100dvh;
    display: grid !important;
    grid-template-rows: minmax(min-content, 1fr) auto auto;
    align-items: center;
    gap: 24px;
    overflow-x: hidden;
    overflow-y: auto;
    padding:
      calc(104px + env(safe-area-inset-top))
      max(28px, env(safe-area-inset-right))
      calc(38px + env(safe-area-inset-bottom))
      max(28px, env(safe-area-inset-left));
    background:
      radial-gradient(circle at 15% 5%, rgba(74, 39, 126, .2), transparent 28rem),
      radial-gradient(circle at 90% 16%, rgba(20, 122, 148, .14), transparent 25rem),
      rgba(3, 8, 18, .92) !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, -100%, 0);
    transition:
      transform .52s cubic-bezier(.22, .61, .36, 1),
      opacity .24s ease,
      visibility 0s linear .52s;
    pointer-events: none;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    -webkit-backdrop-filter: blur(18px) saturate(125%);
    backdrop-filter: blur(18px) saturate(125%);
  }

  #masthead.orbytra-mobile-menu-open #ast-mobile-header .ast-mobile-header-content{
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
    transition:
      transform .52s cubic-bezier(.22, .61, .36, 1),
      opacity .24s ease,
      visibility 0s linear 0s;
    pointer-events: auto;
  }

  #masthead #ast-mobile-header .ast-mobile-header-content,
  #masthead #ast-mobile-header .ast-mobile-header-content *{
    box-sizing: border-box;
  }

  #masthead #ast-mobile-header .ast-mobile-header-content .ast-builder-menu-mobile,
  #masthead #ast-mobile-header .ast-mobile-header-content .ast-main-header-bar-alignment,
  #masthead #ast-mobile-header .ast-mobile-header-content .main-header-bar-navigation,
  #masthead #ast-mobile-header .ast-mobile-header-content .main-navigation{
    width: 100% !important;
    max-width: 720px;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  #masthead #ast-mobile-header .ast-mobile-header-content .ast-builder-menu-mobile{
    align-self: center;
  }

  #masthead #ast-hf-mobile-menu{
    counter-reset: orbytra-mobile-nav;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  #masthead #ast-hf-mobile-menu > .menu-item{
    counter-increment: orbytra-mobile-nav;
    width: 100%;
    margin: 0 !important;
    border: 0 !important;
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    transition:
      opacity .34s ease,
      transform .42s cubic-bezier(.22, .61, .36, 1);
  }

  #masthead #ast-hf-mobile-menu > .menu-item > .menu-link{
    min-height: 0 !important;
    width: 100%;
    max-width: 430px;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: baseline;
    margin: 0 auto !important;
    padding: 9px 0 !important;
    color: rgba(255,255,255,.64) !important;
    background: transparent !important;
    border: 0 !important;
    font-size: clamp(1.7rem, 7vw, 2.35rem);
    font-weight: 560;
    letter-spacing: -.035em;
    line-height: 1.15 !important;
  }

  #masthead #ast-hf-mobile-menu > .menu-item > .menu-link::before{
    content: counter(orbytra-mobile-nav, decimal-leading-zero);
    color: rgba(47,194,255,.72);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1;
  }

  #masthead.orbytra-mobile-menu-open #ast-hf-mobile-menu > .menu-item{
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  #masthead.orbytra-mobile-menu-open #ast-hf-mobile-menu > .menu-item:nth-child(1){ transition-delay: .12s; }
  #masthead.orbytra-mobile-menu-open #ast-hf-mobile-menu > .menu-item:nth-child(2){ transition-delay: .16s; }
  #masthead.orbytra-mobile-menu-open #ast-hf-mobile-menu > .menu-item:nth-child(3){ transition-delay: .2s; }
  #masthead.orbytra-mobile-menu-open #ast-hf-mobile-menu > .menu-item:nth-child(4){ transition-delay: .24s; }
  #masthead.orbytra-mobile-menu-open #ast-hf-mobile-menu > .menu-item:nth-child(5){ transition-delay: .28s; }

  #masthead #ast-hf-mobile-menu > .current-menu-item > .menu-link,
  #masthead #ast-hf-mobile-menu > .current_page_item > .menu-link,
  #masthead #ast-hf-mobile-menu > .menu-item > .menu-link:hover,
  #masthead #ast-hf-mobile-menu > .menu-item > .menu-link:focus{
    color: #fff !important;
  }

  #masthead #ast-mobile-header .main-header-menu-toggle{
    min-width: 40px;
    min-height: 40px;
    display: inline-grid;
    place-items: center;
    margin: 0 !important;
    padding: 8px !important;
    color: #fff !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
  }

  #masthead #ast-mobile-header .main-header-menu-toggle:hover,
  #masthead #ast-mobile-header .main-header-menu-toggle:focus-visible{
    background: rgba(255,255,255,.1) !important;
  }

  #masthead .orbytra-mobile-cta{
    min-height: 50px;
    width: min(100%, 430px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    padding: 0 22px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    color: #041527 !important;
    background: var(--orby-cyan);
    box-shadow: 0 14px 38px rgba(47,194,255,.18);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none !important;
    opacity: 0;
    transform: translate3d(0, 8px, 0);
    transition:
      opacity .3s ease,
      transform .4s cubic-bezier(.22, .61, .36, 1),
      box-shadow .2s ease;
  }

  #masthead.orbytra-mobile-menu-open .orbytra-mobile-cta{
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: .32s, .32s, 0s;
  }

  #masthead .orbytra-mobile-cta:hover,
  #masthead .orbytra-mobile-cta:focus-visible{
    color: #041527 !important;
    box-shadow: 0 18px 46px rgba(47,194,255,.3);
  }

  #masthead .orbytra-mobile-menu-footer{
    justify-self: center;
    color: rgba(255,255,255,.36);
    font-size: 11px;
    letter-spacing: .04em;
    opacity: 0;
    transition: opacity .3s ease;
  }

  #masthead.orbytra-mobile-menu-open .orbytra-mobile-menu-footer{
    opacity: 1;
    transition-delay: .38s;
  }
}

@media (prefers-reduced-motion: reduce){
  #masthead #ast-desktop-header .ast-primary-header-bar,
  #masthead #ast-mobile-header .ast-primary-header-bar,
  #masthead .main-header-menu > .menu-item > .menu-link,
  #masthead .ast-header-button-1 .ast-custom-button-link,
  #masthead .ast-header-button-1 .ast-custom-button{
    transition: none !important;
  }

  #masthead #ast-mobile-header .ast-mobile-header-content{
    transition: none !important;
  }

  #masthead #ast-hf-mobile-menu > .menu-item,
  #masthead .orbytra-mobile-cta,
  #masthead .orbytra-mobile-menu-footer{
    transition: none !important;
  }
}