/* ==========================================
   NOSOTROS
   GRUPO INMA
========================================== */


/* ==========================================
   1. HERO
========================================== */

.aboutHero{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    align-items:center;

    gap:80px;

    padding:80px 0 120px;

}

.aboutContent{

    max-width:620px;

}

.aboutHero h1{

    margin:28px 0;

    color:var(--blue);

    font-size:72px;

    line-height:.95;

}

.aboutHero p{

    max-width:600px;

    color:var(--text-light);

    font-size:20px;

    line-height:1.9;

}


/* ==========================================
   IMAGEN
========================================== */

.aboutImage{

    position:relative;

    isolation:isolate;

    display:flex;

    align-items:center;

    justify-content:center;

}

.aboutImage::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    background:rgba(32,67,145,.05);

    z-index:0;

}

.aboutImage img{

    position:relative;

    z-index:1;

    display:block;

    width:100%;

    max-width:520px;

    height:auto;

    object-fit:contain;

    filter:drop-shadow(0 28px 45px rgba(0,0,0,.18));

    transition:
        transform .35s ease;

}

.aboutImage img:hover{

    transform:translateY(-6px);

}


/* ==========================================
   TARJETA
========================================== */

.aboutCard{

    position:absolute;

    right:20px;

    bottom:25px;

    z-index:2;

    padding:22px 28px;

    background:#fff;

    border:1px solid rgba(32,67,145,.08);

    border-radius:20px;

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

}

.aboutCard h3{

    margin:0;

    color:var(--blue);

    font-size:22px;

}

.aboutCard span{

    display:block;

    margin-top:6px;

    color:var(--red);

    font-size:14px;

    font-weight:700;

    letter-spacing:.08em;

}


/* ==========================================
   2. COMPANY
========================================== */

.company{

    padding:100px 0;

}

.companyGrid{

    display:grid;

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

    align-items:center;

    gap:80px;

}

.companyContent{

    max-width:620px;

}

.companyContent .sectionTitle{

    margin-bottom:25px;

}

.companyContent p{

    color:var(--text-light);

    font-size:19px;

    line-height:1.9;

}


/* ==========================================
   IMAGEN
========================================== */

.companyImage{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

}

