/* Floating social cluster — fixed bottom-left, sits above every page. */
.social-float {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 150;
}

/* Main WhatsApp button — unchanged behavior, still a direct one-tap link. */
.social-float__wa {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: var(--shadow);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.social-float__wa svg { width: 30px; height: 30px; }
.social-float__wa:hover { transform: scale(1.08); box-shadow: 0 28px 60px -24px rgba(0,0,0,0.6); }
.social-float__wa:active { transform: scale(0.96); }

/* Small trigger badge, corner of the WA button — the only thing that opens the fan. */
.social-float__trigger {
  position: absolute;
  left: 38px;
  bottom: 38px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--accent-ink);
  border: 2px solid var(--bg-2);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease);
}
.social-float__trigger svg { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease); }
.social-float__trigger:hover { transform: scale(1.1); }
.social-float[data-open="true"] .social-float__trigger svg { transform: rotate(45deg); }

/* Fanned-out items — Instagram / TikTok / Facebook, arcing up-right from the button. */
.social-float__fan { position: absolute; left: 0; bottom: 0; }
.social-float__item {
  position: absolute;
  left: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--text-2);
  opacity: 0;
  pointer-events: none;
  transform: translate(0, 0) scale(0.4);
  transition: transform var(--dur-med) var(--ease), opacity var(--dur-med) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.social-float__item svg { width: 20px; height: 20px; }
.social-float__item:hover { color: var(--accent); border-color: var(--accent); }

.social-float[data-open="true"] .social-float__item {
  opacity: 1;
  pointer-events: auto;
  transform: translate(0, 0) scale(1);
}
/* Arc positions: 15°, 50°, 85° off the button, radius ~84px. */
.social-float[data-open="true"] .social-float__item:nth-child(1) { transition-delay: 0ms;  transform: translate(83px, -15px) scale(1); }
.social-float[data-open="true"] .social-float__item:nth-child(2) { transition-delay: 40ms; transform: translate(54px, -64px) scale(1); }
.social-float[data-open="true"] .social-float__item:nth-child(3) { transition-delay: 80ms; transform: translate(0px, -84px) scale(1); }

@media (max-width: 600px) {
  .social-float__wa { width: 50px; height: 50px; }
  .social-float__wa svg { width: 26px; height: 26px; }
  .social-float__trigger { left: 34px; bottom: 34px; }
  .social-float__item { width: 40px; height: 40px; }
  .social-float[data-open="true"] .social-float__item:nth-child(1) { transform: translate(72px, -12px) scale(1); }
  .social-float[data-open="true"] .social-float__item:nth-child(2) { transform: translate(47px, -55px) scale(1); }
  .social-float[data-open="true"] .social-float__item:nth-child(3) { transform: translate(0px, -73px) scale(1); }
}

@media (max-width: 600px) {
  .social-float { left: 14px; bottom: 14px; }
}