/* =========================================================
   BACK TO TOP (shared)
========================================================= */

.back-to-top{
  position: fixed;
  top: 18px;              /* ✅ parte superior */
  right: 18px;            /* ✅ lateral derecho */
  z-index: 9999;

  width: 46px;
  height: 46px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  background: rgba(47, 93, 90, 0.25); /* ✅ color pedido */
  border: 1px solid rgba(47, 93, 90, 0.28);

  box-shadow: 0 10px 24px rgba(0,0,0,0.14);
  backdrop-filter: blur(6px);

  cursor: pointer;
  text-decoration: none;

  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;

  transition:
    opacity 260ms ease,
    transform 260ms ease,
    background 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease;
}

/* visible cuando hay scroll */
.back-to-top.is-visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* hover suave */
.back-to-top:hover{
  background: rgba(47, 93, 90, 0.38);
  border-color: rgba(47, 93, 90, 0.40);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.18);
}

/* focus accesible */
.back-to-top:focus-visible{
  outline: none;
  box-shadow:
    0 14px 30px rgba(0,0,0,0.18),
    0 0 0 4px rgba(47, 93, 90, 0.25);
}

/* ícono flecha */
.back-to-top i{
  color: rgba(47, 93, 90, 1);
  font-size: 18px;
  transition: transform 220ms ease;
}

/* mini “bounce” en hover */
.back-to-top:hover i{
  transform: translateY(-2px);
}

/* mobile: un poco más chico */
@media (max-width: 600px){
  .back-to-top{
    top: 14px;
    right: 14px;
    width: 42px;
    height: 42px;
  }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .back-to-top,
  .back-to-top i{
    transition: none !important;
  }
}