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

.xp-card{

    background:#FFFFFF;

    border:1px solid #E7EDF8;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 10px 20px rgba(24,45,90,.08);

    transition:.35s;

}

.xp-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(20,40,90,.15);

}

/*==========================
ICONO
==========================*/

.xp-card-icon{

    width:50px;

    height:50px;

    border-radius:50%;

    margin:10px 0 10px 10px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#1788FF,#6A3EFF);
    
    

}

.xp-card-icon i{

    font-size:21px;

    color:#FFFFFF;

}

/*==========================
TITULO
==========================*/

.xp-card h3{

    margin:0 28px 12px;

    font-size:20px;

    line-height:1.10;

    font-weight:700;

    color:#1B2950;

}

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

.xp-card p{

    margin:0 28px;

    font-size:14px;

    line-height:1.4;

    color:#55627D;

}

/*==========================
IMAGEN
==========================*/

.xp-card-image{

    padding:22px;

}

.xp-card-image img{

    display:block;

    width:100%;

    height:210px;

    object-fit:cover;

    object-position:center;

    border-radius:18px;

}

/*==================================================
CARD HORIZONTAL
==================================================*/

.card-horizontal{

    display:flex;
    flex-direction:column;
    justify-content:space-between;

}

.card-header{

   display:flex;
    align-items:flex-start;
    gap:18px;


}

.card-header-content{

    flex:1;

}

.card-list{

    margin:5px 0 0;
    padding-left:5px;

}

.card-list li{

    margin-bottom:12px;

    color:#425070;

    line-height:1.10;

}

.card-horizontal .card-image{

    grid-column:2;
    grid-row:1;
    height:100%;

}

.card-horizontal .card-image img{

    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:18px;
    display:block;

}

.card-media-side{

    display:flex;

    align-items:stretch;

    gap:0;

}

.card-media-side .card-content{

    width:55%;
    padding:10px 10px 10px 10px;
    display:flex;
    flex-direction:column;
    background:#f8faff;
    

}

.card-media-side .card-image{

    width:45%;

    overflow:hidden;

    border-radius:0 22px 22px 0;

}

.card-media-side .card-image img{

    width:100%;

    height: 300px;

    object-fit:cover;

    display:block;

}

.card-list{

    margin:0;
    padding-left:13px;
    font-size:13px;
    line-height:1.10 !important;
    color:#4A587D;

}


/*==================================================
FLOW
==================================================*/

.growth-flow{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:70px;

    padding:90px 0;

}

/*========================*/

.growth-flow-left{

    width:100%;

}

.growth-flow-left h2{

    margin:0;

    font-size:28px;

    line-height:1.08;

    font-weight:800;

    color:#1B2950;

}

.growth-flow-left h2 span{

    background:linear-gradient(90deg,#238BFF,#6E42FF);

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

}

.growth-flow-left .title-line{

    width:68px;

    height:4px;

    margin:24px 0 28px;

    border-radius:10px;

    background:linear-gradient(90deg,#25D8FF,#6E42FF);
    
    margin: auto;

}

.growth-flow-left p{

    margin:0;

    font-size:15px;

    line-height:1.20;

    color:#586684;

}

/*========================*/

.growth-flow-right{

    flex:1;

    display:flex;

    align-items:flex-start;

    justify-content:flex-start;

    gap:10px;

    overflow-x:auto;

}

/*========================*/

.flow-step{

    width:70px;

    flex:0 0 70px;

    display:flex;

    flex-direction:column;

    align-items:right;

    text-align:center;

}

/*========================*/

.flow-icon{

    width:78px;

    height:78px;

    border-radius:50%;

    background:#ffffff;

    border:2px solid #EDF1FA;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#316DFF;

    font-size:32px;

    box-shadow:0 8px 22px rgba(0,0,0,.08);

}

.flow-icon i{

    line-height:1;

}

/*========================*/

.flow-step-final .flow-icon{

    border:none;

    color:#ffffff;

    background:linear-gradient(135deg,#2589FF,#6B3DFF);

}

/*========================*/

.flow-step span{

    margin-top:18px;

    font-size:15px;

    line-height:1.35;

    font-weight:700;

    color:#1B2950;

}

/*========================*/

.flow-arrow{

    width:22px;

    flex:0 0 22px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-top:28px;

    color:#7D7EFF;

    font-size:18px;

}

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

.card{

    background:#fff;

    border:1px solid #E6ECF7;

    border-radius:24px;

    box-shadow:0 12px 35px rgba(16,36,94,.06);

    transition:.35s;

    overflow:hidden;

    height:100%;

}



.card-service{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    justify-content:flex-start;

    padding:34px 28px;

    min-height:420px;

}

.card-icon{

    width:64px;

    height:64px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:26px;

    margin-bottom:24px;

    flex-shrink:0;

}



.card-service .card-icon{

    margin-bottom:26px;

}

.card-service h3{

    margin:0 0 22px;

    font-size:18px;

    line-height:1.2;

    font-weight:700;

    color:#1B2950;
    margin-bottom:18px;

    min-height:72px;

}

.card-service ul{

    margin:0;

    padding-left:18px;

    list-style:disc;

}

.card-service li{

    margin-bottom:10px;

    color:#4B5B7C;

    font-size:13px;

    line-height:1.10;

}

.card-service li:last-child{

    margin-bottom:0;

}

/*==================================================
ICON GRADIENTS
==================================================*/

.gradient-blue{

    background:linear-gradient(135deg,#2F80FF,#4F46E5);

}

.gradient-cyan{

    background:linear-gradient(135deg,#22C1F1,#00A6E8);

}

.gradient-purple{

    background:linear-gradient(135deg,#6D28D9,#8B5CF6);

}

.gradient-pink{

    background:linear-gradient(135deg,#EC4899,#C026D3);

}