/* =====================================================
   ELEVA SIGN SEO PAGES
   Inteligência Artificial para Contratos
===================================================== */



/* =====================================================
   HERO SEO
===================================================== */


.ai-page .ai-hero{

    padding-top:110px;

}



.ai-page .ai-hero h1{

    max-width:720px;

}



.ai-page .ai-hero .hero-copy>p{

    max-width:620px;

}






/* =====================================================
   AI DOCUMENT CARD
===================================================== */


.ai-document-card{

    position:relative;

    padding:28px;

    width:100%;

    max-width:500px;

    border-radius:30px;

    background:

    linear-gradient(
        145deg,
        #ffffff,
        #f5efff
    );


    border:1px solid rgba(89,50,193,.15);


    box-shadow:

    0 40px 90px rgba(55,35,100,.18);


    overflow:hidden;

}




.ai-document-card::before{

    content:"";

    position:absolute;

    inset:0;


    background:

    radial-gradient(
        circle at top right,
        rgba(182,97,218,.25),
        transparent 35%
    );


}





.ai-card-header{

    position:relative;

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

    font-size:12px;

}



.ai-card-header span{

    color:#5932c1;

    font-weight:900;

}



.ai-card-header strong{

    color:#7f748f;

    font-size:11px;

}





.ai-file{

    position:relative;

    display:flex;

    gap:15px;

    align-items:center;


    padding:18px;


    background:white;


    border-radius:18px;


    border:1px solid #ece5f7;

}



.ai-file i{

    width:45px;

    height:45px;

    display:grid;

    place-items:center;


    border-radius:14px;


    color:#5932c1;


    background:#eee7fa;


    font-size:22px;

}



.ai-file strong{

    display:block;

    font-size:14px;

}



.ai-file span{

    color:#8d849d;

    font-size:11px;

}






/* =====================================================
   RESULTADOS IA
===================================================== */


.ai-results{

    position:relative;

    margin-top:20px;


    display:grid;


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


    gap:12px;

}



.ai-results div{

    padding:18px 12px;

    text-align:center;


    border-radius:16px;


    background:white;


    border:1px solid #ece5f7;


}




.ai-results strong{

    display:block;

    font-family:"Space Grotesk";

    font-size:28px;

    color:#5932c1;

}



.ai-results span{

    display:block;

    margin-top:5px;

    font-size:10px;

    color:#81768f;

}






/* =====================================================
   AI FEATURES
===================================================== */


.ai-features{

    list-style:none;

    padding:0;

    margin:28px 0;


    display:grid;

    gap:14px;

}



.ai-features li{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:14px;

    font-weight:700;

}



.ai-features i{

    color:#5932c1;

    font-size:22px;

}







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


.ai-analysis-grid{


display:grid;


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


gap:14px;


margin-top:25px;


}



.ai-analysis-grid div{


padding:18px;


border-radius:16px;


background:#fff;


border:1px solid #ece5f7;


}



.ai-analysis-grid small{


display:block;


font-size:10px;


color:#8d849d;


text-transform:uppercase;


font-weight:900;


}



.ai-analysis-grid strong{


display:block;


margin-top:8px;


font-size:14px;


}



.ai-analysis-grid span{


display:block;


margin-top:5px;


font-size:12px;


color:#5932c1;


font-weight:800;


}







/* =====================================================
   COMPARAÇÃO IA
===================================================== */


.ai-comparison{


background:#faf8fe;


}




.ai-comparison .comparison-grid{


display:grid;


grid-template-columns:1fr auto 1fr;


align-items:center;


gap:25px;


}



.ai-comparison .comparison-card{


padding:35px;


border-radius:25px;


background:white;


border:1px solid #e7e0f2;


}



.ai-comparison .comparison-card.after{


border-color:#bca2ed;


box-shadow:

0 25px 60px rgba(89,50,193,.12);


}




.ai-comparison ul{


list-style:none;


padding:0;


display:grid;


gap:12px;


}



.ai-comparison li{


font-size:14px;


font-weight:700;


}



.ai-comparison .before li{


color:#8b8492;


}



.ai-comparison .after li{


color:#5932c1;


}



.comparison-arrow{


font-size:35px;


color:#5932c1;


font-weight:900;


}







/* =====================================================
   ECOSSISTEMA
===================================================== */


.ai-ecosystem{


background:

linear-gradient(
180deg,
#fff,
#f7f3fc
);


}



