/* ===========================================================================
   Iris: el catálogo — lo que solo vive aquí

   La lista de productos va en una sección casi blanca, y con JavaScript se
   apila (catalogo.js): cada tarjeta se pega arriba un poco más abajo que la
   anterior y la siguiente la tapa. Sin JS, o en móvil, es la lista de siempre.
   ======================================================================== */

/* La cabecera pierde algo de aire abajo: ahora la sigue otra sección. */
.iris-portada-vista {
  padding-block-end: clamp(1.5rem, 0.8rem + 2vw, 3rem);
}

.iris-catalogo {
  padding-block-start: clamp(2.5rem, 1.6rem + 3vw, 5rem);
}

/* --- El apilado (catalogo.js pone la clase, --tope, --paso y --n) -------- */
.iris-lista-productos--apilada {
  gap: clamp(3rem, 2rem + 3vw, 6rem);
}

.iris-lista-productos--apilada > .iris-tarjeta-producto {
  position: sticky;
  inset-block-start: calc(var(--tope) + var(--n) * var(--paso));
  transform-origin: 50% 0;
}

/* El velo que oscurece la tarjeta tapada; --velo lo mueve catalogo.js. */
.iris-lista-productos--apilada .iris-tarjeta-producto__enlace {
  position: relative;
}

.iris-lista-productos--apilada .iris-tarjeta-producto__enlace::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgb(0 0 0 / var(--velo, 0));
  pointer-events: none;
}

.iris-lista-productos--apilada .iris-tarjeta-producto__arte {
  will-change: transform;
}