/* Módulo historias — testimonios en tarjeta morada.
   Artboard 1440: tarjetas de 410,5 × 299,1 separadas 16,5; dentro, la foto ocupa
   los primeros 175,8 (42,8%) y el texto arranca en +197,8 (48,2%). */

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

.m-historias__title {
  max-width: 14em; /* «Personas, aprendizajes / y experiencias que dejan huella» */
  margin-top: var(--space-2);
  letter-spacing: var(--tracking-title);
}

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

.m-historias__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-historias__card {
  display: grid;
  grid-template-columns: 42.83% minmax(0, 1fr);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-primary);
  color: var(--color-on-dark);
  aspect-ratio: 410.5 / 299.1;
}

.m-historias__photo { overflow: hidden; }
.m-historias__img { width: 100%; height: 100%; object-fit: cover; }

.m-historias__body {
  display: flex;
  flex-direction: column;
  /* El texto empieza en el 48,2% de la tarjeta: 5,4 puntos después de la foto */
  padding: 6.35% 5% 6.35% 5.4%;
}

/* Píldora amarilla de 114 × 25 */
.m-historias__tag {
  align-self: start;
  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-historias__name {
  margin-top: .7em;
  font-size: clamp(1.125rem, 1.52vw, 1.37rem); /* 21,9px a 1440 */
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-accent);
}

.m-historias__place {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

.m-historias__quote {
  margin-top: 1em;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.m-historias__link {
  margin-top: auto;
  padding-top: var(--space-2);
  font-weight: var(--weight-semibold);
  color: var(--color-on-dark);
}
.m-historias__link:focus-visible { outline-color: var(--color-accent); }

/* Tablet: dos tarjetas por fila. Móvil: una, y la tarjeta deja de ser apaisada
   para que la foto no quede en una tira estrecha. */
@media (max-width: 63.99rem) {
  .m-historias__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
}

@media (max-width: 47.99rem) {
  .m-historias__list { grid-template-columns: minmax(0, 1fr); }
  .m-historias__card { aspect-ratio: auto; }
  .m-historias__body { padding: var(--space-3); }
}