/*==================================================
RESET
==================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Poppins',sans-serif;
    overflow-x:hidden;
}

/*==================================================
BANNER MISIÓN
==================================================*/

.mission-banner{

    width:100%;
    height:420px;

    background:
    radial-gradient(circle at left center,
    rgba(255,255,255,.10) 0%,
    rgba(255,255,255,.04) 18%,
    rgba(255,255,255,0) 45%),

    linear-gradient(
    90deg,
    #23447c 0%,
    #1a3a70 25%,
    #123265 55%,
    #0a2450 80%,
    #07183c 100%);
}

.mission-overlay{

    width:100%;
    height:100%;

    display:flex;
    align-items:center;
}
.mission-label{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:14px 26px;

    border:1.5px solid #d9a320;
    border-radius:50px;

    color:#ffffff;

    font-family:'Poppins',sans-serif;
    font-size:15px;
    font-weight:600;

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

    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);

    cursor:pointer;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease,
        background .35s ease;
}

/* Hover */

.mission-label:hover{

    transform:translateY(-4px);

    border-color:#f8c03d;

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

    box-shadow:
    0 0 18px rgba(245,160,0,.25),
    0 12px 30px rgba(0,0,0,.18);

}

/* Click */

.mission-label:active{

    transform:scale(.97);

}
.mission-container{

    width:100%;
    max-width:1280px;

    margin:0 auto;

    padding:0 60px;
}

/*==================================================
BOTÓN
==================================================*/

.mission-label{

    display:inline-flex;

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

    padding:14px 26px;

    border:1.5px solid #F5A000;

    border-radius:40px;

    color:#ffffff;

    font-family:'Poppins',sans-serif;

    font-size:15px;

    font-weight:600;

    margin-bottom:34px;
}

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

.mission-banner h1{

    color:#ffffff;

    font-family:'Poppins',sans-serif;

    font-size:105px;

    font-weight:800;

    line-height:1;

    letter-spacing:-3px;
}

/*==================================================
TABLET
==================================================*/

@media(max-width:992px){

.mission-banner{

height:360px;

}

.mission-container{

padding:0 40px;

}

.mission-banner h1{

font-size:72px;

}

}

/*==================================================
CELULAR
==================================================*/

@media(max-width:768px){

.mission-banner{

height:300px;

}

.mission-container{

padding:0 28px;

}

.mission-label{

padding:12px 22px;

font-size:14px;

margin-bottom:24px;

}

.mission-banner h1{

font-size:56px;

line-height:1.05;

letter-spacing:-1px;

}

}

/*==================================================
CELULAR PEQUEÑO
==================================================*/

@media(max-width:480px){

.mission-banner{

height:250px;

}

.mission-container{

padding:0 18px;

}

.mission-banner h1{

font-size:38px;

line-height:1.1;

max-width:260px;

}

}
/*==================================================
PROPÓSITO
==================================================*/

.purpose{

    width:100%;

    background:#ffffff;

    padding:90px 0 85px;

}

.purpose-container{

    width:100%;
    max-width:1120px;

    margin:0 auto;

    padding:0 35px;

}

/*==================================================
TÍTULOS
==================================================*/

.purpose-subtitle{

    display:block;

    color:#F5A000;

    font-size:18px;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:10px;

}

.purpose h2{

    color:#123D83;

    font-size:56px;

    font-weight:800;

    line-height:1.15;

    margin-bottom:55px;

}

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

.purpose-grid{

    display:grid;

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

    gap:40px;

}

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

.purpose-card{

    background:#ffffff;

    border-radius:18px;

    padding:42px;

    box-shadow:
    0 14px 38px rgba(0,0,0,.08);

    transition:.35s;

}

.purpose-card:hover{

    transform:translateY(-6px);

    box-shadow:
    0 22px 45px rgba(0,0,0,.12);

}

/*==================================================
BORDES
==================================================*/

.mission-card{

    border-top:10px solid #143E82;

}

.vision-card{

    border-top:10px solid #F5A000;

}

/*==================================================
ICONOS
==================================================*/

.purpose-icon{

    width:72px;

    height:72px;

    border-radius:50%;

    background:#EEF3FC;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:22px;

}

.vision-card .purpose-icon{

    background:#FFF4DD;

}

.purpose-icon img{

    width:42px;

    height:42px;

    object-fit:contain;

    display:block;

}

/*==================================================
TEXTOS
==================================================*/

.purpose-card h3{

    color:#143E82;

    font-size:30px;

    font-weight:800;

    margin-bottom:22px;

}

.purpose-card p{

    color:#222;

    font-size:18px;

    line-height:1.8;

    font-weight:400;

}

/*==================================================
TABLET
==================================================*/

@media(max-width:992px){

.purpose{

padding:70px 0;

}

.purpose-container{

padding:0 30px;

}

.purpose h2{

font-size:42px;

margin-bottom:40px;

}

.purpose-grid{

grid-template-columns:1fr;

gap:30px;

}

.purpose-card{

padding:36px;

}

.purpose-icon{

width:68px;
height:68px;

}

.purpose-icon img{

width:38px;
height:38px;

}

.purpose-card h3{

font-size:28px;

}

.purpose-card p{

font-size:17px;

line-height:1.8;

}

}

