/* ============================================================
   GUIA DE USO — SLIDER RESPONSIVO PADRÃO
   ============================================================
   VARIÁVEIS:
   ------------------------------------------------------------
   --slider-gap: espaçamento interno entre slides
   --slider-spacing: espaçamento entre sliders
   --slider-margin: margem padrão esquerda/direita (desktop)
   --slide-max-width: largura máxima de cada slide

   CLASSES DISPONÍVEIS:
   ------------------------------------------------------------
   .slider.align-left
     → Alinha o slider à esquerda com margem

   .slider.align-right
     → Alinha o slider à direita com margem

   .slider.align-center
     → Centraliza o slider no desktop (sem margens)

   .slider.slider-center-sm
     → Centraliza o slider automaticamente em resoluções menores
       (tablet e mobile). Útil quando há poucos slides e você
       não quer que fiquem colados à esquerda.

   RESPONSIVIDADE:
   ------------------------------------------------------------
   - Desktop (>= 1024px):
       • Slides respeitam largura máxima (--slide-max-width)
       • Alinhamento controlado por .align-left/.align-right/.align-center

   - Tablet (768px a 1023px):
       • Cada slide ocupa 50% da largura disponível
       • .slider-center-sm centraliza o container e os slides

   - Mobile (<= 767px):
       • Cada slide ocupa 100% da largura disponível
       • .slider-center-sm centraliza o container e os slides

   EXEMPLOS DE USO:
   ------------------------------------------------------------
   <!-- Slider alinhado à esquerda no desktop -->
   <div class="slider align-left">
     <div class="slider-track">
       <div class="slide"><img src="img1.jpg" alt=""></div>
       <div class="slide"><img src="img2.jpg" alt=""></div>
     </div>
   </div>

   <!-- Slider centralizado em resoluções menores -->
   <div class="slider slider-center-sm">
     <div class="slider-track">
       <div class="slide"><img src="img1.jpg" alt=""></div>
       <div class="slide"><img src="img2.jpg" alt=""></div>
     </div>
   </div>

   DICAS:
   - Use .slider-center-sm sempre que quiser garantir que o slider
     fique centralizado em tablet e mobile.
   - Combine com .align-left/.align-right/.align-center para controlar
     o alinhamento no desktop.
   - Ajuste --slide-max-width conforme o design (ex: 250px ou 400px).
*/


/* =====================
   SLIDER BASE
===================== */
:root {
  --slider-gap: 12px;
  /* espaçamento interno entre slides */
  --slider-spacing: 12px;
  /* espaçamento entre sliders */
  --slider-margin: 60px;
  /* margem padrão para esquerda/direita */
  --slide-max-width: 440px;
  /* largura máxima de cada slide */
}

.slider {
  overflow: hidden;
  width: 100%;
  margin-bottom: var(--slider-spacing);
  /* espaçamento entre sliders */
}

.slider-track {
  display: flex;
  gap: var(--slider-gap);
  transition: transform 0.5s ease;
  will-change: transform;
}

.slide {
  flex: 0 0 auto;
  max-width: var(--slide-max-width);
}

.slide img {
  width: 100%;
  height: auto;
  display: block;
}

/* =====================
   ALINHAMENTOS (DESKTOP)
===================== */

/* Centralizado (sem margens) */
.slider.align-center {
  margin-left: auto;
  margin-right: auto;
}

/* Margem à esquerda */
.slider.align-left {
  margin-left: var(--slider-margin);
  margin-right: auto;
}

/* Margem à direita */
.slider.align-right {
  margin-right: var(--slider-margin);
  margin-left: auto;
}

/* =====================
   MOBILE (1 slide)
===================== */
@media (max-width: 767px) {
  .slide {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* NOVO: centralização em resoluções menores */
  .slider.slider-center-sm {
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex;
    justify-content: center;
  }
}

/* =====================
   TABLET (2 slides)
===================== */
@media (min-width: 768px) and (max-width: 1023px) {
  .slide {
    flex: 0 0 calc((100% - var(--slider-gap)) / 2);
    max-width: calc((100% - var(--slider-gap)) / 2);
  }

  /* NOVO: centralização em resoluções menores */
  .slider.slider-center-sm {
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex;
    justify-content: center;
  }
}