/* ============================================================
   PROSE — sistema editorial para páginas de contenido largo
   Uso: envolver texto (h2, p, ul, media) dentro de .section-prose
   Objetivo: jerarquía, ritmo vertical y ancho legible.
   ============================================================ */

.section-prose {
  /* Ancho legible por defecto (no dependemos de content-narrow) */
  max-width: 820px;
  margin-inline: auto;

  /* En páginas largas, el texto debe ir a la izquierda */
  text-align: left;
}

/* Ritmo vertical consistente */
.section-prose > * + * {
  margin-top: 0.9rem;
}

/* Headings dentro de prosa: más editoriales, menos “grito” */
.section-prose h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.65rem);
  line-height: 1.25;
  letter-spacing: -0.2px;

  /* Aire editorial: más arriba que abajo */
  margin-top: 1.6rem;
  margin-bottom: 0.4rem;
}

/* Ajuste para el primer h2 del bloque (no necesita tanto aire arriba) */
.section-prose h2:first-child {
  margin-top: 0;
}

/* ============================================================
   Párrafos: legibilidad (DESACTIVADO)
   Antes limitaba el ancho de los párrafos a 70 caracteres
   para mejorar la lectura.
   ============================================================ */

/*
.section-prose p {
  max-width: 70ch;
}
*/


/* Listas en prosa (no en UI) */
.section-prose ul,
.section-prose ol {
  padding-left: 1.1rem;
}

.section-prose li + li {
  margin-top: 0.35rem;
}

/* Integración del vídeo u otros media dentro de prosa */
.section-prose .video-wrapper {
  margin-top: 1.2rem;
  margin-bottom: 1.2rem;
}
/* ============================================================
   PROSE — handoff con section-header
   Evita saltos raros entre intro y contenido.
   ============================================================ */

/* Si una prosa va justo después de un section-header,
   controlamos el aire superior del bloque editorial */
.section-header + .section-prose {
  margin-top: 1.25rem;
}

/* Si el primer elemento dentro de prosa es un h2,
   no le metas un “saltazo” extra por arriba */
.section-header + .section-prose h2:first-child {
  margin-top: 0.6rem;
}