/* ═══════════════════════════════════════════════════════════
   components/back-to-top.css — Botão flutuante "voltar ao topo"
   Dolce Olive

   Fica escondido no Desktop. Só aparece no Mobile (<=768px), e
   mesmo assim só depois que o usuário rola a página um pouco —
   controlado pela classe .visivel, adicionada via /js/back-to-top.js.
═══════════════════════════════════════════════════════════ */

.btn-voltar-topo {
  display: none;
}

@media (max-width: 768px) {
  .btn-voltar-topo {
    display: flex;
    align-items: center;
    justify-content: center;

    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 999;

    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--primary);
    color: var(--secondary);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);

    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity var(--tr), transform var(--tr);
  }

  .btn-voltar-topo svg {
    width: 20px;
    height: 20px;
  }

  .btn-voltar-topo.visivel {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}