.float-button {
    position: fixed; /* Fija el botón en la pantalla */
    bottom: 20px;    /* A 20px del borde inferior */
    right: 20px;     /* A 20px del borde derecho */
    background-color: #FFC107; /* Color de fondo amarillo */
    color: rgb(37, 37, 37);    /* Color del texto/ícono blanco */
    border-radius: 30px; /* Bordes redondeados para un botón tipo píldora */
    /* width: 60px; Elimina o ajusta si hay texto */
    height: 60px;    /* Altura del botón */
    padding: 0 20px; /* Relleno horizontal para que el texto tenga espacio */
    display: flex;   /* Usa Flexbox para centrar contenido */
    justify-content: center; /* Centra horizontalmente el contenido */
    align-items: center;     /* Centra verticalmente el contenido */
    font-size: 16px; /* Tamaño de fuente para el texto del botón */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para darle profundidad */
    z-index: 1000;   /* Asegura que el botón esté por encima de otros elementos */
    transition: background-color 0.3s ease; /* Transición suave para el efecto hover */
    text-decoration: none; /* Elimina el subrayado del enlace */
}

.float-button i {
    margin-right: 8px; /* Espacio entre el ícono y el texto */
}

.float-button:hover {
    background-color: #e0a800; /* Tono más oscuro al pasar el ratón */
    color: rgb(37, 37, 37);  /* Mantiene el color del texto blanco al pasar el ratón */
    text-decoration: none; /* Asegura que no aparezca subrayado al pasar el ratón */
}