/* =========================================================
   PAIN / DIFERENCIAIS
   ========================================================= */

.pain-list{
  margin: 14px 0 0;
  padding-left: 0;
  list-style: none;
  color: var(--muted);
  display: grid;
  gap: 10px;
}

/* =========================================================
   SLIDES (swipe + setas no desktop)
   ========================================================= */

.pain-slider{
  position: relative;
  overflow: hidden;
}

/* Track */
.pain-track{
  display: flex;
  gap: 16px;
  overflow-x: auto;

  /* padding vertical/pequeno */
  padding: 10px 6px 18px;

  /* snap + toque */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: pan-x;

  /* some a barra */
}
.pain-track::-webkit-scrollbar{ display: none; }

/* =========================================================
   IMPORTANTE: permitir centralizar o 1º e o último slide
   (sem isso, fica preso só nos do meio no desktop)
   ========================================================= */
.pain-track{
  --slide-w: 360px;

  padding-left: clamp(16px, calc((100% - var(--slide-w)) / 2), 240px);
  padding-right: clamp(16px, calc((100% - var(--slide-w)) / 2), 240px);

  scroll-padding-left: clamp(16px, calc((100% - var(--slide-w)) / 2), 240px);
  scroll-padding-right: clamp(16px, calc((100% - var(--slide-w)) / 2), 240px);
}

/* Slide */
.pain-slide{
  flex: 0 0 360px;
  scroll-snap-align: center;

  transition: filter .25s ease, opacity .25s ease, transform .25s ease;
  opacity: .35;
  filter: blur(1.6px);
  transform: scale(.98);
}

.pain-slide.is-active{
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}

/* Responsivo */
@media (max-width: 900px){
  .pain-track{ --slide-w: 320px; }
  .pain-slide{ flex-basis: 320px; }
}
@media (max-width: 520px){
  .pain-track{ --slide-w: 86vw; }
  .pain-slide{ flex-basis: 86%; }
}

/* Ícone SVG no topo */
.pain-icon{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin-bottom: 10px;

  color: var(--brand-1);
  background: rgba(0,0,0,.04);
}
.pain-icon svg{
  width: 24px;
  height: 24px;
}

/* =========================================================
   BOTÕES (setas) - desktop
   ========================================================= */

.pain-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  cursor: pointer;

  display: grid;
  place-items: center;
  font-size: 26px;
  line-height: 1;
  color: rgba(0,0,0,.70);
  z-index: 2;
}

.pain-prev{ left: 6px; }
.pain-next{ right: 6px; }

.pain-nav:hover{ background: #fff; }

/* no mobile some (swipe já é natural) */
@media (max-width: 820px){
  .pain-nav{ display: none; }
}