/* =========================
   RESET CONTENEDOR
========================= */
.prp-blogx * {
    box-sizing: border-box;
}

/* =========================
   🔹 OVERLAY (FIX BUG CLICK)
========================= */
.prp-blogx-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);

    opacity: 0;
    pointer-events: none; /* 🔥 CLAVE */

    z-index: 9998;
    transition: opacity .3s ease;
}

.prp-blogx-overlay.active {
    opacity: 1;
    pointer-events: auto; /* 🔥 SOLO ACTIVO BLOQUEA */
}

/* =========================
   🔹 MODAL
========================= */
.prp-blogx-modal {
    position: fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) scale(.85);

    background:#fff;
    padding:20px;
    border-radius:12px;

    max-width:400px;
    width:90%;

    opacity:0;
    pointer-events:none; 

    z-index:9999;

    transition:all .3s ease;
}

.prp-blogx-modal.active {
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
    pointer-events:auto;
}

/* =========================
   🔹 BOTÓN CERRAR
========================= */
.prp-blogx-close {
    position: absolute;
    top: 10px;
    right: 10px;

    width: 34px;
    height: 34px;

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

    background:#0073aa;
    color:#fff;

    border-radius:50%;
    cursor:pointer;

    font-size:16px;
    font-weight:bold;

    box-shadow:0 6px 15px rgba(0,0,0,.3);

    transition: all .25s ease;
}

.prp-blogx-close:hover {
    background:#005f8d;
    transform:scale(1.1);
}

/* =========================
   SLIDE (FIX SALTO)
========================= */
.prp-blogx-slide {
    position: fixed;
    bottom: 20px;
    right: 20px; /* 🔥 posición final siempre */

    width: 300px;

    background: #fff;
    padding: 15px;
    border-radius: 12px;

    box-shadow: 0 10px 30px rgba(0,0,0,.2);

    /* oculto real */
    opacity: 0;
    transform: translateX(120%);
    visibility: hidden;
    pointer-events: none;

    transition: transform .35s ease, opacity .25s ease;

    z-index: 9999;

    will-change: transform, opacity;
}

.prp-blogx-slide.show {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* =========================
   BOTÓN MINIMIZAR (PRO)
========================= */
.prp-blogx-min {
    position: absolute;
    top: -15px;
    right: -15px;

    width: 42px;
    height: 42px;

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

    background:#0073aa;
    color:#fff;

    border-radius:50%;
    font-size:20px;
    font-weight:bold;

    cursor:pointer;

    box-shadow:0 8px 20px rgba(0,0,0,.35);

    transition: transform .25s ease, background .25s ease, box-shadow .25s ease;

    animation: prpBreath 3.2s ease-in-out infinite;
}

.prp-blogx-min:hover {
    background:#005f8d;
    transform:scale(1.12) rotate(90deg);
    box-shadow:0 10px 25px rgba(0,0,0,.45);
}

/* =========================
   IMAGEN
========================= */
.prp-blogx-img {
    width:100%;
    border-radius:8px;
    margin-bottom:10px;
}

/* =========================
   POSTS
========================= */
.prp-blogx-item {
    display:flex;
    gap:10px;
    margin-top:10px;
    text-decoration:none;
    color:#333;
}

.prp-blogx-item img {
    width:50px;
    height:50px;
    object-fit:cover;
}

/* =========================
    BOTÓN CTA CIRCULAR
========================= */
.prp-blogx-btn {
    position:absolute;
    bottom:15px;
    right:15px;

    width:55px;
    height:55px;

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

    background:#0073aa;
    color:#fff;

    border-radius:50%;
    text-decoration:none;

    font-size:22px;
    font-weight:bold;

    box-shadow:0 8px 20px rgba(0,0,0,.35);

    transition:all .3s ease;
}

.prp-blogx-btn:hover {
    background:#005f8d;
    transform:scale(1.1);
    box-shadow:0 10px 25px rgba(0,0,0,.45);
}

.prp-blogx-icon {
    transition: transform .3s ease;
}

.prp-blogx-btn:hover .prp-blogx-icon {
    transform:rotate(90deg);
}

/* =========================
   HEADER (TÍTULO + DESC)
========================= */
.prp-blogx-head {
    background:#f5f7fa;
    padding:15px;
    border-radius:10px;
    margin-bottom:15px;
}

.prp-blogx-title {
    font-size:18px;
    font-weight:700;
    margin:0 0 5px;
    color:#222;
}

.prp-blogx-desc {
    font-size:13px;
    margin:0;
    color:#666;
    line-height:1.4;
}

/* =========================
    ANIMACIONES SUAVES
========================= */
@keyframes prpBreath {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes prpFadeIn {
    from {
        opacity:0;
        transform: translate(-50%, -50%) scale(0.9);
    }
    to {
        opacity:1;
        transform: translate(-50%, -50%) scale(1);
    }
}



/* 🔥 slide NO usa esa animación */
.prp-blogx-slide.show {
    animation: none;
}

/*=========================
   CONTROL TAMAÑO DE TÍTULOS  RM END*/ 
.prp-blogx-item span{
    font-size: var(--prp-post-title-size, 14px);
}