/* container ocupa metade da tela */

.pricing-container{
background:#f6f7fb;
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
width:100%;
max-width:1000px;
display:flex;
flex-direction:column;
gap:25px;
}

/* card */

.pricing-container .card{
background:white;
padding:35px;
border-radius:14px;
border:1px solid #e6e6e6;
box-shadow:0 10px 25px rgba(0,0,0,0.05);
transition:all .25s ease;
}

.pricing-container .card:hover{
transform:translateY(-4px);
box-shadow:0 18px 40px rgba(0,0,0,0.08);
}

/* destaque */

.pricing-container .card.profissional{
border:2px solid #6366f1;
position:relative;
}

.pricing-container .badge{
position:absolute;
top:-12px;
left:25px;
background:#6366f1;
color:white;
padding:5px 12px;
font-size:12px;
border-radius:20px;
font-weight:600;
}

/* titulo */

.pricing-container .card h3{
font-size:22px;
margin-bottom:10px;
color:#111;
}

/* preço */

.pricing-container .price{
font-size:36px;
font-weight:700;
margin-bottom:20px;
color:#111;
}

.pricing-container .price span{
font-size:15px;
color:#777;
font-weight:500;
}

/* lista */

.pricing-container .card ul{
list-style:none;
margin-bottom:25px;
padding:0;
}

.pricing-container .card ul li{
margin-bottom:10px;
color:#555;
font-size:15px;
}

/* botão */

.pricing-container .btn{
display:block;
width:100%;
text-align:center;
padding:12px;
border-radius:8px;
font-size:15px;
font-weight:600;
cursor:pointer;
transition:.2s;
background:#111;
color:white;
text-decoration:none;
}

.pricing-container .btn:hover{
background:#333;
}

/* botão destaque */

.pricing-container .profissional .btn{
background:#6366f1;
}

.pricing-container .profissional .btn:hover{
background:#4f46e5;
}