html{
  --fs-global: .672043vw;                 
  font-size: var(--fs-global);
}
@media only screen and (min-width:1488px){ html{ --fs-global: 10px } }
@media only screen and (max-width:991px){  html{ --fs-global: 1.199041vw } }  
@media only screen and (max-width:767px){  html{ --fs-global: 2.544529vw } }  




:root{
  --nav-accent:      var(--tinta);            
  --nav-accent-hover:#000000;
  --nav-on-accent:   var(--papel);            
  --nav-strong:      var(--tinta);            
  --nav-soft:        rgba(20,20,22,.48);      
  --nav-disable:     var(--apagado);          
  --nav-border:      rgba(20,20,22,.14);      
  --nav-pill:        rgba(20,20,22,.055);     
  --nav-pill-mobile: rgba(255,255,255,.55);   
  --nav-glass:       rgba(17,17,17,.035);     
  --nav-tick:        rgba(17,17,17,.22);      

  
  --nav-ease:  ease;
  --nav-dur:   .4s;    
  --nav-dur-p: .2s;    

  --nav-container-max: 148.8rem;
  --nav-container-pad: 8rem;
  --nav-container-gap: 1.6rem;
}
@media only screen and (max-width:991px){ :root{ --nav-container-pad:3.2rem } }
@media only screen and (max-width:767px){ :root{ --nav-container-pad:1.6rem } }



.header-group{
  position:fixed; top:0; left:0;
  width:100%; z-index:99;
  pointer-events:none;
}

.header-group *,
.header-group *::before,
.header-group *::after{ box-sizing:border-box }
.header-group a{ color:inherit; text-decoration:none; outline:0; cursor:pointer }
.header-group button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer }
.nav-container{
  width:100%;
  max-width:var(--nav-container-max);
  margin-inline:auto;
  padding-inline:var(--nav-container-pad);
}



prog-wrap{
  display:block;
  position:relative;
  height:1rem;
  background-image:repeating-linear-gradient(to right,
    var(--nav-tick), var(--nav-tick) 1px, transparent 1px, transparent calc(1px + .8rem));
}
.prog-inner{
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  background-color:var(--nav-accent);
  transform-origin:0% 50%;
  transform:scaleX(0);
  transform-style:preserve-3d;
  transition:transform var(--nav-dur-p) linear;
  will-change:transform;
}



.header{
  position:relative;
  width:100%;
  z-index:99;
  pointer-events:none;              
}
header-inner{
  display:block;
  padding-block:2.6rem;
  transition:padding var(--nav-dur) var(--nav-ease);
}
header-inner.on-sticky{ padding-block:2rem }

.header-grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(12.4rem,1fr) auto minmax(12.4rem,1fr);
  column-gap:var(--nav-container-gap);
  width:100%; max-width:100%;
  margin-inline:auto;
  padding:0;
  border-radius:99rem;
  background-color:rgba(0,0,0,0);
  -webkit-backdrop-filter:blur(0px);
          backdrop-filter:blur(0px);   
  pointer-events:auto;
  transition:
    max-width               var(--nav-dur) var(--nav-ease),
    padding                 var(--nav-dur) var(--nav-ease),
    background-color        var(--nav-dur) var(--nav-ease),
    -webkit-backdrop-filter var(--nav-dur) var(--nav-ease),
    backdrop-filter         var(--nav-dur) var(--nav-ease);
}

.header-grid.on-sticky{
  max-width:65.6rem;
  padding:.8rem;
  background-color:var(--nav-pill);
  -webkit-backdrop-filter:blur(27px);
          backdrop-filter:blur(27px);
}

.header-logo-wrap{ display:flex; align-items:center; justify-content:flex-start }
.header-logo{
  display:flex; align-items:center; flex:none;
  width:12.2rem;
  color:var(--nav-strong);
  transition:margin var(--nav-dur) var(--nav-ease),
             width  var(--nav-dur) var(--nav-ease),
             color  var(--nav-dur) var(--nav-ease);
}
.header-logo.on-sticky{ margin-left:1.2rem }
.header-logo svg{ width:100%; height:auto; display:block }



.header-links-wrap{ display:flex; align-items:center; justify-content:center }
.header-links{
  display:flex; align-items:center; justify-content:center;
  column-gap:1.2rem;
  text-align:center;
  transition:column-gap var(--nav-dur) var(--nav-ease);
}
.header-links.on-sticky{ column-gap:0rem }

.header-link{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  flex:none;
  padding-inline:.8rem;
  color:var(--nav-soft);
  transition:color var(--nav-dur) var(--nav-ease);
}
.header-link:hover,
.header-link.active{ color:var(--nav-strong) }

