.carousel-container {
   /* border: 1px solid #5ba3f5; */
   user-select: none; /* impede selecionar texto */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
   position: relative;
   overflow: hidden;
   padding: 1rem 0rem 2rem 3rem;
   margin: 1% 15%;
}

.carousel-track1 {
  display: flex;
  transition: transform 0.5s ease;
}

.descricao-card2 {
    line-height: 1.6;
    padding: 2rem;
    text-align: justify;
}
.carrossel-card1 {
   flex: 0 0 auto;
   background: var(--white);
   border: 1px solid #e2e8f0;
   border-radius: 0.5rem;
   padding: 2% 0;
   text-align: center;
   box-shadow: var(--shadow-sm);
   transition: var(--transition);
   transform: translateY(0);/* Mobile: 1 card */
   max-width: 330px;
   margin: 0 0.5rem ;
}
.carrossel-card1:hover {
   box-shadow: var(--shadow-lg);
   transform: translateY(-1rem);
   border-color: rgba(74, 144, 226, 0.5);
   background: rgb(255, 255, 255);
   z-index: 1;
}
.carrossel-card1:hover .advantage-icon {
   box-shadow: var(--shadow-sm);
   transition: var(--transition);
   transform: translateY(-0.6rem);
   background: rgba(74, 144, 226, 0.2);
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #0a1f4418;
  color: var(--white);
  border: none;
  cursor: pointer;
  padding: 0.50rem 1rem;
  border-radius: 50%;
  box-shadow: var(--shadow);
  transition: var(--transition);
  z-index: 10;
}

.carousel-btn:hover {
  background: var(--accent);
}
.carousel-btn.prev { left: 0.7rem; }
.carousel-btn.next { right: 0rem;}

canvas { /* mantém fundo azul dentro dos gráficos */
   padding: 1rem;
}

.grafico-payments {
   width: 100%;
   max-width: 300px;
   height: 250px;
   margin: auto;
   display: block;
}
/*--------------------------*/
.carousel-track2 {
   display: flex;
   transition: transform 0.5s ease;
}

.carrossel-card2 {
   flex: 0 0 auto;
   background: var(--white);
   border: 1px solid #e2e8f0;
   border-radius: 0.5rem;
   padding: 2% 0 0 0;
   text-align: center;
   box-shadow: var(--shadow-sm);
   transition: var(--transition);
   transform: translateY(0);/* Mobile: 1 card */
   max-width: 330px;
   margin: 0 0.5rem ;
}
.carrossel-card2:hover {
   box-shadow: var(--shadow-lg);
   transform: translateY(-1rem);
   border-color: rgba(74, 144, 226, 0.5);
   background: rgba(254, 68, 167, 0);
}
.carrossel-card2:hover .advantage-icon {
   box-shadow: var(--shadow-sm);
   transition: transform 1s ease;
   transform: translateY(-0.6rem);
   background: rgba(102, 226, 74, 0.082);
   background: rgba(74, 144, 226, 0.2);

}

.carousel-btn.prev2 { left: 0.7rem; }
.carousel-btn.next2 { right: 0rem;}

/*--------------------------*/

@media (max-width: 1024px) {
   .carrossel-card1 {
      flex: 0 0 70%; /* Ocupa 80% da largura do container */
      max-width: 30%;
      padding: 4% 0%;
      margin: 0 0rem;
   } 
   .carrossel-card2 {
      flex: 0 0 70%; /* Ocupa 80% da largura do container */
      max-width: 30%;
      padding: 4% 1%;
      margin: 0 0.5rem;
   } 
   .carousel-btn.prev { left: 1.25rem; } 
   .carousel-btn.prev2 { left: 1.25rem; } 
   .carousel-container{
      margin: 0;
      padding: 1rem 0rem 2rem 3rem;
   }
   .planos {
      padding: 3rem 0rem;
      background: var(--white);
   }
   .grafico-payments {
      max-width: 200px;
      height: 120px;
      margin: auto;
      display: block;
   }
}

@media (max-width: 991px) {
   .carrossel-card1 {
      flex: 0 0 30%; /* Ocupa 80% da largura do container */
      padding: 2% 0% 0 0%;
      margin: 0 0.5rem;
   } 
   .carrossel-card2 {
      flex: 0 0 70%; /* Ocupa 80% da largura do container */
      max-width: 40%;
      padding: 4% 1%;
      margin: 0 0.5rem;
   } 
   .grafico-payments {
      width: 100%;
      max-width: 180px;
      max-height: 120px;
      margin: auto;
      display: block;
      font-size: 8pt;
   }
}

/* Mobile: 1 card visível por vez */
@media (max-width: 767px) {
   .carrossel-card1 {
      flex: 0 0 90%; /* Ocupa 80% da largura do container */
      max-width: 90%;
      padding: 10% 2%;
      margin: 0 0.5rem;
   }
   .carrossel-card2 {
      flex: 0 0 90%; /* Ocupa 80% da largura do container */
      max-width: 90%;
      padding: 10% 2%;
      margin: 0 0.5rem;
   }
   .carousel-btn.prev { left: 0rem; } 
   .carousel-btn.prev2 { left: 0rem; } 
   .carousel-container{
      margin: 5% 0%;
      padding: 1rem 0rem 2rem 1.15rem;
   }
   .planos {
      padding: 3rem 1rem;
      background: var(--white);
   }
   .grafico-payments {
      display: none !important;
   }
   .tooltip-text {
      visibility: hidden;
      width: 140px;
      background-color: #333;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px;
      position: absolute;
      z-index: 1;
      bottom: -3.5rem;
      left: -80%;
      /* transform: translateX(2%); */
      opacity: 0;
      transition: opacity 0.3s;
      font-size: 9pt;
   }

   /* Setinha da tooltip */
   .tooltip-text::after {
      content: "";
      position: absolute;
      top: -9%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      transform: translateY(-50%);
      border-style: solid;
      border-color: transparent transparent #333 transparent;
   }
}