/* Carrossel de serviços no celular: o próximo card aparece na borda, com contador, pontos e dica de arrastar. */
.svc-controls{display:none}
@media(max-width:760px){
  #servicos .service-window{
    padding:8px 20px 6px;
    scroll-padding-inline:20px;
    scrollbar-width:none;
    -ms-overflow-style:none;
    touch-action:pan-x pan-y;
  }
  #servicos .service-window::-webkit-scrollbar{display:none}
  /* ~86% da largura: o card seguinte espia pela direita, sinalizando que há mais. */
  #servicos .services-track>.service{flex:0 0 86%;scroll-snap-stop:normal}
  #servicos .services-track>.service:last-child{scroll-snap-align:end}
  #servicos .services-track:after{flex:0 0 4px}

  .svc-controls{
    display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 12px;
    padding:6px 20px calc(10px + env(safe-area-inset-bottom,0px));
  }
  .svc-hint{
    grid-column:1 / -1;margin:0;font-size:12px;font-weight:600;letter-spacing:.02em;
    display:flex;align-items:center;gap:8px;color:var(--ink);transition:opacity .35s,max-height .35s;max-height:24px;overflow:hidden
  }
  .svc-hint .arr{display:inline-block;animation:svc-nudge 1.6s ease-in-out infinite}
  .svc-controls.is-used .svc-hint{opacity:0;max-height:0}
  .svc-dots{display:flex;align-items:center;gap:0}
  /* alvo de toque de 44px (padrão iOS) com ponto visual pequeno */
  .svc-dots button{
    appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;margin:0;
    width:44px;height:44px;display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent
  }
  .svc-dots button i{
    display:block;width:8px;height:8px;border-radius:999px;background:transparent;border:1.5px solid var(--ink);
    transition:width .3s cubic-bezier(.2,.8,.2,1),background .3s
  }
  .svc-dots button[aria-current="true"] i{width:26px;background:var(--ink)}
  .svc-dots button:focus-visible{outline:2px solid var(--red);outline-offset:-6px;border-radius:12px}
  .svc-count{font-size:12px;font-weight:700;letter-spacing:.06em;font-variant-numeric:tabular-nums;color:var(--ink)}
}
@keyframes svc-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}
@media(prefers-reduced-motion:reduce){.svc-hint .arr{animation:none}}