/* Etapas do caso real no celular (08/10/2026): setas na imagem, bolinhas
   de progresso e um sinal de que a faixa de etapas rola para o lado. */
.carrossel-seta,.carrossel-pontos{display:none}
@media(max-width:640px){
  .demo-image{position:relative;touch-action:pan-y}
  .carrossel-seta{display:flex;align-items:center;justify-content:center;position:absolute;top:50%;width:34px;height:34px;margin-top:-17px;border:1px solid #d9dfda;border-radius:50%;background:rgba(255,255,255,.86);color:var(--ink,#1d2425);font-size:20px;line-height:1;box-shadow:0 2px 8px #10231d1a;padding:0;z-index:2}
  .carrossel-seta[data-dir="-1"]{left:8px}
  .carrossel-seta[data-dir="1"]{right:8px}
  .carrossel-seta[disabled]{opacity:0;pointer-events:none}
  .carrossel-pontos{display:flex;justify-content:center;gap:7px;padding:10px 0 0}
  .carrossel-pontos button{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:#c9d1cb;transition:width .25s,background .25s}
  .carrossel-pontos button[aria-current="true"]{width:20px;border-radius:4px;background:var(--wine,#780e2c)}
  .etapas-rolagem{position:relative}
  .etapas-rolagem .step-buttons{scroll-snap-type:x mandatory;scrollbar-width:none}
  .etapas-rolagem .step-buttons::-webkit-scrollbar{display:none}
  .etapas-rolagem .step-buttons button{scroll-snap-align:start}
  .etapas-rolagem::after{content:'›';position:absolute;right:0;top:0;bottom:30px;width:44px;display:flex;align-items:center;justify-content:flex-end;padding-right:4px;font-size:22px;color:#8a948e;background:linear-gradient(90deg,rgba(245,247,245,0),#f5f7f5 70%);pointer-events:none;transition:opacity .25s}
  .etapas-rolagem.no-fim::after{opacity:0}
}