.ecosystem-banner{


display:grid;


grid-template-columns:.4fr 1fr;


gap:60px;


align-items:center;


padding:60px;


border-radius:35px;


background:white;


border:1px solid #ebe4f4;


box-shadow:

0 30px 70px rgba(50,30,100,.08);


}




.ecosystem-logo img{


width:180px;


}



.ecosystem-content>span{


font-size:11px;


font-weight:900;


color:#5932c1;


}



.ecosystem-points{


display:grid;


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


gap:15px;


margin:30px 0;


}



.ecosystem-points div{


display:flex;


align-items:center;


gap:10px;


padding:14px;


border-radius:15px;


background:#f7f3fc;


font-weight:800;


}



.ecosystem-points i{


color:#5932c1;


font-size:22px;


}







/* =====================================================
   INTEGRAÇÕES SEO
===================================================== */


.ai-integrations .integration-map{


height:360px;


position:relative;


}




.ai-integrations .hub-logo{


position:absolute;


left:50%;


top:50%;


transform:translate(-50%,-50%);


width:130px;


height:130px;


display:grid;


place-items:center;


gap:8px;


border-radius:35px;


background:white;


border:1px solid #e7e0f2;


box-shadow:0 25px 60px rgba(89,50,193,.15);


}




.ai-integrations .hub-logo img{


width:45px;


}




.ai-integrations .node{


position:absolute;


padding:16px 25px;


border-radius:999px;


background:white;


border:1px solid #e7e0f2;


font-size:12px;


font-weight:900;


box-shadow:0 15px 40px rgba(50,30,100,.08);


}



.ai-integrations .node:nth-child(2){

left:10%;

top:20%;

}



.ai-integrations .node:nth-child(3){

right:10%;

top:25%;

}



.ai-integrations .node:nth-child(4){

left:15%;

bottom:20%;

}



.ai-integrations .node:nth-child(5){

right:15%;

bottom:20%;

}



.ai-integrations .node:nth-child(6){

left:50%;

top:10%;

transform:translateX(-50%);

}



.ai-integrations .node:nth-child(7){

left:50%;

bottom:10%;

transform:translateX(-50%);

}







/* =====================================================
   RESPONSIVO
===================================================== */


@media(max-width:900px){


.ai-results{

grid-template-columns:1fr;

}



.ai-analysis-grid{

grid-template-columns:1fr;

}



.ai-comparison .comparison-grid{


grid-template-columns:1fr;


}



.comparison-arrow{


transform:rotate(90deg);


}



.ecosystem-banner{


grid-template-columns:1fr;


padding:35px;


}



.ecosystem-points{


grid-template-columns:1fr;


}


}














.ai-problem .value-grid{
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}


.ai-problem .value-grid article{

    min-height:260px;

    padding:30px;

    border-radius:24px;

    border:1px solid #ebe5f5;

    background:white;

    transition:.3s;

}


.ai-problem .value-grid article:hover{

    transform:translateY(-8px);

    box-shadow:
    0 25px 60px rgba(89,50,193,.12);

}


.ai-problem .value-icon{

    width:55px;
    height:55px;

    margin-bottom:30px;

    background:#f0eafb;

    color:#5932c1;

    font-size:26px;

}


.ai-problem h3{

    font-size:20px;

    margin-bottom:15px;

}


.ai-problem p{

    font-size:15px;

    line-height:1.7;

}




