[data-nivel="NEUTRO"]{--br-pano:#877F75;--br-sombra:#4A4541;--br-luz:#EEEAE6}
[data-nivel="BRONZE"]{--br-pano:#B36850;--br-sombra:#65392A;--br-luz:#FFE3D8}
[data-nivel="PRATA"]{--br-pano:#7792A5;--br-sombra:#4B5E6C;--br-luz:#E2ECF4}
[data-nivel="OURO"]{--br-pano:#B37B2B;--br-sombra:#704B15;--br-luz:#FFE7CE}
[data-nivel="ESMERALDA"]{--br-pano:#419067;--br-sombra:#255A3E;--br-luz:#D4F2E0;--br-gema:#86D3A9}
[data-nivel="DIAMANTE"]{--br-pano:#5C6CAC;--br-sombra:#333E67;--br-luz:#E7E9FF;--br-gema:#F4F6FF}

.brasao{display:block;flex:none;overflow:visible}
.br-pano{fill:var(--br-pano);stroke:var(--br-sombra);stroke-width:2;stroke-linejoin:miter}
.br-dobra{fill:var(--br-sombra);opacity:.26}
.br-w{fill:var(--br-luz)}
.br-brilho{fill:#FFFFFF;opacity:0}
.br-haste{fill:var(--br-sombra)}

.br-filete{fill:none;stroke:var(--br-luz);stroke-width:1.1;stroke-linejoin:miter;opacity:.72;transition:opacity .2s ease}
.br-filete--fino{stroke-width:.7;opacity:.55}
.br-perolas{fill:none;stroke:var(--br-luz);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:0 3.4;opacity:.9}
.br-caule{fill:none;stroke:var(--br-luz);stroke-width:.8;stroke-linecap:round;opacity:.8}
.br-folha{fill:var(--br-luz);opacity:.85}
.br-baga{fill:var(--br-luz)}

.br-remate{fill:var(--br-pano);stroke:var(--br-sombra);stroke-width:1.2;stroke-linejoin:miter}
.br-gema{fill:var(--br-gema);stroke:var(--br-sombra);stroke-width:.9;stroke-linejoin:miter;transition:filter .2s ease}
.br-faceta{fill:none;stroke:var(--br-sombra);stroke-width:.5;opacity:.6}
.br-bandeira{transform-box:view-box;transform-origin:60px 16px}

.br-sz-cheio{stroke:none}
.br-sz-linha{fill:none;stroke:inherit;stroke-width:1.1}
.br-sz-tecnico{fill:none;stroke:inherit;stroke-width:1;stroke-dasharray:4 1.6}


.brasao--compacto .br-orn{display:none}
.brasao--compacto .br-pano{stroke-width:3}
.brasao--compacto .br-w{transform:translate(35.7px,43.6px) scale(.98)}
.brasao--compacto .br-w path{stroke:var(--br-luz);stroke-width:2.2;stroke-linejoin:round}


@media (prefers-reduced-motion:no-preference){
  .brasao--vivo .br-bandeira{animation:br-tremula 5.2s ease-in-out infinite}
  .brasao--vivo .br-dobra{animation:br-dobra 5.2s ease-in-out infinite}
  .brasao--vivo .br-brilho{animation:br-brilho 6.5s ease-in-out infinite 1.2s}
}
@keyframes br-tremula{0%,100%{transform:skewX(0) scaleY(1)}25%{transform:skewX(1.3deg) scaleY(1.006)}50%{transform:skewX(0) scaleY(1)}75%{transform:skewX(-1.1deg) scaleY(.996)}}
@keyframes br-dobra{0%,100%{opacity:.26}25%{opacity:.36}75%{opacity:.18}}
@keyframes br-brilho{0%{transform:translateX(0);opacity:0}8%{opacity:.32}40%{transform:translateX(140px);opacity:.32}46%,100%{transform:translateX(140px);opacity:0}}


.br-link{position:relative;display:inline-flex;flex:none;border-radius:6px;text-decoration:none;color:inherit;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.br-link:focus-visible{outline:2px solid var(--teal-dark);outline-offset:3px}
.br-link:hover .br-filete,.br-link:focus-visible .br-filete,.br-link:active .br-filete{opacity:1}
.br-link:hover .br-gema,.br-link:focus-visible .br-gema,.br-link:active .br-gema{filter:brightness(1.2)}
@media (prefers-reduced-motion:no-preference){
  .br-link:hover .br-bandeira,.br-link:focus-visible .br-bandeira,.br-link:active .br-bandeira{animation:br-tremula-forte 1.8s ease-in-out infinite}
  .br-link:hover .br-brilho,.br-link:focus-visible .br-brilho,.br-link:active .br-brilho{animation:br-brilho-uma .9s cubic-bezier(.4,0,.2,1) 1 forwards}
}
@keyframes br-tremula-forte{0%,100%{transform:skewX(0) scaleY(1)}20%{transform:skewX(3.4deg) scaleY(1.012)}50%{transform:skewX(-2.6deg) scaleY(.994)}78%{transform:skewX(1.6deg) scaleY(1.004)}}
@keyframes br-brilho-uma{0%{transform:translateX(0);opacity:0}15%{opacity:.4}85%{opacity:.4}100%{transform:translateX(140px);opacity:0}}


.br-dica{position:absolute;left:0;top:calc(100% + 8px);z-index:8;width:max-content;max-width:240px;padding:8px 10px;border-radius:6px;background:var(--ink);color:var(--papel);font-size:12px;line-height:1.4;opacity:0;visibility:hidden;transition:opacity .15s ease,visibility .15s;pointer-events:none;user-select:none}
.br-link:hover .br-dica,.br-link:focus-visible .br-dica{opacity:1;visibility:visible}
@media (hover:none){.br-link .br-dica{display:none}}
@media (max-width:760px){
  .br-dica{top:auto;bottom:calc(100% + 8px)}
}


.lvlband .br-link .brasao{width:60px;height:70px}
@media (min-width:761px){
  .lvlband .br-link .brasao{width:52px;height:61px}
}