/* sticky-relato — la imagen se queda fija mientras el texto pasa al lado, y va
   cambiando según el bloque que estés leyendo. Portado del `sticky-scroll-reveal`
   / `features-with-sticky-scroll`.

   Es la forma de contar algo que tiene varios pasos SIN hacer una lista. En una
   web cara, esta sección es la que explica el servicio de verdad. */
[data-lui~="relato"]{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:start;
}

[data-lui~="relato"] .lui-textos > *{
  /* Cada bloque necesita alto para que dé tiempo a leerlo antes de que cambie la
     imagen. Pero OJO con poner esto en `vh` a secas: en un monitor grande (2000 px
     de alto) un 78vh son 1.560 px por paso, el texto queda flotando en mitad de la
     nada y la sección se ve rota. Con clamp, el alto crece con la pantalla pero
     deja de crecer cuando ya sobra. */
  min-height:clamp(240px,42vh,380px);
  padding:2rem 0;
  display:flex;flex-direction:column;justify-content:center;
  opacity:.35;
  transition:opacity .4s ease;
}

/* Una línea entre pasos. Sin ella, el espacio que el sticky necesita para tener
   recorrido se lee como un hueco vacío —«esto está roto»— en vez de como aire
   entre dos pasos. Con la línea, el mismo espacio se entiende. */
[data-lui~="relato"] .lui-textos > * + *{
  border-top:1px solid var(--lui-linea,#e6e6e0);
}
[data-lui~="relato"] .lui-textos > .lui-activo{opacity:1}

[data-lui~="relato"] .lui-medios{
  position:sticky;
  /* `calc(50vh - 14rem)` centraba la imagen en la ventana, pero el texto se
     centra en SU bloque: en una pantalla alta acababan a distinta altura y
     parecía que no tenían nada que ver. Con un `top` acotado, la imagen queda
     arriba y el texto pasa justo a su lado. */
  top:clamp(72px,14vh,140px);
  height:clamp(240px,46vh,400px);
  border-radius:18px;
  overflow:hidden;
  background:var(--lui-superficie,#111);
}

[data-lui~="relato"] .lui-medios > *{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  opacity:0;
  transform:scale(1.04);
  transition:opacity .5s ease,transform .8s cubic-bezier(.16,1,.3,1);
}
[data-lui~="relato"] .lui-medios > .lui-activo{opacity:1;transform:none}

/* En móvil no hay sitio para dos columnas: la imagen va sobre su texto y se
   deja de fijar. Forzar el sticky en 390 px tapa el texto, que es lo que se
   venía a leer. */
@media (max-width:860px){
  [data-lui~="relato"]{grid-template-columns:1fr;gap:2rem}
  [data-lui~="relato"] .lui-medios{position:relative;top:auto;height:15rem;order:-1}
  [data-lui~="relato"] .lui-textos > *{min-height:0;opacity:1;padding:1.5rem 0}
}

@media (prefers-reduced-motion:reduce){
  [data-lui~="relato"] .lui-textos > *{opacity:1;transition:none}
  [data-lui~="relato"] .lui-medios > *{transition:none}
}