#services {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 10px;
  width: 100%;
}

#services h1{
  font-size: 2rem;
  margin: 5%;
}

.services-content {

  display: flex;
  justify-content: center;
  align-content: center;
  padding: 20px;
  margin: 50px;
  gap: 50px;
  width: 100%;
}

.services-container {
  /* border: 1px solid red; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 50%;
  margin: 20px;
  padding: 20px;
  text-align: center;
  border-radius: 25px;
  font-size: 0.9em;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg,
      #0a0f2b 0%,
      #0a0f2b 15%,
      /* canto inferior esquerdo - escuro */
      #132d7c 40%,
      /* começa o azul escuro */
      #14318e 70%
      /* azul mais claro */

      /* canto superior direito - escuro de novo */
    );

  font-weight: 100;
  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.5);
  transition: box-shadow .25s ease;
  transition: box-shadow .25s ease;
  position: relative;
  overflow: hidden;
}

.services-container::before {
  content: "";
  position: absolute;
  top: -80%;
  left: -20%;
  width: 60px;
  /* FEIXE BEM FINO */
  height: 300%;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.12) 45%,
      rgba(255, 255, 255, 0.45) 50%,
      rgba(255, 255, 255, 0.12) 55%,
      rgba(255, 255, 255, 0) 100%);
  opacity: 0.7;
  pointer-events: none;
  filter: blur(1px);
  /* de leve, só pra dar luz */
  transform: rotate(25deg) translate(-150px, 0);
  transition: transform 0.7s cubic-bezier(.4, 0, .2, 1);
}

.services-container:hover::before {
  transform: rotate(25deg) translate(350px, 0);
  /* atravessa o card na diagonal */
}


.services-container:hover {
  box-shadow:
    0 0 6px #0a0f2b,
    0 0 12px #0a0f2b,
    0 0 18px #0a0f2b;
}

.services-container p,
.services-container h2 {
  padding: 20px;
}

.services-container h2 {
  font-size: 1.2em;
}

.services-pacotes__slider {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.services-pacotes__slider h2{
  font-size: 2rem;
  margin: 5%;
}

.pacotes-slider {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 24px;
}

.slider-viewport {
  width: 1000px;         /* ajuste para caber todos (3 a 5 cards) */
  overflow: visible;     /* importante! */
  display: flex;
  justify-content: center;
  align-items: center;
}

.slider-inner {
  display: flex;
  align-items: stretch;    /* para todos terem a mesma altura */
  gap: 38px;
  transition: transform 0.5s cubic-bezier(.8,.1,.4,.98);
  /* height: 510px;           altura fixa para alinhar base */
}

.slider-card {
  width: 360px;
  min-width: 360px;
  max-width: 360px;
  /* height: 100%; */
  background: rgba(20, 24, 39, 0.93);
  border-radius: 17px;
  border: 1.5px solid #41eaff20;
  box-shadow: 0 2px 28px 0 #1ecbe133;
  padding: 34px 30px 30px 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  transition: 
    box-shadow 0.3s,
    border 0.3s,
    background 0.4s,
    opacity 0.4s,
    transform 0.4s cubic-bezier(.65,1.6,.3,1),
    z-index 0.3s;
  position: relative;
  opacity: 0.82;
  z-index: 1;
  overflow: hidden;
  /* Anti overflow */
  word-break: break-word;
  scrollbar-width: none;     /* Firefox */
  -ms-overflow-style: none;  /* IE 10+ */
}

.slider-card::-webkit-scrollbar {
  display: none;             /* Chrome/Safari */
}

.slider-card.active {
  border: 2.5px solid #ffff;
  box-shadow: 0 10px 40px 0 #d3f6f755, 0 0 0 2.5px #ebfaf744;
  background: rgba(40, 94, 234, 0.13);
  opacity: 1;
  z-index: 4;
  transform: scale(1.07);
}

.slider-card.prev,
.slider-card.next {
  opacity: 0.96;
  z-index: 2;
  transform: scale(1.0);
}

.slider-card:not(.active):not(.prev):not(.next) {
  opacity: 0.60;
  z-index: 1;
}

/* Alinhar título e emoji */
.card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  width: 100%;
}

.card-emoji {
  font-size: 1.55rem;
  margin-right: 2px;
  flex-shrink: 0;
}

/* Título sempre igual */
.slider-card h2 {
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px 0;
  letter-spacing: 0.01em;
  line-height: 1.18;
  width: 100%;
  word-break: break-word;
}
.slider-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  /* color: #47eaff; */
  margin: 8px 0 18px 0;
  width: 100%;
  line-height: 1.18;
}
.slider-card p {
  color: #d4e9f9;
  font-size: 1.02rem;
  margin: 0 0 12px 0;
  line-height: 1.52;
  font-weight: 400;
  opacity: 0.95;
  width: 100%;
}
.slider-card ul {
  color: #fff;
  font-size: 1.02rem;
  margin: 0 0 0 0;
  padding-left: 18px;
  list-style: disc;
  width: 100%;
}
.slider-card ul li {
  padding: 10px;
  margin-bottom: 7px;
  line-height: 1.52;
  font-size: 1.02rem;
  font-weight: 400;
  word-break: break-word;
  text-decoration: none;
  list-style: none;
}
.slider-card b, .slider-card strong {
  color: #41eaff;
  font-weight: 600;
}
.slider-card .small {
  font-size: 1.02rem;
  font-weight: 400;
  color: #80d6ff;
  opacity: 0.82;
}

