.social-float-menu {
  position: fixed;
  bottom: 0px; /* Pegado al borde inferior en web */
  right: 0px;  /* Pegado a la orilla derecha en web */
  z-index: 9999;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 8px;
}

.social-float-toggle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0f4c81, #1a73e8);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: transform .3s ease, box-shadow .3s ease;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  flex-shrink: 0;
}

.social-float-toggle:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.3);
}

.social-float-toggle .icon-open { display:block; }
.social-float-toggle .icon-close { display:none; }

.social-float-menu.open .social-float-toggle .icon-open { display:none; }
.social-float-menu.open .social-float-toggle .icon-close { display:block; }

.social-float-menu.open .social-float-toggle:hover .social-tooltip{
  opacity:0;
  transform:translateY(-50%) scale(0);
}

/* =============================== */

.social-float-items{
  display:flex;
  flex-direction:column-reverse;
  align-items:center;
  gap:8px;
  overflow:hidden;
  max-height:0;
  opacity:0;
  transition:max-height .4s ease, opacity .3s ease;
  padding:0 10px;
}

.social-float-menu.open .social-float-items{
  max-height:340px;
  opacity:1;
  overflow:visible;
}

.social-float-btn{
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  transform:translateY(10px);
  opacity:0;
  transition:transform .3s ease, opacity .3s ease;
}

.social-float-menu.open .social-float-btn{
  transform:translateY(0);
  opacity:1;
}

.social-float-menu.open .social-float-btn:nth-child(1){transition-delay:.05s;}
.social-float-menu.open .social-float-btn:nth-child(2){transition-delay:.10s;}
.social-float-menu.open .social-float-btn:nth-child(3){transition-delay:.15s;}
.social-float-menu.open .social-float-btn:nth-child(4){transition-delay:.20s;}
.social-float-menu.open .social-float-btn:nth-child(5){transition-delay:.25s;}

/* =============================== */

.social-float-btn .icon-circle{
  display:flex;
  justify-content:center;
  align-items:center;
  width:40px;
  height:40px;
  border-radius:50%;
  font-size:1.1rem;
  color:#fff;
  box-shadow:0 3px 10px rgba(0,0,0,.15);
  transition:transform .3s ease, box-shadow .3s ease;
  box-sizing:border-box;
  flex-shrink:0;
}

/* Colores */

.social-float-btn.facebook .icon-circle{
  background:#1877F2;
}

.social-float-btn.instagram .icon-circle{
  background:linear-gradient(
    45deg,
    #f09433 0%,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888 100%
  );
}

.social-float-btn.tiktok .icon-circle{
  background:#010101;
}

.social-float-btn.youtube .icon-circle{
  background:#FF0000;
}

.social-float-btn.whatsapp .icon-circle{
  background:#25D366;
}

/* ===============================
   EFECTO HOVER
   =============================== */

.social-float-btn:hover .icon-circle{
  transform:scale(1.12);
}

/* Facebook */

.social-float-btn.facebook:hover .icon-circle{
  box-shadow:
    -2px -2px 0 #7cb8ff,
     2px  2px 0 #005eff;
}

/* Instagram */

.social-float-btn.instagram:hover .icon-circle{
  box-shadow:
    -2px -2px 0 #ffb347,
     2px  2px 0 #bc1888;
}

/* TikTok */

.social-float-btn.tiktok:hover .icon-circle{
  box-shadow:
    -2px -2px 0 #fe2c55,
     2px  2px 0 #25f4ee;
}

/* YouTube */

.social-float-btn.youtube:hover .icon-circle{
  box-shadow:
    -2px -2px 0 #ff7b7b,
     2px  2px 0 #ff0000;
}

/* WhatsApp */

.social-float-btn.whatsapp:hover .icon-circle{
  box-shadow:
    -2px -2px 0 #8cffb7,
     2px  2px 0 #00b341;
}

/* =============================== */

.social-float-btn .social-tooltip,
.social-float-toggle .social-tooltip{
  position:absolute;
  padding:5px 12px;
  white-space:nowrap;
  right:125%;
  top:50%;
  transform:translateY(-50%) scale(0);
  transform-origin:right center;
  font-family:'Montserrat',sans-serif;
  font-size:.75rem;
  font-weight:500;
  border-radius:50px;
  color:#fff;
  opacity:0;
  z-index:1;
  box-shadow:0 3px 8px rgba(0,0,0,.15);
  transition:all .4s cubic-bezier(.68,-.55,.265,1.55);
}

.social-float-toggle .social-tooltip{
  background:#0f4c81;
}

.social-float-btn.facebook .social-tooltip{
  background:#145dbf;
}

.social-float-btn.instagram .social-tooltip{
  background:#b31078;
}

.social-float-btn.tiktok .social-tooltip{
  background:#010101;
}

.social-float-btn.youtube .social-tooltip{
  background:#c40000;
}

.social-float-btn.whatsapp .social-tooltip{
  background:#128C7E;
}

.social-float-btn:hover .social-tooltip,
.social-float-toggle:hover .social-tooltip{
  opacity:1;
  transform:translateY(-50%) scale(1);
}

/* =============================== */

@media (max-width: 768px) {
  .social-float-menu {
    bottom: 0px !important; /* Pegado al ras inferior, igual que en web/PC */
    right: 0px !important;  /* Pegado a la orilla derecha, igual que en web/PC */
    gap: 6px !important;    /* Espaciado más compacto entre botones del menú */
  }

  /* Hacemos el botón principal más pequeño en móvil */
  .social-float-toggle {
    width: 40px !important;  /* Reducido de 48px a 40px */
    height: 40px !important; /* Reducido de 48px a 40px */
    font-size: 1rem !important; /* Icono un poco más chico para que no se desborde */
  }

  /* Hacemos los botones desplegables del menú aún más pequeños */
  .social-float-btn .icon-circle {
    width: 34px !important;  /* Reducido de 40px a 34px */
    height: 34px !important; /* Reducido de 40px a 34px */
    font-size: 0.95rem !important;
  }
}