/* =========================================
   NOSOTROS
========================================= */

.about-hero{

    padding:160px 20px 100px;

    background:#081A38;

    color:white;

    text-align:center;

}

.about-hero-content{

    max-width:850px;

    margin:auto;

}

.about-label,
.about-section-label{

    color:#F68B1F;

    font-size:11px;

    font-weight:800;

    letter-spacing:2px;

}

.about-hero h1{

    color:white !important;

    font-size:50px;

    line-height:1.12;

    font-weight:800;

    margin:15px auto 20px;

}

.about-hero p{

    max-width:700px;

    margin:auto;

    color:#D7E2ED;

    line-height:1.8;

    font-size:16px;

}


/* =========================================
   INTRO
========================================= */

.about-intro{

    padding:100px 0;

    background:#fff;

}

.about-intro h2,
.about-vision h2,
.about-heading h2{

    color:#081A38;

    font-size:38px;

    line-height:1.2;

    font-weight:800;

    margin:12px 0 20px;

}

.about-intro p{

    color:#667085;

    line-height:1.8;

    font-size:14px;

}

.about-highlight{

    padding:55px;

    border-radius:25px;

    background:#F5F7FA;

    border:1px solid #E3E8EE;

}

.about-highlight-number{

    color:#F68B1F;

    font-size:75px;

    line-height:1;

    font-weight:800;

}

.about-highlight h3{

    color:#081A38;

    font-size:24px;

    font-weight:800;

    margin:15px 0 10px;

}

.about-highlight p{

    margin:0;

}


/* =========================================
   VISIÓN
========================================= */

.about-vision{

    padding:100px 0;

    background:#12385F;

}

.about-vision h2{

    color:#fff;

}

.about-vision .about-section-label{

    color:#F68B1F;

}

.about-vision-text{

    color:#D7E2ED;

    font-size:15px;

    line-height:1.9;

    margin-bottom:20px;

}


/* =========================================
   ECOSISTEMA
========================================= */

.about-ecosystem{

    padding:100px 0;

    background:#F5F7FA;

}

.about-heading{

    max-width:800px;

    margin:0 auto 55px;

}

.about-heading p{

    color:#667085;

    line-height:1.8;

}

.about-business-card{

    display:block;

    height:100%;

    padding:30px;

    background:white;

    border:1px solid #E1E6EC;

    border-radius:18px;

    text-decoration:none;

    transition:.25s;

}

.about-business-card:hover{

    transform:translateY(-7px);

    border-color:#F68B1F;

    box-shadow:
        0 15px 40px rgba(8,26,56,.08);

}

.about-business-card.featured{

    background:#081A38;

    border-color:#081A38;

}

.about-business-icon{

    width:55px;

    height:55px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#FFF1E3;

    color:#F68B1F;

    border-radius:14px;

    font-size:22px;

    margin-bottom:20px;

}

.about-business-card > span{

    color:#F68B1F;

    font-size:9px;

    font-weight:800;

    letter-spacing:2px;

}

.about-business-card h3{

    color:#081A38;

    font-size:22px;

    font-weight:800;

    margin:5px 0 10px;

}

.about-business-card p{

    color:#667085;

    font-size:13px;

    line-height:1.7;

    min-height:45px;

}

.about-business-card strong{

    display:inline-flex;

    align-items:center;

    gap:7px;

    color:#F68B1F;

    font-size:11px;

}

.about-business-card.featured h3{

    color:#fff;

}

.about-business-card.featured p{

    color:#D7E2ED;

}


/* =========================================
   DIFERENCIAL
========================================= */

.about-difference{

    padding:100px 0;

    background:#fff;

}

.about-value{

    height:100%;

    padding:28px;

    border-left:3px solid #F68B1F;

}

.about-value > div{

    color:#F68B1F;

    font-size:12px;

    font-weight:800;

    margin-bottom:15px;

}

.about-value h3{

    color:#081A38;

    font-size:18px;

    font-weight:800;

}

.about-value p{

    color:#667085;

    font-size:12px;

    line-height:1.7;

}


/* =========================================
   CTA
========================================= */

.about-cta{

    padding:100px 20px;

    background:
        linear-gradient(
            135deg,
            #F68B1F 0%,
            #D96F0B 45%,
            #081A38 100%
        );

}

.about-cta h2{

    max-width:750px;

    margin:12px auto 15px;

    color:white;

    font-size:42px;

    font-weight:800;

}

.about-cta p{

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

    line-height:1.8;

    margin-bottom:30px;

}

.btn-about{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:14px 25px;

    background:#081A38;

    color:white;

    border:1px solid #081A38;

    border-radius:10px;

    text-decoration:none;

    font-size:12px;

    font-weight:700;

    transition:.2s;

}

.btn-about:hover{

    background:white;

    color:#081A38;

    border-color:white;

}


/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:767px){

    .about-hero{

        padding:130px 20px 75px;

    }

    .about-hero h1{

        font-size:34px;

    }

    .about-intro,
    .about-vision,
    .about-ecosystem,
    .about-difference{

        padding:70px 0;

    }

    .about-intro h2,
    .about-vision h2,
    .about-heading h2{

        font-size:30px;

    }

    .about-highlight{

        padding:35px;

    }

    .about-highlight-number{

        font-size:60px;

    }

    .about-cta h2{

        font-size:32px;

    }

}