/* ═════════════════════════════════════════════
   Botón flotante ForAvant · 4 canales
   ───────────────────────────────────────────── */

.fa-float-wrap * { margin: 0; padding: 0; box-sizing: border-box; }

.fa-float-wrap {
  position: fixed; bottom: 28px; right: 28px; z-index: 9999;
  font-family: 'Poppins', system-ui, sans-serif;
}

.fa-float-main {
  width: 62px; height: 62px;
  background: linear-gradient(135deg, #0F253F 0%, #108995 100%);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 4px 22px rgba(15,37,63,.45);
  transition: transform .3s cubic-bezier(.68,-.55,.265,1.55), box-shadow .3s ease;
  position: relative;
}
.fa-float-main:hover { transform: scale(1.1); box-shadow: 0 6px 32px rgba(15,37,63,.6); }
.fa-float-main.active {
  background: linear-gradient(135deg, #108995 0%, #3DBBC8 100%);
  transform: rotate(45deg);
}
.fa-float-main svg {
  width: 30px; height: 30px; fill: #fff; transition: transform .3s ease;
}
.fa-float-main.active svg { transform: rotate(-45deg); }

.fa-float-badge {
  position: absolute; top: -3px; right: -3px;
  width: 18px; height: 18px; background: #3DBBC8;
  border-radius: 50%; border: 2px solid #fff;
  animation: fa-pulse 1.8s infinite;
}
@keyframes fa-pulse {
  0%,100% { transform: scale(1); opacity:1; }
  50% { transform: scale(1.3); opacity:.7; }
}

.fa-float-menu {
  position: absolute; bottom: 74px; right: 0;
  display: flex; flex-direction: column; gap: 11px;
  opacity: 0; visibility: hidden; transform: translateY(16px);
  transition: all .35s cubic-bezier(.68,-.55,.265,1.55); pointer-events: none;
}
.fa-float-menu.active {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}

.fa-float-btn {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; box-shadow: 0 4px 14px rgba(0,0,0,.22);
  transition: transform .25s ease, box-shadow .25s ease; position: relative;
}
.fa-float-btn:hover { transform: scale(1.14); }

.fa-float-btn.fa-fb-wa   { background: #25D366; }
.fa-float-btn.fa-fb-wa:hover { box-shadow: 0 6px 24px rgba(37,211,102,.55); }
.fa-float-btn.fa-fb-tg   { background: #0088cc; }
.fa-float-btn.fa-fb-tg:hover { box-shadow: 0 6px 24px rgba(0,136,204,.55); }
.fa-float-btn.fa-fb-mail { background: #108995; }
.fa-float-btn.fa-fb-mail:hover { box-shadow: 0 6px 24px rgba(16,137,149,.55); }
.fa-float-btn.fa-fb-tel  { background: #0F253F; }
.fa-float-btn.fa-fb-tel:hover { box-shadow: 0 6px 24px rgba(15,37,63,.55); }

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

.fa-float-tip {
  position: absolute; right: 62px; top: 50%; transform: translateY(-50%);
  background: rgba(15,37,63,.88); color: #fff; padding: 5px 11px;
  border-radius: 6px; font-size: 13px; font-weight: 500; white-space: nowrap;
  opacity: 0; visibility: hidden; transition: all .25s ease; pointer-events: none;
}
.fa-float-tip::after {
  content: ''; position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
  border: 5px solid transparent; border-left-color: rgba(15,37,63,.88);
}
.fa-float-btn:hover .fa-float-tip { opacity: 1; visibility: visible; right: 66px; }

@media (max-width: 768px) {
  .fa-float-wrap { bottom: 18px; right: 18px; }
  .fa-float-main { width: 56px; height: 56px; }
  .fa-float-main svg { width: 26px; height: 26px; }
  .fa-float-btn { width: 48px; height: 48px; }
  .fa-float-btn svg { width: 24px; height: 24px; }
  .fa-float-menu { bottom: 68px; }
}