/* Back to Top Button — WebApp (Minimalist) */

.back-to-top {
  position: fixed;
  /* Empilhado acima do botão flutuante de contato (24px base + 56px altura + 16px gap). */
  bottom: 96px;
  right: 24px;
  width: 44px;
  height: 44px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: var(--primary, var(--color-neutral-900));
  color: var(--color-surface-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease, visibility 0.3s ease, box-shadow 0.3s ease;
  z-index: 1049;
  box-shadow: var(--shadow-sm);
}

.back-to-top:hover {
  background: var(--primary-hover, var(--color-black));
  color: var(--color-surface-card);
  border-color: transparent;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}

.back-to-top-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
}

@media (max-width: 575.98px) {
  .back-to-top {
    display: none;
    width: 44px;
    height: 44px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
    right: 1rem;
    font-size: 0.875rem;
  }
}