.gradient_marcasja{background: linear-gradient(180deg, #EDF7ED, var(--lightbg)); width: 100%; height: 450px; position: absolute;z-index: 0; }
  
header {width: 100%; position: relative; z-index: 9; padding: var(--spac3) 0; border-bottom: 1px solid transparent; position: fixed; }
header p {color: inherit; font-size: 14px; }
header .row { flex-direction: row; justify-content: space-between; align-content: center; max-width: 1920px; } 
header .left { display: flex; align-items: center; gap: 40px; position: relative; }
header .left .loggy p { display: none }
header .left .loggy img {width: 160px; top: 1px;position: relative;}
header .left .loggy img.desk { display: block; }
header .left .loggy img.mobile { display: none; }
header .left nav { display: flex; flex-flow: wrap; align-items: center;gap: var(--spac1); }
header .left .loggy .title-pages { display: none }

header .left nav a i {width: 12px;height: 12px;  }
header .left nav a.active p{color: var(--text);}
header .left nav a.active:hover {text-decoration: none; cursor: default;}
header .right { display: flex; align-items: center; gap: 16px; }


/*   HEADER FIXO   */ 
header.fixed { background-color: var(--lightbg); border-bottom: 1px solid var(--border-color); transition: .2s; } 

/*  HEADER MOBILE  */ 
header nav.menu-mobile {--darkgreenbg: #F0F2EF; display: none; position: absolute; z-index: 99999; top: 0; right: 0; width: 100%; height: auto;  }
header nav.menu-mobile #black { display: none; width: 100%; height: 100%; margin: 0;  z-index: 1; position: absolute; background: #00000024; }
header nav.menu-mobile #black.active { display: flex !important; }

header nav.menu-mobile .menu_phone { display:block; position: absolute; top: 0; right: 0px; z-index: 999; width: 24px; height: auto; cursor:pointer; margin:0; padding: 30px 19px 31px 19px;margin: 0;border-left: 1px solid var(--border-color); cursor: pointer;transition: .3s;}
header nav.menu-mobile .menu_phone:hover {background-color: var(--darkgreenbg);}
header nav.menu-mobile .menu_phone.active {background-color: var(--darkgreenbg); padding: 31px 19px;}

header nav.menu-mobile #menu {opacity: 0; display: none; width: 100%; top: 63px; margin: 0;  right: 0; overflow: hidden; height: calc(100vh - 62px); position: fixed; z-index: 3; transition: .3s; transition-timing-function: cubic-bezier(0.09, 1.15, 0.54, 1.03);display: flex; justify-content: start; z-index: 99; pointer-events: none; }
header nav.menu-mobile #menu .big { width: 0;height: calc(100vh - 62px); position: fixed; right: 0; display: flex; flex-direction: column; z-index: 3; background: var(--darkgreenbg); transition: .3s; transition-timing-function: cubic-bezier(0.09, 1.15, 0.54, 1.03); padding-top: 10px;justify-content: space-between;overflow: auto; }
header nav.menu-mobile #menu .big .btn.terceary.darkgreen {
    padding-left: 0 !important;
}
header nav.menu-mobile #menu .big .btn.excep i {background-color: var(--lightgreen);}
header nav.menu-mobile #menu .big .top, header nav.menu-mobile #menu .big .down { padding: 0 20px 20px 20px; }
header nav.menu-mobile #menu .big .down { display: flex; gap: 10px; flex-direction: column; }
header nav.menu-mobile #menu .big .link-mobile { display: flex;flex-direction: row;color: var(--darkgreen);padding: var(--spac4) 0;border-bottom: 1px solid var(--border-color);display: flex;align-items: center;gap: 6px;}
header nav.menu-mobile #menu .big .link-mobile i {width: 11px;height: 11px;background-color: var(--darkgreen);}
header nav.menu-mobile #menu.active { opacity: 1 !important;  display: flex !important; pointer-events: inherit;}
header nav.menu-mobile #menu.active .big { width:310px !important }
/* === ICON MENU HAMBURGUER ANIMATED  === */
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { cursor: pointer; border-radius: 10px; height: 3px; width: 24px; background: var(--darkgreen); position: absolute; display: block;content: '';  }
#nav-toggle span:before { top: -9px; }
#nav-toggle span:after { bottom: -9px; }
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { transition: .3s }
#nav-toggle.active span { background-color: transparent !important;  }
#nav-toggle.active span:before, #nav-toggle.active span:after { top: 0; }
#nav-toggle.active span:before { transform: rotate(45deg); background: var(--darkgreen) !important }
#nav-toggle.active span:after { transform: rotate(-45deg); background: var(--darkgreen) !important }

/*   HEADER OPEN DROPDOWN   */ 
.mouseover_menu i.arrow-down {width: 13px !important; height: 13px !important; transition: .05s;}
header .left nav .mouseover_menu:hover i.arrow-down { transform: rotate(180deg);}
header .left nav .mouseover_menu:hover #mouseover { max-height: 500px;opacity: 1;}
#mouseover {opacity: 0; max-height: 0;overflow: hidden;transition: 0.1s ease-out;position: fixed; top:0;left:0; z-index:-1;width: 100%; background-color: var(--lightbg);  box-shadow: 0 -30px 721px #00000060; border-bottom: 1px solid var(--border-color);}
#mouseover .row {flex-direction: row; padding: 60px var(--spac4);border-radius: var(--spac3);gap: 80px;display: flex;margin-top: 62px; justify-content: center;}
#mouseover .row.active { display: flex;}
#mouseover .row .drop-in {display: flex;flex-direction: column;gap: var(--spac5);}
#mouseover .row p.title {font-weight: var(--font-regular);color: var(--text); margin-bottom: var(--spac2); }
#mouseover .row .gratis p {color: var(--darkgreen) !important;}
#mouseover .row .gratis i, #mouseover .row .drop-in .btn.excep i {width: 20px;height: 20px; background-color: var(--lightgreen);}
#mouseover .row .drop-in .btn.excep {color: var(--lightgreen);}
#mouseover .row .drop-in .register-brand {padding: var(--spac6);background:var(--darkbg)}
#mouseover .row .drop-in .register-brand i {background-color: var(--lightgreen);width: 26px;height: 26px;}
#mouseover .row .drop-in .register-brand span {gap:0;}
#mouseover .row .drop-in .box-division {display: flex; flex-direction: row; gap: 40px;}
#mouseover .row .drop-in .division {display: flex; flex-direction: column; }

.dropdown-menu { display: none; flex-direction: column; padding: var(--spac4);border-radius: var(--spac3);gap: var(--spac5);background: #eaeaea;}
.dropdown-menu.active { display: flex;}
.drophover.active {border-bottom: 0 !important;}
.drophover.active i {transform: rotate(180deg);}
.dropdown-menu .drop-in {display: flex;flex-direction: column;gap: var(--spac2);}
.dropdown-menu p {font-size: 13px;}
.dropdown-menu p.title {font-weight: var(--font-regular); }
.register-brand {display: flex; gap: var(--spac3); padding: var(--spac2) var(--spac3); border-radius: var(--spac2); background: var(--gray200);}
.register-brand i {width: 24px; height: auto; background-color: var(--lightgreen);}
.register-brand span {display: flex; flex-direction: column; gap: 4px;}
.register-brand p.medium {color: var(--darkgreen) !important; }
.dropdown-menu p.medium:hover {text-decoration: underline;}

.register-brand p { color: var(--text) !important; }
.dropdown-menu .gratis p {color: var(--darkgreen) !important;}
.dropdown-menu .gratis p:hover {text-decoration: underline;}

.dropdown-menu .drop-in .btn.excep.excep p {color: var(--lightgreen) !important;}

header .right a.contato-whats-js .chamar { display: flex;}
header .right a.contato-whats-js .ajuda { display: none;}

/* ---------------- SIGNIN & CHECKOUT ---------------- */
.signin header .left nav,
.nossos-planos header .left nav { display: none; }
@media (max-width: 1000px) { .signin header .left,
.nossos-planos header .left { left: 0; } }
.signin header .right a.areacliente,
.nossos-planos header .right a.areacliente {display: none; }
.signin header .right a.contato-whats-js .chamar,
.nossos-planos header .right a.contato-whats-js .chamar { display: none;}
.signin header .right a.contato-whats-js .ajuda,
.nossos-planos header .right a.contato-whats-js .ajuda { display: flex;}
.signin header .left .loggy,
.nossos-planos header .left .loggy { display: flex; flex-direction: row; gap: var(--spac8); align-items: center; }
.signin header .left .loggy .title-pages,
.nossos-planos header .left .loggy .title-pages { display: flex; padding-left: var(--spac8); border-left: 1px solid var(--border-color); }
.signin header .left .loggy .title-pages h5,
.nossos-planos header .left .loggy .title-pages h5 { font-weight: var(--font-regular); font-size: 14px; }
.signin header nav.menu-mobile,
.nossos-planos header nav.menu-mobile {display: none !important;}
@media (max-width: 700px) { .signin header .left .loggy .title-pages,
.nossos-planos header .left .loggy .title-pages { display: none; } }





 /* ---------------- HEADER ADMIN ---------------- */

 .admin header .left nav a {color: var(--darkgreen);}
 .admin header .left .loggy img.desk { display: none; }
 .admin header .left .loggy img.mobile { display: block; }
 .admin header .right a.enter { color: var(--darkgreen); border: 2px solid var(--preto); }

.onlyadmin {display: none !important;}
.admin .offonlyadmin {display: none !important;}
.admin header .left nav.desk.onlyadmin {
    display: flex !important;
}
.admin header .right {position: fixed;top: 0;right: 0; gap: 0; }
.admin header .right a {display: none !important;}
.admin header { background-color: var(--lightbg); border-bottom: 1px solid var(--border-color); transition: .2s;}
.admin header .right a.onlysignin {display: flex !important;align-self: start;margin: 12px 20px 0 10px;}
.admin header nav.menu-mobile{ display: none !important; }
@media (max-width: 1000px) {.admin header .left {left: inherit;}}
.admin .drop.onlyadmin {display: flex !important; flex-direction: column; align-items: center; border-left:1px solid var(--border-color);border-top:1px solid var(--border-color);  transition: .3s; background: var(--lightbg); border-bottom:1px solid var(--border-color); width: min-content; justify-content: center;min-height: 60px; }
 .drop:hover { box-shadow: var(--shadow-hover);background: var(--white);  }

 .drop .top {display: flex; align-items: center; height: 60.5px;  padding: 0 var(--spac6); gap: var(--spac4); cursor: pointer;}
 .drop .top span {background: var(--lightgreenbg);color: var(--lightgreen);border-radius: 50px;width: 40px;height: 40px;display: flex;justify-content: center;align-items: center;font-size: 1.3em;font-weight: var(--font-semibold);}
.drop .top p.name {font-size: 1.2em;font-weight: var(--font-medium);}
.drop .top i {width: 15px; height: 15px; background-color: var(--gray300);}
.drop .iceberg {display: flex; flex-direction: column;width: 100%; max-height: 0; overflow: hidden; transition: .3s;}
.drop:hover .iceberg {max-height: 800px;}
.drop .iceberg a {color: var(--preto); padding: var(--spac3) var(--spac6);font-size: 0.9em; }
    .drop .iceberg a.active { opacity: .5; }
.admin header .right .drop .iceberg a {display: inherit !important; border-bottom:1px solid #FFFFFF;border-top:1px solid #FFFFFF;}
.admin header .right .drop .iceberg a:hover {opacity: 1; background: #f9f9f9; border-bottom:1px solid #F0F0F0;border-top:1px solid #F0F0F0;}
.admin header .right .drop .iceberg a.active:hover { background: #FFFFFF; border-bottom:1px solid #FFFFFF;border-top:1px solid #FFF; cursor: default; opacity: .7;}
.drop .iceberg .mob {display: none; flex-direction: column;}
.drop .iceberg .mob p {line-height: 1.2;}
.drop .iceberg .mob .divider {margin: var(--spac1) var(--spac6);}

@media (max-width: 1288px) {.drop .iceberg .mob {display: flex; flex-direction: column;}.admin header .left nav.desk.onlyadmin {display: none !important;}}



@media (max-width:1060px) {
    header { background-color: var(--lightbg); border-top: 1px solid var(--border-color) !important;border-bottom: 1px solid var(--border-color); transition: .3s;}
    .signin header .row {padding: 0 4%;}
    .nossos-planos header .row {padding: 0 4%;}
    .admin header .row {padding: 0 4%;}
    header nav.menu-mobile { display:block !important; }
    header .left nav.desk { display: none;}
    .admin .drop.onlyadmin {border-bottom: 0;}
    header .right { right: 62px; position: relative;}
    .signin header .right { right: 0; }
    .nossos-planos header .right { right: 0; }
}

@media (max-width:650px) {
    header nav.menu-mobile #menu.active .big { width: 100% !important; }
    header .right a p {display: none;}
    .drop .iceberg .mob p {display: flex;}
    header .right a.contato-whats-js .chamar {display: none;}
}
@media (max-width:580px) {
    header nav.menu-mobile #menu.active .big { width: 100% !important; }
    .drop .top p.name {display: none;}

}