.img-container-dynamic {
        position: relative;
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        /* El clip-path corta el 10% inferior de la imagen */
        clip-path: inset(0 0 10% 0);
        cursor: pointer;
    }

    .img-container-dynamic:hover {
        transform: scale(1.05) translateY(-5px);
        clip-path: inset(0 0 0 0); /* Al pasar el mouse se muestra completa */
        z-index: 10;
    }

    .custom-col-size {
        /* Aumentamos ligeramente el ancho visual */
        padding: 0 10px;
    }

    .mt-staggered {
        margin-top: 4rem;
    }


    /* Estilo para el contenedor de la foto */
    .img-detalle {
        width: 100%;
        /* Aumentamos la altura de 150px a 250px para que se vea mucho más de la imagen */
        height: 220px;

        /* 'cover' llena el espacio, 'contain' muestra la foto completa sin cortes */
        object-fit: cover;

        /* Este valor asegura que la foto se centre para que no se corte lo importante */
        object-position: center;

        border-bottom: 2px solid #eee;
        transition: all 0.3s ease;
    }

    /* Opcional: Si quieres que la foto se vea completa aunque queden espacios a los lados */
    /* Cambia 'cover' por 'contain' arriba, y añade un fondo oscuro o gris */
    .detalle-card {
        background: white;
        border-radius: 20px;
        overflow: hidden;
        color: #333;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    }

   /* Efecto mejorado al pasar el mouse
.img-detalle:hover {
    object-fit: contain;
    /* Fondo con un degradado sutil en lugar de gris plano
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);

    /* Añadimos un poco de espacio para que no toque los bordes
    padding: 15px;

    /* Filtro de sombra para dar profundidad a la foto
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.2));

    /* Redondeamos las esquinas de la imagen incluso en el modo 'contain'
    border-radius: 25px;
}*/