/* reasonsSplitPhotoSticky — razones a la izquierda, foto vertical pegajosa a la derecha.
   Un solo fondo (ninguno propio), sin cajas, sin bordes, sin iconos, sin filetes.
   Todo el color sale de las variables del estilo: claro y oscuro salen solos. */

/* minmax(0,…) obligatorio: la columna izquierda lleva titular y una palabra alemana
   larga fijaría el min-content de la columna y descuadraría la rejilla entera. */
.g-reasonsSplitPhotoSticky-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.78fr);
  gap: clamp(36px, 5vw, 88px);
  align-items: start;
}

.g-reasonsSplitPhotoSticky-left { min-width: 0; }

/* el titular se queda arriba mientras pasan las razones (la columna es más alta que él) */
.g-reasonsSplitPhotoSticky-head {
  position: sticky;
  top: 132px;
  min-width: 0;
}
.g-reasonsSplitPhotoSticky-head .display { overflow-wrap: break-word; }
.g-reasonsSplitPhotoSticky-head .lede { max-width: 42ch; }

.g-reasonsSplitPhotoSticky-list {
  min-width: 0;
  margin-top: clamp(38px, 5.5vh, 70px);
}
.g-reasonsSplitPhotoSticky-list > * + * { margin-top: clamp(26px, 3.4vh, 42px); }

.g-reasonsSplitPhotoSticky-item h3 {
  font-family: var(--display), sans-serif;
  font-weight: var(--dw);
  font-size: clamp(20px, 2vw, 27px);
  letter-spacing: var(--dt);
  line-height: 1.15;
  color: var(--text);
  overflow-wrap: break-word;
  hyphens: manual;
}
.g-reasonsSplitPhotoSticky-item p {
  font-size: 16px;
  line-height: 1.62;
  color: var(--t2);
  margin-top: 10px;
  max-width: 50ch;
  overflow-wrap: break-word;
  hyphens: manual;
}

/* los botones ya vienen con su propio aire desde la razón anterior */
.g-reasonsSplitPhotoSticky-list .g-reasonsSplitPhotoSticky-cta .actions { margin-top: 0; }

/* la celda a todo el alto de la fila: sin `stretch` el pegajoso de dentro no se mueve
   y la mitad derecha se queda hueca (trampa ya pisada en este estilo). */
.g-reasonsSplitPhotoSticky-media {
  align-self: stretch;
  min-width: 0;
}
.g-reasonsSplitPhotoSticky-photo {
  position: sticky;
  top: 132px;
}
/* sin marco, sin borde y sin la caja gris de respaldo detrás de la foto */
.g-reasonsSplitPhotoSticky-photo .k-ph {
  background: none;
  border: 0;
  box-shadow: none;
}

@media (max-width: 900px) {
  .g-reasonsSplitPhotoSticky-grid { grid-template-columns: 1fr; gap: 0; }
  /* en móvil la foto va DEBAJO del titular y antes de las razones: la columna
     izquierda se disuelve y los tres bloques se ordenan en una sola columna */
  .g-reasonsSplitPhotoSticky-left { display: contents; }
  .g-reasonsSplitPhotoSticky-head { position: static; order: 1; }
  .g-reasonsSplitPhotoSticky-head .lede { max-width: none; }
  .g-reasonsSplitPhotoSticky-media {
    order: 2;
    align-self: auto;
    margin-top: clamp(26px, 4vh, 38px);
  }
  .g-reasonsSplitPhotoSticky-photo { position: static; }
  .g-reasonsSplitPhotoSticky-photo .k-ph.r34 { aspect-ratio: 4 / 5; }
  .g-reasonsSplitPhotoSticky-list {
    order: 3;
    margin-top: clamp(32px, 5vh, 48px);
  }
  .g-reasonsSplitPhotoSticky-list > * + * { margin-top: 26px; }
  .g-reasonsSplitPhotoSticky-item h3 { font-size: 21px; }
  .g-reasonsSplitPhotoSticky-item p { max-width: none; font-size: 15.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .g-reasonsSplitPhotoSticky-item h3,
  .g-reasonsSplitPhotoSticky-item p,
  .g-reasonsSplitPhotoSticky-photo,
  .g-reasonsSplitPhotoSticky-head { transition: none; animation: none; }
}