.flotantes {
    position: fixed;
    right: clamp(12px, 3vw, 24px);
    bottom: clamp(12px, 3vw, 24px);
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-end;
}

.flot-btn {
    height: 52px;
    padding: 0;
    border: none;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--sombra-flot);
    transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease, visibility .2s ease, background .15s ease;
}
.flot-btn:hover { transform: translateY(-3px); }
.flot-btn .icono { width: 24px; height: 24px; }

.flot-wsp { background: var(--acento); color: var(--c-carbon); padding: 0 1.15rem; gap: .55rem; text-decoration: none; }
.flot-wsp:hover { background: #D1770B; text-decoration: none; }
.flot-wsp .icono { width: 26px; height: 26px; }
.flot-wsp-txt { font-family: var(--fuente-titulo); font-weight: 600; font-size: .95rem; }

.flot-top { width: 46px; height: 46px; background: var(--c-carbon); color: #fff; opacity: 0; visibility: hidden; }
.flot-top .icono { transform: rotate(180deg); }
.flot-top.visible { opacity: 1; visibility: visible; }

@media (max-width: 479.98px) {
    .flot-wsp { height: 48px; }
    .flot-top { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .flot-btn { transition: opacity .2s ease, visibility .2s ease; }
    .flot-btn:hover { transform: none; }
}