.companyImage img{

    width:100%;

    max-width:540px;

    height:auto;

    object-fit:cover;

    border-radius:24px;

    box-shadow:0 25px 55px rgba(0,0,0,.10);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.companyImage img:hover{

    transform:scale(1.02);

    box-shadow:0 30px 60px rgba(0,0,0,.14);

}

/* ==========================================
   3. MISSION & VISION
========================================== */

.missionVision{

    display:grid;

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

    gap:35px;

    padding:40px 0 120px;

}

.infoCard{

    position:relative;

    overflow:hidden;

    padding:50px;

}

.infoCard::before{

    content:"";

    position:absolute;

    inset:0 0 auto;

    width:100%;

    height:5px;

    background:linear-gradient(
        90deg,
        var(--red),
        var(--blue)
    );

}

.infoCard i{

    margin-bottom:24px;

}

.infoCard h3{

    margin-bottom:20px;

    font-size:34px;

}

.infoCard p{

    font-size:17px;

    line-height:1.9;

}

/* ==========================================
   4. VALUES
========================================== */

.values{

    padding:40px 0 120px;

}

.values .sectionTitle{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

.valuesGrid{

    display:grid;

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

    gap:30px;

}


/* ==========================================
   AJUSTES SOBRE .infoCard
========================================== */

.valuesGrid .infoCard{

    padding:45px;

    text-align:center;

}

.valuesGrid .infoCard i{

    margin:0 auto 24px;

}

.valuesGrid .infoCard h3{

    margin-bottom:18px;

    font-size:28px;

}

.valuesGrid .infoCard p{

    font-size:16px;

    line-height:1.9;

}

/* ==========================================
   5. WHY CHOOSE
========================================== */

.whyChoose{

    padding:40px 0 120px;

}

.whyChoose .sectionTitle{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

.whyGrid{

    display:grid;

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

    gap:28px;

}

.whyCard{

    display:flex;

    flex-direction:column;

    align-items:center;

    padding:42px 30px;

    text-align:center;

}

.whyCard i{

    margin-bottom:24px;

}

.whyCard h3{

    margin-bottom:18px;

    font-size:24px;

}

.whyCard p{

    font-size:16px;

    line-height:1.8;

}

/* ==========================================
   6. JOBS
========================================== */

.jobs{

    padding:100px 0 120px;

    text-align:center;

}

.jobs .sectionTitle{

    max-width:760px;

    margin:0 auto 35px;

}

.jobs p{

    max-width:760px;

    margin:0 auto 45px;

    color:var(--text-light);

    font-size:18px;

    line-height:1.9;

}

.jobs .cta{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 36px;

}

@media (max-width:1100px){

    .aboutHero{

        grid-template-columns:1fr;

        gap:60px;

        text-align:center;

    }

    .aboutContent{

        max-width:none;

        margin:0 auto;

    }

    .aboutImage{

        order:-1;

    }

    .aboutHero h1{

        font-size:58px;

    }


    /* COMPANY */

    .company{

        padding:80px 0;

    }

    .companyGrid{

        grid-template-columns:1fr;

        gap:60px;

    }

    .companyContent{

        max-width:none;

        text-align:center;

    }

    .companyImage{

        order:-1;

    }

    .companyImage img{

        max-width:500px;

    }


    /* SECCIONES */

    .missionVision{

        grid-template-columns:1fr;

    }

    .valuesGrid{

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

    }

    .whyGrid{

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

    }


    /* JOBS */

    .jobs{

        padding:80px 0 100px;

    }

}

@media (max-width:768px){

    /* HERO */

    .aboutHero{

        padding:50px 0 80px;

        gap:40px;

    }

    .aboutHero h1{

        font-size:42px;

    }

    .aboutHero p{

        font-size:17px;

    }

    .aboutImage::before{

        width:300px;

        height:300px;

    }

    .aboutImage img{

        max-width:320px;

    }

    .aboutCard{

        right:10px;

        left:10px;

        bottom:10px;

        padding:16px 20px;

    }


    /* COMPANY */

    .company{

        padding:60px 0;

    }

    .companyGrid{

        gap:40px;

    }

    .companyImage img{

        max-width:100%;

    }

    .companyContent p{

        font-size:17px;

    }


    /* MISSION */

    .missionVision{

        gap:25px;

    }

    .infoCard{

        padding:30px 24px;

    }

    .infoCard h3{

        font-size:28px;

    }


    /* VALUES */

    .values{

        padding:20px 0 80px;

    }

    .valuesGrid{

        grid-template-columns:1fr;

        gap:22px;

    }

    .valuesGrid .infoCard{

        padding:32px 24px;

    }


    /* WHY */

    .whyChoose{

        padding:20px 0 80px;

    }

    .whyGrid{

        grid-template-columns:1fr;

        gap:22px;

    }

    .whyCard{

        padding:32px 24px;

    }

    /* ICONOS */

    .uiCardIcon{

        width:64px;

        height:64px;

        font-size:26px;

    }

    .whyCard h3{

        font-size:24px;

    }


    /* JOBS */

    .jobs{

        padding:60px 0 80px;

    }

    .jobs p{

        font-size:16px;

    }

}

@media (max-width:480px){

    .aboutHero h1{

        font-size:36px;

    }

    .aboutHero p{

        font-size:16px;

    }

    .aboutImage::before{

        width:240px;

        height:240px;

    }

    .aboutImage img{

        max-width:260px;

    }

    .aboutCard{

        padding:14px 18px;

    }

    .aboutCard h3{

        font-size:18px;

    }

    .aboutCard span{

        font-size:12px;

    }

    .infoCard,
    .whyCard{

        padding:26px 20px;

    }

    .infoCard h3{

        font-size:24px;

    }

    .whyCard h3{

        font-size:22px;

    }

}