/* Módulo evolucion: texto + persona con formas + lista numerada.
   Geometría del artboard de 1440: --a = 1px del diseño a ≥1440 y encoge por
   debajo (más rápido que el ancho) para que entre 1088 y 1440 la persona
   quepa entre el texto y la lista. Va en cqw (ancho real de la sección, sin
   la barra de scroll) para cuadrar con el left: 50% de la persona. */

.m-evolucion {
  --a: min(1px, (100cqw - 560px) / 880);
  --m-evolucion-tracking: var(--tracking-title);   /* tracking -25 del diseño */
  --m-evolucion-num: 33px;                                  /* columna de los números de la lista */
  container-type: inline-size;
  position: relative;
  padding-block: var(--space-3);
  background: var(--color-surface);
}

.m-evolucion__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-5);
  min-height: calc(532 * var(--a) - 2 * var(--space-3));   /* sección de 532px: 100px menos que el diseño, para que la persona quepa */
}

/* Columna de texto: acaba 88px antes del centro de la sección (552px a 1440),
   descontando el margen del .container, para no invadir a la persona. */
.m-evolucion__content { max-width: calc(50cqw - 88px - max(1rem, 50cqw - var(--container-max) / 2)); }
.m-evolucion__eyebrow { margin-bottom: var(--space-2); }
.m-evolucion__title { margin-bottom: calc(var(--space-1) * 1.5); letter-spacing: var(--m-evolucion-tracking); }
/* El párrafo se aparta de los brazos: 410px del diseño, pero encogiendo con la
   sección, porque por debajo de 1440 la persona baja más despacio que el texto. */
.m-evolucion__text { max-width: min(410px, 50cqw - 220px); margin-bottom: calc(var(--space-5) + var(--space-1)); }

/* El anillo de foco hereda el amarillo del texto y no se ve sobre el gris */
.m-evolucion__cta:focus-visible { outline-color: var(--color-primary); }

/* Lista numerada: columna del número + separadores de 281px del diseño */
.m-evolucion__list {
  counter-reset: evolucion;
  width: calc(var(--m-evolucion-num) + var(--space-3) + 281px);
  margin-inline-end: var(--space-3);
  padding: 0;
  list-style: none;
}

.m-evolucion__item {
  counter-increment: evolucion;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 86.5px;                 /* paso de los separadores del diseño (164, 251, 337) */
  margin-inline-start: calc(var(--m-evolucion-num) + var(--space-3));
  padding-block: var(--space-3);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--m-evolucion-tracking);
}
.m-evolucion__item + .m-evolucion__item { border-top: 1px solid var(--color-divider); }

.m-evolucion__item::before {
  content: counter(evolucion);
  position: absolute;
  top: 50%;
  left: calc(-1 * (var(--m-evolucion-num) + var(--space-3)));
  width: var(--m-evolucion-num);
  translate: 0 -50%;
  font-size: var(--text-2xl);
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  text-align: center;
  color: var(--color-primary);
}

/* El diseño deja más aire sobre el último ítem (39px frente a 26px): se bajan
   12px su texto y su número sin cambiar la altura de la lista. */
@media (min-width: 48rem) {
  .m-evolucion__item:last-child { padding-block: var(--space-4) calc(var(--space-1) * 1.5); }
  .m-evolucion__item:last-child::before { translate: 0 calc(-50% + var(--space-1) * 1.5); }
}

/* Persona + formas: 633px de ancho del diseño (x 401) y alto atado a la
   sección, de -39px hasta el borde inferior. Sin alto fijo, así los chevrones
   acompañan si la sección cambia de altura. Decorativa: no captura clics de
   la franja de la sección anterior que tapa. */
.m-evolucion__art {
  position: absolute;
  z-index: 1;
  left: calc(50% - 319 * var(--a));
  top: calc(-39 * var(--a));
  bottom: 0;
  width: calc(633 * var(--a));
  overflow: hidden;
  pointer-events: none;
}

.m-evolucion__art::before,
.m-evolucion__art::after {
  content: "";
  position: absolute;
  inset: 0;
}
.m-evolucion__art::before {
  background: var(--color-primary);
  clip-path: polygon(11.848% 71.788%, 44.676% 71.788%, 32.875% 113.234%, 0.047% 113.234%);
}
.m-evolucion__art::after {
  background: var(--color-accent);
  clip-path: polygon(65.577% 6.617%, 91.675% 6.617%, 78.894% 51.475%, 52.812% 51.475%);
}

/* La persona se apoya en el borde inferior de la sección y asoma 20px por
   arriba (la caja empieza 39px más arriba, así que 100% - 19px = sección + 20).
   Manda el alto y el ancho lo pone el archivo: cuanto más baja la sección, más
   estrecha sale, que es lo que la aparta de la columna de texto. */
.m-evolucion__img {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  width: 100%;
  height: calc(100% - 19 * var(--a));
  object-fit: contain;
  object-position: bottom right;
}

/* Tablet: texto y lista arriba, persona abajo apoyada en el borde inferior */
@media (max-width: 67.99rem) {
  .m-evolucion { padding-block: var(--section-y) 0; }
  .m-evolucion__inner { min-height: 0; }
  .m-evolucion__content { max-width: none; }
  .m-evolucion__text { max-width: 470px; }
  .m-evolucion__list { margin-inline-end: 0; }
  .m-evolucion__art {
    position: relative;
    left: auto;
    top: auto;
    aspect-ratio: 633 / 571;
    width: min(100% - 2rem, 30rem);
    margin: var(--space-5) auto 0;
  }
}

/* Móvil: una columna */
@media (max-width: 47.99rem) {
  .m-evolucion__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-5);
  }
  .m-evolucion__list { width: auto; }
  .m-evolucion__item { min-height: 0; padding-block: var(--space-2); }
}