/* O menu Ferramentas do topo (os links da lista levam .nav na frente para ganhar do .nav a, que vem depois), igual em todas as páginas (o site.css importa; a home, que tem o topo próprio, carrega direto).
   No computador, a lista cai do topo ao passar o mouse ou ao chegar pelo teclado; no toque e no celular, o link leva a /ferramentas. */
.nav-menu{position:relative;display:flex}
.nav-menu .nav-chev{width:9px;height:6px;margin-left:6px;vertical-align:1px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}
.nav-lista{position:absolute;top:calc(100% + 10px);left:50%;z-index:40;width:310px;padding:7px;border-radius:14px;border:1px solid var(--linha-forte);background:linear-gradient(180deg,#24131a,#140c0f);box-shadow:0 24px 60px -12px rgba(0,0,0,.8);
  opacity:0;visibility:hidden;transform:translate(-50%,-4px);transition:opacity .16s,transform .16s,visibility 0s linear .16s}
.nav-lista::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px} /* a ponte: o mouse desce do link até a lista sem ela fechar */
.nav .nav-lista a,.nav .nav-lista .breve{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border-radius:10px;white-space:normal;color:var(--texto-2)}
.nav .nav-lista a:hover,.nav .nav-lista a:focus-visible{background:rgba(207,166,96,.09);color:var(--texto);outline:none}
.nav-lista b{display:block;font-size:13px;font-weight:700;color:var(--texto)}
.nav-lista small{display:block;margin-top:2px;font-size:11.5px;font-weight:500;line-height:1.4;color:var(--mudo)}
.nav .nav-lista .breve{cursor:default;opacity:.55}
.nav-lista .breve b::after{content:"em breve";margin-left:8px;padding:1px 6px;border-radius:999px;border:1px solid var(--linha-forte);font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ouro);vertical-align:1px}
.nav .nav-lista .tudo{justify-content:center;margin-top:4px;padding:9px;border-top:1px solid var(--linha);border-radius:0 0 10px 10px;font-size:12px;font-weight:700;color:var(--ouro-cl)}
.ni{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:9px;color:var(--ouro);background:rgba(207,166,96,.1);border:1px solid var(--linha)}
.ni::before{content:"";width:17px;height:17px;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.ni-carta{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2.5' width='14' height='19' rx='2'/%3E%3Cellipse cx='12.5' cy='10' rx='4' ry='5'/%3E%3Cpath d='M8 18h8'/%3E%3C/svg%3E")}
.ni-scan{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8V5a1 1 0 0 1 1-1h3M16 4h3a1 1 0 0 1 1 1v3M20 16v3a1 1 0 0 1-1 1h-3M8 20H5a1 1 0 0 1-1-1v-3'/%3E%3Crect x='8.5' y='7' width='7' height='10' rx='1.2'/%3E%3C/svg%3E")}
.ni-mesa{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Ccircle cx='12' cy='3.5' r='1.6'/%3E%3Ccircle cx='20.1' cy='9.4' r='1.6'/%3E%3Ccircle cx='17' cy='19' r='1.6'/%3E%3Ccircle cx='7' cy='19' r='1.6'/%3E%3Ccircle cx='3.9' cy='9.4' r='1.6'/%3E%3C/svg%3E")}
.ni-torneio{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 21h8M12 16.5V21M7 3.5h10V9a5 5 0 0 1-10 0z'/%3E%3Cpath d='M7 5.5H4.5a3 3 0 0 0 2.9 4M17 5.5h2.5a3 3 0 0 1-2.9 4'/%3E%3C/svg%3E")} /* Torneio: o troféu */
@media (hover:hover) and (pointer:fine){
  .nav-menu:hover .nav-lista,.nav-menu:focus-within .nav-lista{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .16s,transform .16s}
  .nav-menu:hover .nav-chev,.nav-menu:focus-within .nav-chev{transform:rotate(180deg)}
}
@media (hover:none),(pointer:coarse){ .nav-lista,.nav-menu .nav-chev{display:none} }
@media (prefers-reduced-motion:reduce){ .nav-lista,.nav-menu .nav-chev{transition:none} }
@media (max-width:640px){
  .nav-menu{flex:none}
  .nav-lista,.nav-menu .nav-chev{display:none}
}
@media (max-width:420px){ body .nav > a,body .nav-menu > a{padding:7px 9px;font-size:12.5px} } /* os cinco itens do topo cabem numa linha no celular */