/*
 * Boton flotante de WhatsApp (esquina inferior derecha, todas las paginas).
 * El marcado lo imprime respiravida_child_render_whatsapp_float() en functions.php.
 */

.rv-wa-float {
	position: fixed;
	right: 20px;
	bottom: 20px;
	/* Respeta la barra inferior de iPhone / gestos de Android. */
	right: max(20px, env(safe-area-inset-right));
	bottom: max(20px, env(safe-area-inset-bottom));
	z-index: 9990;
	display: inline-flex;
	align-items: center;
	gap: 0;
	height: 60px;
	min-width: 60px;
	padding: 0 15px;
	box-sizing: border-box;
	border-radius: 999px;
	background: var(--color-accent, #25D366);
	/* Icono azul marino: mejor contraste que blanco sobre el verde. */
	color: var(--color-primary, #1a2b4a);
	text-decoration: none;
	box-shadow: 0 6px 20px rgba(26, 43, 74, .28);
	transition: transform .15s ease, box-shadow .15s ease, gap .2s ease, padding .2s ease, opacity .25s ease;
}

/* Mientras la cuadricula de "Nuestros Servicios", una caja de CTA o el pie de
 * pagina estan a la vista, esos bloques ya traen su propio boton/enlace justo
 * en esta misma esquina. Para que no queden dos elementos superpuestos, este
 * se atenua y deja de recibir clics. Lo activa el script en functions.php
 * (respiravida_child_render_whatsapp_float). */
.rv-wa-float--dim {
	opacity: 0;
	pointer-events: none;
}

.rv-wa-float:hover,
.rv-wa-float:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 10px 26px rgba(26, 43, 74, .34);
	color: var(--color-primary, #1a2b4a);
}

.rv-wa-float:focus-visible {
	outline: 3px solid var(--color-primary, #1a2b4a);
	outline-offset: 3px;
}

.rv-wa-float__icon {
	flex: 0 0 auto;
}

/* Texto: oculto en pantallas chicas; en escritorio aparece al pasar el mouse. */
.rv-wa-float__label {
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	font-weight: 700;
	font-size: .95rem;
	opacity: 0;
	transition: max-width .25s ease, opacity .2s ease;
}

@media (min-width: 768px) {
	.rv-wa-float:hover,
	.rv-wa-float:focus-visible {
		gap: 10px;
		padding-right: 22px;
	}

	.rv-wa-float:hover .rv-wa-float__label,
	.rv-wa-float:focus-visible .rv-wa-float__label {
		max-width: 220px;
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rv-wa-float,
	.rv-wa-float__label {
		transition: none;
	}

	.rv-wa-float:hover,
	.rv-wa-float:focus-visible {
		transform: none;
	}
}

/* No se imprime el boton al imprimir la pagina. */
@media print {
	.rv-wa-float {
		display: none;
	}
}