.wa-float {
    display: flex;
    position: fixed;
    align-items: center;
    gap: 8px;
    background: #25D366;
    color: #fff;
    padding: 10px 16px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 9999;
}

.wa-float img {
    width: 20px;
    height: 20px;
}

.text-mobile {
    display: none;
}
.text-desktop {
    display: inline;
}

@media (max-width: 768px) {
    .text-mobile {
        display: inline;
    }
    .text-desktop {
        display: none;
    }
}

@media (max-width: 768px) {
    .wa-float {
        left: 50%;
        bottom: 26px;
        right: auto;
        top: auto;
        transform: translateX(-50%);
    }
}

@media (min-width: 769px) {
    .wa-float {
        right: 20px;
        top: 70%;
        left: auto;
        bottom: auto;
        transform: translateY(-50%);
    }
}

.social-float {
    display: none;
}

@media (min-width: 992px) {
    .social-float {
        display: flex;
        position: fixed;
        left: -100px;
        top: 50%;
        transform: translateY(-50%);
        flex-direction: column;
        gap: 18px;
        z-index: 9999;
        transition: left .5s ease;
    }

    .social-float.show {
        left: 20px;
    }

    .social-float .icon {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transform: translateX(-30px);
        transition: .4s ease;
        box-shadow: 0 8px 20px rgba(0,0,0,.25);
    }

    .social-float.show .icon {
        opacity: 1;
        transform: translateX(0);
    }

    .social-float.show .icon:nth-child(1){ transition-delay:.1s }
    .social-float.show .icon:nth-child(2){ transition-delay:.25s }
    .social-float.show .icon:nth-child(3){ transition-delay:.4s }
    .social-float.show .icon:nth-child(4){ transition-delay:.55s }
    .social-float.show .icon:nth-child(5){ transition-delay:.7s }

    .social-float img {
        width: 24px;
        height: 24px;
    }

    .fb { background:#1877f2 }
    .yt { background:#ff0000 }
    .tt { background:#000 }
    .email { background:#1a73e8 }
    .wa { background: #25D366; }
    .ig {
        background: radial-gradient(circle at 30% 110%,
            #fdf497 0%,
            #fd5949 45%,
            #d6249f 60%,
            #285AEB 90%);
    }

    .social-float .icon:hover {
        transform: scale(1.15);
    }

    .social-float.hide {
        opacity: 0;
        pointer-events: none;
    }
}