/* =========================================================
   JACHIN — NOSOTROS
========================================================= */

:root{
    --jachin-dorado:#C28436;
    --jachin-dorado-claro:#EBB567;
    --jachin-dorado-oscuro:#96560D;
    --jachin-oscuro:#0E0704;
    --jachin-crema:#F6F2E4;
    --jachin-gris:#5B5753;
    --jachin-blanco:#FFFFFF;
}


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

.jachin-nosotros-hero{
    position:relative;
    min-height:600px;
    display:flex;
    align-items:center;
    background:
        linear-gradient(
            90deg,
            rgba(14,7,4,.93) 0%,
            rgba(14,7,4,.70) 48%,
            rgba(14,7,4,.35) 100%
        ),
        url('../images/bg_2.jpg') center center / cover no-repeat;
    overflow:hidden;
}

.jachin-nosotros-hero-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            135deg,
            rgba(194,132,54,.13),
            transparent 55%
        );
}

.jachin-nosotros-hero .container{
    position:relative;
    z-index:2;
}

.jachin-nosotros-hero-content{
    max-width:760px;
    padding:90px 0;
}

.jachin-nosotros-eyebrow{
    display:inline-block;
    margin-bottom:22px;
    color:var(--jachin-dorado-claro);
    font-size:13px;
    font-weight:700;
    letter-spacing:3px;
}

.jachin-nosotros-hero h1{
    color:#fff;
    font-size:clamp(44px,6vw,74px);
    line-height:1.04;
    font-weight:700;
    margin-bottom:25px;
}

.jachin-nosotros-hero p{
    max-width:650px;
    color:rgba(255,255,255,.84);
    font-size:20px;
    line-height:1.7;
    margin-bottom:35px;
}


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

.jachin-btn-primary{
    background:var(--jachin-dorado);
    border:1px solid var(--jachin-dorado);
    color:#fff !important;
    padding:13px 28px;
    font-weight:600;
    border-radius:2px;
    transition:.3s ease;
}

.jachin-btn-primary:hover{
    background:var(--jachin-dorado-oscuro);
    border-color:var(--jachin-dorado-oscuro);
    color:#fff !important;
}


/* =========================================================
   GENERALES
========================================================= */

.jachin-section-eyebrow{
    display:inline-block;
    color:var(--jachin-dorado);
    font-size:12px;
    font-weight:700;
    letter-spacing:3px;
    margin-bottom:15px;
}

.jachin-nosotros-intro h2,
.jachin-nosotros-heading h2,
.jachin-nosotros-filosofia h2,
.jachin-nosotros-porque h2,
.jachin-nosotros-cta h2{
    font-size:clamp(32px,4vw,48px);
    line-height:1.15;
    font-weight:700;
}


/* =========================================================
   INTRO
========================================================= */

.jachin-nosotros-intro{
    padding:110px 0;
    background:var(--jachin-crema);
}

.jachin-nosotros-intro h2{
    color:var(--jachin-oscuro);
    max-width:500px;
    margin:0;
}

.jachin-nosotros-intro .col-lg-6:last-child{
    border-left:1px solid rgba(194,132,54,.40);
    padding-left:50px;
}

.jachin-nosotros-intro p{
    color:var(--jachin-gris);
    font-size:16px;
    line-height:1.85;
    margin-bottom:17px;
}


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

.jachin-nosotros-valores{
    padding:110px 0;
    background:#fff;
}

.jachin-nosotros-heading{
    max-width:780px;
    margin:0 auto 60px;
}

.jachin-nosotros-heading h2{
    color:var(--jachin-oscuro);
    margin-bottom:18px;
}

.jachin-nosotros-heading p{
    color:var(--jachin-gris);
    font-size:17px;
    line-height:1.75;
}


.jachin-valor{
    height:100%;
    padding:35px 28px;
    border-top:2px solid var(--jachin-dorado);
    background:#fff;
    box-shadow:0 10px 35px rgba(14,7,4,.06);
}

.jachin-valor-numero{
    display:block;
    color:var(--jachin-dorado);
    font-size:13px;
    font-weight:700;
    letter-spacing:2px;
    margin-bottom:25px;
}

.jachin-valor h3{
    color:var(--jachin-oscuro);
    font-size:23px;
    font-weight:700;
    margin-bottom:15px;
}

.jachin-valor p{
    color:var(--jachin-gris);
    font-size:15px;
    line-height:1.75;
    margin:0;
}


/* =========================================================
   FILOSOFÍA
========================================================= */

.jachin-nosotros-filosofia{
    padding:110px 0;
    background:var(--jachin-oscuro);
}

.jachin-nosotros-filosofia .jachin-section-eyebrow{
    color:var(--jachin-dorado-claro);
}

.jachin-nosotros-filosofia h2{
    color:#fff;
    max-width:850px;
    margin:0;
}

.jachin-filosofia-line{
    width:60px;
    height:2px;
    background:var(--jachin-dorado);
    margin-bottom:25px;
}

