/* ─────────────────────────────────────────────────────────────────────────────
   longformTwoBlocks — dos bloques de prosa bajo un titular.
   Ningún fondo propio, ninguna caja, ningún filete: sólo ritmo y aire. El color
   sale de las variables del sitio, así que claro y oscuro salen solos.
   ───────────────────────────────────────────────────────────────────────────── */

.g-longformTwoBlocks-head { margin-bottom: clamp(36px, 6vh, 74px); }
/* alemán largo a cuerpo de titular: se parte por el ancho, pero sin guionar solo */
.g-longformTwoBlocks-head h2 { overflow-wrap: break-word; hyphens: manual; }

/* minmax(0,…) obligado: una palabra larga de un titulillo no puede fijar el
   mínimo de su columna y descuadrar la rejilla entera */
.g-longformTwoBlocks-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
}
/* el segundo bloque baja para romper la simetría (margen, no transform: así las
   dos columnas siguen midiendo lo mismo de alto) */
.g-longformTwoBlocks-off { margin-top: 80px; }
/* si sólo llega un bloque, la prosa ocupa el ancho entero y no deja media página coja */
.g-longformTwoBlocks-solo { grid-template-columns: minmax(0, 1fr); }
.g-longformTwoBlocks-solo .g-longformTwoBlocks-p,
.g-longformTwoBlocks-solo .g-longformTwoBlocks-close { max-width: none; }

.g-longformTwoBlocks-sub {
  font-family: var(--display), sans-serif;
  font-weight: var(--dw);
  letter-spacing: var(--dt);
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.16;
  color: var(--text);
  overflow-wrap: break-word;
  hyphens: manual;
  margin-bottom: 18px;
}

.g-longformTwoBlocks-p {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--t2);
  max-width: 58ch;
  text-wrap: pretty;
}
.g-longformTwoBlocks-p + .g-longformTwoBlocks-p { margin-top: 15px; }

/* la frase de cierre: cursiva serif de acento, la misma que la palabra del titular */
.g-longformTwoBlocks-close {
  font-family: var(--em-font, var(--font-iserif)), serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: var(--a2);
  max-width: 36ch;
  margin-top: 26px;
  text-wrap: pretty;
}

@media (max-width: 900px) {
  .g-longformTwoBlocks-head { margin-bottom: 30px; }
  .g-longformTwoBlocks-grid { grid-template-columns: minmax(0, 1fr); gap: 38px; }
  /* en móvil se apilan sin desplazamiento */
  .g-longformTwoBlocks-off { margin-top: 0; }
  .g-longformTwoBlocks-sub { font-size: 24px; margin-bottom: 14px; }
  .g-longformTwoBlocks-p,
  .g-longformTwoBlocks-close { max-width: none; }
  .g-longformTwoBlocks-close { font-size: 19px; margin-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .g-longformTwoBlocks-col { transition: none; }
}