.ai-ecosystem .ecosystem-banner{

    background:
    
    radial-gradient(
    circle at right,
    rgba(182,97,218,.35),
    transparent 40%
    ),
    
    linear-gradient(
    135deg,
    #150b31,
    #30126f
    );
    
    
    color:white;
    
    }
    
    
    .ai-ecosystem .ecosystem-content p{
    
    color:
    rgba(255,255,255,.7);
    
    }
    
    
    .ai-ecosystem .ecosystem-points div{
    
    background:
    rgba(255,255,255,.08);
    
    border:
    1px solid rgba(255,255,255,.12);
    
    color:white;
    
    }



    .ai-different .value-grid{

        display:flex;
        
        justify-content:center;
        
        max-width:1100px;
        
        margin:auto;
        
        }
        
        
        .ai-different .value-grid article{
        
        flex:1;
        
        }









        .ai-different .value-grid{

            display:grid;
        
            grid-template-columns:repeat(5,1fr);
        
            gap:0;
        
        }
        
        
        .ai-different .value-grid article{
        
            padding:0 28px;
        
            position:relative;
        
        }
        
        
        .ai-different .value-grid article:not(:last-child)::after{
        
            content:"";
        
            position:absolute;
        
            right:0;
        
            top:10%;
        
            height:80%;
        
            width:1px;
        
            background:rgba(255,255,255,.12);
        
        }
        
        
        
        @media(max-width:1100px){
        
            .ai-different .value-grid{
        
                grid-template-columns:repeat(2,1fr);
        
                gap:40px;
        
            }
        
        
            .ai-different .value-grid article::after{
        
                display:none;
        
            }
        
        }
        
        
        
        @media(max-width:600px){
        
            .ai-different .value-grid{
        
                grid-template-columns:1fr;
        
            }
        
        }



















        .ai-comparison{

            background:#faf8fe;
            
            }
            
            
            
            
            
            .ai-comparison .section-heading p{
            
            max-width:650px;
            
            margin:auto;
            
            }
            
            
            
            
            
            .comparison-grid{
            
            
            display:grid;
            
            
            grid-template-columns:
            
            1fr 90px 1fr;
            
            
            align-items:center;
            
            
            gap:25px;
            
            
            margin-top:60px;
            
            
            }
            
            
            
            
            
            .comparison-card{
            
            
            padding:38px;
            
            
            border-radius:30px;
            
            
            background:white;
            
            
            border:1px solid #e8e0f4;
            
            
            min-height:430px;
            
            
            transition:.35s;
            
            
            }
            
            
            
            
            
            .comparison-card:hover{
            
            
            transform:translateY(-8px);
            
            
            box-shadow:
            
            0 30px 70px rgba(89,50,193,.12);
            
            
            }
            
            
            
            
            
            
            
            
            /* ICON */
            
            .comparison-header{
            
            
            display:flex;
            
            
            align-items:center;
            
            
            gap:15px;
            
            
            margin-bottom:30px;
            
            
            }
            
            
            
            
            .comparison-icon{
            
            
            width:58px;
            
            
            height:58px;
            
            
            border-radius:18px;
            
            
            display:grid;
            
            
            place-items:center;
            
            
            font-size:28px;
            
            
            }
            
            
            
            .before .comparison-icon{
            
            
            background:#f1edf5;
            
            color:#8f849c;
            
            
            }
            
            
            
            .after .comparison-icon{
            
            
            background:#ede5ff;
            
            color:#5932c1;
            
            
            }
            
            
            
            
            .comparison-header small{
            
            
            font-size:13px;
            
            
            font-weight:900;
            
            
            text-transform:uppercase;
            
            
            color:#8b8198;
            
            
            }
            
            
            
            
            
            
            
            .comparison-card h3{
            
            
            font-size:28px;
            
            
            margin-bottom:28px;
            
            
            }
            
            
            
            
            
            
            
            
            .comparison-card ul{
            
            
            padding:0;
            
            
            margin:0;
            
            
            list-style:none;
            
            
            display:grid;
            
            
            gap:18px;
            
            
            }
            
            
            
            
            
            .comparison-card li{
            
            
            display:flex;
            
            
            align-items:center;
            
            
            gap:12px;
            
            
            font-size:15px;
            
            
            font-weight:700;
            
            
            }
            
            
            
            
            
            .before li{
            
            
            color:#8d8498;
            
            
            }
            
            
            
            
            
            .before li i{
            
            
            color:#d0c7d8;
            
            
            }
            
            
            
            
            .after li{
            
            
            color:#5932c1;
            
            
            }
            
            
            
            .after li i{
            
            
            font-size:20px;
            
            
            }
            
            
            
            
            
            
            
            
            /* STATUS */
            
            
            
            
            .comparison-status{
            
            
            margin-top:35px;
            
            
            padding:12px 18px;
            
            
            border-radius:999px;
            
            
            font-size:12px;
            
            
            font-weight:900;
            
            
            display:inline-flex;
            
            
            }
            
            
            
            
            
            .negative{
            
            
            background:#f5f2f7;
            
            
            color:#8c8298;
            
            
            }
            
            
            
            
            
            .positive{
            
            
            background:#eee6ff;
            
            
            color:#5932c1;
            
            
            }
            
            
            
            
            
            
            
            
            /* ARROW */
            
            
            
            .comparison-arrow{
            
            
            display:flex;
            
            
            justify-content:center;
            
            
            align-items:center;
            
            
            }
            
            
            
            .comparison-arrow div{
            
            
            width:55px;
            
            
            height:55px;
            
            
            border-radius:50%;
            
            
            display:grid;
            
            
            place-items:center;
            
            
            background:#5932c1;
            
            
            color:white;
            
            
            font-size:25px;
            
            
            box-shadow:
            
            0 15px 35px rgba(89,50,193,.35);
            
            
            animation:pulseAI 2s infinite;
            
            
            }
            
            
            
            
            
            
            @keyframes pulseAI{
            
            
            0%,100%{
            
            transform:scale(1);
            
            }
            
            
            50%{
            
            transform:scale(1.08);
            
            }
            
            
            }
            
            
            
            
            
            
            
            @media(max-width:900px){
            
            
            .comparison-grid{
            
            
            grid-template-columns:1fr;
            
            
            }
            
            
            
            .comparison-arrow{
            
            
            transform:rotate(90deg);
            
            
            }
            
            
            }








            .ai-flow{

                position:relative;
                
                display:grid;
                
                grid-template-columns:repeat(5,1fr);
                
                gap:35px;
                
                margin-top:70px;
                
                }
                
                
                .ai-flow::before{
                
                
                content:"";
                
                
                position:absolute;
                
                
                top:105px;
                
                
                left:8%;
                
                
                right:8%;
                
                
                height:2px;
                
                
                background:
                
                linear-gradient(
                90deg,
                #d9c8f5,
                #5932c1,
                #d9c8f5
                );
                
                
                z-index:0;
                
                
                }
                
                
                
                .flow-card{
                
                
                position:relative;
                
                z-index:1;
                
                
                text-align:center;
                
                
                padding:25px 20px;
                
                
                background:white;
                
                
                border:1px solid #ebe3f7;
                
                
                border-radius:26px;
                
                
                transition:.35s;
                
                
                }
                
                
                
                .flow-card:hover{
                
                
                transform:translateY(-10px);
                
                
                box-shadow:
                
                0 25px 60px rgba(89,50,193,.15);
                
                
                }
                
                
                
                .flow-card.active{
                
                
                border-color:#5932c1;
                
                
                box-shadow:
                
                0 20px 60px rgba(89,50,193,.18);
                
                
                }
                
                
                
                
                
                .flow-number{
                
                
                position:absolute;
                
                
                top:-18px;
                
                
                left:50%;
                
                
                transform:translateX(-50%);
                
                
                width:38px;
                
                
                height:38px;
                
                
                border-radius:50%;
                
                
                display:grid;
                
                
                place-items:center;
                
                
                background:#f0e8ff;
                
                
                color:#5932c1;
                
                
                font-size:12px;
                
                
                font-weight:900;
                
                
                }
                
                
                
                
                .step-icon{
                
                
                width:70px;
                
                
                height:70px;
                
                
                margin:20px auto 25px;
                
                
                display:grid;
                
                
                place-items:center;
                
                
                border-radius:22px;
                
                
                background:#f1eaff;
                
                
                color:#5932c1;
                
                
                font-size:32px;
                
                
                }
                
                
                
                
                
                .flow-card h3{
                
                
                font-size:22px;
                
                
                margin-bottom:12px;
                
                
                }
                
                
                
                .flow-card p{
                
                
                font-size:14px;
                
                
                line-height:1.7;
                
                
                color:#80758f;
                
                
                }
                
                
                
                
                
                @media(max-width:1000px){
                
                
                .ai-flow{
                
                
                grid-template-columns:1fr;
                
                
                }
                
                
                
                .ai-flow::before{
                
                display:none;
                
                }
                
                }




                




                /* ==========================================================
   ELEVA IA NETWORK - FINAL CLEAN
========================================================== */


