.last_news {
    display: flex;
    height: 40rem;
    gap: 1rem;
    width: 100%;
}

.last_news_column {
    display: flex;
    flex-direction: column;
}

.last_news_column.main-column {
    flex: 3; /* Ocupa 2/3 */
    width: calc(100% * 2 / 3 - 0.5rem);
}

.last_news_column:not(.main-column) {
    flex: 2; /* Ocupa 1/3 */
    width: calc(100% * 1 / 3 - 0.5rem);
}

.last_news_cell {
    padding: 1rem;
    position: relative;
    background-color: var(--primary-blue);
    overflow: hidden; /* Asegura que la imagen no sobresalga */
    cursor: pointer;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-medium);
}

/* Estilos para la imagen */
.last_news_cell img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cubre todo el contenedor manteniendo proporción */
    object-position: center; /* Centra la imagen */
    transition: transform 0.3s ease-in-out; /* Transición suave para el zoom */
    z-index: 1; /* Detrás del .info */
}

/* Efecto hover: ampliar la imagen */
.last_news_cell:hover img {
    transform: scale(1.05); /* Amplía la imagen un 5% */
}

/* Primera columna: celda ocupa 100% del alto */
.last_news_column.main-column .last_news_cell {
    height: 100%;
}

/* Segunda columna: celdas ocupan 1/3 del alto */
.last_news_column:not(.main-column) .last_news_cell {
    height: calc((100% - 1rem) / 3);
    margin-bottom: 0.5rem;
}

.last_news_column:not(.main-column) .last_news_cell:last-child {
    margin-bottom: 0;
}

.last_news_cell .info {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #33333394;
    padding: var(--spacing-md);
    color: var(--light-gray);
    max-height: 50%; /* Máximo 50% del contenedor */
    min-height: fit-content; /* Al menos el tamaño del contenido */
    z-index: 2; /* Por encima de la imagen */
}

/* SEGUNDA COLUMNA: info ocupa el 100% del alto */
.last_news_column:not(.main-column) .last_news_cell .info {
    max-height: 90%; /* Ocupa todo el alto */
}

.last_news_cell .info h1 {
    font-size: 1.25rem;
    font-weight: bold;
    margin: 0; /* Elimina márgenes por defecto del h1 */
    overflow: hidden;
    display: flex;
    align-items: flex-start; /* Alinea el texto arriba */
}

/* Para la segunda columna, ajustamos el h1 */
.last_news_column:not(.main-column) .last_news_cell .info h1 {
    align-items: flex-start; /* Texto arriba */
}

.last_news_cell .info .labels {
    display: flex;
    align-items: flex-end; /* Alinea la fecha abajo */
}

/* Para la segunda columna, ajustamos el div de la fecha */
.last_news_column:not(.main-column) .last_news_cell .info .labels {
    align-items: flex-end; /* Fecha abajo */
}

.last_news_cell .info .labels span {
    display: inline-block;
    justify-content: center;
    margin: 0 var(--spacing-mini);
    padding: var(--spacing-mini);
    text-transform: uppercase;
}

.last_news_cell .info .cat, .last_news_cell .info .area {
    border-radius: var(--border-radius-sm);
    background-color: var(--primary-blue);
    font-weight: bold;
}

.last_news_cell .info .area-electronica {
    background: var(--area-electronica-darker);
}

.last_news_cell .info .area-electromagnetismo {
    background: var(--area-electromagnetismo-darker);
}

/* Estilos responsivos */
@media (max-width: 768px) {
    .last_news {
        flex-direction: column;
        height: auto;
        min-height: 40rem;
    }
    
    .last_news_column.main-column,
    .last_news_column:not(.main-column) {
        width: 100%;
        flex: none;
    }
    
    .last_news_column.main-column .last_news_cell {
        height: 20rem;
        margin-bottom: 1rem;
    }
    
    .last_news_column:not(.main-column) .last_news_cell {
        height: 10rem;
        margin-bottom: 0.5rem;
    }
    
    /* En móviles, también ocupar el 100% */
    .last_news_column:not(.main-column) .last_news_cell .info {
        max-height: 100%;
        height: 100%;
    }
    
    /* Ajuste para móviles */
    .last_news_cell .info h1 {
        font-size: 1rem;
    }
    
    /* Reducir efecto hover en móviles */
    .last_news_cell:hover img {
        transform: scale(1.02);
    }
}