/* Módulo: Oferta destacada (.m-oferta). Diseño a 1440: tarjetas 437×478 en x 44/502/960. */

.m-oferta {
  --m-oferta-tracking: var(--tracking-title);   /* tracking -25 de los títulos del diseño: falta token compartido */
  --m-oferta-eyebrow-tracking: var(--tracking-eyebrow);   /* PDF: 222px de tinta (--tracking-eyebrow .3em da 241): pedido como cambio compartido */
  --m-oferta-shade: var(--color-ink);   /* el diseño usa un índigo muy oscuro (~#2e2b66): falta token */
  --m-oferta-indent: var(--space-4);
  /* Degradado oscuro inferior del diseño (no viene en la foto): legibilidad del texto y del enlace. */
  --m-oferta-fade: linear-gradient(
    to bottom,
    transparent 42%,
    color-mix(in srgb, var(--m-oferta-shade) 14%, transparent) 54%,
    color-mix(in srgb, var(--m-oferta-shade) 36%, transparent) 74%,
    color-mix(in srgb, var(--m-oferta-shade) 80%, transparent)
  );
  padding-block: calc(var(--space-6) - var(--space-1) / 2) calc(var(--space-5) - var(--space-1) / 2);   /* 60 / 44px */
  background: var(--color-bg);
}

/* Fila más ancha que .container: 1352px (tarjetas desde x=44 a 1440). */
.m-oferta__inner {
  width: min(100% - 2rem, 84.5rem);
  margin-inline: auto;
}

/* Cabecera y tarjetas comparten columnas: el botón queda centrado sobre la 3.ª tarjeta. */
.m-oferta__head,
.m-oferta__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 27.3125rem));
  justify-content: space-between;
  column-gap: var(--space-2);
}

/* Antetítulo y título alineados con el texto de las tarjetas. */
.m-oferta__eyebrow,
.m-oferta__title {
  grid-column: 1 / 3;
  margin-inline-start: var(--m-oferta-indent);
}
.m-oferta__eyebrow {
  grid-row: 1;
  margin-bottom: var(--space-2);
  letter-spacing: var(--m-oferta-eyebrow-tracking);
}
/* 10.1em: corta en 3 líneas como el diseño («Formación que / conecta conocimiento / con acción»).
   .97: el PDF lo tiene a 62.1px y --text-display da 64 a 1440. */
.m-oferta__title {
  grid-row: 2;
  max-width: 10.1em;
  font-size: var(--text-h2);
  letter-spacing: var(--m-oferta-tracking);
}

.m-oferta__cta {
  grid-column: 3;
  grid-row: 2;
  justify-self: center;
  align-self: center;
  margin-top: var(--space-1);   /* el diseño lo baja ~4px respecto al centro del título */
}

/* Tarjetas */
.m-oferta__cards {
  margin-top: calc(var(--space-6) - var(--space-1));   /* 56px: tarjetas en y=344 como el diseño */
  padding: 0;
  list-style: none;
  row-gap: var(--space-2);
  align-items: stretch;   /* misma altura por fila aunque una tarjeta crezca por contenido */
}

/* min-width 0 + stretch: sin ellos el aspect-ratio convierte el alto del contenido en un ancho
   mínimo y la tarjeta desborda su pista entre 1088 y 1310px. */
.m-oferta__card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  justify-self: stretch;
  aspect-ratio: 437 / 478;   /* crece si el contenido no cabe (la foto se recorta con cover) */
  padding: calc(var(--space-7) + var(--space-1) / 2) var(--space-5) var(--space-3) var(--m-oferta-indent);
  border-radius: var(--radius);
  background: var(--color-primary);
  color: var(--color-on-dark);
}

.m-oferta__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.m-oferta__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--m-oferta-fade);
}

/* Borde fino gris; en hover/foco pasa a amarillo (tarjeta central del diseño). */
.m-oferta__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border: .5px solid var(--color-card-border);
  border-radius: inherit;
  pointer-events: none;
  transition: border-color var(--dur) var(--ease);
}
.m-oferta__card:hover::after,
.m-oferta__card:focus-within::after {
  border: 1px solid var(--color-accent);
}