.ai-page .ai-network {

    position: relative;

    height: 650px;

    margin-top: 70px;

}



/* ==========================================================
   BACKGROUND / GLOW
========================================================== */


.ai-page .connection-lines {

    position:absolute;

    inset:0;

    z-index:0;

}



.ai-page .connection-lines::before {

    content:"";

    position:absolute;

    left:50%;

    top:50%;


    width:520px;

    height:520px;


    transform:translate(-50%,-50%);


    border-radius:50%;


    background:

    radial-gradient(
        circle,
        rgba(89,50,193,.16),
        transparent 65%
    );

}



/* círculo suave */

.ai-page .connection-lines::after {

    content:"";

    position:absolute;

    left:50%;

    top:50%;


    width:560px;

    height:560px;


    transform:translate(-50%,-50%);


    border-radius:50%;


    border:

    1px solid rgba(89,50,193,.08);


    animation:
    networkPulse 4s ease-in-out infinite;

}



@keyframes networkPulse {


    0%,100%{

        opacity:.35;

    }


    50%{

        opacity:.7;

    }

}





/* ==========================================================
   HUB CENTRAL
========================================================== */


.ai-page .network-center {


    position:absolute;


    z-index:5;


    left:50%;


    top:50%;


    transform:translate(-50%,-50%);


    width:240px;


    height:240px;


    border-radius:48px;


    background:white;


    border:

    1px solid #e8ddf6;


    box-shadow:

    0 35px 90px rgba(89,50,193,.18);


    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;


}




