.boton-flotante {
  position: fixed;
  bottom: 30px;
  right: 10px !important;
  background-color: rgba(28, 28, 30, 0.7);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  color: #ffffff !important;
  text-decoration: none;
  
  /* 1. Definimos un tamaño fijo igual para ancho y alto */
  width: 60px !important;
  height: 60px !important;
  
  /* 2. Quitamos el padding que lo deforma */
  padding: 0 !important;
  
  /* 3. Hacemos que sea un círculo perfecto */
  border-radius: 50% !important;
  
  /* 4. Centrado perfecto con Flexbox */
  display: flex !important;
  justify-content: center; /* Centra horizontal */
  align-items: center;     /* Centra vertical */
  
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  z-index: 9999;
}

.boton-flotante i {
  /*definimos el tamaño del dibujo del icono */
  font-size: 30px;
  margin: 0;
  padding: 0;
}

.boton-flotante:hover {
  background-color: rgba(28, 28, 30, 0.85);
  transform: scale(1.04);
}