/* ─────────────────────────────────────────────────────────────────────────────
   reasonsPhotoLeftList — razones con foto a la izquierda.
   Un solo fondo (ninguno propio), sin tarjetas ni cajas, sin iconos: lo único
   que separa las razones es el filete fino de lista (1px de var(--line)), el
   mismo de .k-item. Color y forma salen de las variables del estilo.
   ───────────────────────────────────────────────────────────────────────────── */

/* titular arriba, a la izquierda y a todo el ancho del contenedor */
.g-reasonsPhotoLeftList-head .display { max-width: 22ch; }
.g-reasonsPhotoLeftList-head .lede { max-width: 58ch; }

/* minmax(0,…) obligatorio: arriba hay titular y una palabra larga descuadraría la rejilla */
.g-reasonsPhotoLeftList-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(30px, 4.4vw, 74px);
  align-items: start;
  margin-top: clamp(40px, 6vh, 70px);
}

/* la foto vive dentro del contenedor, con el radio del estilo y sin marco */
.g-reasonsPhotoLeftList-photo { min-width: 0; }

.g-reasonsPhotoLeftList-list { min-width: 0; }
.g-reasonsPhotoLeftList-item {
  padding: clamp(19px, 2.2vh, 26px) 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left .5s cubic-bezier(.22,.61,.36,1);
}
.g-reasonsPhotoLeftList-list > div:first-child .g-reasonsPhotoLeftList-item { border-top: 1px solid var(--line); }
.g-reasonsPhotoLeftList-item:hover { padding-left: 9px; }
.g-reasonsPhotoLeftList-item h3 {
  font-family: var(--display), sans-serif;
  font-weight: var(--dw);
  font-size: clamp(19px, 1.9vw, 26px);
  letter-spacing: var(--dt);
  line-height: 1.16;
  overflow-wrap: break-word;
  hyphens: manual;
  transition: color .3s;
}
.g-reasonsPhotoLeftList-item:hover h3 { color: var(--a2); }
.g-reasonsPhotoLeftList-item p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--t2);
  max-width: 56ch;
  margin-top: 9px;
  text-wrap: pretty;
}
.g-reasonsPhotoLeftList-actions { margin-top: clamp(24px, 3vh, 34px); }

/* ── móvil: una sola columna; la foto queda debajo del titular y a todo el ancho ── */
@media (max-width: 900px) {
  .g-reasonsPhotoLeftList-grid { grid-template-columns: 1fr; gap: 28px; margin-top: 30px; }
  .g-reasonsPhotoLeftList-head .display { max-width: none; }
  .g-reasonsPhotoLeftList-head .lede { max-width: none; }
  .g-reasonsPhotoLeftList-item { padding: 20px 0; }
  .g-reasonsPhotoLeftList-item:hover { padding-left: 0; }
  .g-reasonsPhotoLeftList-item h3 { font-size: 20px; }
  .g-reasonsPhotoLeftList-item p { font-size: 15.5px; max-width: none; }
  .g-reasonsPhotoLeftList-actions { margin-top: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .g-reasonsPhotoLeftList-item, .g-reasonsPhotoLeftList-item h3 { transition: none; }
  .g-reasonsPhotoLeftList-item:hover { padding-left: 0; }
}