/* ==================================================
   MOLECULE: WHATSAPP FLOAT
================================================== */

/* 106px = los 20px de base del #backtotop del modulo back_to_top, mas sus 70px
   de alto, mas 16px de separacion. Si cambia el tamano de ese boton, cambia esto. */
.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 106px;
  z-index: 301;

  width: 56px;
  height: 56px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Verde de marca de WhatsApp: no es un color del tema y no debe tokenizarse. */
  background: #25d366;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgb(0 0 0 / 25%);

  color: white;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.whatsapp-float .bi {
  font-size: 30px;
  line-height: 1;
}

.whatsapp-float:hover,
.whatsapp-float:focus {
  background: #1da851;
  color: white;
  transform: scale(1.05);
}

.whatsapp-float:focus-visible {
  outline: 2px solid white;
  outline-offset: 2px;
}

/* DESKTOP */
@media (min-width: 1025px) {
  .whatsapp-float {
    width: 64px;
    height: 64px;
  }

  .whatsapp-float .bi {
    font-size: 34px;
  }
}