/* SECTION */

.pricing{

padding:120px 20px;

background:linear-gradient(180deg,#181818,#202020);

color:white;

text-align:center;

}
.pricing h2{

font-size:38px;

margin-bottom:60px;

position:relative;

display:inline-block;

}

/* linha decorativa */

.pricing h2::after{

content:"";

width:60px;
height:3px;

background:#0086f3;

display:block;

margin:10px auto 0;

}
/* CARROSSEL */

.carousel{

position:relative;

max-width:1200px;

margin:auto;

perspective:1100px;

}

/* TRACK */

.carousel-track{

display:flex;

justify-content:center;

align-items:center;

gap:20px;

transition:0.5s;

transform-style:preserve-3d;

}

/* CARD */

.plan-card{

width:400px;

padding:30px;

background:#111;

border-radius:20px;

border:1px solid rgba(255,255,255,0.05);

text-align:center;

transition:0.5s;

}

/* CENTRAL */

.plan-card.active{

transform:scale(1.1);

border-color:#0086f3;

box-shadow:0 10px 40px rgba(0, 4, 255, 0.2);

}

/* LATERAIS */

.plan-card.left{

transform:rotateY(25deg) scale(0.9);

opacity:0.6;

}

.plan-card.right{

transform:rotateY(-25deg) scale(0.9);

opacity:0.6;

}

/* PREÇO */

.price{

font-size:40px;

color:#0086f3;

margin:15px 0;

}

/* BOTÕES */

.nav{

position:absolute;

top:50%;

transform:translateY(-50%);

background:none;

border:none;

font-size:28px;

color:#0086f3;

cursor:pointer;

}

.prev{

left:-40px;

}

.next{

right:-40px;

}
/* animação mobile */

.plan-card{

transition:transform 0.4s ease, opacity 0.4s ease;

}
.tag {
  font-size: 14px;
  color: #ccc;
  margin-bottom: 15px;
}

.tag.destaque {
  color: #00aaff;
}
.plan-card.active{

animation:cardEnter 0.4s ease;

}
.plan-card button {
  background: #00aaff;
  border: none;
  padding: 10px;
  width: 100%;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  transition: 0.3s;
}
/* destaque (mais escolhido) */
.destaque-card {
  border: 2px solid #71d0ff;
}

.badge {
  background: #00aaff;
  color: #000;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 10px;
  font-weight: bold;
}
.plan-card button:hover {
  background: #008ecc;
}
.plan-card.active{

box-shadow:0 20px 60px rgba(0, 89, 255, 0.25);

border-color:#0086f3;

transform:scale(1.03);

}
.carousel-dots{

display:flex;

justify-content:center;

gap:8px;

margin-top:20px;

}
.plan-card ul li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
}

.plan-card ul li i {
  color: #00aaff;
  font-size: 16px;
  min-width: 20px;
}
.dot{

width:10px;
height:10px;

border-radius:50%;

background:#444;

transition:0.3s;

}

.dot.active{

background:#0086f3;

transform:scale(1.3);

}

@keyframes cardEnter{

from{

opacity:0;
transform:translateX(40px);

}

to{

opacity:1;
transform:translateX(0);

}

}
/* ======================
CAROUSEL MOBILE
====================== */

@media (max-width:768px){

.carousel{

display:flex;
justify-content:center;

}

/* esconder laterais */

.plan-card.left,
.plan-card.right{

display:none;

}

/* card central ocupa espaço */

.plan-card.active{

width:100%;
max-width:300px;

transform:scale(1);

}

/* ajustar botões */

.nav{

font-size:24px;

}

.prev{

left:5px;

}

.next{

right:5px;

}

}