/* ─────────────────────────────────────────────────────────────────────────────
   serviceDetailList — cabecera + filas de servicio de dos columnas desiguales.
   Un solo fondo (el de la página), ninguna caja: lo único que separa las filas
   es el filete de 1px de `var(--line)`, igual que en la lista de precios.
   Todo el color sale de las variables del estilo (claro y oscuro salen solos).
   ───────────────────────────────────────────────────────────────────────────── */

/* ── cabecera: titular a la izquierda, entradilla a su derecha ────────────── */
.g-serviceDetailList-head { margin-bottom: clamp(44px, 6vh, 74px); }
/* con entradilla las dos mitades se llenan; sin ella, el titular va suelto */
.g-serviceDetailList-head-two {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: clamp(26px, 4vw, 72px);
  align-items: end;
}
/* el titular vive en una columna: una palabra alemana larga no puede desbordar */
.g-serviceDetailList-head .display { font-size: clamp(34px, 4.4vw, 62px); overflow-wrap: break-word; hyphens: manual; }
.g-serviceDetailList-lede { margin-top: 0; max-width: 52ch; }

/* ── las filas ───────────────────────────────────────────────────────────── */
.g-serviceDetailList-rows { border-top: 1px solid var(--line); }
.g-serviceDetailList-row {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: clamp(20px, 3.4vw, 56px);
  padding: clamp(26px, 3.6vh, 42px) 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left .5s cubic-bezier(.22,.61,.36,1);
}
.g-serviceDetailList-row:hover { padding-left: 9px; }

/* izquierda: el nombre del servicio con su precio y su duración */
.g-serviceDetailList-l { display: flex; flex-direction: column; }
.g-serviceDetailList-name {
  font-family: var(--display), sans-serif;
  font-weight: var(--dw);
  font-size: clamp(26px, 2.8vw, 34px);
  letter-spacing: var(--dt);
  line-height: 1.1;
  color: var(--text);
  overflow-wrap: break-word;
  hyphens: manual;
  transition: color .3s;
}
.g-serviceDetailList-row:hover .g-serviceDetailList-name { color: var(--a2); }
.g-serviceDetailList-tag { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 14px; margin-top: 13px; }
.g-serviceDetailList-tag b {
  font-family: var(--display), sans-serif; font-weight: var(--dw); font-size: 19px;
  font-variant-numeric: tabular-nums; color: var(--a2); white-space: nowrap;
}
.g-serviceDetailList-tag span {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--t3); white-space: nowrap;
}

/* derecha: el párrafo largo y los puntos con guion largo */
.g-serviceDetailList-text { font-size: 16px; line-height: 1.66; color: var(--t2); max-width: 64ch; text-wrap: pretty; }
.g-serviceDetailList-points { list-style: none; display: grid; gap: 7px; margin-top: 17px; max-width: 60ch; }
.g-serviceDetailList-points li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.5; color: var(--t3); }
.g-serviceDetailList-points li::before { content: "—"; position: absolute; left: 0; top: 0; color: var(--a2); }

.g-serviceDetailList-note {
  font-size: 15px; line-height: 1.6; font-style: italic; color: var(--t3);
  max-width: 64ch; margin-top: clamp(24px, 3vh, 36px);
}

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

/* ── móvil: una sola columna, sin desplazamientos al pasar el dedo ────────── */
@media (max-width: 900px) {
  .g-serviceDetailList-head { margin-bottom: 34px; }
  .g-serviceDetailList-head-two { grid-template-columns: 1fr; gap: 18px; align-items: start; }
  .g-serviceDetailList-head .display { font-size: clamp(32px, 9vw, 46px); }
  .g-serviceDetailList-lede { margin-top: 18px; max-width: none; }
  .g-serviceDetailList-row { grid-template-columns: 1fr; gap: 14px; padding: 26px 0; }
  .g-serviceDetailList-row:hover { padding-left: 0; }
  .g-serviceDetailList-name { font-size: 26px; }
  .g-serviceDetailList-tag { margin-top: 10px; }
  .g-serviceDetailList-text, .g-serviceDetailList-points, .g-serviceDetailList-note { max-width: none; }
}