.articulos-section {
  padding: 2rem;
  background: #fff;
  max-width: 1200px; /* Ancho por defecto en móviles/tablet */
  margin: 2rem auto;
  font-family: 'Roboto', sans-serif; /* Forzamos el uso de Roboto */
}

/* Sólo para escritorio (>= 1024px) */
@media (min-width: 1024px) {
  .articulos-section {
    max-width: 1400px; /* Ajusta según tu preferencia */
  }
}

.articulos-section h2 {
  text-align: center;
  font-size: 2rem;
  color: #004080;
  margin-bottom: 1.5rem;
}

.articulos-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Cada artículo como una tarjeta */
.articulo-item {
  background: #fff;
  border: 1px solid #ddd;              /* Borde gris claro */
  border-radius: 8px;                  /* Bordes redondeados */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* Sombra ligera */
  padding: 1rem;                       /* Espacio interno */
}

/* Encabezados + Imagen */
.articulo-header {
  display: flex;
  align-items: flex-start; /* Imagen y títulos se alinean arriba */
  gap: 1rem;
  margin-bottom: 1rem;     /* Espacio debajo antes del texto */
}

/* Imagen del artículo */
.articulo-imagen {
  flex: 0 0 200px;   /* Fija un ancho de 200px */
  max-width: 200px;
  flex-shrink: 0;
}

.articulo-imagen img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}

/* Contenedor de los títulos */
.articulo-titulos {
  flex: 1;
}

/* Encabezados dentro de .articulo-titulos */
.articulo-titulos h1 {
  font-size: 1.5rem;
  margin: 0;
  color: #333;
}

.articulo-titulos h2 {
  font-size: 1.3rem;
  margin: 0.3rem 0;
  color: #555;
}

.articulo-titulos h3 {
  font-size: 1.1rem;
  margin: 0.3rem 0;
  color: #777;
}

/* Alineación en escritorio (>= 1024px) */
@media (min-width: 1024px) {
  .articulo-titulos h1,
  .articulo-titulos h2,
  .articulo-titulos h3 {
    text-align: left !important; /* Forzamos alineación a la izquierda */
    margin-left: 20rem; /* Ajusta este valor para el indentado deseado */
  }
}

/* Texto principal del artículo */
.articulo-texto p {
  text-align: justify;
  margin-top: 0.5rem;
  color: #444;
  line-height: 1.4;
}

/* Responsividad para pantallas pequeñas */
@media (max-width: 768px) {
  .articulo-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .articulo-imagen {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    margin-bottom: 1rem;
  }
}

ul {
  padding-left: 18px; /* Valor menor al predeterminado */
  margin-left: 0;
}

.btn-ver-mas {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  background-color: #004080; /* Color base */
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  font-size: 0.9rem; /* Ajusta este valor según lo pequeño que quieras el texto */
}

.btn-ver-mas:hover {
  background-color: #002147;
}