/* ==========================================================================
   08 · BOTÓN FLOTANTE DE WHATSAPP
   ========================================================================== */

.mp-wa-flotante {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9990;
	display: inline-flex;
	align-items: center;
	gap: 0;
	height: 60px;
	padding: 0 16px;
	border-radius: 30px;
	background: var(--mp-verde);
	color: var(--mp-negro) !important;
	font-family: var(--mp-f-ui);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .5), 0 0 0 3px var(--mp-negro);
	transition: gap .25s ease, padding .25s ease, transform var(--mp-trans), background var(--mp-trans);
}
.mp-wa-flotante svg {
	width: 28px;
	height: 28px;
	flex: none;
}
.mp-wa-flotante__texto {
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	transition: max-width .3s ease;
}
.mp-wa-flotante:hover,
.mp-wa-flotante:focus-visible {
	gap: 10px;
	padding: 0 22px 0 16px;
	background: var(--mp-verde-hover);
	transform: translateY(-2px);
}
.mp-wa-flotante:hover .mp-wa-flotante__texto,
.mp-wa-flotante:focus-visible .mp-wa-flotante__texto { max-width: 220px; }

/* Pulso para llamar la atención (se detiene al pasar el mouse) */
.mp-wa-flotante::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 0 0 0 rgba(11, 219, 45, .55);
	animation: mp-pulso 2.6s ease-out infinite;
	pointer-events: none;
}
.mp-wa-flotante:hover::before { animation: none; }
@keyframes mp-pulso {
	0%   { box-shadow: 0 0 0 0 rgba(11, 219, 45, .55); }
	70%  { box-shadow: 0 0 0 16px rgba(11, 219, 45, 0); }
	100% { box-shadow: 0 0 0 0 rgba(11, 219, 45, 0); }
}

/* Que no tape la barra fija de "agregar al carro" de Astra ni el botón "subir" */
.mp-tema.ast-sticky-add-to-cart-active .mp-wa-flotante,
.mp-tema .ast-sticky-add-to-cart.is-active ~ .mp-wa-flotante { bottom: 92px; }
.mp-tema #ast-scroll-top { right: 20px; bottom: 92px; background: var(--mp-superficie-2); color: var(--mp-verde); }

@media (max-width: 544px) {
	.mp-wa-flotante { right: 14px; bottom: 14px; height: 56px; padding: 0 14px; }
	.mp-wa-flotante svg { width: 28px; height: 28px; }
	.mp-tema #ast-scroll-top { right: 18px; bottom: 82px; }
}

@media print {
	.mp-wa-flotante { display: none; }
}