/* === Botón flotante de WhatsApp con sello de texto giratorio (reservas) === */
.wa-float {
	position: fixed;
	right: clamp(12px, 3vw, 22px);
	bottom: clamp(12px, 3vw, 22px);
	z-index: 9990;
	display: grid;
	place-items: center;
	width: 116px;
	height: 116px;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

/* Icono central (círculo verde WhatsApp) */
.wa-float__btn {
	grid-area: 1 / 1;
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: #25d366;
	color: #fff;
	box-shadow: 0 8px 22px rgba(18, 140, 80, .4);
	transition: transform .2s var(--ease-out, ease), box-shadow .2s ease;
	z-index: 1;
}

.wa-float:hover .wa-float__btn,
.wa-float:focus-visible .wa-float__btn {
	transform: scale(1.06);
	box-shadow: 0 10px 28px rgba(18, 140, 80, .5);
}

/* Anillo de texto curvo que gira */
.wa-float__ring {
	grid-area: 1 / 1;
	width: 116px;
	height: 116px;
	overflow: hidden;           /* el texto curvo no debe exceder la caja (evita desborde a la derecha) */
	transform-origin: 50% 50%;
	animation: wa-ring-spin 11s linear infinite;
}

.wa-float__ring text {
	font-family: var(--font-text, system-ui, sans-serif);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	fill: var(--color-accent, #007179);
}

/* Acelera al pasar el ratón / foco */
.wa-float:hover .wa-float__ring,
.wa-float:focus-visible .wa-float__ring {
	animation-duration: 4.5s;
}

.wa-float:focus-visible {
	outline: 3px solid var(--color-accent, #007179);
	outline-offset: 2px;
	border-radius: 50%;
}

@keyframes wa-ring-spin {
	to { transform: rotate(360deg); }
}

/* Accesibilidad: sin giro si el usuario prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
	.wa-float__ring { animation: none; }
}

/* === Convivencia con el banner de cookies (Complianz) ===
   En móvil el banner ocupa la parte inferior a todo el ancho y el botón
   flotante queda justo encima de "Aceptar/Denegar". Mientras el banner de
   consentimiento esté visible, escondemos el botón; reaparece al decidir. */
.wa-float {
	transition: transform .25s var(--ease-out, ease), box-shadow .2s ease,
		opacity .25s ease, visibility .25s;
}

@media (max-width: 782px) {
	body:has(#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show) .wa-float {
		opacity: 0;
		visibility: hidden;
		transform: scale(.6) translateY(8px);
		pointer-events: none;
	}
}

/* Con el menú móvil abierto, ocultar el botón flotante (no debe tapar el panel ni interceptar clics). */
body.nav-open .wa-float {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* Oculta visualmente el texto del enlace pero accesible a lectores */
.wa-float .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}