/* ==========================================================================
   RELATO
   Bloques narrativos largos. Es un ritmo distinto al de la home: menos
   secciones-ficha y más lectura corrida, con la fotografía como ancla.
   Se usa en /sobre-mi y queda disponible para las páginas de área.
   ========================================================================== */

/* --- Apertura de página ---------------------------------------------------
   Sin foto: el titular es largo y la primera pantalla tiene que leerse.      */

.apertura__titulo {
  max-width: 20ch;
  margin-top: var(--space-6);
  /* Más chico que el H1 del hero: acá el titular es una frase, no un golpe. */
  font-size: clamp(1.75rem, 1.15rem + 2.56vw, 3rem);
}

/* --- Bloque de relato con foto -------------------------------------------- */

.relato__inner {
  display: grid;
  gap: var(--space-8);
}

.relato__media {
  aspect-ratio: 3 / 4;
}

.relato__texto > p,
.relato__texto > ul {
  margin-top: var(--space-6);
  max-width: var(--measure);
}

.relato__texto > .eyebrow + h2 {
  margin-bottom: var(--space-2);
}

@media (min-width: 48rem) {
  .relato__inner {
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    align-items: start;
    gap: var(--space-16);
  }

  /* La foto acompaña la lectura en vez de quedar colgada arriba. */
  .relato__media {
    position: sticky;
    top: calc(var(--header-h) + var(--space-8));
  }

  /* Alterna el lado de la foto entre bloques: sin esto, tres bloques seguidos
     con la imagen a la izquierda se leen como una plantilla repetida. */
  .relato__inner--invertido {
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  }

  .relato__inner--invertido .relato__media {
    order: 2;
  }
}

/* --- Frase destacada dentro del relato ------------------------------------
   No es una cita de otra persona: es el remate del párrafo anterior. Por eso
   no lleva comillas ni cambia de familia, sólo de tamaño y de peso.          */

.destacado {
  font-family: var(--font-display);
  font-size: var(--type-h3);
  font-weight: 300;
  line-height: 1.4;
  text-wrap: balance;
}

.section--deep .destacado {
  color: var(--color-on-deep);
}

/* --- Negaciones ------------------------------------------------------------
   Las cuatro cosas que Belén no hace. Marcadas con una línea de acento a la
   izquierda en vez de una viñeta: no es una lista de ítems, es una postura.  */

.negaciones {
  margin: 0;
  padding: 0;
  list-style: none;
}

.negaciones > li {
  padding-block: var(--space-3);
  padding-inline-start: var(--space-6);
  border-inline-start: 2px solid var(--color-accent);
}

.negaciones > li + li {
  margin-top: var(--space-2);
}

/* --- Frases ajenas ---------------------------------------------------------
   Lo que las pacientes escucharon antes de llegar. Van entrecomilladas
   porque son voces de otros, no la de Belén.                                 */

.frases {
  display: grid;
  gap: var(--space-4);
  margin-block: var(--space-12);
  padding: 0;
  list-style: none;
}

.frase {
  font-family: var(--font-display);
  font-size: var(--type-h3);
  font-weight: 200;
  font-style: italic;
  line-height: 1.3;
  color: rgb(250 248 245 / 0.62);
}

.frase::before {
  content: "“";
}

.frase::after {
  content: "”";
}

.giro__espacio {
  margin-top: var(--space-8);
}

.giro__pregunta {
  max-width: 28ch;
  margin-bottom: var(--space-6);
  font-family: var(--font-display);
  font-size: var(--type-h2);
  font-weight: 200;
  line-height: 1.3;
  letter-spacing: var(--track-h3);
  text-wrap: balance;
}

/* En desktop el bloque se parte en dos: a la izquierda lo que la paciente
   trae, a la derecha lo que escuchó. Acotado a la medida de lectura y a todo
   el ancho de la sección, la mitad derecha quedaba vacía y el bloque se leía
   desbalanceado. La contraposición además es el contenido: son dos voces. */
@media (min-width: 64rem) {
  .giro__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    column-gap: var(--space-16);
  }

  .frases {
    grid-column: 2;
    grid-row: 1;
    margin-block: 0;
    padding-top: var(--space-2);
  }

  .giro__inner > :last-child {
    grid-column: 1 / -1;
    margin-top: var(--space-16);
  }

  .giro__pregunta {
    max-width: 34ch;
    font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  }
}

/* --- Remate del manifiesto cuando va al final del bloque ------------------- */

.manifesto__quote--abajo {
  max-width: 28ch;
  margin-top: var(--space-12);
}

/* --- Trayectoria ----------------------------------------------------------- */

.hitos {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--hairline);
}

.hito {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2) var(--space-6);
  padding-block: var(--space-6);
  border-bottom: var(--hairline);
}

.hito__anio {
  grid-row: span 2;
  min-width: 3.5ch;
  color: var(--color-accent-ink);
  font-family: var(--font-display);
  font-size: var(--type-small);
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-h3);
}

.hito__titulo {
  font-family: var(--font-body);
  font-size: var(--type-h4);
  font-weight: 600;
  letter-spacing: 0;
}

.hito__body {
  grid-column: 2;
  max-width: var(--measure);
  font-size: var(--type-small);
}

.hitos__pie {
  margin-top: var(--space-8);
  font-size: var(--type-small);
}

@media (min-width: 64rem) {
  .hito {
    grid-template-columns: auto minmax(0, 24rem) minmax(0, 1fr);
    align-items: baseline;
    gap: var(--space-8);
  }

  .hito__anio {
    grid-row: auto;
  }

  .hito__body {
    grid-column: auto;
  }
}