.hero-nosotros{

    background:
    url("../media/nosotros/hero-nosotros.webp")
    center center/cover no-repeat;

    min-height:290px;

    display:flex;

    align-items:center;

    position:relative;

    margin-top:5px;

    padding-top:25px;

}

.hero-overlay{

    width:100%;

    background:
    linear-gradient(
        90deg,
        rgba(247,248,250,.96) 0%,
        rgba(247,248,250,.88) 32%,
        rgba(247,248,250,.55) 48%,
        rgba(247,248,250,.08) 63%,
        rgba(247,248,250,0) 74%
    );

}

.hero-nosotros .hero-contenido{

    width:100%;

    max-width:1300px;

    margin:auto;

    padding:9px 18px;

}

.hero-nosotros .hero-texto{

    max-width:960px;

}

.hero-nosotros h1{

    color:#0F172A;

    font-size:2rem;

    line-height:1.15;
 margin-bottom:18px;
}

.hero-nosotros p{

    font-size:.98rem;

    line-height:1.55;

    max-width:520px;

    color:#475569;

}
/*=========================================================
=            NUESTRA HISTORIA
=========================================================*/

.historia{

    padding:25px 0;
    background:#ffffff;

}

.container{

    width:min(1280px,92%);
    margin:auto;

}

.titulo-seccion{

    display:block;

    color:#0E5AA7;

    font-size:.90rem;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

    margin-bottom:15px;

}

.historia-grid{

    display:grid;

    grid-template-columns:52% 48%;

    gap:40px;

    align-items:center;

}

.historia h2{

    font-size:2rem;

    line-height:1.18;

    margin-bottom:28px;

    color:#102A43;

    font-weight:700;

}

.historia p{

    font-size:1.02rem;

    line-height:1.65;

    margin-bottom:18px;

}

.historia-imagen{

    display:flex;

    justify-content:flex-end;

    align-items:center;

}

.historia-imagen img{

    width:100%;

    max-width:none;

    border-radius:16px;

    box-shadow:0 18px 40px rgba(0,0,0,.12);

}


/*=========================================================
=            PRINCIPIOS
=========================================================*/

.principios{

    padding:30px 0;

    background:#F8FAFC;

}

.principios h2{

    text-align:center;

    font-size:2.7rem;

    color:#102A43;

    margin-bottom:20px;

}

.intro-principios{

    max-width:820px;

    margin:0 auto 70px;

    text-align:center;

    color:#64748B;

    line-height:1.9;

    font-size:1.05rem;

}

.principios-grid{

    display:grid;

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

    gap:25px;

}

.principio{

    background:#ffffff;

    padding:35px 28px;

    border-radius:18px;

    box-shadow:0 15px 40px rgba(0,0,0,.06);

    transition:.30s;

}

.principio:hover{

    transform:translateY(-10px);

}

.numero{

    width:56px;

    height:56px;

    border-radius:50%;

    background:#0E5AA7;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:bold;

    margin-bottom:22px;

}

.principio h3{

    font-size:1.2rem;

    color:#102A43;

    margin-bottom:18px;

}

.principio p{

    color:#64748B;

    line-height:1.8;

}



/*=========================================================
=            FILOSOFIA
=========================================================*/

.filosofia{

    padding:50px 0;

    background:#ffffff;

}

.filosofia-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.filosofia h2{

    font-size:2rem;

    margin-bottom:10px;

    color:#102A43;

    line-height:1;

}

.filosofia p{

    line-height:1.9;

    color:#475569;

    margin-bottom:5px;

}

.filosofia blockquote{

    margin-top:40px;

    border-left:5px solid #0E5AA7;

    padding-left:25px;

    font-size:1.5rem;

    color:#102A43;

    font-style:italic;

}

.filosofia-imagen img{

    width:100%;

    border-radius:18px;

}

.filosofia-imagen{

    display:flex;

    justify-content:flex-end;

    transform:translateY(-10px);

}

/*=========================================================
=            COMPROMISOS
=========================================================*/

.compromisos{

    background:#071120;

    color:#fff;

    padding:40px 0;

}

.compromisos h2{

    color:#fff;

    text-align:center;

    font-size:2.6rem;

    margin-bottom:20px;

}

.compromisos .intro-principios{

    color:#CBD5E1;

}

.compromisos-grid{

    display:grid;

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

    gap:22px;

    margin-top:50px;

}

.compromiso{

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

    padding:28px;

    border-left:4px solid #0E5AA7;

    border-radius:12px;

    line-height:1.8;

}




/*=========================================================
=            FRASE FINAL
=========================================================*/

.manifiesto-final{

    padding:20px 0 25px;

    background:#F8FAFC;

    text-align:center;

}

.manifiesto-final blockquote{

    font-size:1.5rem;

    line-height:1.45;

    max-width:820px;

    margin:0 auto 25px;

}
.firma-intelsysnet{

    margin-top:20px;

}

.firma-intelsysnet h3{

    color:#0E5AA7;

    letter-spacing:3px;

    margin-bottom:5px;

}

.firma-intelsysnet p{

    color:#64748B;

    line-height:1.8;

}



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

@media(max-width:992px){

.historia-grid,
.filosofia-grid{

    grid-template-columns:1fr;

}

.principios-grid,
.proceso-grid{

    grid-template-columns:1fr 1fr;

}

.compromisos-grid{

    grid-template-columns:1fr;

}

}

@media(max-width:768px){

.principios-grid,
.proceso-grid{

    grid-template-columns:1fr;

}

.historia h2,
.filosofia h2,
.proceso h2,
.compromisos h2{

    font-size:2rem;

}

.manifiesto-final blockquote{

    font-size:1.6rem;

}

}