/* Módulo articulos — tarjetas de 410,5 × 381,3 del artboard 1440, en x=88,2 · 515,2 · 942,1.
   Dentro: foto de 179 de alto (46,9%), píldora de categoría sobre ella, y el texto
   con 52 de sangrado (12,7%). */

.m-articulos {
  padding-block: var(--section-y);
  background: var(--color-bg);
}

.m-articulos__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.m-articulos__title {
  max-width: 11em; /* «Análisis que ayuda / a comprender» */
  margin-top: var(--space-2);
  letter-spacing: var(--tracking-title);
}

.m-articulos__text {
  max-width: 38rem;
  margin-top: var(--space-3);
}

.m-articulos__cta {
  flex: none;
  margin-top: var(--space-3);
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}

.m-articulos__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.29%; /* 16,5 de 1278 */
  margin-top: var(--space-6);
  padding: 0;           /* el reset global solo quita márgenes */
  list-style: none;
}

.m-articulos__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-bg);
}

.m-articulos__media {
  position: relative;
  aspect-ratio: 410.5 / 179;
}
.m-articulos__img { width: 100%; height: 100%; object-fit: cover; }

/* Píldora de categoría: abajo a la izquierda de la foto, como en el diseño. */
.m-articulos__tag {
  position: absolute;
  left: 12.67%;  /* 52 de 410,5 */
  bottom: 6.15%; /* 11 de 179 */
  padding: .3em 1.1em;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.m-articulos__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-4) 12.67% var(--space-3);
}

.m-articulos__card-title {
  font-size: clamp(1.125rem, 1.46vw, 1.31rem); /* 21px a 1440 */
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-primary);
}

.m-articulos__excerpt {
  margin-top: var(--space-2);
  line-height: var(--leading-snug);
}

.m-articulos__link {
  margin-top: auto;
  padding-top: var(--space-3);
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}

@media (max-width: 63.99rem) {
  .m-articulos__head { flex-direction: column; }
  .m-articulos__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
}

@media (max-width: 47.99rem) {
  .m-articulos__list { grid-template-columns: minmax(0, 1fr); }
}