/*==========================================================
                CONTACTO PREMIUM
==========================================================*/

.contacto-premium{

    position:relative;

    overflow:hidden;

    padding:140px 0;

    background:

    radial-gradient(
        circle at top left,
        rgba(126,87,194,.30),
        transparent 35%),

    radial-gradient(
        circle at bottom right,
        rgba(212,164,55,.14),
        transparent 40%),

    linear-gradient(
        135deg,
        #160B2C 0%,
        #221142 30%,
        #2A1653 65%,
        #140A29 100%);

}

/*==========================================================
                ILUMINAÇÃO
==========================================================*/

.contacto-premium::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    top:-260px;

    left:-220px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(212,164,55,.14),

        transparent 72%

    );

    filter:blur(100px);

    pointer-events:none;

}

.contacto-premium::after{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    right:-250px;

    bottom:-260px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(255,255,255,.08),

        transparent 72%

    );

    filter:blur(110px);

    pointer-events:none;

}

/*==========================================================
                CONTAINER
==========================================================*/

.contacto-premium .container{

    position:relative;

    z-index:2;

}

/*==========================================================
                LAYOUT
==========================================================*/

.contact-wrapper{

    display:grid;

    grid-template-columns:420px 1fr;

    gap:70px;

    align-items:center;

}

/*==========================================================
                BADGE
==========================================================*/

.contacto-premium .section-badge{

    display:inline-flex;

    align-items:center;

    gap:14px;

    padding:16px 28px;

    border-radius:60px;

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

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

    backdrop-filter:blur(18px);

    color:#fff;

    font-weight:700;

    letter-spacing:3px;

    font-size:.82rem;

    text-transform:uppercase;

    margin-bottom:35px;

}

.contacto-premium .section-badge i{

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--gold),
        #F2C85C);

    color:#221142;

    font-size:1rem;

}

/*==========================================================
                TÍTULO
==========================================================*/

.contacto-premium h2{

    color:#fff;

    font-size:4rem;

    font-weight:800;

    line-height:1.1;

    margin-bottom:28px;

}

.contacto-premium h2::after{

    content:"";

    display:block;

    width:100px;

    height:5px;

    margin-top:24px;

    border-radius:50px;

    background:

    linear-gradient(

        90deg,

        var(--gold),

        #F4D67A

    );

}

/*==========================================================
                DESCRIÇÃO
==========================================================*/

.contacto-premium p{

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

    font-size:1.08rem;

    line-height:2;

    max-width:560px;

}

/*==========================================================
                INFORMAÇÕES
==========================================================*/

.contact-info{

    position:relative;

    padding:55px 45px;

    border-radius:35px;

    background:

    linear-gradient(

        180deg,

        rgba(255,255,255,.08),

        rgba(255,255,255,.04)

    );

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

    backdrop-filter:blur(25px);

    box-shadow:

    0 35px 80px rgba(0,0,0,.28);

}

.contact-info::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    right:0;

    height:6px;

    border-radius:35px 35px 0 0;

    background:

    linear-gradient(

        90deg,

        var(--gold),

        #F2C85C,

        var(--purple)

    );

}

/*==========================================================
                LISTA
==========================================================*/

.contact-list{

    display:flex;

    flex-direction:column;

    gap:28px;

    margin-top:45px;

}

/*==========================================================
                ITEM
==========================================================*/

.contact-item{

    display:flex;

    align-items:center;

    gap:22px;

    padding:24px;

    border-radius:22px;

    background:

    rgba(255,255,255,.05);

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

    transition:.4s;

}

.contact-item:hover{

    transform:translateX(10px);

    background:

    rgba(255,255,255,.10);

    border-color:

    rgba(212,164,55,.35);

}

/*==========================================================
                ÍCONE
==========================================================*/

