/* =========================================
   IMAGEN CON BORDES DIFUMINADOS
   Compatible con móviles y PC
   ========================================= */

.imagen-difuminada {
    width: 90%;
    max-width: 800px;
    position: relative;
    margin: 0 auto;
}

.imagen-difuminada img {
    width: 100%;
    display: block;

    /* DIFUMINADO REAL DE BORDES */
    -webkit-mask-image: radial-gradient(
        ellipse at center,
        rgba(0,0,0,1) 60%,
        rgba(0,0,0,0) 100%
    );

    mask-image: radial-gradient(
        ellipse at center,
        rgba(0,0,0,1) 60%,
        rgba(0,0,0,0) 100%
    );
}

/* EFECTO CINEMATOGRÁFICO OPCIONAL */
.imagen-difuminada::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at center,
        rgba(255,255,255,0.08),
        transparent 70%
    );
    pointer-events: none;
}