/* Botão LOJA — placa inclinada no degradê âmbar → laranja do V do banner.
   Arquivo independente: não usa variável nem classe de outro arquivo.
   Estados: :hover, .aberto (painel aberto), :active, :focus-visible, :disabled.

   <button type="button" class="bv-loja">
     <svg viewBox="0 0 24 24" aria-hidden="true">…</svg>Loja
   </button> */
.bv-loja {
  --bv-inclinacao: -12deg;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 32px; padding: 0 calc(20px - .2em) 0 20px;   /* desconta o espaço que o letter-spacing deixa depois da última letra */
  border: 0; background: none; color: #1a0f00; cursor: pointer;
  font: 700 11px/1 "Segoe UI", system-ui, sans-serif;
  letter-spacing: .2em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
/* A placa e o reflexo ficam em pseudo-elementos inclinados: o texto continua reto. */
.bv-loja::before, .bv-loja::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  transform: skewX(var(--bv-inclinacao)); border-radius: 2px;
}
.bv-loja::before {
  background: linear-gradient(100deg, #ffdc4d 0%, #ffb000 42%, #ff7400 100%);
  box-shadow: inset 0 1px 0 #ffffff80, inset 0 -2px 0 #00000026, 0 2px 10px #ff7a0033;
  transition: filter .16s, box-shadow .16s;
}
/* Reflexo que atravessa a placa quando o mouse chega. */
.bv-loja::after {
  background: linear-gradient(100deg, transparent 35%, #ffffff8c 50%, transparent 65%) 160% 0 / 250% 100% no-repeat;
  opacity: 0; transition: opacity .2s;
}
.bv-loja svg {
  width: 14px; height: 14px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.bv-loja:hover:not(:disabled)::before, .bv-loja.aberto::before {
  filter: brightness(1.08) saturate(1.1);
  box-shadow: inset 0 1px 0 #ffffffa0, inset 0 -2px 0 #00000026, 0 0 22px #ff8a0073;
}
.bv-loja:hover:not(:disabled)::after { opacity: 1; background-position: -60% 0; transition: opacity .2s, background-position .6s ease; }
.bv-loja:active:not(:disabled) { transform: translateY(1px); }
.bv-loja:focus-visible { outline: none; }
.bv-loja:focus-visible::before { box-shadow: inset 0 1px 0 #ffffff80, 0 0 0 2px #07080b, 0 0 0 4px #ffd84a; }
.bv-loja:disabled { color: #1a0f0099; cursor: not-allowed; }
.bv-loja:disabled::before { filter: grayscale(.85) brightness(.65); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .bv-loja::after { display: none; } }
/* O display acima venceria o [hidden] do navegador. */
.bv-loja[hidden] { display: none; }
.bv-loja--apoiar svg { fill: #d91f36; stroke: #d91f36; }
/* Verde (Jogar agora) e de contorno (Entrar, Adicionar, atualizar): o mesmo
   formato, com as cores de cada ação. */
.bv-loja--verde { color: #04210f; }
.bv-loja--verde::before { background: linear-gradient(100deg, #6af59a 0%, #22c55e 45%, #12803a 100%); box-shadow: inset 0 1px 0 #ffffff70, inset 0 -2px 0 #00000026, 0 2px 10px #22c55e33; }
.bv-loja--verde:hover:not(:disabled)::before { box-shadow: inset 0 1px 0 #ffffffa0, inset 0 -2px 0 #00000026, 0 0 22px #22c55e73; }
.bv-loja--contorno, .bv-loja--contorno-verde { --bv-cor: #ffb000; color: var(--bv-cor); }
.bv-loja--contorno-verde { --bv-cor: #4ade80; }
.bv-loja--contorno::before, .bv-loja--contorno-verde::before { background: color-mix(in srgb, var(--bv-cor) 10%, transparent); box-shadow: inset 0 0 0 1px var(--bv-cor); }
.bv-loja--contorno:hover:not(:disabled), .bv-loja--contorno-verde:hover:not(:disabled) { color: #120c02; }
.bv-loja--contorno:hover:not(:disabled)::before, .bv-loja--contorno-verde:hover:not(:disabled)::before { background: var(--bv-cor); box-shadow: inset 0 0 0 1px var(--bv-cor), 0 0 18px color-mix(in srgb, var(--bv-cor) 45%, transparent); }
/* Sair da conta: o mesmo botão, em vermelho, com as mesmas animações. */
.bv-loja--sair { color: #fff; text-shadow: 0 1px 2px #0005; }
.bv-loja--sair::before { background: linear-gradient(100deg, #ff6a55 0%, #e8262c 45%, #a5101e 100%); box-shadow: inset 0 1px 0 #ffffff70, inset 0 -2px 0 #00000033, 0 2px 10px #e8262c33; }
.bv-loja--sair:hover:not(:disabled)::before { box-shadow: inset 0 1px 0 #ffffffa0, inset 0 -2px 0 #00000033, 0 0 22px #ff3b3b73; }
.bv-loja--sair:focus-visible::before { box-shadow: inset 0 1px 0 #ffffff80, 0 0 0 2px #07080b, 0 0 0 4px #ff6b6b; }