/* Es el CSS para las noticias que salen en cada pagina de categorias pero nunca le cambie el nombre porque empezo como un archivo TEST.CSS pero se quedó así y si algo funciona no lo toques */
/* Contenedor principal de las noticias */
.lista-noticias {
    font-family: Arial, sans-serif; /* O la fuente que prefieras */
    max-width: 800px; /* Ancho máximo del contenedor */
    margin: 20px auto; /* Centrado en la página */
}

/* Estilo para cada tarjeta de noticia */
.noticia-card {
    display: flex; /* pone la imagen y el texto uno al lado del otro */
    align-items: flex-start; /* Alinea los contenidos arriba */
    border-bottom: 1px solid #eee; /* Línea divisoria gris claro */
    padding-bottom: 24px; /* Espacio antes de la línea */
    margin-bottom: 24px; /* Espacio entre tarjetas */
}

/* Última tarjeta sin línea divisoria */
.noticia-card:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* Contenedor de la imagen */
.noticia-imagen {
    flex-basis: 30%; /* La imagen ocupa el 30% del ancho */
    margin-right: 20px; /* Espacio entre la imagen y el texto */
}

.noticia-imagen img {
    width: 100%; /* La imagen es responsive al contenedor */
    height: auto;
    display: block;
    object-fit: cover; /* Evita que la imagen se deforme */
}

/* Contenedor del contenido (texto) */
.noticia-contenido {
    flex-basis: 70%; /* El texto ocupa el 70% restante */
}

/* Categoría
.noticia-categoria {
    font-size: 0.8rem;
    font-weight: bold;
    color: #555;
    text-transform: uppercase;
    margin-bottom: 8px;
    display: block;
}

/* Título de la noticia */
.noticia-titulo {
    font-size: 1.6rem;
    font-weight: bold;
    color: #222;
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 1.2;
    text-decoration: none; /* Si el título es un enlace */
}

.noticia-titulo:hover {
    color: #0056b3; /* Color al pasar el mouse */
}

/* Resumen de la noticia */
.noticia-resumen {
    font-size: 1rem;
    color: #444;
    line-height: 1.5;
    margin: 0;
}