.ai-page .network-center img {

    width:65px;

    margin-bottom:18px;

}



.ai-page .network-center strong {

    font-size:28px;

    font-weight:900;

    color:#17132f;

}



.ai-page .network-center span {

    margin-top:8px;

    color:#81758f;

    font-size:13px;

}






/* ==========================================================
   CARDS
========================================================== */


.ai-page .network-item {


    position:absolute;


    z-index:3;


    width:220px;


    min-height:110px;


    padding:22px;


    border-radius:22px;


    background:white;


    border:

    1px solid #e8ddf6;


    box-shadow:


    0 20px 50px rgba(40,20,80,.08);


    transition:

    border-color .25s ease,

    box-shadow .25s ease;


}




/* IMPORTANTE:
   remove qualquer movimento
*/

.ai-page .network-item:hover {


    border-color:#c4a9ee;


    box-shadow:


    0 20px 55px rgba(89,50,193,.12);


}





.ai-page .network-item i {


    width:42px;


    height:42px;


    border-radius:14px;


    background:#eee6ff;


    color:#5932c1;


    display:grid;


    place-items:center;


    font-size:22px;


    margin-bottom:10px;


    transition:.25s;


}



.ai-page .network-item:hover i {


    background:#e4d7ff;


}





.ai-page .network-item strong {


    display:block;


    color:#17132f;


    font-size:17px;


    font-weight:900;


}



.ai-page .network-item span {


    display:block;


    margin-top:5px;


    color:#857993;


    font-size:12px;


}







/* ==========================================================
   POSICIONAMENTO
========================================================== */


.item-flow {


    top:-20px;


    left:50%;


    transform:translateX(-50%);


}



.item-api {


    top:22%;


    left:8%;


}



.item-webhook {


    top:22%;


    right:8%;


}



.item-erp {


    bottom:24%;


    left:8%;


}



.item-ged {


    bottom:24%;


    right:8%;


}



.item-sign {


    bottom:-20px;


    left:50%;


    transform:translateX(-50%);


}







/* ==========================================================
   CONEXÕES
========================================================== */


.ai-page .network-item::after {


    content:"";


    position:absolute;


    background:#d9caf2;


    opacity:.55;


}



.item-flow::after {


    width:1px;


    height:90px;


    bottom:-90px;


    left:50%;


}




.item-sign::after {


    width:1px;


    height:90px;


    top:-90px;


    left:50%;


}





.item-api::after,

.item-erp::after {


    width:160px;


    height:1px;


    right:-160px;


    top:50%;


}





.item-webhook::after,

.item-ged::after {


    width:160px;


    height:1px;


    left:-160px;


    top:50%;


}







/* ==========================================================
   CARDS INFERIORES
========================================================== */


.ai-page .integration-highlights {


    display:grid;


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


    gap:25px;


    margin-top:60px;


}




.ai-page .integration-highlights article {


    padding:32px;


    border-radius:25px;


    background:white;


    border:

    1px solid #ebe3f7;


    transition:

    border-color .25s ease,

    box-shadow .25s ease;


}




.ai-page .integration-highlights article:hover {


    border-color:#c4a9ee;


    box-shadow:


    0 25px 60px rgba(89,50,193,.12);


}





.ai-page .integration-highlights i {


    width:55px;


    height:55px;


    border-radius:18px;


    display:grid;


    place-items:center;


    background:#eee6ff;


    color:#5932c1;


    font-size:28px;


}







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


@media(max-width:1000px){


.ai-page .ai-network {


    height:auto;


    display:flex;


    flex-direction:column;


    gap:25px;


}



.ai-page .network-center,

.ai-page .network-item {


    position:relative;


    top:auto;


    left:auto;


    right:auto;


    bottom:auto;


    transform:none;


    margin:auto;


}



.ai-page .connection-lines {


    display:none;


}



.ai-page .integration-highlights {


    grid-template-columns:1fr;


}


}














.ai-problem .value-grid article{

opacity:0;

transform:translateY(30px);

animation:
problemReveal .7s forwards;

}


