/* ─────────────────────────────────────────────────────────────────────────────
   hoverRowsCompact — filas de servicio de UNA línea, a dos columnas en escritorio.
   Sin foto, sin cajas: el único adorno es el filete de 1px de la lista y la
   flecha del kit. Todo el color sale de las variables (claro y oscuro solos).
   ───────────────────────────────────────────────────────────────────────────── */

.g-hoverRowsCompact-head .lede { max-width: 52ch; }

/* móvil primero: una sola columna */
.g-hoverRowsCompact-rows {
  margin-top: clamp(34px, 5vh, 62px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: clamp(36px, 5vw, 78px);
}

.g-hoverRowsCompact-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  gap: 4px 16px;
  align-items: center;
  padding: 14px 2px;
  border-bottom: 1px solid var(--line);
  transition: padding-left .5s cubic-bezier(.22, .61, .36, 1);
}
.g-hoverRowsCompact-row:first-child { border-top: 1px solid var(--line); }

.g-hoverRowsCompact-name {
  grid-column: 1;
  min-width: 0;
  font-family: var(--display), sans-serif;
  font-weight: var(--dw);
  letter-spacing: var(--dt);
  font-size: clamp(20px, 1.9vw, 24px);
  line-height: 1.18;
  overflow-wrap: break-word;
  hyphens: manual;
  transition: color .3s cubic-bezier(.22, .61, .36, 1);
}

.g-hoverRowsCompact-text {
  grid-column: 1;
  min-width: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--t2);
  text-align: left;
  overflow-wrap: break-word;
}

.g-hoverRowsCompact-go {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  justify-self: end;
  display: inline-flex;
  color: var(--t3);
  transition: transform .5s cubic-bezier(.22, .61, .36, 1), color .3s cubic-bezier(.22, .61, .36, 1);
}

/* el hover sólo vive en las filas que son enlace */
a.g-hoverRowsCompact-row:hover { padding-left: 8px; }
a.g-hoverRowsCompact-row:hover .g-hoverRowsCompact-name { color: var(--a2); }
a.g-hoverRowsCompact-row:hover .g-hoverRowsCompact-go { color: var(--a2); transform: translate(4px, -4px); }

/* escritorio: dos columnas y la frase corta a la derecha, en la misma línea.
   minmax(0, …) en las dos columnas: un nombre alemán largo no puede fijar el
   mínimo de su columna y descuadrar la rejilla. */
@media (min-width: 901px) {
  .g-hoverRowsCompact-rows { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .g-hoverRowsCompact-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, auto) 20px;
    gap: 8px 20px;
    align-items: baseline;
    padding: 16px 2px;
  }
  /* el filete de arriba lo llevan las dos primeras filas (una por columna) */
  .g-hoverRowsCompact-row:first-child { border-top: 0; }
  .g-hoverRowsCompact-row:nth-child(-n + 2) { border-top: 1px solid var(--line); }
  .g-hoverRowsCompact-text { grid-column: 2; grid-row: 1; text-align: right; }
  .g-hoverRowsCompact-go { grid-column: 3; align-self: baseline; }
}

@media (max-width: 900px) {
  .g-hoverRowsCompact-rows { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .g-hoverRowsCompact-name { font-size: 20px; }
  .g-hoverRowsCompact-text { font-size: 14.5px; }
  a.g-hoverRowsCompact-row:hover { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .g-hoverRowsCompact-row,
  .g-hoverRowsCompact-name,
  .g-hoverRowsCompact-go { transition: none; }
  a.g-hoverRowsCompact-row:hover { padding-left: 0; }
  a.g-hoverRowsCompact-row:hover .g-hoverRowsCompact-go { transform: none; }
}