/*==================================================
CELULAR
==================================================*/

@media(max-width:768px){

.purpose{

padding:60px 0;

}

.purpose-container{

padding:0 22px;

}

.purpose-subtitle{

font-size:15px;

}

.purpose h2{

font-size:34px;

margin-bottom:35px;

}

.purpose-grid{

gap:24px;

}

.purpose-card{

padding:28px 24px;

border-radius:16px;

}

.purpose-icon{

width:60px;
height:60px;

margin-bottom:18px;

}

.purpose-icon img{

width:34px;
height:34px;

}

.purpose-card h3{

font-size:24px;

margin-bottom:16px;

}

.purpose-card p{

font-size:16px;

line-height:1.8;

}

}

/*==================================================
CELULAR PEQUEÑO
==================================================*/

@media(max-width:480px){

.purpose-container{

padding:0 18px;

}

.purpose h2{

font-size:30px;

}

.purpose-card{

padding:24px 20px;

}

.purpose-card h3{

font-size:22px;

}

.purpose-card p{

font-size:15px;

line-height:1.8;

}

}
/*==================================================
VALORES
==================================================*/

.values{

    width:100%;

    background:#ffffff;

    padding:50px 0 100px;

}

.values-container{

    width:100%;
    max-width:1120px;

    margin:0 auto;

    padding:0 35px;

}

/*==================================================
TÍTULOS
==================================================*/

.values-subtitle{

    display:block;

    color:#F5A000;

    font-size:16px;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:8px;

}

.values h2{

    color:#123D83;

    font-size:42px;

    font-weight:800;

    margin-bottom:16px;

}

.values-description{

    color:#444;

    font-size:16px;

    line-height:1.7;

    margin-bottom:45px;

}

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

.values-grid{

    display:grid;

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

    gap:24px;

}

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

.value-card{

    background:#EEF3FB;

    border-radius:16px;

    padding:28px 24px;

    text-align:center;

    transition:.35s;

}

.value-card:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 38px rgba(0,0,0,.10);

}

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

