:root {
    --rk-floating-whatsapp-size: 60px;
    --rk-mobile-fixed-cta-height: 0px;
}

.rk-whatsapp-floating {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1020;

    display: grid;
    width: var(--rk-floating-whatsapp-size);
    height: var(--rk-floating-whatsapp-size);
    place-items: center;

    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    background: #3d8065;
    color: #fff;
    text-decoration: none;
    box-shadow:
        0 14px 32px rgba(47, 81, 68, 0.2),
        0 4px 10px rgba(47, 81, 68, 0.13);

    transition:
        transform 280ms ease,
        background-color 280ms ease,
        box-shadow 280ms ease;
}

.rk-whatsapp-floating .bi {
    font-size: 1.75rem;
    line-height: 1;
}

.rk-whatsapp-floating__label {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;

    width: max-content;
    max-width: min(240px, calc(100vw - 110px));
    padding: 8px 12px;
    border: 1px solid rgba(78, 88, 82, 0.11);
    border-radius: 999px;

    background: rgba(250, 248, 244, 0.97);
    color: #38443f;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 10px 26px rgba(55, 67, 62, 0.13);

    opacity: 0;
    transform: translate(7px, -50%);
    pointer-events: none;
    transition:
        opacity 220ms ease,
        transform 220ms ease;
}

.rk-whatsapp-floating:focus-visible {
    outline: 3px solid #c9a96d;
    outline-offset: 4px;
}

/* En Personal, el control existente para volver arriba ocupa la misma esquina. */
.rk-personal-page .rk-back-to-top {
    bottom: calc(24px + var(--rk-floating-whatsapp-size) + 14px);
}

@media (hover: hover) and (pointer: fine) {
    .rk-whatsapp-floating:hover {
        background: #347358;
        color: #fff;
        transform: translateY(-2px) scale(1.03);
        box-shadow:
            0 18px 38px rgba(47, 81, 68, 0.25),
            0 6px 13px rgba(47, 81, 68, 0.15);
    }

    .rk-whatsapp-floating:hover .rk-whatsapp-floating__label {
        opacity: 1;
        transform: translate(0, -50%);
    }
}

@media (max-width: 767.98px) {
    :root {
        --rk-floating-whatsapp-size: 56px;
    }

    .rk-whatsapp-floating {
        right: 16px;
        bottom: calc(
            18px + env(safe-area-inset-bottom, 0px) +
                var(--rk-mobile-fixed-cta-height)
        );
    }

    .rk-whatsapp-floating__label {
        display: none;
    }

    .rk-personal-page .rk-back-to-top {
        right: 16px;
        bottom: calc(
            18px + env(safe-area-inset-bottom, 0px) +
                var(--rk-mobile-fixed-cta-height) +
                var(--rk-floating-whatsapp-size) + 12px
        );
    }
}

@media (prefers-reduced-motion: reduce) {
    .rk-whatsapp-floating,
    .rk-whatsapp-floating__label {
        transition: none;
    }
}