/* =========================================================================
   Botón flotante de WhatsApp — fernandomier.mx
   Marcado: inc/fm-global.php, sección 5 (sale por wp_footer en todas las
   vistas). Sin JS.

   ESTILO
   Colores de WhatsApp, no de la paleta del sitio: círculo verde, icono
   blanco, sin etiqueta de texto. Tiene que reconocerse como WhatsApp de un
   vistazo.

   CAPAS
   z-index 90: por ENCIMA del contenido (los valores más altos del sitio
   son 30 en /contratacion/) y por DEBAJO del header (100) y del drawer
   móvil (99999). Con el menú abierto el botón queda tapado, que es lo
   correcto.
   ========================================================================= */

.fm-whatsapp {
	--fm-wa-tam:     clamp(56px, 4.2vw, 62px);
	--fm-wa-icono:   56%;
	--fm-wa-margen:  clamp(16px, 2.2vw, 32px);
	--fm-wa-verde:   #25D366;
	--fm-wa-verde-h: #1EBE5D;
	--fm-wa-blanco:  #FFFFFF;

	position: fixed;
	right:  calc(var(--fm-wa-margen) + env(safe-area-inset-right, 0px));
	bottom: calc(var(--fm-wa-margen) + env(safe-area-inset-bottom, 0px));
	z-index: 90;

	display: grid;
	place-items: center;
	width:  var(--fm-wa-tam);
	height: var(--fm-wa-tam);
	border: 0;
	border-radius: 50%;
	background-color: var(--fm-wa-verde);
	color: var(--fm-wa-blanco);
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .25);

	transition:
		background-color .25s ease,
		transform .25s ease,
		box-shadow .25s ease;
	animation: fm-wa-entrada .6s ease 1.2s both;
}

.fm-whatsapp__icono {
	display: block;
	width:  var(--fm-wa-icono);
	height: var(--fm-wa-icono);
}

.fm-whatsapp__icono svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Fuerza el icono a blanco venga como venga el SVG oficial (fill fijo,
   verde, negro…). El trazo solo se toca si el SVG ya trae trazo. */
.fm-whatsapp__icono svg :is(path, circle, ellipse, polygon, rect) {
	fill: var(--fm-wa-blanco);
}

.fm-whatsapp__icono svg [stroke]:not([stroke="none"]) {
	stroke: var(--fm-wa-blanco);
}

/* El globo genérico de respaldo es de trazo: su cuerpo no se rellena. */
.fm-whatsapp__icono svg[fill="none"] > path {
	fill: none;
}

/* Hover solo con puntero real: en táctil el :hover se queda "pegado". */
@media (hover: hover) {
	.fm-whatsapp:hover {
		background-color: var(--fm-wa-verde-h);
		transform: scale(1.06);
		box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
	}
}

/* El foco dorado global de custom.css se mantiene: sobre el verde se ve. */
.fm-whatsapp:focus-visible {
	background-color: var(--fm-wa-verde-h);
}

@keyframes fm-wa-entrada {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.fm-whatsapp {
		animation: none;
		transition: none;
	}
}

/* Impresión: nada flotante en papel. */
@media print {
	.fm-whatsapp { display: none; }
}