/* ─────────────────────────────────────────────────────────────────────────────
   serviceStackedBlocks — bloques de servicio apilados a todo el ancho.
   Un solo fondo (el de la página), ni tarjetas ni filetes: la separación entre
   bloques es AIRE. Cada fila es una rejilla de dos columnas desiguales; las dos
   celdas van a `stretch` (el alto de la fila) para que ninguna mitad mida menos
   que la otra. El color sale siempre de las variables del sitio.
   ───────────────────────────────────────────────────────────────────────────── */

/* La cabecera usa la MISMA rejilla que las filas de abajo: titular a la
   izquierda, entradilla a la derecha. Antes iba con `max-width: 30ch` (~270px)
   y en 1440 dejaba ~1000px de vacío a la derecha. */
.g-serviceStackedBlocks-head {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(22px, 5vw, 96px);
  align-items: end;
}
.g-serviceStackedBlocks-head > * { min-width: 0; }

/* el titular manda sobre el tamaño de `.lg` (hasta 82px): el color del kit sale
   de un degradado con `background-clip: text`, así que una palabra alemana larga
   que se salga de su columna se queda SIN pintar y parece cortada. A este tamaño
   cabe de sobra en su columna y sigue por encima del nombre de bloque (44px). */
.g-serviceStackedBlocks-title .display {
  font-size: clamp(36px, 4.4vw, 64px);
  overflow-wrap: break-word;
  hyphens: manual;
}
/* la medida de lectura ya la fija la columna de la rejilla */
.g-serviceStackedBlocks-lede .lede { max-width: none; margin-top: 0; }

.g-serviceStackedBlocks-list { margin-top: clamp(50px, 8vh, 96px); }

/* aire grande entre bloques, ningún separador */
.g-serviceStackedBlocks-block + .g-serviceStackedBlocks-block { margin-top: clamp(56px, 9vh, 112px); }

/* minmax(0,…) obligatorio: el nombre a 44px fija el min-content de su columna */
.g-serviceStackedBlocks-row {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(22px, 5vw, 96px);
}
.g-serviceStackedBlocks-col, .g-serviceStackedBlocks-body { align-self: stretch; min-width: 0; }

/* el nombre hereda de `.display` el degradado y la cursiva de la palabra de acento;
   en grande, guionado MANUAL (auto parte casi todas las líneas en alemán) */
.g-serviceStackedBlocks-name {
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.02;
  overflow-wrap: break-word;
  hyphens: manual;
}

.g-serviceStackedBlocks-text {
  font-size: 17px;
  line-height: 1.66;
  color: var(--t2);
  max-width: 68ch;
  text-wrap: pretty;
}

.g-serviceStackedBlocks-tail {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 13px;
  margin-top: clamp(15px, 2vh, 22px);
  font-family: var(--display), sans-serif;
  font-weight: var(--dw);
  letter-spacing: var(--dt);
  font-size: 15.5px;
  color: var(--t3);
  font-variant-numeric: tabular-nums;
}
.g-serviceStackedBlocks-price { color: var(--a2); }
.g-serviceStackedBlocks-dur + .g-serviceStackedBlocks-price::before { content: "·"; margin-right: 13px; color: var(--t3); }

@media (max-width: 900px) {
  /* móvil a una columna: la entradilla vuelve a caer debajo del titular */
  .g-serviceStackedBlocks-head { grid-template-columns: 1fr; gap: 0; align-items: start; }
  .g-serviceStackedBlocks-lede .lede { margin-top: 20px; }
  .g-serviceStackedBlocks-list { margin-top: 38px; }
  /* el nombre queda ENCIMA del párrafo, sin filetes colgando */
  .g-serviceStackedBlocks-row { grid-template-columns: 1fr; gap: 14px; }
  .g-serviceStackedBlocks-block + .g-serviceStackedBlocks-block { margin-top: 46px; }
  .g-serviceStackedBlocks-name { font-size: clamp(27px, 7.4vw, 34px); }
  .g-serviceStackedBlocks-text { font-size: 16px; max-width: none; }
}

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