/*==================================================
HERO
==================================================*/

.hero{

    position:relative;

    min-height:760px;

    overflow:hidden;

    display:flex;

    align-items:center;

}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

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

    z-index:1;

}

.hero::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(18,53,90,.88) 0%,
        rgba(18,53,90,.72) 22%,
        rgba(18,53,90,.42) 42%,
        rgba(18,53,90,.12) 60%,
        rgba(18,53,90,0) 78%
    );

    z-index:2;

}

.hero .container{

    position:relative;

    z-index:5;

    width:min(1480px,94%);

    margin:0 auto;

    min-height:760px;

    display:flex;

    align-items:center;

    padding:0 90px;

}

.hero .hero-content{

    width:100%;

    max-width:680px;

}

.hero .section-kicker{

    display:inline-block;

    margin-bottom:18px;

    color:var(--secondary);

    font-size:.92rem;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

}

.hero h1{

    color:#fff;

    font-size:clamp(4rem,5vw,5.9rem);

    line-height:1.08;

    letter-spacing:-1px;

    margin:0 0 34px;

}

.hero h1 strong{

    display:block;

    color:var(--secondary);

}

.hero p{

    max-width:600px;

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

    font-size:1.15rem;

    line-height:1.95;

    margin:0 0 46px;

}

.hero .btn-primary{

    padding:18px 38px;

}

@media(max-width:992px){

    .hero{

        min-height:620px;

    }

    .hero .container{

        min-height:620px;

        padding:0 42px;

    }

}

@media(max-width:768px){

    .hero{

        min-height:560px;

    }

    .hero .container{

        min-height:560px;

        align-items:flex-end;

        padding:80px 24px 60px;

    }

    .hero h1{

        font-size:3rem;

        line-height:1.12;

    }

    .hero p{

        font-size:1rem;

        line-height:1.8;

    }

}

/*==================================================
HISTORIA
==================================================*/

.about-story{

    padding:130px 0;

}

.story-grid{

    display:grid;

    grid-template-columns:.95fr 1.05fr;

    gap:90px;

    align-items:center;

}

.story-image img{

    width:100%;

    border-radius:24px;

}

.story-content span{

    display:inline-block;

    margin-bottom:18px;

    color:var(--secondary);

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    font-size:.85rem;

}

.story-content h2{

    margin-bottom:32px;

}

.story-content p{

    margin-bottom:22px;

    line-height:1.9;

}

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

.values{

    padding:130px 0;

    background:#F8F9FB;

}

.values-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

}

.value-card{

    background:#fff;

    border-radius:22px;

    padding:42px;

    text-align:center;

    transition:.35s;

    box-shadow:var(--shadow-sm);

}

.value-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-md);

}

.value-card i{

    font-size:3rem;

    color:var(--secondary);

    margin-bottom:25px;

}

.value-card h3{

    margin-bottom:18px;

}

/*==================================================
POR QUÉ ELEGIRNOS
==================================================*/

.why-choose{

    padding:130px 0;

}

.choose-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:90px;

    align-items:center;

}

.choose-image img{

    width:100%;

    border-radius:28px;

    box-shadow:0 30px 80px rgba(0,0,0,.15);

}

.choose-content span{

    display:inline-block;

    margin-bottom:18px;

    color:var(--secondary);

    font-size:.85rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.choose-content h2{

    margin-bottom:28px;

}

.choose-content p{

    margin-bottom:22px;

    line-height:1.9;

}

.choose-content ul{

    margin-top:40px;

    display:grid;

    gap:18px;

}

.choose-content li{

    display:flex;

    align-items:flex-start;

    gap:16px;

    font-size:1.05rem;

    line-height:1.6;

}

.choose-content i{

    color:var(--secondary);

    margin-top:4px;

}

/*==================================================
WORK METHOD
==================================================*/

.work-method{

    padding:130px 0;

    background:#F8F9FB;

}

.method-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

}

.method-card{

    position:relative;

    background:#fff;

    border-radius:22px;

    padding:40px;

    box-shadow:var(--shadow-sm);

    transition:.35s;

}

.method-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-md);

}

.method-card span{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:60px;

    height:60px;

    border-radius:50%;

    background:var(--secondary);

    color:#fff;

    font-weight:800;

    font-size:1.2rem;

    margin-bottom:24px;

}

.method-card h3{

    margin-bottom:18px;

    color:var(--primary);

}

.method-card p{

    line-height:1.85;

}

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

.about-cta{

    padding:130px 0;

    background:linear-gradient(135deg,#12355A,#0D2843);

    text-align:center;

    color:#fff;

}

.about-cta .section-kicker{

    display:inline-block;

    margin-bottom:18px;

    color:var(--secondary);

    letter-spacing:2px;

    font-size:.85rem;

    font-weight:700;

}

.about-cta h2{

    color:#fff;

    max-width:850px;

    margin:0 auto 28px;

}

.about-cta p{

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

    max-width:720px;

    margin:0 auto 45px;

    line-height:1.9;

}

.about-hero .btn-primary{

    margin-top:18px;

}

.about-cta .hero-buttons{

    display:flex;

    justify-content:center;

    gap:18px;

}

.about-cta .btn-secondary{

    border:2px solid rgba(255,255,255,.30);

    color:#fff;

}

.about-cta .btn-secondary:hover{

    background:#fff;

    color:var(--primary);

}

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

@media(max-width:992px){

    .story-grid,
    .choose-grid{

        grid-template-columns:1fr;

        gap:60px;

    }

    .values-grid{

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

    }

    .method-grid{

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

    }

}

@media(max-width:992px){

    .story-grid,
    .choose-grid{

        grid-template-columns:1fr;

        gap:60px;

    }

    .values-grid{

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

    }

    .method-grid{

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

    }

    .about-hero{

        min-height:620px;

    }

    .about-hero .container{

        min-height:620px;

    }

}