.header-link-inner{
  position:absolute;
  display:flex; align-items:center; justify-content:center;
  width:100%;
  transition:opacity var(--nav-dur) var(--nav-ease);
}
.txt-holder{
  opacity:0;
  pointer-events:none;
  flex:none;
  max-width:var(--max-width, none);        
  transition-property:max-width;
  transition-duration:var(--nav-dur);
  transition-timing-function:var(--nav-ease);
}
.txt-header-link{
  display:inline-block;
  white-space:nowrap;
  font-size:1.4rem;
  font-weight:400;
  line-height:1em;
  letter-spacing:-.005em;
  transition:transform var(--nav-dur) var(--nav-ease);
}
.header-link-dot{
  position:absolute;
  width:.6rem; height:.6rem;
  border-radius:50%;
  background-color:var(--nav-strong);
  opacity:0;
  transform:scale(.5);
  pointer-events:none;
  transition:transform var(--nav-dur) var(--nav-ease),
             opacity   var(--nav-dur) var(--nav-ease),
             background-color var(--nav-dur) var(--nav-ease);
}

@media only screen and (min-width:992px){
  
  .header-link.on-sticky:not(.active) .txt-holder{ max-width:.6rem }
  .header-link.on-sticky:not(.active) .header-link-inner{ opacity:0 }
  .header-link.on-sticky:not(.active) .txt-header-link:not(.txt-holder){ transform:rotateX(90deg) }
  .header-link.on-sticky:not(.active) .header-link-dot{ opacity:1; transform:scale(1) }

  
  .header-grid.on-sticky .btn{ background-color:var(--nav-accent); color:var(--nav-on-accent) }
  .header-grid.on-sticky .btn .btn-outline{ opacity:0 }
  .header-grid.on-sticky .btn:hover{ background-color:var(--nav-accent-hover) }
}



.header-cta-wrap{ display:flex; align-items:center; justify-content:flex-end }
.btn{
  position:relative; display:block; overflow:hidden;
  text-decoration:none;
  border-radius:99rem;
  background-color:var(--nav-glass);
  color:var(--nav-strong);
  -webkit-backdrop-filter:blur(1rem);
          backdrop-filter:blur(1rem);
  transition:background-color .3s var(--nav-ease), color .3s var(--nav-ease);
}
.btn-outline{
  position:absolute; inset:0; z-index:2;
  border:1px solid var(--nav-border);
  border-radius:inherit;
  pointer-events:none;
  transition:border-color .2s var(--nav-ease), opacity .3s var(--nav-ease);
}
.btn:hover .btn-outline{ border-color:var(--nav-soft) }
.btn-size{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center;
  padding:1.6rem 2.4rem;
}
.btn-txt-wrap{ position:relative; overflow:hidden }
.btn-txt{
  font-size:1.4rem; font-weight:500; line-height:1em; text-align:center;
  transition:opacity var(--nav-dur) var(--nav-ease), transform var(--nav-dur) var(--nav-ease);
}
.btn-txt-clone{ position:absolute; top:100%; left:0; width:100%; opacity:0 }
@media (hover:hover){
  .btn:hover .btn-txt{ transform:translateY(-100%) }
  .btn:hover .btn-txt:not(.btn-txt-clone){ opacity:0 }
  .btn:hover .btn-txt-clone{ opacity:1 }
}

.header-bg{ display:none; pointer-events:none }
.header-menu-toggle{ display:none }
.ic-embed{ display:flex; align-items:center; justify-content:center }
.ic-embed svg{ width:100%; height:auto; display:block }