.ai-problem .value-grid article:nth-child(2){

animation-delay:.15s;

}


.ai-problem .value-grid article:nth-child(3){

animation-delay:.30s;

}


.ai-problem .value-grid article:nth-child(4){

animation-delay:.45s;

}



@keyframes problemReveal{

to{

opacity:1;

transform:none;

}

}















/* =====================================================
   AI PROBLEM SECTION
===================================================== */


.ai-page .ai-problem{


    background:#fff;


    overflow:hidden;


}





.ai-page .ai-problem .section-heading{


    max-width:900px;


}






.ai-page .ai-problem .section-heading h2{


    max-width:850px;


    margin-left:auto;


    margin-right:auto;


}






.ai-page .ai-problem .section-heading p{


    max-width:700px;


    margin-left:auto;


    margin-right:auto;


}








/* GRID */

.ai-page .ai-pain-grid{


    display:grid;


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


    gap:24px;


    margin-top:70px;


}







/* CARD */

.ai-page .ai-pain-grid article{


    position:relative;


    min-height:310px;


    padding:34px;


    border-radius:28px;


    background:white;


    border:

    1px solid #ebe3f7;


    display:flex;


    flex-direction:column;


    align-items:flex-start;


    opacity:0;


    transform:translateY(35px);


    animation:

    painReveal .7s ease forwards;


}







.ai-page .ai-pain-grid article:nth-child(2){

    animation-delay:.12s;

}


.ai-page .ai-pain-grid article:nth-child(3){

    animation-delay:.24s;

}


.ai-page .ai-pain-grid article:nth-child(4){

    animation-delay:.36s;

}







@keyframes painReveal{


to{

    opacity:1;

    transform:none;

}


}







/* ICON */

.ai-page .ai-pain-grid .value-icon{


    width:58px;


    height:58px;


    border-radius:18px;


    background:#eee6ff;


    color:#5932c1;


    display:grid;


    place-items:center;


    font-size:28px;


    margin-bottom:28px;


}







/* TITLE */

.ai-page .ai-pain-grid h3{


    font-size:23px;


    line-height:1.2;


    margin-bottom:16px;


    color:#17132f;


}







/* TEXT */

.ai-page .ai-pain-grid p{


    color:#81758f;


    font-size:15px;


    line-height:1.7;


    margin:0;


}







/* TAG */

.ai-page .pain-tag{


    margin-top:auto;


    padding:8px 14px;


    border-radius:999px;


    background:#f5f0ff;


    color:#5932c1;


    font-size:11px;


    font-weight:900;


    letter-spacing:.02em;


}







/* HOVER PREMIUM
   sem deslocamento
*/

.ai-page .ai-pain-grid article:hover{


    border-color:#cdb7ef;


    box-shadow:


    0 25px 60px rgba(89,50,193,.10);


}







.ai-page .ai-pain-grid article:hover .value-icon{


    background:#e5d8ff;


}








/* RESPONSIVO */

@media(max-width:1100px){


.ai-page .ai-pain-grid{


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


}


}



@media(max-width:650px){


.ai-page .ai-pain-grid{


    grid-template-columns:1fr;


}



}















/* =====================================================
   FOOTER ELEVA SIGN FINAL
===================================================== */


