/* Módulo productos — «01 Webinars / 02 Talleres / 03 Conferencias».
   Medidas del artboard 1440, con el contenido de x=53,5 a x=1400 (1346,5 de ancho):
   número 55,5–213 · texto 259–630 · foto 669,7–1084,3 · características 1115–1400.
   Expresadas en % de esa banda, la fila escala entera sin desalinearse. */

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

.m-productos__item {
  display: grid;
  grid-template-columns: 11.7% 27.55% 30.79% 21.17%;
  justify-content: space-between;
  align-items: start;
}

.m-productos__item + .m-productos__item {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line);
}

/* Número: morado al 10% (#f1ebf3 sobre blanco en el diseño). Es decoración:
   el orden real lo da la lista, por eso va aria-hidden y no cuenta como texto. */
.m-productos__num {
  font-family: var(--font-display);
  /* Las dos cifras tienen que caber en su columna (11,7% del contenedor, que
     tope a 80rem): ancho de «01» = 1,085 × el cuerpo, de ahí el 10,3vw / 8,6rem. */
  font-size: clamp(3.5rem, 10.3vw, 8.6rem);
  white-space: nowrap;
  font-weight: var(--weight-medium);
  line-height: .78;
  letter-spacing: var(--tracking-tight);
  color: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg));
}

.m-productos__title {
  font-size: clamp(1.75rem, 3.15vw, 2.83rem); /* 45,3px a 1440, con suelo para móvil */
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-primary);
}

.m-productos__subtitle {
  margin-top: var(--space-1);
  font-size: clamp(1.125rem, 1.67vw, 1.5rem); /* 24px a 1440, con suelo para móvil */
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--color-primary);
}

.m-productos__text { margin-top: var(--space-3); }
.m-productos__text > * + * { margin-top: calc(var(--leading-body) * 1em); }

.m-productos__cta { margin-top: var(--space-4); }
/* El anillo global es currentColor (morado) sobre el amarillo del botón: poco contraste */
.m-productos__cta:focus-visible { outline-color: var(--color-primary-strong); }

/* Foto: la imagen llega ya recortada a la caja; aquí solo se sesga el paralelogramo. */
.m-productos__photo { aspect-ratio: 414.6 / 393.9; }
.m-productos__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(25.11% 0, 100% 0, 74.58% 100%, 0 100%);
}

.m-productos__features {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-1);
  padding: 0;           /* el reset global solo quita márgenes */
  list-style: none;
}

.m-productos__feature {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
  line-height: var(--leading-snug);
}

.m-productos__icon {
  width: 1.875rem; /* 30px del diseño */
  height: auto;
}

/* Tablet: el número se va junto al título y la foto baja al lado de las características. */
@media (max-width: 63.99rem) {
  .m-productos__item {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-4);
    row-gap: var(--space-5);
  }
  .m-productos__num {
    grid-column: 1 / -1;
    font-size: 4.5rem;
    line-height: 1;
  }
  .m-productos__body { grid-column: 1 / -1; }
  .m-productos__photo { width: min(100%, 26rem); }
}

@media (max-width: 47.99rem) {
  .m-productos__item { grid-template-columns: minmax(0, 1fr); }
  .m-productos__photo { width: 100%; }
  .m-productos__cta { width: 100%; }
}