/* Módulo mision_vision — dos paneles en diagonal. Artboard 1440: el panel morado
   va de y=0 a 622 (x 0→801 arriba, 0→639 abajo) y el amarillo es el mismo panel
   espejado 57px más abajo, dejando 16px de aire blanco entre las dos diagonales.

   La diagonal y la marca de agua vienen dentro de cada imagen: se estiran con
   object-fit: fill. Las dos columnas son una sola fila de la rejilla, así que
   los paneles miden siempre lo mismo de alto y sus diagonales quedan paralelas
   crezca lo que crezca el texto. */

.m-mision {
  --m-mision-tracking: var(--tracking-title);
  padding-bottom: 3.96%; /* 57px a 1440: el hueco que deja el panel desplazado */
}

/* Columnas: 801 (morado) y 800 (amarillo) solapadas 161px, la anchura de la diagonal. */
.m-mision__inner {
  display: grid;
  grid-template-columns: 44.47% 11.16% 44.37%;
}

.m-mision__panel {
  position: relative;
  isolation: isolate;
  grid-row: 1;
  color: var(--m-mision-ink);
}

/* Panel 1 (misión) sobre morado; panel 2 (visión) sobre amarillo y 57px más abajo. */
.m-mision__panel:first-child {
  --m-mision-ink: var(--color-on-dark);
  grid-column: 1 / 3;
  padding: 15.1% 21.1% 20.22% 9.99%;
}
.m-mision__panel:nth-child(2) {
  --m-mision-ink: var(--color-primary);
  grid-column: 2 / 4;
  padding: 15.26% 6.15% 23.14% 25.58%;
  translate: 0 9.16%; /* 57px de 622: desplaza sin descuadrar la fila */
}

/* Un tercer panel no cabe en la diagonal: se apila entero y avisa en el editor. */
.m-mision__panel:nth-child(n + 3) {
  grid-column: 1 / -1;
  grid-row: auto;
  padding: var(--section-y) max(1rem, calc((100% - 80rem) / 2));
}

.m-mision__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: fill; /* la diagonal tiene que llegar justo a las esquinas del panel */
}

.m-mision__title {
  margin-top: var(--space-1);
  letter-spacing: var(--m-mision-tracking);
  color: inherit;
}

.m-mision__lead {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: 1.17;
  letter-spacing: var(--m-mision-tracking);
}

.m-mision__text {
  margin-top: var(--space-3);
  line-height: var(--leading-snug);
}

/* Bajo 960px la diagonal no deja sitio al texto: paneles apilados a todo ancho
   y color plano (las imágenes solo sirven recortadas en diagonal). */
@media (max-width: 59.99rem) {
  .m-mision { padding-bottom: 0; }
  .m-mision__inner { display: block; }
  .m-mision__bg { display: none; }

  .m-mision__panel,
  .m-mision__panel:first-child,
  .m-mision__panel:nth-child(2) {
    padding: var(--section-y) max(1rem, calc((100% - 80rem) / 2));
    translate: none;
  }
  .m-mision__panel:first-child { background: var(--color-primary); }
  .m-mision__panel:nth-child(2) { background: var(--color-accent); }
}