/*
 * voltar-topo.css — botão flutuante "Voltar ao topo" (change botao-voltar-topo-20261021).
 * Carregado depois de styles.css e outubro-rosa.css: as variáveis --rb-* já mudam sozinhas no tema Outubro Rosa.
 * Reversível: remover este <link>, js/voltar-topo.js e o botão .rb-topo das duas páginas.
 */

/* pilha do canto inferior direito: topo acima do WhatsApp, alinhados à direita (vence o items-center do Tailwind pela ordem) */
.rb-fab-stack { display: flex; flex-direction: column; align-items: flex-end; gap: .75rem; }
/* privacidade.html não tem o WhatsApp flutuante: o botão ganha o próprio contêiner fixo */
.rb-fab-solo { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 50; }

.rb-topo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0; margin: 0; cursor: pointer;
  border-radius: 50%;
  background: rgb(var(--rb-olive));
  border: 1px solid rgb(var(--rb-gold) / .4);
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .45);
  /* oculto: sai da tabulação e do leitor de tela (visibility) e não captura toque (pointer-events) */
  opacity: 0; visibility: hidden; transform: translateY(8px); pointer-events: none;
  transition: opacity .25s, transform .25s, visibility .25s, background-color .25s;
}
.rb-topo svg { stroke: rgb(var(--rb-gold)); }
html.outubro-rosa .rb-topo svg { stroke: #F29BBB; } /* contraste sobre o bordô */

.rb-topo.is-visible { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }

.rb-topo:hover { background: rgb(var(--rb-deep)); }
.rb-topo:focus-visible { outline: 2px solid rgb(var(--rb-gold)); outline-offset: 3px; background: rgb(var(--rb-deep)); }

/* P24: no topo da home o WhatsApp flutuante some (o hero já tem o botão de WhatsApp); só o JS aplica a classe, sem JS fica visível */
.rb-fab-stack.rb-fab-oculto > a { opacity: 0; visibility: hidden; transform: translateY(8px); pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .rb-topo, .rb-fab-stack > a { transition: none; }
}