.prp-bar{
    position:fixed;
    top:20%;
    /* transform:translateY(-50%); */
    display:flex;
    flex-direction:column;
    gap:12px;
    z-index:99999;
    opacity:0;
    visibility:hidden;
    transition:0.4s ease;
}

.prp-bar.active{
    opacity:1;
    visibility:visible;
}

.prp-left{ left:20px; }
.prp-right{ right:20px; }

.prp-bar a{
    display:flex;
    align-items:center;
    justify-content:center;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow:0 6px 18px rgba(0,0,0,0.15);
    border-radius: 8px;


}
.prp-bar a:nth-child(1) {
    animation-delay: 0.2s;
}
.prp-bar a:nth-child(2) {
    animation-delay: 0.4s;
}
.prp-bar a:nth-child(3) {
    animation-delay: 0.6s;
}
.prp-bar a:nth-child(4) {
    animation-delay: 0.8s;
}

.prp-bar a:hover{
    transform: translateY(-4px);
    box-shadow:0 12px 24px rgba(0, 0, 0, 0.4);
}

/* FORMAS */
.prp-circle a{
    border-radius:50%;
}

.prp-rectangle a{
    border-radius:5px;
}



/* =========================
   ANIMACIONES REDES (PRO)
========================= */

/* FADE PRO */
.fade a{
    opacity:0;
    transform: translateY(15px) scale(0.95);
    animation: prpFadeInUp 0.5s ease forwards;
}

@keyframes prpFadeInUp{
    to{
        opacity:1;
        transform: translateY(0) scale(1);
    }
}


/* SLIDE PRO (direccional) */
.slide.prp-left a{
    opacity:0;
    transform: translateX(-40px);
    animation: prpSlideLeft 0.5s cubic-bezier(.25,.8,.25,1) forwards;
}

.slide.prp-right a{
    opacity:0;
    transform: translateX(40px);
    animation: prpSlideRight 0.5s cubic-bezier(.25,.8,.25,1) forwards;
}

@keyframes prpSlideLeft{
    to{
        opacity:1;
        transform: translateX(0);
    }
}

@keyframes prpSlideRight{
    to{
        opacity:1;
        transform: translateX(0);
    }
}


/* BOUNCE PRO (más moderno) */
.bounce a{
    opacity:0;
    transform: scale(0.6);
    animation: prpBounceModern 0.7s cubic-bezier(.34,1.56,.64,1) forwards;
}

@keyframes prpBounceModern{
    0%{
        opacity:0;
        transform: scale(0.6);
    }
    60%{
        opacity:1;
        transform: scale(1.1);
    }
    100%{
        transform: scale(1);
    }
}

/* css settings page */

.prp-container{ margin-top:20px; }
.prp-title{ margin-bottom:15px; }
.prp-card{
    background:#13eaee;
    padding:20px;
    border-radius:12px;
    box-shadow:0 8px 20px rgba(0,0,0,0.06);
}
.prp-card th{ width:200px; text-align:left; }
.prp-card td{ padding:10px 0; }



/* =========================
   MOBILE OPTIMIZATION PRO
========================= */
@media (max-width: 768px){

    .prp-bar{
        top:20px; /* 🔥 fijo arriba */
     
    }

    .prp-left{ left:10px; }
    .prp-right{ right:10px; }

    .prp-bar a{
        transform: scale(0.9); /* más compacto */
    }

}