/* ─────────────────────────────────────────────────────────────────────────────
   processColumns — cabecera centrada + 3-4 columnas de proceso alineadas arriba.
   Sin fondo propio, sin cajas, sin filetes entre columnas: sólo aire. El color
   sale siempre de las variables del kit (claro/oscuro salen solos).
   ───────────────────────────────────────────────────────────────────────────── */

.g-processColumns-head { max-width: 880px; margin: 0 auto; }
/* una palabra alemana larga no puede desbordar el titular; a cuerpo grande,
   guionado manual (el automático parte casi todas las líneas en móvil) */
.g-processColumns-head .display { overflow-wrap: break-word; hyphens: manual; }
.g-processColumns-head .lede { max-width: 56ch; }

.g-processColumns-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(34px, 3.6vw, 64px);
  align-items: start;
  margin-top: clamp(46px, 6.5vh, 86px);
}
.g-processColumns-n4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(30px, 2.8vw, 48px);
}

.g-processColumns-step { max-width: 44ch; }

.g-processColumns-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--a2);
}

.g-processColumns-title {
  font-family: var(--display), sans-serif;
  font-weight: var(--dw);
  font-size: clamp(22px, 2vw, 28px);
  letter-spacing: var(--dt);
  line-height: 1.16;
  margin-top: 14px;
  overflow-wrap: break-word;
  hyphens: manual;
}

.g-processColumns-text {
  font-size: 16px;
  line-height: 1.62;
  color: var(--t2);
  margin-top: 12px;
  text-wrap: pretty;
}

/* con cuatro columnas la medida se estrecha: el cuerpo baja un punto */
.g-processColumns-n4 .g-processColumns-title { font-size: clamp(22px, 1.7vw, 25px); }
.g-processColumns-n4 .g-processColumns-text { font-size: 15.5px; }

/* paso intermedio: cuatro columnas no caben en una tableta */
@media (max-width: 1080px) {
  .g-processColumns-n4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(34px, 4vw, 54px);
  }
  .g-processColumns-n4 .g-processColumns-text { font-size: 16px; }
}

@media (max-width: 900px) {
  .g-processColumns-grid,
  .g-processColumns-n4 { grid-template-columns: 1fr; gap: 34px; margin-top: 36px; }
  .g-processColumns-step { max-width: none; }
  .g-processColumns-head .lede { max-width: none; }
  .g-processColumns-title,
  .g-processColumns-n4 .g-processColumns-title { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .g-processColumns-grid .rv,
  .g-processColumns-head .rv { opacity: 1; transform: none; transition: none; }
}