.contact-icon{

    width:70px;

    height:70px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:22px;

    background:

    linear-gradient(

        135deg,

        var(--gold),

        #F2C85C

    );

    color:#2A1653;

    font-size:1.4rem;

    box-shadow:

    0 18px 35px rgba(212,164,55,.28);

    transition:.4s;

}

.contact-item:hover .contact-icon{

    transform:

    rotate(-8deg)

    scale(1.08);

}

/*==========================================================
                TEXTO
==========================================================*/

.contact-item h4{

    color:#ffffff;

    font-size:1.15rem;

    font-weight:700;

    margin-bottom:6px;

}

.contact-item span{

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

    font-size:.98rem;

    line-height:1.7;

}

/*==========================================================
                DECORAÇÃO
==========================================================*/

.contact-info::after{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    right:-120px;

    bottom:-120px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(212,164,55,.12),

        transparent 70%

    );

    filter:blur(45px);

    pointer-events:none;

}

/*==========================================================
                FORMULÁRIO PREMIUM
==========================================================*/

.contact-form-card{

    position:relative;

    padding:55px;

    border-radius:35px;

    background:

    linear-gradient(

        180deg,

        rgba(255,255,255,.08),

        rgba(255,255,255,.04)

    );

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

    backdrop-filter:blur(28px);

    box-shadow:

    0 40px 90px rgba(0,0,0,.30);

}

.contact-form-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:35px;

    padding:1px;

    background:

    linear-gradient(

        135deg,

        rgba(255,255,255,.25),

        rgba(212,164,55,.25),

        transparent

    );

    -webkit-mask:

    linear-gradient(#fff 0 0) content-box,

    linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

            mask-composite:exclude;

    pointer-events:none;

}

/*==========================================================
                GRID
==========================================================*/

.form-grid{

    display:grid;

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

    gap:25px;

}

/*==========================================================
                GRUPOS
==========================================================*/

.form-group{

    display:flex;

    flex-direction:column;

    margin-bottom:25px;

}

.form-group label{

    color:#ffffff;

    font-size:.95rem;

    font-weight:600;

    margin-bottom:10px;

    letter-spacing:.5px;

}

/*==========================================================
                INPUTS
==========================================================*/

.form-group input,

.form-group textarea{

    width:100%;

    padding:18px 22px;

    border-radius:18px;

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

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

    color:#ffffff;

    font-size:1rem;

    outline:none;

    transition:.35s;

}

.form-group input::placeholder,

.form-group textarea::placeholder{

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

}

.form-group textarea{

    resize:vertical;

    min-height:180px;

}

/*==========================================================
                FOCUS
==========================================================*/

.form-group input:focus,

.form-group textarea:focus{

    border-color:rgba(212,164,55,.65);

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

    box-shadow:

    0 0 0 4px rgba(212,164,55,.12);

}

/*==========================================================
                BOTÃO
==========================================================*/

.btn-primary-big{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    margin-top:20px;

    padding:22px;

    border:none;

    border-radius:60px;

    cursor:pointer;

    font-size:1rem;

    font-weight:700;

    color:#221142;

    background:

    linear-gradient(

        135deg,

        var(--gold),

        #F2C85C

    );

    box-shadow:

    0 22px 45px rgba(212,164,55,.28);

    transition:.4s;

}

.btn-primary-big i{

    transition:.35s;

}

.btn-primary-big:hover{

    transform:translateY(-5px);

    box-shadow:

    0 30px 60px rgba(212,164,55,.40);

}

.btn-primary-big:hover i{

    transform:translateX(6px);

}

/*==========================================================
                NEWSLETTER PREMIUM
==========================================================*/

.newsletter-premium{

    position:relative;

    overflow:hidden;

    padding:130px 0 150px;

    background:

    linear-gradient(
        180deg,
        #140A29 0%,
        #1B1035 35%,
        #241247 70%,
        #140A29 100%);

}

.newsletter-premium::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    top:-260px;

    left:-180px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(212,164,55,.14),

        transparent 72%

    );

    filter:blur(90px);

}

