/* ===============================
   BLURB FLOTANTE — Frontend CSS
   =============================== */

#bf-blurb {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 99999;

    /* Animación de entrada */
    animation: bf-fadein 0.5s ease both;

    /* Sombra para destacar sobre cualquier fondo */
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.28));

    /* Permite clics sólo sobre la imagen */
    pointer-events: auto;
}

.bf-img {
    display: block;
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 16px;             /* bordes redondeados */
    transition: transform 0.2s ease, filter 0.2s ease;
    cursor: pointer;
}

#bf-blurb a {
    display: block;
    line-height: 0;
    border-radius: 16px;
    outline-offset: 3px;
}

#bf-blurb a:hover .bf-img,
#bf-blurb .bf-img:hover {
    transform: scale(1.06);
    filter: brightness(1.06);
}

/* Animación de entrada */
@keyframes bf-fadein {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive: en móvil un poco más pequeño */
@media (max-width: 480px) {
    #bf-blurb {
        bottom: 16px;
        left: 16px;
    }
    .bf-img {
        width: 82px;
        height: 82px;
        border-radius: 12px;
    }
}