.floating-actions { position: fixed; right: 26px; bottom: max(26px, env(safe-area-inset-bottom)); z-index: 990; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.floating-actions .scroll-progress-top { position: relative; display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #a63b0c; box-shadow: 0 5px 22px #14212f1f; cursor: pointer; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease, visibility .2s; }
.floating-actions .scroll-progress-top.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.floating-actions .scroll-progress-ring { position: absolute; inset: 0; width: 56px; height: 56px; transform: rotate(-90deg); fill: none; stroke-width: 2; pointer-events: none; }
.floating-actions .scroll-progress-track { stroke: #e9edf2; }
.floating-actions .scroll-progress-value { stroke: #c74710; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.floating-actions .scroll-progress-arrow { width: 22px; height: 22px; }
.floating-actions .floating-whatsapp { position: relative; isolation: isolate; display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid #ffffff50; border-radius: 50%; background: #128747; color: #fff; box-shadow: 0 6px 24px #12874738; text-decoration: none; }
.floating-actions .floating-whatsapp > i { position: relative; z-index: 1; color: #fff; font-size: 29px; }
.floating-actions .floating-whatsapp::before,
.floating-actions .floating-whatsapp::after,
.floating-actions .whatsapp-wave { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: #20bd6433; opacity: 0; pointer-events: none; animation: floating-whatsapp-wave 3.6s linear infinite; }
.floating-actions .floating-whatsapp::before { animation-delay: -2.4s; }
.floating-actions .floating-whatsapp::after { animation-delay: -1.2s; }
.floating-actions .floating-action-label { position: absolute; right: calc(100% + 14px); top: 50%; transform: translate(4px, -50%); padding: 7px 11px; border-radius: 9px; background: #1c2b3c; color: #fff; font-size: 11px; font-weight: 600; line-height: 1.5; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s, transform .2s, visibility .2s; }
.floating-actions :is(a, button):focus-visible { outline: 3px solid #c74710; outline-offset: 5px; }
.floating-actions :is(a, button):focus-visible .floating-action-label { opacity: 1; visibility: visible; transform: translate(0, -50%); }
@keyframes floating-whatsapp-wave {
    0% { transform: scale(1); opacity: 0; }
    12% { opacity: .8; }
    55% { opacity: .4; }
    100% { transform: scale(1.9); opacity: 0; }
}
@media (hover: hover) and (pointer: fine) {
    .floating-actions :is(a, button):hover .floating-action-label { opacity: 1; visibility: visible; transform: translate(0, -50%); }
    .floating-actions .floating-whatsapp:hover { background: #0b753c; color: #fff; }
}
@media (max-width: 575px) {
    .floating-actions { right: 18px; bottom: max(20px, env(safe-area-inset-bottom)); gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .floating-actions .floating-whatsapp::before, .floating-actions .floating-whatsapp::after, .floating-actions .whatsapp-wave { animation: none !important; }
    .floating-actions .scroll-progress-top, .floating-actions .floating-action-label { transition: none; }
}