.site-footer{


    position:relative;
    
    
    background:#0d061f;
    
    
    padding:70px 0 28px;
    
    
    overflow:hidden;
    
    
    }
    
    
    
    
    
    
    .footer-glow{
    
    
    position:absolute;
    
    
    right:-250px;
    
    
    top:-250px;
    
    
    width:550px;
    
    
    height:550px;
    
    
    background:
    
    radial-gradient(
    circle,
    rgba(157,78,255,.22),
    transparent 65%
    );
    
    
    pointer-events:none;
    
    
    }
    
    
    
    
    
    .footer-grid{
    
    
    position:relative;
    
    
    display:grid;
    
    
    grid-template-columns:
    
    2fr 1fr 1fr 1fr;
    
    
    gap:70px;
    
    
    padding-bottom:55px;
    
    
    }
    
    
    
    
    
    
    /* BRAND */
    
    
    
    
    .footer-brand img{
    
    
    width:220px;
    
    
    margin-bottom:25px;
    
    
    }
    
    
    
    
    
    .footer-brand p{
    
    
    max-width:380px;
    
    
    font-size:16px;
    
    
    line-height:1.7;
    
    
    color:
    
    rgba(255,255,255,.62);
    
    
    margin-bottom:35px;
    
    
    }
    
    
    
    
    
    .footer-ecosystem{
    
    
    display:block;
    
    
    font-size:11px;
    
    
    font-weight:900;
    
    
    letter-spacing:.08em;
    
    
    color:#c8a8ff;
    
    
    margin-bottom:18px;
    
    
    }
    
    
    
    
    
    .footer-tags{
    
    
    display:flex;
    
    
    gap:12px;
    
    
    }
    
    
    
    
    .footer-tags a{
    
    
    padding:
    
    10px 20px;
    
    
    border-radius:999px;
    
    
    background:
    
    rgba(255,255,255,.06);
    
    
    border:
    
    1px solid rgba(255,255,255,.12);
    
    
    color:white;
    
    
    font-size:13px;
    
    
    font-weight:800;
    
    
    transition:.25s;
    
    
    }
    
    
    
    .footer-tags a:hover{
    
    
    background:
    
    rgba(255,255,255,.12);
    
    
    }
    
    
    
    
    
    
    
    /* COLUNAS */
    
    
    .footer-column{
    
    
    display:flex;
    
    
    flex-direction:column;
    
    
    gap:15px;
    
    
    }
    
    
    
    
    .footer-column h4{
    
    
    margin:0 0 15px;
    
    
    color:white;
    
    
    font-size:16px;
    
    
    font-weight:900;
    
    
    }
    
    
    
    
    .footer-column a{
    
    
    font-size:14px;
    
    
    color:
    
    rgba(255,255,255,.55);
    
    
    transition:.25s;
    
    
    }
    
    
    
    .footer-column a:hover{
    
    
    color:white;
    
    
    }
    
    
    
    
    
    
    
    
    
    /* BOTTOM */
    
    
    .footer-bottom{
    
    
    border-top:
    
    1px solid rgba(255,255,255,.12);
    
    
    padding-top:25px;
    
    
    display:flex;
    
    
    justify-content:space-between;
    
    
    align-items:center;
    
    
    font-size:13px;
    
    
    color:
    
    rgba(255,255,255,.45);
    
    
    }
    
    
    
    
    
    .footer-bottom b{
    
    
    color:
    
    rgba(255,255,255,.65);
    
    
    }
    
    
    
    
    
    
    
    /* RESPONSIVO */
    
    
    @media(max-width:1000px){
    
    
    .footer-grid{
    
    
    grid-template-columns:1fr 1fr;
    
    
    gap:40px;
    
    
    }
    
    
    
    .footer-brand{
    
    
    grid-column:
    
    1/-1;
    
    
    }
    
    
    }
    
    
    
    
    
    @media(max-width:600px){
    
    
    .footer-grid{
    
    
    grid-template-columns:1fr;
    
    
    }
    
    
    
    .footer-bottom{
    
    
    flex-direction:column;
    
    
    align-items:flex-start;
    
    
    gap:15px;
    
    
    }
    
    
    }




















    /* =====================================================
   BARRA ECOSSISTEMA MEDIA4ALL + ELEVA FLOW
===================================================== */


.ecosystem-bar {

    height: 52px;

    background:
    linear-gradient(
        90deg,
        #11645c 0%,
        #1f8b8f 45%,
        #32bbed 100%
    );

    color:#fff;

}



.ecosystem-inner {

    height:100%;

    display:flex;

    align-items:center;

    gap:22px;

}





/* MEDIA4ALL */


.ecosystem-brand {

    display:flex;

    align-items:center;

    gap:12px;

}



.ecosystem-brand strong {

    font-size:15px;

    font-weight:900;

    letter-spacing:.12em;

}



.ecosystem-brand span {

    font-size:13px;

    font-weight:600;

    opacity:.95;

}






/* divisor */


.ecosystem-divider {

    width:1px;

    height:24px;

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

}






/* ELEVA FLOW */


.flow-platform {

    display:flex;

    align-items:center;

    gap:14px;

}



.flow-platform img {

    height:30px;

    width:auto;


    filter:
    brightness(0)
    invert(1);

}





.flow-platform span {

    font-size:13px;

    font-weight:700;

}





/* ações */

.ecosystem-actions {

    margin-left:auto;

    display:flex;

    align-items:center;

    gap:28px;

}



.ecosystem-actions a {

    color:white;

    font-size:13px;

    font-weight:900;

    transition:.2s;

}



.ecosystem-actions a:hover {

    opacity:.8;

}









/* =====================================================
   CONTEXTO DO PRODUTO
===================================================== */


