@charset "utf-8";

/* todos */
header { position: fixed; top: 0; left: 0;}

header.clear .fundo { background-color: rgb(255 255 255 / 80%); border-right: 1px solid rgb(90 90 90 / 15%);}
header.dark .fundo { background-color: rgb(5 5 5 / 20%);}
header.clear .logo.branco { display: none;}
header.dark .logo.preto { display: none;}
header.clear .links .um.home { background-image: url('../../imagens/app/header-home-preto.png?v3');}
header.dark .links .um.home { background-image: url('../../imagens/app/header-home-branco.png?v3');}
header.clear .links .um.preco { background-image: url('../../imagens/app/header-preco-preto.png?v3');}
header.dark .links .um.preco { background-image: url('../../imagens/app/header-preco-branco.png?v3');}
header.clear .links .um.contato { background-image: url('../../imagens/app/header-contato-preto.png?v3');}
header.dark .links .um.contato { background-image: url('../../imagens/app/header-contato-branco.png?v3');}
header.clear .links .um.indique { background-image: url('../../imagens/app/header-indique-preto.png?v2');}
header.dark .links .um.indique { background-image: url('../../imagens/app/header-indique-branco.png?v2');}
header.clear .links .um.verificar { background-image: url('../../imagens/app/header-verificar-preto.png?v2');}
header.dark .links .um.verificar { background-image: url('../../imagens/app/header-verificar-branco.png?v2');}
header.clear .links .um.entrar { background-image: url('../../imagens/app/header-entrar-preto.png?v2');}
header.dark .links .um.entrar { background-image: url('../../imagens/app/header-entrar-branco.png?v2');}

/* big */
header.big .logo { float: left; width: 100%; margin: 31px 0;}
header.big .links { float: left; width: 90%; margin: 0 5%;}
header.big .links .um { float: left; width: 100%; padding: 17px 0 15px 40px; margin: 2px 0; outline-offset: -1px; background-position: 10px 50%; background-repeat: no-repeat;}
header.big .logado { position: absolute; width: 90%; left: 0; bottom: 20px; margin: 0 5%;}
header.big .logado .linkado { float: left; width: 100%; padding: 15px;}
header.big .logado .linkado .foto { position: absolute; width: 40px; height: 40px; overflow: hidden;}
header.big .logado .linkado .nome { float: left; width: 100%; padding: 20px 35px 20px 50px; line-height: 0;}
header.big .logado .pontinhos { position: absolute; top: 50%; right: 15px; margin: -15px 0 0;}
header.big .logado .suspenso { position: absolute; width: 100%; bottom: 75px; left: 0;}

header.clear.big .links .um:hover { outline: 1px solid rgb(90 90 90 / 30%);}
header.clear.big .links .um.ativo { outline: 1px solid rgb(90 90 90 / 30%);}
header.dark.big .links .um:hover { background-color: rgb(255 255 255 / 20%);}
header.dark.big .links .um.ativo { background-color: rgb(255 255 255 / 20%);}

header.clear.big .logado .linkado { outline: 1px solid rgb(90 90 90 / 30%);}
header.dark.big .logado .linkado { background-color: rgb(255 255 255 / 20%);}

/* mini */
header.mini .logo { float: left; width: 30px; margin: 10px; overflow: hidden;}
header.mini .links { float: left; width: 100%; padding: 0 2px; margin: 11px 0;}
header.mini .links .um { float: left; width: 100%; height: 45px; margin: 3px 0; outline-offset: -1px; background-position: 50%; background-repeat: no-repeat; font-size: 0;}
header.mini .logado { position: absolute; width: 100%; left: 0; bottom: 20px;}
header.mini .logado .linkado { display: none;}
header.mini .logado .pontinhos { margin: 0 10px;}
header.mini .logado .suspenso { position: fixed; width: 200px; bottom: 50px; left: 30px;}

header.clear.mini .links .um:hover { outline: 1px solid rgb(90 90 90 / 30%);}
header.clear.mini .links .um.ativo { outline: 1px solid rgb(90 90 90 / 30%);}
header.dark.mini .links .um:hover { background-color: rgb(255 255 255 / 20%);}
header.dark.mini .links .um.ativo { background-color: rgb(255 255 255 / 20%);}

/* mob */
header.mob { top: auto; bottom: 0;}
header.mob .fundo { -webkit-box-shadow: 0 0 5px 0 rgb(0 0 0 / 20%); -moz-box-shadow: 0 0 5px 0 rgb(0 0 0 / 20%); box-shadow: 0 0 5px 0 rgb(0 0 0 / 20%);}
header.mob .logo { display: none;}

header.mob .links { display: flex; width: 100%; padding: 0 40px 0 0;}
header.mob .links .um { float: left; width: 100%; height: 50px; background-position: 50%; background-repeat: no-repeat; font-size: 0;}
header.mob .links .um.borda { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;}

header.mob .logado { position: absolute; width: 30px; height: 30px; right: 9px; bottom: 9px;}
header.mob .logado .linkado { display: none;}
header.mob .logado .suspenso { position: fixed; width: 90%; bottom: 60px; left: 5%;}

header.clear.mob .links .um:hover { background-color: rgb(90 90 90 / 10%);}
header.clear.mob .links .um.ativo { background-color: rgb(90 90 90 / 10%);}
header.dark.mob .links .um:hover { background-color: rgb(255 255 255 / 20%);}
header.dark.mob .links .um.ativo { background-color: rgb(255 255 255 / 20%);}