.fsr-floating{
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fsr-btn{
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  text-decoration: none !important;
  transition: transform .15s ease, box-shadow .15s ease;
  position: relative;
}

.fsr-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
}

.fsr-btn svg{
  width: 26px;
  height: 26px;
  fill: #fff;
}

.fsr-fb{ background: #1877F2; }
.fsr-wa{ background: #25D366; }

/* Tooltip */
.fsr-btn[data-fsr-tooltip]::after{
  content: attr(data-fsr-tooltip);
  position: absolute;
  right: 62px; /* aparece hacia la izquierda del botón */
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,.85);
  color: #fff;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
  pointer-events: none;
}

.fsr-btn[data-fsr-tooltip]::before{
  content: "";
  position: absolute;
  right: 56px;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-left-color: rgba(0,0,0,.85);
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease, visibility .15s ease;
  pointer-events: none;
}

.fsr-btn:hover[data-fsr-tooltip]::after{
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(-2px);
}

.fsr-btn:hover[data-fsr-tooltip]::before{
  opacity: 1;
  visibility: visible;
}

/* En móvil, un poquito más pequeño + sin tooltip */
@media (max-width: 480px){
  .fsr-floating{ right: 12px; }
  .fsr-btn{ width: 46px; height: 46px; }
  .fsr-btn svg{ width: 24px; height: 24px; }
  .fsr-btn[data-fsr-tooltip]::after,
  .fsr-btn[data-fsr-tooltip]::before{
    display: none;
  }
}