/* =========================================================
   BARBER AREIA CLUB
========================================================= */

#assinatura{
    position:relative;
    overflow:hidden;

    padding:95px 24px;

    background:
        radial-gradient(
            circle at 90% 15%,
            rgba(70,125,220,.20),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #06152f 0%,
            #0a1d3a 52%,
            #0d3265 100%
        );
}

.barber-club-inner{
    width:min(1380px,100%);
    margin:auto;

    display:grid;

    grid-template-columns:
        minmax(0,1.4fr)
        minmax(300px,.6fr);

    gap:18px;
}


/* BLOCO PRINCIPAL */

.barber-club-main{
    position:relative;

    padding:52px;

    overflow:hidden;

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

    border-radius:24px;

    background:
        rgba(255,255,255,.045);

    box-shadow:
        0 30px 80px rgba(0,0,0,.15);
}

.barber-club-kicker{
    display:flex;
    align-items:center;

    gap:11px;

    margin-bottom:20px;

    color:#abcaff;

    font-size:10px;
    font-weight:900;

    letter-spacing:3px;

    text-transform:uppercase;
}

.barber-club-kicker::before{
    content:"";

    width:30px;
    height:1px;

    background:#abcaff;
}

.barber-club-main h2{
    max-width:850px;

    margin:0;

    color:#fff;

    font-size:
        clamp(39px,5vw,68px);

    line-height:.96;

    letter-spacing:-2.6px;
}

.barber-club-main h2 span{
    color:#c5d8f9;
}

.barber-club-main p{
    max-width:660px;

    margin:25px 0 0;

    color:
        rgba(255,255,255,.64);

    font-size:15px;

    line-height:1.8;
}


/* BENEFÍCIOS */

.barber-club-benefits{
    display:flex;
    flex-wrap:wrap;

    gap:10px;

    margin:28px 0 32px;
}

.barber-club-benefits span{
    padding:10px 14px;

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

    border-radius:999px;

    color:
        rgba(255,255,255,.77);

    background:
        rgba(255,255,255,.04);

    font-size:10px;

    font-weight:800;

    letter-spacing:.7px;
}


/* BOTÃO */

.barber-club-button{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:18px;

    min-height:55px;

    padding:0 25px;

    border-radius:10px;

    color:#0a1d3a;

    background:#f3efe6;

    text-decoration:none;

    font-size:10px;

    font-weight:900;

    letter-spacing:1.2px;

    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}

.barber-club-button:hover{
    transform:translateY(-3px);

    background:#fff;

    box-shadow:
        0 18px 40px
        rgba(0,0,0,.20);
}


/* CARD LATERAL */

.barber-club-side{
    position:relative;

    min-height:100%;

    padding:40px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

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

    border-radius:24px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.09),
            rgba(255,255,255,.025)
        );
}

.barber-club-side-top{
    color:
        rgba(255,255,255,.44);

    font-size:9px;

    font-weight:900;

    letter-spacing:3px;

    text-transform:uppercase;
}

.barber-club-side strong{
    display:block;

    margin-top:70px;

    color:#fff;

    font-size:
        clamp(29px,3vw,43px);

    line-height:1;

    letter-spacing:-1.3px;
}

.barber-club-side p{
    margin:
        18px 0 25px;

    color:
        rgba(255,255,255,.55);

    font-size:13px;

    line-height:1.65;
}

.barber-club-side a{
    color:#b9d3ff;

    text-decoration:none;

    font-size:10px;

    font-weight:900;

    letter-spacing:1.2px;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:850px){

    #assinatura{
        padding:
            75px 20px;
    }

    .barber-club-inner{
        grid-template-columns:1fr;
    }

    .barber-club-main{
        padding:
            38px 28px;
    }

    .barber-club-side{
        min-height:300px;

        padding:
            32px 28px;
    }

}

@media(max-width:480px){

    .barber-club-main h2{
        font-size:38px;
    }

    .barber-club-button{
        width:100%;
    }

}