.jachin-nosotros-filosofia p{
    color:rgba(255,255,255,.64);
    font-size:16px;
    line-height:1.8;
    margin:0;
}


/* =========================================================
   MATERIALES
========================================================= */

.jachin-nosotros-materiales{
    padding:110px 0;
    background:var(--jachin-crema);
}

.jachin-nosotros-materiales .jachin-nosotros-heading{
    margin-bottom:55px;
}


.jachin-material-card{
    position:relative;
    min-height:420px;
    overflow:hidden;
    display:flex;
    align-items:flex-end;
    background-size:cover;
    background-position:center;
}

.jachin-material-madera{
    background:
        linear-gradient(
            0deg,
            rgba(14,7,4,.92) 0%,
            rgba(14,7,4,.40) 65%,
            rgba(14,7,4,.08) 100%
        ),
        url('../images/image_1.jpg') center / cover no-repeat;
}

.jachin-material-metal{
    background:
        linear-gradient(
            0deg,
            rgba(14,7,4,.92) 0%,
            rgba(14,7,4,.40) 65%,
            rgba(14,7,4,.08) 100%
        ),
        url('../images/image_2.jpg') center / cover no-repeat;
}

.jachin-material-content{
    position:relative;
    z-index:2;
    padding:40px;
}

.jachin-material-content > span{
    color:var(--jachin-dorado-claro);
    font-size:11px;
    font-weight:700;
    letter-spacing:2px;
}

.jachin-material-content h3{
    color:#fff;
    font-size:34px;
    font-weight:700;
    margin:10px 0 12px;
}

.jachin-material-content p{
    max-width:500px;
    color:rgba(255,255,255,.76);
    font-size:15px;
    line-height:1.75;
    margin:0;
}


/* =========================================================
   POR QUÉ JACHIN
========================================================= */

.jachin-nosotros-porque{
    padding:110px 0;
    background:#fff;
}

.jachin-nosotros-porque h2{
    color:var(--jachin-oscuro);
    max-width:470px;
}

.jachin-porque-list{
    border-top:1px solid rgba(14,7,4,.12);
}

.jachin-porque-item{
    display:flex;
    gap:25px;
    padding:28px 0;
    border-bottom:1px solid rgba(14,7,4,.12);
}

.jachin-porque-item > span{
    flex:0 0 35px;
    color:var(--jachin-dorado);
    font-size:13px;
    font-weight:700;
    letter-spacing:1px;
}

.jachin-porque-item h3{
    color:var(--jachin-oscuro);
    font-size:19px;
    font-weight:700;
    margin-bottom:8px;
}

.jachin-porque-item p{
    color:var(--jachin-gris);
    font-size:14px;
    line-height:1.7;
    margin:0;
}


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

.jachin-nosotros-cta{
    padding:105px 0;
    background:var(--jachin-crema);
}

.jachin-nosotros-cta-box{
    position:relative;
    overflow:hidden;
    padding:75px 70px;
    background:
        linear-gradient(
            135deg,
            var(--jachin-oscuro),
            #21120a
        );
}

.jachin-nosotros-cta-box::after{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    right:-160px;
    top:-180px;
    border:1px solid rgba(235,181,103,.20);
    border-radius:50%;
}

.jachin-nosotros-cta-box .jachin-section-eyebrow{
    color:var(--jachin-dorado-claro);
}

.jachin-nosotros-cta-box h2{
    color:#fff;
    max-width:700px;
    margin-bottom:20px;
}

.jachin-nosotros-cta-box p{
    max-width:720px;
    color:rgba(255,255,255,.67);
    font-size:17px;
    line-height:1.8;
    margin-bottom:30px;
}


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

@media(max-width:991px){

    .jachin-nosotros-hero{
        min-height:540px;
    }

    .jachin-nosotros-intro .col-lg-6:last-child{
        border-left:0;
        border-top:1px solid rgba(194,132,54,.40);
        margin-top:35px;
        padding-left:15px;
        padding-top:30px;
    }

    .jachin-nosotros-porque h2{
        margin-bottom:45px;
    }

}


@media(max-width:767px){

    .jachin-nosotros-hero{
        min-height:510px;
    }

    .jachin-nosotros-hero-content{
        padding:70px 0;
    }

    .jachin-nosotros-hero h1{
        font-size:43px;
    }

    .jachin-nosotros-hero p{
        font-size:17px;
    }

    .jachin-nosotros-intro,
    .jachin-nosotros-valores,
    .jachin-nosotros-filosofia,
    .jachin-nosotros-materiales,
    .jachin-nosotros-porque,
    .jachin-nosotros-cta{
        padding:75px 0;
    }

    .jachin-valor{
        margin-bottom:25px;
    }

    .jachin-material-card{
        min-height:350px;
        margin-bottom:25px;
    }

    .jachin-material-content{
        padding:30px;
    }

    .jachin-nosotros-cta-box{
        padding:50px 30px;
    }

}