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

.nosotros {
    position: relative;
    overflow: hidden;
    padding: 120px 0;
    background:
        radial-gradient(circle at top right, #E8F3FF 0%, transparent 30%),
        radial-gradient(circle at bottom left, #DCEEFF 0%, transparent 35%),
        #FFFFFF;
}

/* Formas decorativas */
.nosotros::before {
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    background: rgba(46, 139, 255, .06);
    border-radius: 50%;
    right: -220px;
    top: -180px;
}

.nosotros::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    background: rgba(11, 42, 99, .04);
    border-radius: 50%;
    left: -120px;
    bottom: -120px;
}

/* BADGE */
.badge-hero {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    border-radius: 50px;
    background: #EAF4FF;
    color: #2E8BFF;
    font-weight: 600;
    letter-spacing: .5px;
    margin-bottom: 25px;
}

/* TITULO */
.nosotros h2 {
    font-size: 56px;
    line-height: 1.15;
    font-weight: 800;
    color: #0B2A63;
    margin-bottom: 30px;
}   

.nosotros h2 span {
    color: #2E8BFF;
}

/* TEXTO */
.nosotros p {
    font-size: 18px;
    line-height: 1.9;
    color: #6B7280;
    margin-bottom: 40px;
}

/* LISTA CHECK */
.check-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.check-list div {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px 20px;
    background: #FFFFFF;
    border-radius: 18px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .05);
    transition: .35s;
    font-weight: 600;
    color: #334155;
}

.check-list div:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .10);
}

.check-list i {
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #2E8BFF, #0B2A63);
    color: #FFF;
    font-size: 18px;
    flex-shrink: 0;
}

.nosotros img {
    width: 100%;
    max-width: 100%;
    border-radius: 35px;
    box-shadow: 0 35px 70px rgba(11, 42, 99, .15);
    transition: .5s;
    /* Margen por defecto seguro en escritorio */
    margin-top: 0; 
}

.nosotros img:hover {
    transform: scale(1.03);
}

.nosotros .col-lg-6:last-child {
    position: relative;
}

/* Solo aplica la elevación en pantallas grandes si las columnas están alineadas */
@media (min-width: 992px) {
    .nosotros img {
        margin-top: -100px; /* Ajustado de -300px a -100px para evitar solapamientos violentos */
    }
}

/*==================================================
        MISIÓN - VISIÓN - VALORES
==================================================*/

.mision {
    padding: 100px 0;
    background: #F7FAFF;
}

.card-mision {
    background: #FFF;
    border-radius: 25px;
    padding: 45px 35px;
    height: 100%;
    text-align: center;
    box-shadow: 0 15px 40px rgba(11, 42, 99, .08);
    transition: all .35s ease;
    border: 1px solid #EEF3FA;
}

.card-mision:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(11, 42, 99, .15);
}

.card-mision i {
    width: 85px;
    height: 85px;
    margin: 0 auto 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #2E8BFF, #0B2A63);
    color: #FFF;
    font-size: 34px;
}

.card-mision h3 {
    font-size: 28px;
    font-weight: 700;
    color: #0B2A63;
    margin-bottom: 20px;
}

.card-mision p {
    color: #6B7280;
    font-size: 17px;
    line-height: 1.8;
    margin: 0;
}

/*==================================================
            ESTADÍSTICAS
==================================================*/

.estadisticas {
    padding: 110px 0;
    background: linear-gradient(135deg, #0B2A63, #154DA6);
}

.contador {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .15);
    backdrop-filter: blur(12px);
    border-radius: 25px;
    padding: 45px 25px;
    text-align: center;
    height: 100%;
    transition: .35s;
}

.contador:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, .15);
}

.contador h2 {
    font-size: 60px;
    font-weight: 800;
    color: #57C4FF;
    margin-bottom: 15px;
    line-height: 1;
}

.contador p {
    margin: 0;
    color: #FFF;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
}

.beneficios2 {
    padding: 100px 0;
    background: #FFF;
    color: #0B2A63;
}

