/* ============================================================
   Efecto tilt + brillo (glare) para las tarjetas de post.
   Depende de wwwroot/lib/Vanilla/vanilla-tilt.js, que ya se
   carga en _Layout.cshtml y se autoinicializa sobre [data-tilt].
   ============================================================ */

/* vanilla-tilt inyecta .js-tilt-glare como hijo con position:absolute,
   asi que la tarjeta tiene que ser su bloque contenedor. */
.card-container-altrn,
.card-tilt-surface {
    position: relative;
    will-change: transform;
}

/* El brillo hereda el radio de la tarjeta: sin esto pinta
   esquinas cuadradas por fuera del borde redondeado. */
.js-tilt-glare {
    border-radius: inherit;
}

/* Envoltorio de la imagen en las tarjetas horizontales
   (Recomendados de la portada y "Tambien interesante"). */
.card-tilt-surface {
    display: inline-block;
    border-radius: 20px;
}

    .card-tilt-surface > img {
        display: block;
    }

/* Accesibilidad: sin movimiento ni brillo para quien lo pide. */
@media (prefers-reduced-motion: reduce) {
    .card-container-altrn,
    .card-tilt-surface {
        transform: none !important;
        transition: none !important;
    }

    .js-tilt-glare {
        display: none !important;
    }
}