.imagen-con-descripcion {
    /* Esencial para posicionar el texto de forma absoluta dentro */
    position: relative;
    /* (Opcional) Define un tamaño base. Puedes ajustarlo a tu diseño. */
    width: fit-content; 
    overflow: hidden; 
}

.imagen-con-descripcion img {
    display: block;
    width: 100%;
    height: auto;
}

.descripcion-texto {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Estilos visuales */
    background-color: rgba(0, 0, 0, 0.7); 
    color: white;
    padding: 10px;
    display: flex; 
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box; /* Asegura que padding no aumente el tamaño */
    
    /* Estado Inicial (Oculto) */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease; 
    /* Asegúrate de que el texto esté por encima de la imagen */
    z-index: 10; 
}

/* 🖱️ Efecto Hover: Hace visible la descripción */
.imagen-con-descripcion:hover .descripcion-texto {
    opacity: 1;
    visibility: visible;
}