/* ---------- Contenedor y posición ---------- */

.fb-wrap {
	position: fixed;
	z-index: 99999;
	display: flex;
	flex-direction: column-reverse; /* el botón principal queda abajo, la lista encima */
	align-items: center;
	gap: 12px;
}
.fb-pos-bottom-right { right: var(--fb-offset, 20px); bottom: var(--fb-offset, 20px); }
.fb-pos-bottom-left  { left: var(--fb-offset, 20px);  bottom: var(--fb-offset, 20px); }
.fb-pos-middle-right { right: var(--fb-offset, 20px); top: 50%; transform: translateY(-50%); }
.fb-pos-middle-left  { left: var(--fb-offset, 20px);  top: 50%; transform: translateY(-50%); }

.fb-list {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	gap: 12px;
}

/* ---------- Botón ---------- */

.fb-btn {
	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	width: var(--fb-size, 56px);
	height: var(--fb-size, 56px);
	padding: 0;
	border: 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--fb-bg, #1f2937);
	color: var(--fb-fg, #fff);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
	cursor: pointer;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease, opacity .25s ease, visibility .25s;
}
.fb-btn:hover,
.fb-btn:focus-visible {
	transform: scale(1.08);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
}
.fb-btn:focus-visible {
	outline: 2px solid var(--fb-bg, #1f2937);
	outline-offset: 3px;
}

.fb-icon {
	display: flex;
	width: 50%;
	height: 50%;
}
.fb-icon svg,
.fb-icon img {
	width: 100%;
	height: 100%;
	fill: currentColor;
	object-fit: contain;
}

/* ---------- Etiquetas ---------- */

.fb-label {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	padding: 6px 12px;
	border-radius: 6px;
	background: #1f2937;
	color: #fff;
	font: 500 14px/1.2 system-ui, sans-serif;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
	pointer-events: none;
	transition: opacity .2s ease, visibility .2s;
}
.fb-pos-bottom-right .fb-label,
.fb-pos-middle-right .fb-label { right: calc(100% + 12px); }
.fb-pos-bottom-left .fb-label,
.fb-pos-middle-left .fb-label { left: calc(100% + 12px); }

.fb-labels-none .fb-label { display: none; }
.fb-labels-hover .fb-label { opacity: 0; visibility: hidden; }
.fb-labels-hover .fb-btn:hover .fb-label,
.fb-labels-hover .fb-btn:focus-visible .fb-label { opacity: 1; visibility: visible; }

/* ---------- Animación de las etiquetas ---------- */
/* --fb-dir: hacia qué lado del botón queda la etiqueta (1 = izquierda, -1 = derecha). */

.fb-pos-bottom-right, .fb-pos-middle-right { --fb-dir: 1; }
.fb-pos-bottom-left,  .fb-pos-middle-left  { --fb-dir: -1; }
.fb-pos-bottom-right .fb-label, .fb-pos-middle-right .fb-label { transform-origin: right center; }
.fb-pos-bottom-left .fb-label,  .fb-pos-middle-left .fb-label  { transform-origin: left center; }

/* Entrada: se desliza desde el botón cuando la etiqueta aparece. */
.fb-label-anim-entrada.fb-labels-always.fb-mode-stack .fb-label,
.fb-label-anim-entrada.fb-labels-always .fb-toggle .fb-label {
	animation: fb-label-in .5s ease-out both;
	animation-delay: calc(var(--fb-i, 0) * 120ms + .3s);
}
.fb-label-anim-entrada.fb-labels-always.fb-mode-menu.is-open .fb-list .fb-label {
	animation: fb-label-in .4s ease-out both;
	animation-delay: calc(var(--fb-i, 0) * 60ms + .1s);
}
.fb-label-anim-entrada.fb-labels-hover .fb-btn:hover .fb-label,
.fb-label-anim-entrada.fb-labels-hover .fb-btn:focus-visible .fb-label {
	animation: fb-label-in .3s ease-out both;
}

.fb-label-anim-flotar .fb-label { animation: fb-label-float 3s ease-in-out infinite; }
.fb-label-anim-latido .fb-label { animation: fb-label-beat 2.5s ease-in-out infinite; }

.fb-label-anim-brillo .fb-label { overflow: hidden; }
.fb-label-anim-brillo .fb-label::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
	transform: translateX(-100%);
	animation: fb-label-shine 3s ease-in-out infinite;
}

.fb-label-anim-flotar .fb-label,
.fb-label-anim-latido .fb-label,
.fb-label-anim-brillo .fb-label::after { animation-delay: calc(var(--fb-i, 0) * var(--fb-stagger, 0ms)); }

@keyframes fb-label-in {
	from { opacity: 0; transform: translateY(-50%) translateX(calc(var(--fb-dir, 1) * 14px)); }
	to   { opacity: 1; transform: translateY(-50%); }
}
@keyframes fb-label-float {
	0%, 100% { transform: translateY(-50%); }
	50%      { transform: translateY(-50%) translateX(calc(var(--fb-dir, 1) * -5px)); }
}
@keyframes fb-label-beat {
	0%, 40%, 100% { transform: translateY(-50%) scale(1); }
	10%, 30%      { transform: translateY(-50%) scale(1.08); }
	20%           { transform: translateY(-50%) scale(1); }
}
@keyframes fb-label-shine {
	0%        { transform: translateX(-100%); }
	40%, 100% { transform: translateX(100%); }
}

/* ---------- Modo menú ---------- */

.fb-mode-menu .fb-list .fb-btn {
	opacity: 0;
	visibility: hidden;
	transform: translateY(16px) scale(.6);
	transition-delay: calc(var(--fb-i, 0) * 50ms);
}
.fb-mode-menu.is-open .fb-list .fb-btn {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.fb-mode-menu.is-open .fb-list .fb-btn:hover,
.fb-mode-menu.is-open .fb-list .fb-btn:focus-visible {
	transform: scale(1.08);
	transition-delay: 0s;
}

.fb-icon-close { display: none; }
.is-open .fb-toggle .fb-icon-open { display: none; }
.is-open .fb-toggle .fb-icon-close { display: flex; animation: fb-turn-in .25s ease; }
/* Abierto, el botón principal deja de animarse para no distraer. */
.is-open .fb-toggle::before { display: none; }

/* ---------- Animaciones ---------- */
/* Cada ciclo dura 2.5s: se mueve al principio y descansa el resto. */

.fb-anim-pulse::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 50%;
	background: var(--fb-bg, #1f2937);
	animation: fb-pulse 2.5s ease-out infinite;
}
.fb-anim-bounce .fb-icon    { animation: fb-bounce 2.5s ease-in-out infinite; }
.fb-anim-shake .fb-icon     { animation: fb-shake 2.5s ease-in-out infinite; }
.fb-anim-swing .fb-icon     { animation: fb-swing 2.5s ease-in-out infinite; transform-origin: 50% 0; }
.fb-anim-spin .fb-icon      { animation: fb-spin 2.5s ease-in-out infinite; }
.fb-anim-heartbeat .fb-icon { animation: fb-heartbeat 2.5s ease-in-out infinite; }

/* Desfase: cada botón empieza --fb-stagger después del anterior. */
.fb-btn::before,
.fb-btn .fb-icon { animation-delay: calc(var(--fb-i, 0) * var(--fb-stagger, 0ms)); }

/* Animar solo al pasar el ratón / con foco de teclado (sin esperar el desfase). */
.fb-trigger-hover::before,
.fb-trigger-hover .fb-icon { animation-delay: 0s; }
.fb-trigger-hover:not(:hover):not(:focus-visible)::before,
.fb-trigger-hover:not(:hover):not(:focus-visible) .fb-icon { animation: none; }

@keyframes fb-pulse {
	0%        { transform: scale(1);   opacity: .55; }
	80%, 100% { transform: scale(1.7); opacity: 0; }
}
@keyframes fb-bounce {
	0%, 24%, 100% { transform: translateY(0); }
	8%            { transform: translateY(-30%); }
	16%           { transform: translateY(-10%); }
}
@keyframes fb-shake {
	0%, 30%, 100%  { transform: translateX(0); }
	5%, 15%, 25%   { transform: translateX(-12%); }
	10%, 20%       { transform: translateX(12%); }
}
@keyframes fb-swing {
	0%, 40%, 100% { transform: rotate(0); }
	8%            { transform: rotate(18deg); }
	16%           { transform: rotate(-12deg); }
	24%           { transform: rotate(6deg); }
	32%           { transform: rotate(-4deg); }
}
@keyframes fb-spin {
	0%       { transform: rotate(0); }
	30%, 100% { transform: rotate(360deg); }
}
@keyframes fb-heartbeat {
	0%, 40%, 100% { transform: scale(1); }
	10%, 30%      { transform: scale(1.25); }
	20%           { transform: scale(1); }
}
@keyframes fb-turn-in {
	from { transform: rotate(-90deg); opacity: 0; }
	to   { transform: none; opacity: 1; }
}

/* ---------- Accesibilidad y móvil ---------- */

/* Con "Respetar la preferencia del visitante", quien pidió reducir movimiento no ve animaciones. */
@media (prefers-reduced-motion: reduce) {
	.fb-motion-respect .fb-btn,
	.fb-motion-respect .fb-btn::before,
	.fb-motion-respect .fb-icon,
	.fb-motion-respect .fb-label,
	.fb-motion-respect .fb-label::after { animation: none !important; transition: none !important; }
}

@media (max-width: 767px) {
	.fb-hide-mobile { display: none; }

	/* Tamaño propio en móvil (el inline --fb-size no se puede pisar, por eso se usa otra variable). */
	.fb-wrap, .fb-list { gap: 10px; }
	.fb-wrap .fb-btn {
		width: var(--fb-size-m, var(--fb-size, 44px));
		height: var(--fb-size-m, var(--fb-size, 44px));
	}
	.fb-wrap .fb-label { padding: 5px 10px; font-size: 13px; }

	.fb-mlabels-none .fb-label { display: none; }

	/* Translúcidas: cada etiqueta aparece mientras su botón se mueve (mismo ciclo y desfase). */
	/* !important: manda sobre la animación de etiqueta elegida para escritorio. */
	.fb-wrap.fb-mlabels-anim .fb-label {
		display: block;
		visibility: inherit; /* con el menú cerrado, el botón (y su etiqueta) siguen ocultos */
		opacity: 0;
		background: rgba(31, 41, 55, .55);
		text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
		-webkit-backdrop-filter: blur(3px);
		backdrop-filter: blur(3px);
		animation: fb-label-flash 2.5s ease-in-out calc(var(--fb-i, 0) * var(--fb-stagger, 0ms)) infinite !important;
	}
	.fb-wrap.fb-mlabels-anim .fb-label::after { display: none; }

	/* La ventana de chat de Joinchat (WhatsApp) ocupa todo el ancho en móvil: mientras está abierta, nos apartamos. */
	.fb-wrap { transition: opacity .2s ease, visibility .2s; }
	body:has(.joinchat--chatbox) .fb-wrap {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
}

@keyframes fb-label-flash {
	0%        { opacity: 0;   transform: translateY(-50%) translateX(calc(var(--fb-dir, 1) * 8px)); }
	8%, 38%   { opacity: .95; transform: translateY(-50%); }
	50%, 100% { opacity: 0;   transform: translateY(-50%); }
}

/* Si el visitante pidió reducir movimiento y se respeta, las translúcidas quedan fijas y visibles. */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
	.fb-wrap.fb-motion-respect.fb-mlabels-anim .fb-label { animation: none !important; opacity: .95; }
}