/* processPlainRows — filas de proceso sobrias.
   Un solo fondo (el de la página), ni tarjetas ni cajas: lo único que separa los
   pasos es el filete de 1 px de `--line`, el mismo de `priceList`/`hoverRows`.
   Todo el color sale de las variables, así que claro y oscuro salen solos. */

/* La cabecera NO se mide en `ch`: el titular es `.display.lg` (hasta 82 px) y un
   `ch` del cuerpo (~8 px) le dejaba una columna de ~240 px, mas estrecha que la
   columna izquierda de las filas — el titular caia a una palabra por linea con un
   hueco vacio a su derecha. Medida en px, holgada para 2-3 lineas de varias
   palabras y siempre mas ancha que la columna del titulillo. */
.g-processPlainRows-head { max-width: min(100%, 940px); }
.g-processPlainRows-head .display { max-width: 100%; overflow-wrap: break-word; }
.g-processPlainRows-head .lede { max-width: 52ch; }

.g-processPlainRows-rows {
  margin-top: clamp(40px, 6vh, 68px);
  border-top: 1px solid var(--line);
}

/* la columna del titulillo lleva texto grande: minmax(0,…) para que una palabra
   alemana larga no fije el mínimo y descuadre la fila entera */
.g-processPlainRows-row {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1fr);
  gap: clamp(18px, 3.2vw, 60px);
  align-items: start;
  padding: clamp(24px, 3vh, 34px) 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left .5s cubic-bezier(.22,.61,.36,1);
}
.g-processPlainRows-row:hover { padding-left: 10px; }

.g-processPlainRows-step {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--t3);
  margin-bottom: 11px;
  transition: color .35s cubic-bezier(.22,.61,.36,1);
}
.g-processPlainRows-row:hover .g-processPlainRows-step { color: var(--t2); }

.g-processPlainRows-h {
  font-family: var(--display), sans-serif;
  font-weight: var(--dw);
  font-size: clamp(22px, 2.2vw, 28px);
  letter-spacing: var(--dt);
  line-height: 1.14;
  color: var(--text);
  /* alemán largo en una columna estrecha: se parte, pero sin guionado automático */
  overflow-wrap: break-word;
  hyphens: manual;
  transition: color .35s cubic-bezier(.22,.61,.36,1);
}
.g-processPlainRows-row:hover .g-processPlainRows-h { color: var(--a2); }
.g-processPlainRows-h em {
  font-family: var(--em-font, var(--font-iserif)), serif;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.012em;
  color: var(--a2);
}

.g-processPlainRows-note {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t3);
}

.g-processPlainRows-p {
  font-size: 16.5px;
  line-height: 1.66;
  color: var(--t2);
  max-width: 66ch;
}

@media (max-width: 900px) {
  .g-processPlainRows-head, .g-processPlainRows-head .lede { max-width: none; }
  .g-processPlainRows-rows { margin-top: 32px; }
  /* móvil: una sola columna, el titulillo encima del párrafo */
  .g-processPlainRows-row { grid-template-columns: 1fr; gap: 11px; padding: 22px 0; }
  .g-processPlainRows-row:hover { padding-left: 0; }
  .g-processPlainRows-step { margin-bottom: 8px; }
  .g-processPlainRows-h { font-size: 21px; }
  .g-processPlainRows-note { margin-top: 8px; }
  .g-processPlainRows-p { font-size: 15.5px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .g-processPlainRows-row,
  .g-processPlainRows-step,
  .g-processPlainRows-h { transition: none; }
  .g-processPlainRows-row:hover { padding-left: 0; }
}