/* Link do topo (PRIVACIDADE, TERMOS, TUTORIAL) — texto discreto que acende, com
   o traço laranja afinando para a direita, como o sublinhado de "MASTER THE
   MOVEMENT" no banner. Arquivo independente.
   Estados: :hover, :focus-visible, [aria-current="page"] (a página em que se está).

   <a class="bv-link" href="./termos.html">
     <svg viewBox="0 0 24 24" aria-hidden="true">…</svg>Termos
   </a> */
.bv-link {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 2px; border: 0; background: none; color: #8c9099; cursor: pointer;
  font: 600 10px/1 "Segoe UI", system-ui, sans-serif;
  letter-spacing: .22em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: color .16s;
}
.bv-link svg {
  width: 14px; height: 14px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .16s;
}
.bv-link::after {
  content: ""; position: absolute; left: 0; right: .22em; bottom: 1px; height: 3px;
  background: linear-gradient(90deg, #ffb000, #ff7400);
  clip-path: polygon(0 0, 100% 40%, 100% 60%, 0 100%);
  transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
.bv-link:hover, .bv-link:focus-visible, .bv-link[aria-current="page"] { color: #f4f5f7; }
.bv-link:hover svg, .bv-link:focus-visible svg, .bv-link[aria-current="page"] svg { stroke: #ffb000; }
.bv-link:hover::after, .bv-link:focus-visible::after, .bv-link[aria-current="page"]::after { transform: scaleX(1); }
.bv-link:focus-visible { outline: 1px dashed #ffb00099; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .bv-link::after { transition: none; } }
/* O display acima venceria o [hidden] do navegador. */
.bv-link[hidden] { display: none; }