/**
 * Botón WhatsApp PRO versión coherente
 */

/* ========================= */
/* BOTÓN                     */
/* ========================= */

.btn-whatsapp {
	position: fixed;
	bottom: 20px;
	left: 20px;
	z-index: 999;
	display: inline-block;
}

/* Imagen */
.btn-whatsapp img {
	position: relative;
	width: 60px;
	height: 60px;
	border-radius: 20%;
	box-shadow: 0 8px 20px rgba(0,0,0,0.25);
	transition: transform 0.3s ease;
	z-index: 2;
}

/* Hover */
.btn-whatsapp:hover img {
	transform: scale(1.1);
}

/* Onda moderna */
.btn-whatsapp::before,
.btn-whatsapp::after {
	content: "";
	position: absolute;
	top: 5px;
	left: 5px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: rgba(37, 211, 102, 0.4);
	animation: wave 2s infinite;
	z-index: 1;
}

.btn-whatsapp::after {
	animation-delay: 1s;
}

@keyframes wave {
	0% {
		transform: scale(1);
		opacity: 0.6;
	}
	100% {
		transform: scale(2.4);
		opacity: 0;
	}
}

/* ========================= */
/* BADGE NOTIFICACIÓN        */
/* ========================= */

.wa-badge {
	position: absolute;
	top: -2px;
	right: -2px;
	background: #ff3b30;
	color: #fff;
	font-size: 11px;
	font-weight: bold;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 2px #fff;
	animation: badgePop 1.5s infinite;
	z-index: 3;
}

@keyframes badgePop {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.2);
	}
}

/* ========================= */
/* MENSAJE BURBUJA           */
/* ========================= */
.whatsapp-msg {
	position: fixed;
	bottom: 35px;
	left: 95px;
	background: #ffffff;
	color: #333;
	padding: 12px 18px;
	border-radius: 25px;
	font-size: 14px;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 10px;

	/* NUEVO CONTORNO */
	border: 1px solid #e0e0e0;

	/* SOMBRA MEJORADA */
	box-shadow: 0 10px 30px rgba(0,0,0,0.12);

	animation: fadeInUp 0.6s ease forwards, subtleFloat 3s ease-in-out infinite;
	opacity: 0;
	z-index: 998;
}

/* Flecha burbuja con borde */
.whatsapp-msg::before {
	content: "";
	position: absolute;
	left: -8px;
	bottom: 18px;
	width: 14px;
	height: 14px;
	background: #ffffff;
	transform: rotate(45deg);

	/* Borde gris también */
	border-left: 1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0;
}
/* Botón cerrar */
.whatsapp-msg button {
	background: #f1f1f1;
	border: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 12px;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.3s ease, transform 0.2s ease;
}

.whatsapp-msg button:hover {
	background: #e0e0e0;
	transform: scale(1.1);
}

/* Animaciones */
@keyframes fadeInUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
	from {
		transform: translateY(15px);
	}
}

@keyframes subtleFloat {
	0%,100% { transform: translateY(0); }
	50% { transform: translateY(-4px); }
}