/* Botões flutuantes padrão Pepper (v1): WhatsApp verde + seta "voltar ao topo".
   Módulo único, igual no site esteticapepper.com.br e nas landings (AURA e Protocolo Capilar).
   Prefixo .bf para não colidir com o CSS da página. Cada página pode ajustar a posição com --bf-base
   (distância do canto de baixo; ex.: subir quando há uma barra fixa no rodapé do celular). Se a página não definir, usa o padrão. */

.bf {
  --bf-lado: clamp(1rem, 3vw, 1.6rem);
  position: fixed;
  right: var(--bf-lado);
  bottom: var(--bf-base, clamp(1rem, 3vw, 1.6rem));
  z-index: 96;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  pointer-events: none;
}
.bf > * { pointer-events: auto; }

/* WhatsApp: verde da marca do WhatsApp, anel branco e sombra verde leve (sem mancha cinza em fundo claro) */
.bf__zap { position: relative; display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: #25d366; color: #fff; text-decoration: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.95), 0 6px 14px -6px rgba(18, 140, 70, 0.55); transition: transform 0.2s ease; }
.bf__zap:hover { transform: scale(1.07); }
.bf__zap svg { width: 1.8rem; height: 1.8rem; fill: currentColor; }
.bf__dica { position: absolute; right: 4.4rem; top: 50%; padding: 0.45rem 0.9rem; border-radius: 999px; background: #fff; color: #1f3241; border: 1px solid rgba(31, 50, 65, 0.16); font: 600 0.85rem/1.2 inherit; font-family: inherit; white-space: nowrap; opacity: 0; transform: translate(8px, -50%); transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; }
.bf__zap:hover .bf__dica, .bf__zap:focus-visible .bf__dica { opacity: 1; transform: translate(0, -50%); }

/* Voltar ao topo: aparece depois de rolar um pouco */
.bf__topo { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%; background: #1f3241; color: #fff; text-decoration: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.95), 0 6px 14px -6px rgba(31, 50, 65, 0.55); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s, background-color 0.2s; }
.bf__topo.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.bf__topo:hover { background: #eb856c; color: #1f3241; }
.bf__topo svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.bf a:focus-visible { outline: 3px solid #eb856c; outline-offset: 4px; }
@media (max-width: 899px) { .bf__dica { display: none; } }
@media (prefers-reduced-motion: reduce) { .bf__zap, .bf__topo, .bf__dica { transition: none; } }