/* Módulo intro — «¿Qué es la Academia ADN?». Medidas del artboard 1440.
   La composición de la derecha se mide en % de la caja de la foto (546×451 a 1440):
   así escala entera sin desalinearse. */

.m-intro {
  /* 26.7px / 31px: entre --leading-tight y --leading-snug */
  --m-intro-quote-leading: calc((var(--leading-tight) + var(--leading-snug)) / 2);
  /* Tracking −20 de Illustrator en los textos bold grandes (pendiente de token compartido) */
  --m-intro-tracking: var(--tracking-tight);
  /* Un solo token para el fondo: la «mordida» sobre la foto tiene que ser del
     mismo color que la sección para desaparecer en ella. */
  --m-intro-bg: var(--color-bg);
  padding-block: var(--section-y) calc(var(--space-5) + var(--space-1) / 2);
  background: var(--m-intro-bg);
}

.m-intro--gris { --m-intro-bg: var(--color-surface); }

/* El paralelogramo amarillo y la mordida solo existen para alojar la frase
   destacada: sin frase la foto va limpia y la sección cierra con su ritmo normal. */
.m-intro--sin-frase { padding-bottom: var(--section-y); }
.m-intro--sin-frase .m-intro__photo::before,
.m-intro--sin-frase .m-intro__photo::after { content: none; }

.m-intro__inner {
  display: grid;
  grid-template-columns: 54.375% 42.66%; /* foto de x=776 a x=1322 */
  align-items: start;
}

/* Columna de texto (padding: aire con la foto entre 1088 y 1300px) */
.m-intro__content { padding-right: var(--space-5); }

.m-intro__title {
  max-width: 7.5em; /* «Aprender para / liderar mejor» */
  margin-top: var(--space-2);
  letter-spacing: var(--m-intro-tracking);
}

.m-intro__text {
  max-width: 33.2em; /* 598px: reproduce los cortes de línea del diseño */
  margin-top: var(--space-2);
}
.m-intro__text > * + * { margin-top: calc(var(--leading-body) * 1em); } /* una línea en blanco */
.m-intro__text strong { font-weight: var(--weight-bold); }

.m-intro__cta { margin-top: calc(var(--space-5) + var(--space-1)); }
/* El anillo global es currentColor (amarillo) y sobre blanco no contrasta */
.m-intro__cta:focus-visible { outline-color: var(--color-primary); }

/* Foto + paralelogramo amarillo + mordida blanca + frase */
.m-intro__media {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  margin-top: -.6875rem; /* la foto arranca 11px sobre el antetítulo */
}

/* Sin antetítulo la referencia desaparece: la foto baja hasta el primer párrafo.
   Solo en la rejilla de dos columnas; apilada no hay nada con lo que alinearla. */
@media (min-width: 60rem) {
  .m-intro__inner:not(:has(.m-intro__eyebrow)) .m-intro__media { margin-top: 4.875rem; }
}

.m-intro__photo { position: relative; }
.m-intro__img { width: 100%; }

.m-intro__photo::before,
.m-intro__photo::after {
  content: "";
  position: absolute;
}

/* Paralelogramo amarillo (1150,374)-(1276,497) */
.m-intro__photo::before {
  z-index: 1;
  left: 68.59%;
  top: 66.83%;
  width: 22.89%;
  height: 27.27%;
  background: var(--color-accent);
  clip-path: polygon(26.4% 0, 100% 0, 73.52% 100%, 0 100%);
}

/* Mordida blanca: el paralelogramo blanco del diseño recortado a la caja de la foto
   (lo que queda fuera es blanco sobre blanco) */
.m-intro__photo::after {
  z-index: 2;
  inset: 82.53% 0 -2px 48.51%; /* -2px: tapa el borde antialias de la foto */
  background: var(--m-intro-bg);
  clip-path: polygon(7.52% 0, 100% 0, 100% 100%, 0 100%);
}

.m-intro__quote {
  position: absolute;
  z-index: 3;
  left: 55.86%;  /* línea amarilla en x=1082 */
  right: -6%;    /* la frase sobresale de la foto como en el diseño; si crece, parte línea */
  top: 87.5%;
  /* Excepción geométrica: el token es el tope y los cqi solo lo encogen en proporción
     a la foto (4.89cqi = 26.7px a 546px), para que la frase quepa en la mordida
     cuando la foto se estrecha (960–1300px). */
  padding-left: min(var(--space-3), 4.4cqi);
  border-left: 2px solid var(--color-accent);
  font-family: var(--font-display);
  font-size: min(var(--text-xl), 4.89cqi);
  font-weight: var(--weight-bold);
  line-height: var(--m-intro-quote-leading);
  letter-spacing: var(--m-intro-tracking);
  color: var(--color-primary);
}
/* Sin foto, la frase fluye normal */
.m-intro__quote:only-child { position: static; }

/* Las dos columnas aguantan hasta 960px; por debajo apila texto → foto + frase,
   todo alineado al mismo eje izquierdo */
@media (max-width: 59.99rem) {
  .m-intro { padding-bottom: var(--section-y); }
  .m-intro__inner { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-5); }
  .m-intro__content { padding-right: 0; }
  .m-intro__media {
    width: min(100%, 34rem);
    margin-top: 0;
    margin-bottom: var(--space-4); /* la frase sobresale bajo la foto */
  }
}

@media (max-width: 47.99rem) {
  .m-intro__cta { margin-top: var(--space-4); }
  .m-intro__media { margin-bottom: 0; }
  .m-intro__quote {
    position: static;
    margin-top: var(--space-3);
    padding-left: var(--space-2);
    font-size: var(--text-xl);
  }
}