/* Opcional: título do carrossel bonito */
.pacotes-titulo {
  text-align: center;
  font-size: 2.12rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.03em;
  margin-bottom: 22px;
  margin-top: 0;
  text-shadow: 0 2px 10px #1ecbe177, 0 2px 4px #0008;
}

.card-price {
  width: 100%;
  display: flex;
  justify-content: flex-start;      /* Alinha à esquerda */
  align-items: center;
  font-size: 1.13rem;
  text-align: center;
  font-weight: 600;
  color: #41eaff;
  margin-bottom: 12px;
  letter-spacing: 0.04em;
  padding: 0 0 0 4px;
}

.slider-card.active .card-price {
  color: #fff;
  background: linear-gradient(90deg,#30ffe9 40%, #77bfff 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  font-size: 1.23rem;
  font-weight: 700;
  filter: drop-shadow(0 2px 8px #41eaff55);
}



/* ========= RESPONSIVO: apenas tamanhos e direção ========= */

/* Celular pequeno (≤ 480px) */
@media (max-width: 480px) {
  #services { margin: 0; }
  #services h1,
  .services-pacotes__slider h2,
  .pacotes-titulo { font-size: 1.4rem; }

  .services-content {
    flex-direction: column;     /* coluna no mobile */
    gap: 16px;
    margin: 16px 0;
    padding: 0 10px;
  }

  .services-container {
    width: 100%;
    margin: 0 auto;
    padding: 16px;
    border-radius: 18px;
  }

  .slider-viewport {
    width: 100%;
    overflow: hidden;           /* esconde sobra no mobile */
  }
  .slider-inner { gap: 16px; }

  .slider-card {
    width: auto;
    min-width: 88vw;            /* cards mais largos no mobile */
    max-width: 92vw;
    padding: 22px 18px;
  }
  .slider-card.active { transform: scale(1.03); }
}

/* Mobile/Tablet (481px – 767px) */
@media (min-width: 481px) and (max-width: 767px) {
  .services-content {
    flex-direction: column;     /* continua coluna */
    gap: 20px;
    margin: 20px 0;
    padding: 0 14px;
  }

  .services-container {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 18px;
  }

  .slider-viewport { width: 100%; overflow: hidden; }
  .slider-inner { gap: 18px; }

  .slider-card {
    width: auto;
    min-width: 80vw;
    max-width: 420px;
    padding: 24px 20px;
  }
  .slider-card.active { transform: scale(1.04); }
}

/* Tablet / telas médias (768px – 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .services-content {
    flex-direction: row;        /* duas colunas */
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin: 28px auto;
    padding: 0 16px;
    max-width: 1200px;
  }

  .services-container {
    width: calc(50% - 24px);
    max-width: 560px;
    margin: 0;
    padding: 22px;
  }

  .slider-viewport { width: 100%; overflow: hidden; }
  .slider-inner { gap: 22px; }

  .slider-card {
    width: auto;
    min-width: 320px;
    max-width: 360px;
    padding: 28px 22px;
  }
  .slider-card.active { transform: scale(1.05); }
}

/* Desktop compacto (1025px – 1099px) */
@media (min-width: 1025px) and (max-width: 1099px) {
  .services-content {
    flex-direction: row;        /* linha no desktop */
    gap: 28px;
    margin: 32px auto;
    padding: 0 18px;
    max-width: 1280px;
  }

  .services-container {
    width: calc(50% - 28px);
    max-width: 600px;
    padding: 24px;
  }

  .slider-viewport { width: 96%; overflow: visible; }
  .slider-inner { gap: 28px; }

  .slider-card {
    width: 340px;
    min-width: 340px;
    max-width: 340px;
    padding: 30px 24px;
  }
}

/* Desktop ≥ 1100px (já segue teu padrão original) */
/* Mantido: 
   .slider-viewport { width: 1000px; overflow: visible; }
   .slider-inner { gap: 38px; }
   .slider-card { width/min/max: 360px; }
   .slider-card.active { transform: scale(1.07); }
*/

/* Correção da tua regra antiga inválida */
@media (min-width: 200px) and (max-width: 1024px) {
  .services-content {
    display: flex;
    flex-direction: column;     /* era justify-content: column */
    justify-content: flex-start;
  }
}


/* ====== PACOTES EM COLUNA (somente telas pequenas) ====== */
/* até 1024px empilha os cards; acima disso mantém teu desktop igual */
@media (max-width: 1024px) {
  /* Wrapper dos pacotes vira coluna */
  .pacotes-slider {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
  }

  /* Viewport ocupa a largura toda */
  .slider-viewport {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    padding: 0 12px !important;
    display: block !important; /* não precisa centralizar via flex aqui */
  }

  /* O trilho deixa de ser carrossel horizontal → vira coluna */
  .slider-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;

    /* cancela qualquer animação/translate do slider no mobile */
    transform: none !important;
    transition: none !important;
  }

  /* Cards ocupam 100% da largura disponível */
  .slider-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 22px 18px !important;
    transform: none !important;
  }

  /* Sem “zoom” do ativo pra evitar jump no layout vertical */
  .slider-card.active {
    transform: none !important;
  }
}