﻿
.share-bar {
    width: 100%;
    max-width: 980px;
    margin: 0 auto 1rem;
    background: #fff;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 16px;
    padding: .62rem .82rem;
    box-shadow: 0 10px 24px rgba(0,0,0,.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    position: relative;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
}

.share-bar::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -120px;
    top: -120px;
    background: radial-gradient(circle, rgba(37,99,235,.18) 0, rgba(37,99,235,0) 60%);
    pointer-events: none;
}

.share-bar:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(2,6,23,.08);
}

.share-bar .share-left {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-weight: 800;
    color: #0f172a;
    font-size: .90rem;
    line-height: 1.15;
}

    .share-bar .share-left i {
        font-size: .98rem;
        color: #2563eb;
        animation: sharePulse 2.6s ease-in-out infinite;
        transform-origin: 50% 50%;
    }

    .share-bar .share-left::after {
        content: "¡GANA DINERO!";
        margin-left: .55rem;
        font-size: .74rem;
        font-weight: 800;
        color: #1d4ed8;
        background: rgba(37,99,235,.10);
        border: 1px solid rgba(37,99,235,.18);
        padding: .18rem .45rem;
        border-radius: 999px;
        white-space: nowrap;
    }

.share-bar .share-actions {
    display: flex;
    align-items: center;
    gap: .38rem;
    flex-wrap: wrap;
}

.share-btn.copy {
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    color: #0f172a;
}

    .share-btn.copy:hover {
        filter: brightness(.97);
    }

.share-btn {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    cursor: pointer;
    transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
    box-shadow: 0 8px 14px rgba(0,0,0,.10);
}

    .share-btn:hover {
        transform: translateY(-1px) scale(1.03);
        filter: brightness(.98);
    }

    .share-btn i {
        font-size: 1.00rem;
    }

    .share-btn.whatsapp {
        background: #25D366;
        color: #fff;
    }

    .share-btn.facebook {
        background: #1877F2;
        color: #fff;
    }

    .share-btn.instagram {
        color: #fff;
        background: radial-gradient(circle at 30% 30%, #feda75 0, #fa7e1e 25%, #d62976 55%, #962fbf 75%, #4f5bd5 100%);
    }

@@keyframes sharePulse {
    0%, 100% {
        transform: scale(1);
        opacity: .95;
    }

    50% {
        transform: scale(1.06);
        opacity: 1;
    }
}

@@media (max-width:576px) {
    .share-bar {
        width: 92%;
        margin: .75rem auto 1rem;
        padding: .62rem .70rem;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: .55rem;
    }

        .share-bar .share-left {
            width: 100%;
            justify-content: center;
            font-size: .88rem;
        }

            .share-bar .share-left::after {
                display: none;
            }

        .share-bar .share-actions {
            width: 100%;
            justify-content: center;
        }

    .share-btn {
        width: 31px;
        height: 31px;
    }

        .share-btn i {
            font-size: .98rem;
        }
}

@@media (max-width:360px) {
    .share-bar {
        padding: .58rem .62rem;
    }

    .share-btn {
        width: 30px;
        height: 30px;
    }

        .share-btn i {
            font-size: .95rem;
        }
}