/* =====================
   FAB PREMIUM PMK
===================== */

.social-fab {
    position: fixed;
    bottom: -150px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999; /* 🔥 siempre arriba */
    animation: fadeUp 0.8s ease;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translate(-50%, 40px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* =====================
   BOTÓN PRINCIPAL
===================== */

.fab-btn {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    border: none;
    cursor: pointer;

    background: rgba(212,175,55,0.95);
    color: #1a0000;
    font-size: 1.5rem;

    box-shadow:
            0 8px 20px rgba(0,0,0,0.35),
            0 0 10px rgba(212,175,55,0.3);

    transition: all 0.3s ease;

    animation: fabPulse 3s infinite;
}

@keyframes fabPulse {
    0% {
        box-shadow:
                0 8px 20px rgba(0,0,0,0.35),
                0 0 10px rgba(212,175,55,0.3);
    }
    50% {
        box-shadow:
                0 12px 30px rgba(0,0,0,0.45),
                0 0 25px rgba(212,175,55,0.6);
    }
    100% {
        box-shadow:
                0 8px 20px rgba(0,0,0,0.35),
                0 0 10px rgba(212,175,55,0.3);
    }
}

/* estado activo */
.fab-btn.active {
    transform: rotate(45deg) scale(1.1);
    box-shadow:
            0 15px 40px rgba(0,0,0,0.6),
            0 0 25px rgba(212,175,55,0.8);
}

.fab-btn:hover {
    transform: translateY(-5px) scale(1.05);
}

.fab-btn:active {
    transform: scale(0.9);
}

/* =====================
   CONTENEDOR ICONOS
===================== */

.fab-options {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);

    pointer-events: none; /* 🔒 bloqueado cuando está cerrado */
}

/* 🔥 CLAVE */
.fab-options.active {
    pointer-events: all; /* 🔓 permite clicks */
}

/* =====================
   ICONOS
===================== */

.fab-icon {
    position: absolute;

    width: 45px;
    height: 45px;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    color: white;
    text-decoration: none;

    opacity: 0;
    transform: scale(0.5);

    transition: all 0.4s ease;

    cursor: pointer; /* 🔥 manito */
}

/* colores */
.whatsapp { background: #25D366; }
.instagram { background: #E1306C; }
.facebook { background: #1877F2; }

.fab-icon i {
    font-size: 1.2rem;
}

/* interacción */
.fab-icon:hover {
    transform: scale(1.1);
}

.fab-icon:active {
    transform: scale(0.9);
}

/* =====================
   ABANICO (POSICIONES)
===================== */

.fab-options.active .fab-icon:nth-child(1) {
    transform: translate(-80px, -80px) scale(1);
    opacity: 1;
    transition-delay: 0.05s;
}

.fab-options.active .fab-icon:nth-child(2) {
    transform: translate(0px, -110px) scale(1);
    opacity: 1;
    transition-delay: 0.1s;
}

.fab-options.active .fab-icon:nth-child(3) {
    transform: translate(80px, -80px) scale(1);
    opacity: 1;
    transition-delay: 0.15s;
}