.float{
	position: fixed;
	width: 60px;
	height: 60px;
	bottom: 40px;
	left: 40px;   /* 👈 AQUÍ está la solución */
	/* right: 40px;  <-- eliminar */
	
	background-color: #25d366;
	color: #FFF;
	border-radius: 50px;
	text-align: center;
	font-size: 30px;
	box-shadow: 2px 2px 3px #999;
	z-index: 100;
}

.float:hover {
	text-decoration: none;
	color: #25d366;
	background-color: #fff;
}

.my-float{
	margin-top: 16px;
}




/*Estilos con animation contorno respirando*/ @keyframes breathe { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); } 70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); } } /*Estilos de animacion del icono latiendo*/ @keyframes beat { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }




/* Animación respiración */
@keyframes breathe {
	0% {
		box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
	}
	70% {
		box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}
}

/* Animación latido */
@keyframes beat {
	0% { transform: scale(1); }
	50% { transform: scale(1.2); }
	100% { transform: scale(1); }
}

/* 📱 Mobile: pasa a la derecha */
@media (max-width: 768px) {
	.whatsapp-float {
		left: auto;
		right: 20px;
	}
}