/* ============================================================
   Esteira de materiais (13/10/2026). Ver /ui/esteira-materiais.js.
   Faixa da largura da tela, capas e telas passando devagar num arco
   leve: a do meio maior, as das pontas descem, giram pouco e somem.
   ============================================================ */
.esteira{
  position:relative;width:100vw;margin-left:calc(50% - 50vw);
  height:clamp(370px,42vw,440px);overflow:hidden;touch-action:pan-y;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
  cursor:grab;-webkit-user-select:none;user-select:none;
}
.esteira.arrastando{cursor:grabbing}
.esteira__item{
  position:absolute;top:18px;left:0;height:calc(100% - 64px);margin:0;
  border-radius:14px;overflow:hidden;will-change:transform;
  box-shadow:0 20px 44px -18px rgba(0,0,0,.7);
}
.esteira__item img{height:100%;width:auto;display:block;pointer-events:none}

/* sem movimento: vira uma faixa que a pessoa rola com o dedo */
.esteira--parada{overflow-x:auto;display:flex;gap:16px;padding:18px 16px 30px;height:auto;
  -webkit-mask-image:none;mask-image:none;cursor:auto;scroll-snap-type:x mandatory}
.esteira--parada .esteira__item{position:static;height:300px;flex:none;scroll-snap-align:center}