.value-icon{

    width:70px;

    height:70px;

    margin:0 auto 18px;

    background:#DCE5F3;

    border-radius:14px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.value-icon img{

    width:40px;

    height:40px;

    object-fit:contain;

    display:block;

}

/*==================================================
TEXTOS
==================================================*/

.value-card h3{

    color:#F5A000;

    font-size:18px;

    font-weight:700;

    margin-bottom:14px;

}

.value-card p{

    color:#2B2B2B;

    font-size:14px;

    line-height:1.8;

}

/*==================================================
TABLET
==================================================*/

@media(max-width:992px){

.values{

padding:60px 0 80px;

}

.values-container{

padding:0 28px;

}

.values-grid{

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

gap:22px;

}

.values h2{

font-size:36px;

}

.value-card{

padding:26px 22px;

}

.value-icon{

width:64px;
height:64px;

}

.value-icon img{

width:36px;
height:36px;

}

.value-card h3{

font-size:17px;

}

.value-card p{

font-size:14px;

}

}

/*==================================================
CELULAR
==================================================*/

@media(max-width:768px){

.values{

padding:50px 0 70px;

}

.values-container{

padding:0 22px;

}

.values-grid{

grid-template-columns:1fr;

gap:20px;

}

.values-subtitle{

font-size:14px;

}

.values h2{

font-size:30px;

}

.values-description{

font-size:15px;

}

.value-card{

padding:24px 20px;

}

.value-icon{

width:60px;
height:60px;

margin-bottom:16px;

}

.value-icon img{

width:32px;
height:32px;

}

.value-card h3{

font-size:18px;

}

.value-card p{

font-size:15px;

line-height:1.7;

}

}

/*==================================================
CELULAR PEQUEÑO
==================================================*/

@media(max-width:480px){

.values-container{

padding:0 18px;

}

.values h2{

font-size:28px;

}

.value-card{

padding:22px 18px;

}

}

/*==================================================
COMPROMISO
==================================================*/

.commitment{

    width:100%;
    padding:56px 0;

    background:
    linear-gradient(
        90deg,
        #214a8d 0%,
        #476da7 42%,
        #89a3ca 72%,
        #eef2f8 100%
    );

}

.commitment-container{

    width:100%;
    max-width:1280px;

    margin:0 auto;

    padding:0 82px;

}

/*======================================
SUBTÍTULO
======================================*/

.commitment-subtitle{

    display:block;

    color:#F6A300;

    font-size:14px;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:10px;

}

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

.commitment h2{

    color:#fff;

    font-size:29px;

    font-weight:800;

    line-height:1.2;

    letter-spacing:-1px;

    max-width:700px;

    margin-bottom:12px;

}

/*======================================
PÁRRAFO
======================================*/

.commitment p{

    color:#fff;

    font-size:17px;

    font-weight:400;

    line-height:1.45;

    max-width:650px;

}

/*======================================
TABLET
======================================*/

@media(max-width:992px){

.commitment{

padding:46px 0;

}

.commitment-container{

padding:0 40px;

}

.commitment h2{

font-size:25px;

max-width:560px;

}

.commitment p{

font-size:16px;

max-width:520px;

}

}

/*======================================
MÓVIL
======================================*/

@media(max-width:768px){

.commitment{

padding:40px 0;

}

.commitment-container{

padding:0 22px;

}

.commitment-subtitle{

font-size:13px;

}

.commitment h2{

font-size:21px;

max-width:100%;

}

.commitment p{

font-size:15px;

line-height:1.6;

max-width:100%;

}

}
/*==================================================
OBJETIVOS
==================================================*/

.goals{

    width:100%;
    background:#fff;

    padding:70px 0 110px;

}

.goals-container{

    width:100%;
    max-width:1280px;

    margin:0 auto;

    padding:0 40px;

}

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

.goal-card{

    display:flex;
    align-items:center;
    gap:40px;

    background:#fff;

    border-radius:20px;

    padding:22px 30px;

    margin-bottom:34px;

    box-shadow:
    0 14px 35px rgba(32,54,95,.12);

    transition:.35s;

}

.goal-card:hover{

    transform:translateY(-5px);

    box-shadow:
    0 20px 45px rgba(32,54,95,.16);

}

/*==================================================
NÚMERO
==================================================*/

.goal-number{

    width:70px;
    height:70px;

    flex-shrink:0;

    border-radius:12px;

    background:#173F84;

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

    color:#fff;

    font-size:32px;

    font-weight:800;

}

/*==================================================
TEXTOS
==================================================*/

.goal-content h3{

    color:#111;

    font-size:22px;

    font-weight:700;

    margin-bottom:10px;

}

.goal-content p{

    color:#70708A;

    font-size:18px;

    line-height:1.65;

}

/*==================================================
TABLET
==================================================*/

@media(max-width:992px){

.goals-container{

padding:0 30px;

}

.goal-card{

gap:28px;

padding:20px 24px;

}

.goal-number{

width:64px;
height:64px;

font-size:28px;

}

.goal-content h3{

font-size:20px;

}

.goal-content p{

font-size:16px;

}

}

/*==================================================
CELULAR
==================================================*/

@media(max-width:768px){

.goals{

padding:55px 0 70px;

}

.goals-container{

padding:0 22px;

}

.goal-card{

flex-direction:column;

align-items:flex-start;

gap:18px;

padding:24px;

}

.goal-number{

width:60px;
height:60px;

font-size:26px;

}

.goal-content h3{

font-size:20px;

}

.goal-content p{

font-size:16px;

line-height:1.7;

}

}

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

.join{

    width:100%;

    padding:95px 0;

    background:
    radial-gradient(
        circle at top center,
        rgba(72,126,224,.35) 0%,
        rgba(72,126,224,.12) 28%,
        rgba(72,126,224,0) 55%
    ),

    linear-gradient(
        180deg,
        #2f6ed8 0%,
        #214f9d 30%,
        #16386f 65%,
        #081627 100%
    );

}

.join-container{

    width:100%;
    max-width:1100px;

    margin:auto;

    padding:0 30px;

    text-align:center;

}

/*==================================
SUBTÍTULO
==================================*/

.join-subtitle{

    display:block;

    color:#F5A000;

    font-size:18px;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:18px;

    letter-spacing:.5px;

}

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

.join h2{

    color:#fff;

    font-size:62px;

    font-weight:800;

    line-height:1.1;

    margin-bottom:22px;

}

/*==================================
PÁRRAFO
==================================*/

.join p{

    max-width:760px;

    margin:0 auto 45px;

    color:#ffffff;

    font-size:25px;

    line-height:1.65;

    font-weight:500;

}

/*==================================
BOTÓN
==================================*/

.join-button{

    display:inline-flex;

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

    width:220px;

    height:66px;

    background:#F5A000;

    color:#fff;

    text-decoration:none;

    font-size:30px;

    font-weight:700;

    border-radius:8px;

    transition:.35s;

}

.join-button:hover{

    background:#d98d00;

    transform:translateY(-5px);

    box-shadow:0 15px 35px rgba(0,0,0,.25);

}

/*==================================================
TABLET
==================================================*/

@media(max-width:992px){

.join{

padding:80px 0;

}

.join h2{

font-size:46px;

}

.join p{

font-size:21px;

max-width:620px;

}

.join-button{

width:190px;
height:60px;

font-size:25px;

}

}

/*==================================================
CELULAR
==================================================*/

@media(max-width:768px){

.join{

padding:65px 0;

}

.join-container{

padding:0 24px;

}

.join-subtitle{

font-size:15px;

}

.join h2{

font-size:34px;

line-height:1.2;

}

.join p{

font-size:18px;

line-height:1.7;

margin-bottom:35px;

}

.join-button{

width:170px;

height:56px;

font-size:22px;

}

}