/* Estilo general para el contenedor de noticias */
.noticias-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18.75em, 1fr)); /* Disposición en columnas */
  gap: 1.25em; /* Espacio entre cada noticia */
  margin-top: 1.25em;
}

/* Estilo individual para cada recuadro de noticia */
.noticia {
  background-color: #fff; /* Fondo blanco */
  border: 0.063em solid #ddd; /* Borde gris claro */
  border-radius: 0.625em; /* Bordes redondeados */
  box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1); /* Sombra sutil */
  overflow: hidden; /* Para que el contenido no sobresalga */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición suave */
}

.noticia:hover {
  transform: translateY(-0.313em); /* Movimiento hacia arriba al pasar el mouse */
  box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.2); /* Sombra más intensa en hover */
}

/* Estilo para las imágenes de las noticias */
.noticia img {
  width: 100%;
  height: 12.5em;
  object-fit: cover; /* Asegura que la imagen cubra bien el área */
  border-bottom: 0.063em solid #ddd; /* Línea divisoria entre la imagen y el contenido */
}

/* Contenido de la noticia */
.noticia-content {
  padding: 1em;
}

/* Título de la noticia */
.noticia-content h3 {
  font-size: 1.25em;
  margin-bottom: 0.625em;
  color: #333;
}

/* Descripción de la noticia */
.noticia-content p {
  font-size: 1em;
  color: #555;
  text-align: justify; /* Justificación del texto */
  margin-bottom: 0.625em;
}

/* Estilo para el enlace 'Leer más' */
.noticia-content a {
  display: inline-block;
  padding: 0.5em 1em;
  background-color: #fff; /* Color de fondo del enlace */
  color: #0078d4;
  border: 0.125em solid #0078d4;
  font-weight: 700;
  border-radius: 0.5em; /* Bordes redondeados */
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.noticia-content a:hover {
  background-color: #005fa3; /* Color de fondo al hacer hover */
  color: #fff;
}

/* Responsive Design */
@media (max-width: 48em) { /* Para pantallas pequeñas (768px o menos) */
  .noticias-container {
    grid-template-columns: 1fr; /* Una sola columna */
    gap: 1em; /* Espacio más compacto */
  }

  .noticia img {
    height: 10em; /* Imagen más compacta */
  }

  .noticia-content h3 {
    font-size: 1.1em; /* Títulos más pequeños */
  }

  .noticia-content p {
    font-size: 0.9em; /* Texto más pequeño */
  }

  .noticia-content a {
    font-size: 0.9em;
    padding: 0.4em 0.8em; /* Botones más compactos */
  }
}

@media (max-width: 30em) { /* Para pantallas extra pequeñas (480px o menos) */
  .noticia img {
    height: 8em; /* Imagen aún más compacta */
  }

  .noticia-content h3 {
    font-size: 1em;
  }

  .noticia-content p {
    font-size: 0.85em;
  }

  .noticia-content a {
    font-size: 0.85em;
    padding: 0.3em 0.6em;
  }
}