/* Módulo metodologia — «Calidad hoy, mayor impacto mañana».
   Artboard 1440: banda gris de 477,6 (y 2386,8–2864,4). A la derecha, la misma
   forma diagonal repetida tres veces y desplazada: amarilla (x 671,2 / y +68,3),
   morada (x 688,2) y la foto (x 719,7, hasta el borde). */

.m-metodologia {
  /* La diagonal del diseño, en % de su caja de 719,5 × 467,9 */
  --m-metodologia-corte: polygon(0 0, 32.04% 66.3%, 48.91% 100%, 100% 100%, 100% 65.55%, 99.74% .36%);
  --m-metodologia-bg: var(--color-surface);
  position: relative;
  isolation: isolate;
  overflow: hidden; /* la franja amarilla sobresale por abajo de la banda */
  display: flex;
  align-items: center;
  min-height: min(29.85rem, 33.17vw); /* 477,6px a 1440 */
  padding-block: var(--section-y);
  background: var(--m-metodologia-bg);
}

.m-metodologia--blanco { --m-metodologia-bg: var(--color-bg); }

.m-metodologia__inner { position: relative; z-index: 1; }

.m-metodologia__title {
  /* «mayor impacto mañana» va en una sola línea: mide 654px en el diseño.
     A esa altura la diagonal aún no ha entrado, así que cabe de sobra. */
  max-width: min(11em, 54%);
  margin-top: var(--space-2);
  letter-spacing: var(--tracking-title);
}

.m-metodologia__text {
  /* Los mismos tres renglones del diseño: el más largo mide 639px. A la altura
     del párrafo la diagonal ya ha corrido hasta ~x950, así que pasar del 50%
     de la sección no la toca. */
  max-width: min(41rem, 54%);
  margin-top: var(--space-4);
}
.m-metodologia__text > * + * { margin-top: calc(var(--leading-body) * 1em); }

.m-metodologia__cta { margin-top: var(--space-4); }
.m-metodologia__cta:focus-visible { outline-color: var(--color-primary); }

/* Caja de la foto: pegada al borde derecho; las franjas son sus pseudoelementos. */
.m-metodologia__media {
  position: absolute;
  z-index: 0;
  right: 0;
  top: 2.05%;
  width: 50.02%;
  aspect-ratio: 719.5 / 467.9;
}

.m-metodologia__media::before,
.m-metodologia__media::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: var(--m-metodologia-corte);
}
/* Amarilla: la de más atrás, desplazada a la izquierda y hacia abajo */
.m-metodologia__media::after {
  z-index: -2;
  background: var(--color-accent);
  translate: -6.74% 14.6%;
}
/* Morada: entre la amarilla y la foto */
.m-metodologia__media::before {
  z-index: -1;
  background: var(--color-primary);
  translate: -4.38% 0;
}

.m-metodologia__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: var(--m-metodologia-corte);
}

/* Bajo 960px la diagonal deja sin sitio al texto: la foto pasa a ser una banda
   completa debajo, conservando el corte en el borde superior. */
@media (max-width: 59.99rem) {
  .m-metodologia {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding-bottom: 0;
  }
  .m-metodologia__text { max-width: none; }
  .m-metodologia__media {
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
    margin-top: var(--space-5);
    aspect-ratio: 16 / 9;
  }
  .m-metodologia__media::before,
  .m-metodologia__media::after { content: none; }
  .m-metodologia__img { clip-path: none; }
}