/* ==========================================================================
   BOTÃO FLUTUANTE — atalho fixo no canto inferior
   Prefixo: fab-
   Tokens usados: --accent --dark --light-2 --ease
   ========================================================================== */

.fab{
  position:fixed;right:22px;bottom:22px;z-index:90;
  width:52px;height:52px;border-radius:50%;
  background:var(--accent);color:var(--dark);
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s var(--ease),background .25s;
}
/* Cresce 8% no hover — o suficiente para responder ao mouse sem sair do
   lugar. z-index 90 fica abaixo do menu (100) e do drawer (200): com o
   drawer aberto o botão não pode flutuar por cima do menu. */
.fab:hover{transform:scale(1.08);background:var(--light-2)}

@media(prefers-reduced-motion:reduce){
  .fab{transition:background .25s}
  .fab:hover{transform:none}
}

/* Em tela pequena o botão encosta mais na borda e encolhe um pouco: 52px no
   canto de um celular cobre conteúdo real. */
@media(max-width:560px){
  .fab{right:16px;bottom:16px;width:46px;height:46px}
  .fab svg{width:22px;height:22px}
}