.cta{

padding:170px 0;

}

.cta-box{

padding:70px;

border-radius:36px;

background:linear-gradient(180deg,#151821,#101114);

border:1px solid rgba(255,255,255,.06);

}

.cta-left{

max-width:760px;

margin-bottom:70px;

}

.cta-left span{

color:#8B5CF6;

font-weight:700;

letter-spacing:.15em;

font-size:14px;

}

.cta-left h2{

margin:20px 0;

}

.plans{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:28px;

}

.plan{

padding:40px;

border-radius:28px;

background:#14161C;

border:1px solid rgba(255,255,255,.06);

transition:.35s;

}

.plan:hover{

transform:translateY(-12px);

border-color:#7C3AED;

}

.plan small{

display:block;

margin-bottom:18px;

color:#8B5CF6;

font-weight:700;

}

.plan h3{

font-size:44px;

margin-bottom:30px;

}

.plan h3 span{

font-size:20px;

color:#AAB6C8;

}

.plan ul{

display:flex;

flex-direction:column;

gap:14px;

margin-bottom:40px;

}

.featured{

transform:scale(1.04);

border-color:#7C3AED;

}

/*==========================================================
TABLET
==========================================================*/

@media (max-width:1200px){

    .plans{

        grid-template-columns:repeat(2,1fr);

        gap:24px;

    }

    .featured{

        transform:none;

    }

    .featured:hover{

        transform:translateY(-10px);

    }

}

/*==========================================================
TABLET PEQUEÑA
==========================================================*/

@media (max-width:992px){

    .cta{

        padding:110px 0;

    }

    .cta-box{

        padding:50px;

        border-radius:30px;

    }

    .cta-left{

        margin-bottom:50px;

        text-align:center;

        max-width:100%;

    }

    .plans{

        grid-template-columns:1fr;

        gap:22px;

    }

}

/*==========================================================
MÓVIL
==========================================================*/

@media (max-width:576px){

    .cta{

        padding:80px 0;

    }

    .cta-box{

        padding:28px;

        border-radius:24px;

    }

    .cta-left{

        margin-bottom:36px;

    }

    .cta-left span{

        font-size:12px;

        letter-spacing:.12em;

    }

    .cta-left h2{

        font-size:2rem;

        line-height:1.15;

        margin:16px 0;

    }

    .plan{

        padding:28px;

        border-radius:22px;

    }

    .plan small{

        font-size:13px;

        margin-bottom:14px;

    }

    .plan h3{

        font-size:34px;

        margin-bottom:22px;

    }

    .plan h3 span{

        font-size:18px;

    }

    .plan ul{

        gap:10px;

        margin-bottom:26px;

    }

    .plan ul li{

        font-size:15px;

    }

    .plan .btn-primary,

    .plan .btn-outline{

        width:100%;

        justify-content:center;

    }

}