/* Botón flotante de diagnostico (SPEC-8937-01) §6.
   Tokens de .architecture/ux-branding.md. El easing y las sombras replican el
   lenguaje del sitio (nosotros.css, index.css) para que no parezca un widget ajeno. */

.tmh-fab {
	--fab-ink: #0b1b2b;
	--fab-ink-2: #0d2435;
	--fab-accent: #FCD92A;
	--fab-ease: cubic-bezier(.2, .7, .2, 1);
	--tmh-fab-offset: 0px;

	position: fixed;
	right: 24px;
	/* El banner de cookies es fixed a todo el ancho inferior con z-index 10001:
	   el desplazamiento lo calcula tmh-fab.js para no quedar tapado (§6.2). */
	bottom: calc(24px + var(--tmh-fab-offset));
	z-index: 10000;

	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 14px 22px 14px 16px;
	border: none;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--fab-ink-2) 0%, var(--fab-ink) 100%);
	color: #fff;
	font-family: 'MontserratLocal', 'Montserrat', system-ui, sans-serif;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.01em;
	cursor: pointer;
	/* Recorta las ondas contra la forma del botón. Sin esto, un círculo
	   expandiéndose alrededor de una píldora se lee como si el botón temblara. */
	overflow: hidden;
	box-shadow:
		0 16px 40px rgba(11, 27, 43, 0.22),
		0 4px 10px rgba(11, 27, 43, 0.14);

	/* Entrada diferida: aparece cuando el visitante ya empezó a leer, no de golpe. */
	opacity: 0;
	transform: translateY(16px) scale(0.94);
	animation: tmh-fab-in 0.55s var(--fab-ease) 1.1s forwards;
	transition:
		transform 0.32s var(--fab-ease),
		box-shadow 0.32s var(--fab-ease),
		bottom 0.32s var(--fab-ease);
}

@keyframes tmh-fab-in {
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.tmh-fab:hover,
.tmh-fab:focus-visible {
	transform: translateY(-3px);
	box-shadow:
		0 22px 50px rgba(11, 27, 43, 0.3),
		0 6px 14px rgba(11, 27, 43, 0.18);
}

.tmh-fab:active {
	transform: translateY(-1px) scale(0.985);
}

.tmh-fab:focus-visible {
	outline: 3px solid var(--fab-accent);
	outline-offset: 4px;
}

/* --- Icono: burbuja de chat --- */

/* Icono: línea de pulso. Habla de "salud del negocio", que es lo que mide el
   test, en vez de un globo de chat que no promete nada concreto. */
.tmh-fab__icon {
	position: relative;
	z-index: 1;
	width: 32px;
	height: 32px;
	flex: 0 0 32px;
	border-radius: 50%;
	background: var(--fab-accent);
	color: var(--fab-ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.tmh-fab__icon svg {
	width: 19px;
	height: 19px;
	display: block;
	overflow: visible;
}

/* El trazo se dibuja al aparecer el botón: refuerza la idea de medición. */
.tmh-fab__icon path {
	stroke-dasharray: 46;
	stroke-dashoffset: 46;
	animation: tmh-fab-trace 1.1s var(--fab-ease) 1.35s forwards;
}

@keyframes tmh-fab-trace {
	to { stroke-dashoffset: 0; }
}

/* Ondas concéntricas. Única animación perpetua del componente y está motivada:
   señala el punto de entrada al diagnóstico, que en una esquina pasa
   desapercibido. Dos anillos desfasados para que se lea como onda continua. */
.tmh-fab__ripple {
	position: absolute;
	/* Nacen en el centro del icono, no en el del botón: la onda tiene origen
	   y dirección, en lugar de parecer una vibración del contorno. */
	left: 32px;
	top: 50%;
	width: 36px;
	height: 36px;
	margin: -18px 0 0 -18px;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
}

.tmh-fab__ripple::before,
.tmh-fab__ripple::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid var(--fab-accent);
	opacity: 0;
	animation: tmh-fab-wave 3.4s var(--fab-ease) infinite;
}

.tmh-fab__ripple::before { animation-delay: 2.4s; }
.tmh-fab__ripple::after  { animation-delay: 4.1s; }

/* La onda crece hasta cubrir el botón y muere recortada por su borde. */
@keyframes tmh-fab-wave {
	0%   { opacity: 0;    transform: scale(0.5);  border-width: 2.5px; }
	12%  { opacity: 0.55; }
	100% { opacity: 0;    transform: scale(5.6);  border-width: 1px; }
}

/* En móvil el botón es circular: el icono queda centrado. */
@media (max-width: 767px) {
	.tmh-fab__ripple {
		left: 50%;
	}

	@keyframes tmh-fab-wave {
		0%   { opacity: 0;    transform: scale(0.5); border-width: 2.5px; }
		12%  { opacity: 0.55; }
		100% { opacity: 0;    transform: scale(2.4); border-width: 1px; }
	}
}

/* Al interactuar se detienen: ya tienen la atención, insistir molesta. */
.tmh-fab:hover .tmh-fab__ripple,
.tmh-fab:focus-visible .tmh-fab__ripple {
	opacity: 0;
	transition: opacity 0.25s var(--fab-ease);
}

/* El label queda por encima de las ondas. */
.tmh-fab__label {
	position: relative;
	z-index: 1;
}


.tmh-fab__label {
	white-space: nowrap;
}

/* En móvil solo el icono: una píldora con texto tapa demasiado contenido. */
@media (max-width: 767px) {
	.tmh-fab {
		padding: 15px;
		right: 18px;
		bottom: calc(18px + var(--tmh-fab-offset));
	}

	.tmh-fab__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tmh-fab {
		opacity: 1;
		transform: none;
		animation: none;
		transition: box-shadow 0.2s ease;
	}

	.tmh-fab:hover,
	.tmh-fab:focus-visible,
	.tmh-fab:active {
		transform: none;
	}

	.tmh-fab__ripple::before,
	.tmh-fab__ripple::after {
		animation: none;
		opacity: 0;
	}

	.tmh-fab__icon path {
		animation: none;
		stroke-dashoffset: 0;
	}
}