@media only screen and (max-width:991px){

  prog-wrap{ display:none }

  .header-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    padding:.8rem;
    background-color:transparent;
    -webkit-backdrop-filter:none;
            backdrop-filter:none;      
  }
  
  .header-bg{
    display:block;
    position:absolute; inset:0; z-index:1;
    border-radius:99rem;
    background-color:var(--nav-pill-mobile);
    -webkit-backdrop-filter:blur(27px);
            backdrop-filter:blur(27px);
    box-shadow:0 .1rem 3rem rgba(0,0,0,.05);
  }

  .header-logo-wrap{ position:relative; z-index:2 }
  .header-logo,
  .header-logo.on-sticky{ width:9.1rem; margin-left:1.2rem }

  .header-cta-wrap{ position:relative; z-index:2; column-gap:.4rem }

  
  .header-links-wrap{
    position:absolute; top:100%; right:0; z-index:4;
    margin-top:.4rem; margin-right:.8rem;
    padding:2rem 3.2rem;
    border-radius:1.2rem;
    background-color:var(--nav-pill-mobile);
    -webkit-backdrop-filter:blur(0px);
            backdrop-filter:blur(0px);
    box-shadow:0 .8rem 4rem rgba(0,0,0,.07);
    opacity:0;
    transform:translateY(20%);
    pointer-events:none;
    transition:opacity   var(--nav-dur) var(--nav-ease),
               transform var(--nav-dur) var(--nav-ease),
               -webkit-backdrop-filter var(--nav-dur) var(--nav-ease),
               backdrop-filter         var(--nav-dur) var(--nav-ease);
  }
  .header-links-wrap.on-open{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
    -webkit-backdrop-filter:blur(10px);
            backdrop-filter:blur(10px);
  }

  .header-links,
  .header-links.on-sticky{
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    text-align:left;
    column-gap:0;
  }
  .header-link{ justify-content:flex-start; padding-inline:0 }
  .header-link-inner{
    position:relative;
    justify-content:flex-start;
    width:auto;
    padding:1.2rem 0 1rem 2rem;
    opacity:1;
  }
  .txt-holder{ display:none }

  
  .header-link-dot{
    left:0; margin-left:-.3rem;
    opacity:1; transform:scale(1);
    background-color:var(--nav-disable);
    transition:background-color var(--nav-dur) var(--nav-ease);
  }
  .header-link.active .header-link-dot,
  .header-link:hover  .header-link-dot{ background-color:var(--nav-strong) }

  
  .header-menu-toggle{
    position:relative;
    display:flex; align-items:center; justify-content:center;
    flex:none;
    width:4.2rem; height:4.2rem;
    border-radius:99rem;
    background-color:var(--nav-glass);
    border:0; padding:0; cursor:pointer;
  }
  .el-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible }
  .el-circle{ transform-origin:50% 50%; transform:rotate(-90deg) }  
  .el-circle.el-bg{ color:var(--nav-border) }
  .el-circle.el-prog{ transition:stroke-dashoffset var(--nav-dur-p) linear }

  .ic-16{
    position:absolute;
    width:1.6rem; height:1.6rem;
    color:var(--nav-strong);
    transition:opacity var(--nav-dur) var(--nav-ease), transform var(--nav-dur) var(--nav-ease);
  }
  .ic-menu-close{ opacity:0 }
  .header-menu-toggle.on-open .ic-menu-open { opacity:0; transform:rotate(180deg) }
  .header-menu-toggle.on-open .ic-menu-close{ opacity:1; transform:rotate(180deg) }

  
  .header-btn-wrap .btn{ background-color:var(--nav-accent); color:var(--nav-on-accent) }
  .header-btn-wrap .btn .btn-outline{ opacity:0 }
}

@media only screen and (max-width:767px){
  header-inner,
  header-inner.on-sticky{ padding-block:1.6rem }
}

@media (prefers-reduced-motion:reduce){
  .header-group *,
  .header-group *::before,
  .header-group *::after{ transition-duration:.001ms !important }
}



.header-general .header-grid,
.header-general .header-grid.on-sticky{
  max-width:none;
  width:calc(100% - 6.4rem);
  padding:.8rem .8rem .8rem 2.4rem;
  background-color:var(--nav-pill);
  -webkit-backdrop-filter:blur(27px);
          backdrop-filter:blur(27px);
}

.header-general .header-logo,
.header-general .header-logo.on-sticky{ margin-left:0 }


.header-general .header-link.on-sticky:not(.active) .txt-holder{ max-width:none }
.header-general .header-link.on-sticky:not(.active) .header-link-inner{ opacity:1 }
.header-general .header-link.on-sticky:not(.active) .txt-header-link:not(.txt-holder){
  transform:none }
.header-general .header-link.on-sticky:not(.active) .header-link-dot{
  opacity:0; transform:scale(0) }


.header-general .header-links,
.header-general .header-links.on-sticky{ column-gap:2.8rem }
@media only screen and (max-width:991px){
  .header-general .header-links,
  .header-general .header-links.on-sticky{ column-gap:2rem }
}


.header-general header-inner,
.header-general header-inner.on-sticky{ padding-block:2rem }

@media only screen and (max-width:991px){
  .header-general .header-grid,
  .header-general .header-grid.on-sticky{ width:calc(100% - 4.8rem) }
}
@media only screen and (max-width:767px){
  .header-general .header-grid,
  .header-general .header-grid.on-sticky{
    width:calc(100% - 3.2rem); padding:.6rem .6rem .6rem 1.6rem }
  .header-general header-inner,
  .header-general header-inner.on-sticky{ padding-block:1.6rem }
}


.header-general .header-link-inner[aria-current="page"]{ color:var(--nav-strong) }