/* ─────────────────────────────────────────────────────────────────────────────
   serviceGridText — rejilla tipográfica de servicios.
   Ni cajas, ni bordes, ni sombras, ni filetes: el ritmo lo marca el aire entre
   celdas. Todo el color sale de las variables del sitio (claro y oscuro solos)
   y el único movimiento es la curva del kit: cubic-bezier(.22,.61,.36,1).
   ───────────────────────────────────────────────────────────────────────────── */

.g-serviceGridText-head { max-width: 780px; margin: 0 auto; }
.g-serviceGridText-lede { margin-top: 24px; }

/* minmax(0, 1fr): una palabra alemana larga en un titulillo no puede ensanchar
   su columna y descuadrar la rejilla entera */
.g-serviceGridText-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(30px, 4.6vw, 80px);
  row-gap: clamp(40px, 6vh, 76px);
  margin-top: clamp(48px, 7vh, 90px);
}
/* con 4 servicios: 2×2, centrada y algo más estrecha para que no quede rala */
.g-serviceGridText-grid.g-serviceGridText-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 980px;
  margin-inline: auto;
}

.g-serviceGridText-cell { min-width: 0; }
.g-serviceGridText-item { display: block; }

.g-serviceGridText-h {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--display), sans-serif;
  font-weight: var(--dw);
  font-size: clamp(20px, 1.9vw, 26px);
  letter-spacing: var(--dt);
  line-height: 1.16;
  color: var(--text);
  /* hyphens manual: en alemán el guionado automático parte casi todas las líneas */
  hyphens: manual;
  overflow-wrap: break-word;
  transition: color .38s cubic-bezier(.22,.61,.36,1);
}
.g-serviceGridText-p {
  font-size: 16px;
  line-height: 1.64;
  color: var(--t2);
  margin-top: 12px;
  max-width: 36ch;
  text-wrap: pretty;
}

/* la flecha del kit sólo si la celda lleva enlace; en reposo no ocupa sitio */
.g-serviceGridText-go {
  display: inline-flex;
  flex: none;
  color: var(--a2);
  opacity: 0;
  transform: translate(-5px, 5px);
  transition: opacity .38s cubic-bezier(.22,.61,.36,1), transform .38s cubic-bezier(.22,.61,.36,1);
}

.g-serviceGridText-item:hover .g-serviceGridText-h { color: var(--a2); }
.g-serviceGridText-link:hover .g-serviceGridText-go,
.g-serviceGridText-link:focus-visible .g-serviceGridText-go { opacity: 1; transform: none; }
.g-serviceGridText-link:focus-visible .g-serviceGridText-h { color: var(--a2); }
.g-serviceGridText-link:focus-visible { outline: 2px solid var(--a2); outline-offset: 8px; }

.g-serviceGridText-foot { justify-content: center; margin-top: clamp(46px, 6vh, 74px); }

/* tableta: dos columnas */
@media (max-width: 1080px) {
  .g-serviceGridText-grid,
  .g-serviceGridText-grid.g-serviceGridText-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* móvil: una sola columna, sin anchos máximos y con la flecha siempre visible
   (no hay cursor que la despierte) */
@media (max-width: 900px) {
  .g-serviceGridText-grid,
  .g-serviceGridText-grid.g-serviceGridText-two {
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
    row-gap: 32px;
    margin-top: 36px;
  }
  .g-serviceGridText-h { font-size: 21px; }
  .g-serviceGridText-p { max-width: none; font-size: 15.5px; margin-top: 9px; }
  .g-serviceGridText-go { opacity: 1; transform: none; }
  .g-serviceGridText-foot { margin-top: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .g-serviceGridText-h,
  .g-serviceGridText-go { transition: none; }
  .g-serviceGridText-go { transform: none; }
}