/* Centrado para el título "Reportes" */
    h1 {
        text-align: center;
        margin-top: 20px;
        margin-bottom: 40px;
        font-size: 36px;
        font-weight: bold;
        color: #333;
    }
    
    .imagen-reportes img {
        width: 100%; /* Hace que la imagen ocupe todo el ancho del contenedor */
        height: 320px; /* Mantiene las proporciones de la imagen */
        display: block; /* Elimina espacios en blanco generados por el comportamiento inline de las imágenes */
        object-fit: cover; /* Ajusta cómo se redimensiona la imagen en caso de que el contenedor sea más alto o ancho */
    }
    
    /* Contenedor principal para los reportes */
    .reportes-container {
        display: flex;
        justify-content: center;
        flex-wrap: wrap; /* Permite que los reportes se acomoden en varias filas */
        gap: 20px; /* Espacio entre cada reporte */
        padding: 20px;
        list-style-type: none; /* Eliminar puntos de lista */
    }

    /* Estilo para cada reporte */
    .reportes-container li {
        display: flex;
        flex-direction: column;
        justify-content: space-between; /* Alinea el contenido de arriba hacia abajo */
        width: 30%; /* Tres reportes en una fila */
        min-width: 250px; /* Asegura que el tamaño mínimo de los reportes sea proporcional */
        box-sizing: border-box;
        padding: 20px;
        border: 1px solid #ddd; /* Borde suave */
        border-radius: 8px; /* Bordes redondeados */
        text-align: center;
        background-color: #f9f9f9; /* Fondo gris claro */
        height: 400px; /* Altura fija para uniformidad, ajustable según el diseño */
    }

    /* Contenedor para título y autores */
    .reportes-container .info {
        display: flex;
        flex-direction: column;
        justify-content: flex-end; /* Alinea los elementos al final */
        flex-grow: 1; /* Permite que los elementos crezcan para ocupar el espacio disponible */
    }

    /* Estilo para el título de los reportes (h2) */
    .reportes-container h2 {
        font-size: 18px;
        margin-top: 10px;
        color: #333;
    }
    
    /* Estilo para los enlaces (sin subrayado) */
    .reportes-container a {
        text-decoration: none;
        color: inherit; /* Elimina el color por defecto del enlace */
    }

    /* Estilo para las imágenes de los reportes */
    .reportes-container img {
        width: 100%;
        height: auto;
        border-radius: 8px; /* Bordes redondeados en las imágenes */
        max-width: 200px; /* Máximo ancho para la imagen */
        margin-bottom: 10px;
        flex-grow: 1; /* Permite que la imagen crezca ocupando el espacio disponible */
    }

    /* Estilo para el autor (debajo del título) */
    .reportes-container p {
        margin-top: 10px;
        color: #555;
        font-size: 14px;
    }