/* ===============================
   BOTÓN FLOTANTE PRO
=============================== */

.float-contact{
  position:fixed;
  right:25px;
  bottom:25px;
  z-index:9999;
}

/* BOTÓN PRINCIPAL */
.float-main{
  width:60px;
  height:60px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  font-size:22px;
  color:#fff;
  background:linear-gradient(135deg,#25D366,#128C7E);
  box-shadow:0 10px 25px rgba(0,0,0,0.3);
  transition:.3s;
}

.float-main:hover{
  transform:scale(1.1);
}

/* ITEMS */
.float-item{
  position:absolute;
  right:0;
  width:52px;
  height:52px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  text-decoration:none;
  font-size:18px;
  opacity:0;
  pointer-events:none;
  transition:.35s ease;
  box-shadow:0 8px 20px rgba(0,0,0,0.25);
}

/* texto */
.float-item span{
  position:absolute;
  right:65px;
  background:#111;
  padding:6px 10px;
  border-radius:6px;
  font-size:12px;
  white-space:nowrap;
  opacity:0;
  transform:translateX(10px);
  transition:.25s;
}

/* mostrar texto */
.float-item:hover span{
  opacity:1;
  transform:translateX(0);
}

/* COLORES */
.whatsapp{ background:#25D366; }
.call{ background:#007bff; }
.mail{ background:#ff3b3b; }

/* CUANDO ABRE */
.float-contact.open .whatsapp{
  transform:translateY(-90px);
  opacity:1;
  pointer-events:auto;
}

.float-contact.open .call{
  transform:translateY(-180px);
  opacity:1;
  pointer-events:auto;
}

.float-contact.open .mail{
  transform:translateY(-270px);
  opacity:1;
  pointer-events:auto;
}