.product-context {

    background:white;

    border-bottom:

    1px solid #ece5f7;

    position:sticky;

    top:0;

    z-index:40;

    box-shadow:

    0 8px 25px rgba(20,10,50,.04);

}





.product-context-inner {


    height:82px;


    display:flex;


    align-items:center;


    justify-content:space-between;


    gap:30px;


}








/* =====================================================
   PRODUTO
===================================================== */


.product-info {


    display:flex;


    align-items:center;


    gap:18px;


}






.product-icon {


    width:56px;


    height:56px;


    border-radius:18px;


    background:


    linear-gradient(
        145deg,
        #eee6ff,
        #ffffff
    );


    border:

    1px solid #e5daf7;


    display:grid;


    place-items:center;


    color:#5932c1;


    font-size:28px;


}





.product-info strong {


    display:block;


    font-size:22px;


    font-weight:900;


    line-height:1.15;


    color:#17132f;


}





.product-info span {


    display:block;


    margin-top:5px;


    font-size:13px;


    font-weight:800;


    color:#5932c1;


}









/* =====================================================
   MENU DO PRODUTO
===================================================== */


.product-menu {


    flex:1;


    display:flex;


    align-items:center;


    justify-content:center;


    gap:36px;


}




.product-menu a {


    position:relative;


    color:#71677f;


    font-size:14px;


    font-weight:800;


    white-space:nowrap;


    transition:.25s;


}




.product-menu a:hover {


    color:#5932c1;


}





.product-menu a.active {


    color:#5932c1;


}





.product-menu a.active::after {


    content:"";


    position:absolute;


    left:0;


    right:0;


    bottom:-13px;


    height:2px;


    border-radius:5px;


    background:#5932c1;


}

.product-menu a.active::after{


    display:none;
    
    
    }








/* =====================================================
   SELO ELEVA FLOW
===================================================== */


.product-powered {


    display:flex;


    align-items:center;


    gap:12px;


}



.product-powered span {


    font-size:12px;


    font-weight:800;


    color:#81758f;


    white-space:nowrap;


}






.flow-seal {


    height:30px;


    padding:

    0 10px;


    border-radius:999px;


    display:flex;


    align-items:center;


    justify-content:center;


    background:


    linear-gradient(
        135deg,
        #1f8b8f,
        #32bbed
    );


    box-shadow:


    0 12px 30px rgba(31,139,143,.20);


}





.flow-seal img {


    height:18px;


    width:auto;


    filter:

    brightness(0) invert(1);


}









/* =====================================================
   HOVER PREMIUM
===================================================== */


.flow-seal:hover {


    transform:translateY(-1px);


}





/* =====================================================
   RESPONSIVO
===================================================== */


@media(max-width:1200px){


.product-context-inner {


    gap:20px;


}



.product-menu {


    gap:22px;


}



.product-menu a {


    font-size:13px;


}



}







@media(max-width:900px){



.ecosystem-bar {


    height:auto;


    padding:12px 0;


}



.ecosystem-inner {


    flex-wrap:wrap;


}



.flow-platform span {


    display:none;


}



.product-context-inner {


    height:auto;


    padding:16px 0;


    flex-wrap:wrap;


}



.product-menu {


    order:3;


    width:100%;


    justify-content:flex-start;


    overflow-x:auto;


    padding-bottom:8px;


}



.product-powered {


    margin-left:auto;


}



}







@media(max-width:600px){



.ecosystem-brand span,


.ecosystem-divider {


    display:none;


}



.product-info strong {


    font-size:18px;


}



.product-powered span {


    display:none;


}



}



.ecosystem-brand{

    display:flex;

    align-items:center;

    gap:14px;

}


.ecosystem-brand img{

    height:30px;

    width:auto;

}



.ecosystem-brand span{

    font-size:13px;

    font-weight:600;

    opacity:.95;

}














/* ==========================================
   LINHA DINÂMICA DO PRODUTO
========================================== */


.product-progress{


    position:absolute;
    
    
    bottom:0;
    
    
    left:0;
    
    
    width:100%;
    
    
    height:3px;
    
    
    background:#f1ebfa;
    
    
    overflow:hidden;
    
    
    }
    
    
    
    .progress-line{
    
    
    display:block;
    
    
    height:100%;
    
    
    width:15%;
    
    
    background:
    
    linear-gradient(
    90deg,
    #5932c1,
    #9b6cff
    );
    
    
    transition:
    
    transform .35s ease,
    width .35s ease;
    
    
    }