/* =========================
   IMAGENES
========================= */

.ficha{
    height: 200px;
}

.hover_zoom {
    position: relative;                    /* necesario para que z-index funcione correctamente en el hover */
    display: flex;                        /* bloque para poder centrar la imagen con margin: auto */
    line-height: 0;                        /* elimina el espacio extra que el navegador agrega debajo de imágenes inline */
    font-size: 0;                          /* elimina cualquier espacio residual de texto inline */
}

    .hover_zoom img {
        display: flex;                    /* necesario para que margin: auto funcione */
        object-fit: cover;
        border-radius: 8px;
        transition: transform 0.3s ease;   /* animación suave al agrandarse */
        transform-origin: left center;
    }

    /* Al hacer hover, la imagen se agranda usando transform para no afectar el layout */
    .hover_zoom img:hover {
        transform: scale(2.3);             /* agranda la imagen al 230% de su tamaño original */
        z-index: 100;                      /* se pone por encima de otros elementos al agrandarse */
        position: relative;                /* necesario para que z-index tenga efecto */
    }