.badge-beneficios {
    display: inline-block;
    background: rgba(255, 255, 255, .15);
    padding: 10px 20px;
    border-radius: 50px;
    margin-bottom: 20px;
    font-weight: 600;
}

.beneficios h2 {
    font-size: 46px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 25px;
}

.beneficios p {
    font-size: 18px;
    line-height: 1.8;
    opacity: .9;
}

.lista-beneficios {
    margin: 40px 0;
}

.item-beneficio {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 18px;
    font-size: 18px;
}

.item-beneficio i {
    color: #57C4FF;
    font-size: 22px;
}

.btn-beneficios2 {
    display: inline-block;
    background: #0B2A63;
    color: #FFF;
    padding: 16px 36px;
    border-radius: 50px;
    font-weight: 700;
    transition: .3s;
}

.btn-beneficios2:hover {
    background: #2E8BFF;
    color: #FFF;
}

/*==================================================
       RESPONSIVE Y MÓVILES (OPTIMIZADO)
==================================================*/

/* Ajustes para Tablets y Pantallas Medias */
@media (max-width: 991px) {
    .nosotros img {
        margin-top: 30px !important; /* Añade espacio en lugar de subir la imagen */
    }
}

/* Ajustes para Móviles */
@media (max-width: 576px) {

    .nosotros {
        padding: 50px 15px !important;
    }

    /* RESTABLECER IMAGEN EN MÓVIL */
    .nosotros img {
        margin-top: 25px !important;
        border-radius: 20px !important;
    }

    .badge-hero {
        padding: 6px 16px !important;
        font-size: 13px !important;
        margin-bottom: 15px !important;
    }

    body .nosotros h2 {
        font-size: 28px !important;
        line-height: 1.25 !important;
        margin-bottom: 18px !important;
        text-align: center;
    }

    body .nosotros p {
        font-size: 15px !important;
        line-height: 1.6 !important;
        margin-bottom: 25px !important;
        text-align: center;
    }

    /* MISIÓN Y VISIÓN */
    .mision {
        padding: 40px 0 !important;
    }

    body .mision .card-mision {
        padding: 20px 16px !important;
        margin-bottom: 18px !important;
        border-radius: 16px !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    }

    body .mision .card-mision i {
        width: 50px !important;
        height: 50px !important;
        font-size: 22px !important;
        margin-bottom: 12px !important;
    }

    body .mision .card-mision h3 {
        font-size: 20px !important;
        margin-bottom: 8px !important;
    }

    body .mision .card-mision p {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    /* CHECK LIST EN MÓVIL */
    body .check-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    body .check-list div {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
        padding: 14px 16px !important;
        gap: 14px !important;
        border-radius: 14px !important;
        box-shadow: 0 4px 15px rgba(11, 42, 99, 0.06) !important;
    }

    body .check-list div i {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        font-size: 16px !important;
    }

    body .check-list div span,
    body .check-list div p,
    body .check-list div {
        font-size: 14px !important;
        line-height: 1.3 !important;
        white-space: normal !important;
    }

    /* ESTADÍSTICAS EN MÓVIL */
    .estadisticas {
        padding: 40px 15px !important;
    }

    .estadisticas .row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    body .estadisticas .contador {
        padding: 20px 10px !important;
        height: auto !important;
        min-height: initial !important;
        border-radius: 16px !important;
        margin-bottom: 0 !important;
    }

    body .estadisticas .contador h2 {
        font-size: 32px !important;
        margin-bottom: 6px !important;
    }

    body .estadisticas .contador p {
        font-size: 13px !important;
        line-height: 1.2 !important;
    }

    /* BENEFICIOS Y BOTONES */
    .beneficios h2 {
        font-size: 26px !important;
        line-height: 1.3 !important;
    }

    .beneficios p {
        font-size: 15px !important;
    }

    .item-beneficio {
        font-size: 15px !important;
    }

    .btn-beneficios2 {
        width: 100%;
        text-align: center;
        padding: 14px 20px !important;
    }
}