.newsletter-premium::after{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    right:-220px;

    bottom:-260px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(255,255,255,.06),

        transparent 72%

    );

    filter:blur(110px);

}

/*==========================================================
                BOX
==========================================================*/

.newsletter-box{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:110px 1fr 420px;

    gap:55px;

    align-items:center;

    padding:65px;

    border-radius:38px;

    background:

    linear-gradient(

        180deg,

        rgba(255,255,255,.08),

        rgba(255,255,255,.04)

    );

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

    backdrop-filter:blur(28px);

    box-shadow:

    0 45px 90px rgba(0,0,0,.30);

}

/*==========================================================
                ÍCONE
==========================================================*/

.newsletter-icon{

    width:100px;

    height:100px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:28px;

    background:

    linear-gradient(

        135deg,

        var(--gold),

        #F2C85C

    );

    color:#241247;

    font-size:2rem;

    box-shadow:

    0 20px 40px rgba(212,164,55,.30);

}

/*==========================================================
                BADGE
==========================================================*/

.newsletter-content .section-badge{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:14px 26px;

    border-radius:50px;

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

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

    color:#fff;

    margin-bottom:28px;

    font-size:.82rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.newsletter-content .section-badge i{

    color:var(--gold);

}

/*==========================================================
                TEXTO
==========================================================*/

.newsletter-content h2{

    color:#fff;

    font-size:3.2rem;

    line-height:1.15;

    margin-bottom:24px;

}

.newsletter-content h2 span{

    color:var(--gold);

}

.newsletter-content p{

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

    font-size:1.05rem;

    line-height:2;

}

/*==========================================================
                FORMULÁRIO
==========================================================*/

.newsletter-input{

    display:flex;

    align-items:center;

    gap:18px;

    padding:20px 24px;

    border-radius:20px;

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

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

    margin-bottom:22px;

}

.newsletter-input i{

    color:var(--gold);

    font-size:1.1rem;

}

.newsletter-input input{

    flex:1;

    border:none;

    outline:none;

    background:transparent;

    color:#fff;

    font-size:1rem;

}

.newsletter-input input::placeholder{

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

}

/*==========================================================
                BOTÃO
==========================================================*/

.newsletter-btn{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

    padding:20px;

    border:none;

    border-radius:60px;

    cursor:pointer;

    font-size:1rem;

    font-weight:700;

    color:#241247;

    background:

    linear-gradient(

        135deg,

        var(--gold),

        #F2C85C

    );

    box-shadow:

    0 22px 45px rgba(212,164,55,.28);

    transition:.35s;

}

.newsletter-btn:hover{

    transform:translateY(-5px);

    box-shadow:

    0 32px 60px rgba(212,164,55,.38);

}

.newsletter-btn i{

    transition:.35s;

}

.newsletter-btn:hover i{

    transform:translateX(6px);

}

/*==========================================================
                RODAPÉ
==========================================================*/

.newsletter-form small{

    display:block;

    margin-top:18px;

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

    line-height:1.8;

}

.newsletter-form small i{

    color:var(--gold);

    margin-right:8px;

}

/*==========================================================
                RESPONSIVIDADE
==========================================================*/

@media(max-width:1100px){

    .newsletter-box{

        grid-template-columns:1fr;

        text-align:center;

    }

    .newsletter-icon{

        margin:auto;

    }

}

@media(max-width:768px){

    .contact-wrapper{

        grid-template-columns:1fr;

    }

    .form-grid{

        grid-template-columns:1fr;

    }

    .contact-form-card{

        padding:35px;

    }

    .newsletter-box{

        padding:40px 30px;

    }

    .newsletter-content h2{

        font-size:2.4rem;

    }

}

@media(max-width:480px){

    .contacto-premium h2,

    .newsletter-content h2{

        font-size:2rem;

    }

}