/* ============================================================
   Process Slider Section
   ============================================================ */

   .process-section {
    padding: 100px 0 80px;
    overflow: hidden;
    background-color: transparent;
    transition: background-color 780ms cubic-bezier(0.22, 1, 0.36, 1),
                color 780ms cubic-bezier(0.22, 1, 0.36, 1);
  }

body.list-section-active .process-heading {
  color: #f6f1e8;
}

body.list-section-active .process-label {
  color: rgba(246, 241, 232, 0.75);
}

body.list-section-active .process-slide-number {
  color: rgba(246, 241, 232, 0.5);
}

body.list-section-active .process-slide-title {
  color: #f6f1e8;
}

body.list-section-active .process-slide-text {
  color: rgba(246, 241, 232, 0.7);
}

body.list-section-active .process-slide:not(:last-child) {
  border-right-color: rgba(246, 241, 232, 0.2);
}

body.list-section-active .process-slide-visual .img-wrap {
  background-color: rgba(246, 241, 232, 0.12);
}
  
  /* --- Cabeçalho --- */
  .process-header {
    padding: 0 10vw 60px;
  }
  
.process-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #F05134;
  margin-bottom: 20px;
  transition: color 780ms cubic-bezier(0.22, 1, 0.36, 1);
}
  
.process-heading {
  font-size: 2vw;
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #1a1a1a;
  max-width: 80%;
  transition: color 780ms cubic-bezier(0.22, 1, 0.36, 1);
}
  
  /* --- Slider wrapper --- */
  .process-slider-wrap {
    position: relative;
    cursor: ew-resize;
    user-select: none;
    -webkit-user-select: none;
    overscroll-behavior-x: contain;
    touch-action: pan-y;
  }
  
  .process-slider-wrap.is-dragging {
    cursor: ew-resize;
    touch-action: pan-y;
  }
  
  .process-slider-track {
    display: flex;
    align-items: stretch;
    padding-left: 10%;
    gap: 14px;
    will-change: transform;
    touch-action: pan-y;
  }
  
  /* --- Cada slide --- */
  .process-slide {
    display: flex;
    flex-direction: column;
    flex: 0 0 calc(100vw / 4);
    min-width: 220px;
    padding: 0 18px 0 0;
    touch-action: pan-y;
  }
  
  /* Separador vertical entre slides */
  .process-slide:not(:last-child) {
    border-right: 1px solid rgba(26, 26, 26, 0.15);
  }
  
  /* Conteúdo de texto (ocupa o espaço acima da imagem) */
  .process-slide-content {
    flex: 1 1 auto;
    padding-bottom: 16px;
    touch-action: pan-y;
  }
  
.process-slide-number {
  display: block;
  font-size: clamp(2.25rem, 4.8vw, 3.6rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #F05134;
  margin-bottom: 12px;
  transition: color 780ms cubic-bezier(0.22, 1, 0.36, 1);
}
  
.process-slide-title {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1a1a1a;
  margin-bottom: 10px;
  transition: color 780ms cubic-bezier(0.22, 1, 0.36, 1);
}

.process-slide-text {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(26, 26, 26, 0.65);
  margin-bottom: 14px;
  transition: color 780ms cubic-bezier(0.22, 1, 0.36, 1);
}
  
/* Imagem / visual — sempre abaixo de todo o bloco de texto; base alinhada entre slides */
  .process-slide-visual {
    flex: 0 0 auto;
    margin-top: auto;
    width: 100%;
    touch-action: pan-y;
  }
  
  .process-slide-visual .img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background-color: #e8e3da;
  }
  
  .process-slide-visual .img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    transition: transform 0.6s ease;
  }
  
  .process-slide:hover .process-slide-visual .img-wrap img {
    transform: scale(1.03);
  }
  
/* ============================================================
   Responsive
   ============================================================ */
  
  @media (max-width: 900px) {
    .process-slide {
      flex: 0 0 calc(100vw / 1.9);
    }
  }

  @media (max-width: 768px) {
    .process-slider-wrap {
      /* touch-action: pan-y — browser faz scroll vertical nativo imediatamente, sem esperar pelo JS */
      touch-action: pan-y;
      cursor: default;
      padding-top: 10px;
      padding-bottom: 14px;
      margin-top: -6px;
      margin-bottom: -6px;
    }

    .process-slider-track {
      padding-left: max(16px, env(safe-area-inset-left));
      will-change: auto;
    }
  }
  
  @media (max-width: 600px) {
    .process-section {
      padding: 150px 0 60px;
    }

    .process-slide {
      flex: 0 0 78vw;
      min-width: 0;
      padding: 0 14px 0 0;
    }

    .process-header {
      padding: 0 max(16px, 5vw) 40px;
    }

    .process-heading {
      font-size: clamp(1.35rem, 5.2vw, 1.75rem);
    }
  }