.m-oferta__card-title {
  font-family: var(--font-ui);
  font-size: var(--text-xl);
  font-weight: var(--weight-ui);
  line-height: var(--leading-snug);
  color: inherit;
}

/* Por encima del ::before del enlace para que el texto se pueda seleccionar. */
.m-oferta__text {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--space-4) + var(--space-1));
  line-height: calc(var(--leading-snug) * 1.025);   /* 24px a 18px, como el diseño */
  max-width: max(49%, 9em);
}
/* El texto va a la izquierda de la persona de cada foto: ancho proporcional a la tarjeta
   según la composición del diseño (a 1440 reproduce sus saltos de línea), con un mínimo legible.
   ponytail: depende del orden de las tarjetas; si el editor las reordena o cambia fotos, pedir un
   sub campo por tarjeta (ancho del texto) que salga como modificador BEM. */
.m-oferta__card:nth-child(3n + 2) .m-oferta__text { max-width: max(68.8%, 12em); }
.m-oferta__card:nth-child(3n) .m-oferta__text { max-width: max(56.4%, 10.5em); }

/* Escritorio: el diseño corre el contenido de la 3.ª tarjeta ~7px a la derecha (sus textos van cada
   462px y las tarjetas cada 458px). Mismo ancho de contenido: lo que suma a la izquierda lo resta a la derecha. */
@media (min-width: 68rem) {
  .m-oferta__card:nth-child(3n) {
    padding-inline: calc(var(--m-oferta-indent) + var(--space-1)) calc(var(--space-5) - var(--space-1));
  }
}

.m-oferta__link {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  padding-block: var(--space-2);
  color: var(--color-accent);
}
/* Toda la tarjeta es clicable a través del enlace. */
.m-oferta__link::before {
  content: "";
  position: absolute;
  inset: 0;
}

/* Tablet: cabecera apilada y tarjetas a 2 columnas (la impar sobrante, centrada). */
@media (max-width: 67.99rem) {
  .m-oferta__head { grid-template-columns: minmax(0, 1fr); }
  .m-oferta__eyebrow,
  .m-oferta__title { grid-column: 1; }
  .m-oferta__cta {
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
    margin-top: var(--space-4);
    margin-inline-start: var(--m-oferta-indent);
  }

  .m-oferta__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-oferta__card { padding-top: var(--space-6); }
  .m-oferta__card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - var(--space-2) / 2);
  }
  .m-oferta__text { margin-top: var(--space-3); }
  /* A 2 columnas el 68.8% llega a la cara de la persona de la 2.ª foto. */
  .m-oferta__card:nth-child(3n + 2) .m-oferta__text { max-width: max(57%, 12em); }
}

/* Móvil: una columna (máx. 34rem para que la tarjeta no crezca sin fin hasta 767px);
   la tarjeta mantiene la proporción de la foto. */
@media (max-width: 47.99rem) {
  .m-oferta { --m-oferta-indent: 0px; }
  .m-oferta__cards { grid-template-columns: minmax(0, 34rem); }
  .m-oferta__card {
    padding: var(--space-5) var(--space-4) var(--space-2) var(--space-3);
  }
  .m-oferta__card:last-child:nth-child(odd) { width: auto; justify-self: stretch; }
  /* Velo suave a la izquierda: el texto blanco pasa AA sobre las zonas claras de la foto. */
  .m-oferta__card::before {
    background:
      linear-gradient(to right, color-mix(in srgb, var(--m-oferta-shade) 28%, transparent) 55%, transparent 72%),
      var(--m-oferta-fade);
  }
  /* Columna de texto más ancha: con la tarjeta estrecha cabían ~15 caracteres por línea. */
  .m-oferta__card:nth-child(n) .m-oferta__text { max-width: 60%; }
}