.bgGray{
    background-color:var(--grayextralight);
}
.bgPrimaryLightV2{
    background-color:var(--primarylight2);
}
.bgPrimaryLight{
    background-color:var(--primarylight);
}


.flexCentered h1{
    font-size:45px;
}

/* FLEX PLANT */
.flexTwoColumns{
    display:flex;
    justify-content:space-around;
    gap:50px;
}

.flexTwoColumns .columnFle{
    width:550px;
    display:flex;
    flex-direction: column;
    justify-content:center;
    align-content: start;
}

.columnFle .containerImgFle{
    width:100%;
    height:auto;
}

.columnFle .containerImgFle img{
    width:100%;
    height:auto;
}

.columnFle span{
    font-size:20px;
}


.columnFle h3{
    font-size:40px;
    font-weight:500;
    line-height:1.2;
    padding-top:0px;
    padding-bottom:28px;
    color: var(--blackv2);
}

.columnFle .p{
    font-size:20px;
    margin-bottom:30px;
    color:var(--black);
}

/*Flex generales */
.flexBtnsGen{
    display:flex;
    gap:25px;
}
.flexBtnsGen a{
    text-decoration:none;
}

.flexBtnsGen .btnClassGen{
    display:flex;
    gap:8px;
    align-items:center;
    padding:10px 30px;
    background-color:var(--primaryhover);
    color: var(--white);
    border-radius:5px;
    font-weight:500;
    font-size:16px;
    transition:all ease .3s;
}

.flexBtnsGen .btnClassGen i{
    font-size:14px;
    padding-top:2px;
}


.flexBtnsGen .btnClassGen:hover{
    background-color:var(--primary);
}

.forceWhite{
    background-color:var(--white) !important;
    color:var(--black) !important;
    transition: all ease .3s;
}

.forceWhite:hover{
    background-color:var(--primary) !important;
    color:var(--white) !important;
}


.subtitleGen{
    text-align:center;
    padding:0px 10px;
    font-size:28px;
    font-weight:500;
    padding-bottom:30px;
    color:var(--black);
}

.subtitleGen span{
    color:var(--primaryhover);
}

.centeredAll{
    width:100%;
    display:flex;
    justify-content:center;
}

.btn-centered{
    margin-top:50px;
    border: 1px solid #DFDDDD;
    color:var(--black);
    background-color: var(--grayextralight);
    padding:12px 18px;
    border-radius:5px;
    font-size: 16px;
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:500;
    text-decoration:none;
    transition: all ease .3s;
}

.btn-centered:hover {
    background-color: var(--primary);
    color: var(--white);
}

/*-- NOSOTROS --*/
.bannerTop{
    width:100%;
    height:380px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.flexCentered{
    background-color:var(--overlay);
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    color:var(--white);
}

.redirectGen{
    display:flex;
    gap:5px;
}

.redirectGen a{
    color:var(--white);
    text-decoration:none;
    transition: all ease .3s;
}

.redirectGen a:hover{
    color:var(--primaryhover);
}

.containSupr span{
    font-size:18px;
}

.containSupr h2{
    font-size:30px;
    font-weight:500;
    color:var(--primary);
}

.containSupr div{
    margin-top:15px;
    font-size:16px;
}

.containSupr img{
    width:100%;
    height:auto;
    padding:50px 0px;
    padding-bottom:0px;
}

.bgMisionPrimaryV2{
    background-color:var(--primarylightV2);
    border-radius:25px;
    padding:0px 30px;
}

.bgVisionGray{
    background-color:var(--grayextralight);
    border-radius:25px;
    padding:0px 30px;
}


.flexTwoColumnsv2{
    display:flex;
    justify-content:space-around;
    gap:50px;
    margin-bottom:80px;
}


.flexTwoColumnsv2 .columnFleV2{
    width:45%;
    display:flex;
    flex-direction: column;
    justify-content:center;
    align-content: start;
    padding:20px 0px;
}



.flexTwoColumnsv2 .columnFleV3{
    width:45%;
    display:flex;
    flex-direction: column;
    justify-content:center;
    align-content: start;
    padding:20px 0px;
}

.columnFleV3 .containerImgFle{
    width:100%;
    height:auto;
    padding:30px 0px;
}

.columnFleV3 .containerImgFle img{
    width:100%;
    height:auto;
}


.columnFleV2 h3{
    font-size:40px;
    font-weight:500;
    line-height:1.2;
    padding-top:0px;
    padding-bottom:28px;
    color:var(--blackv3);
}

.columnFleV2 .p{
    font-size:20px;
    margin-bottom:30px;
    color:var(--blackv3);
}

.flexVals{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap:30px;
}

.flexVals .valItem{
    background-color: var(--primarylightV2);
    width:29.5%;
    padding:40px 50px;
    text-align:center;
    border-radius:20px;
}

.flexVals .valItem i{
    color: var(--primary);
    font-size:20px;
    padding-bottom:15px;
}

.flexVals .valItem h4{
    font-size:20px;
    font-weight:600;
    padding-bottom:15px;
}

.flexVals .valItem div{
    font-size:16px;
}


.grayforce{
    background-color:var(--grayv2) !important;
}


.flexValoress{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:50px;
    width:93%;
    margin:auto;
    padding-top:20px;
}

.valoresss{
    width:50%;
    display:flex;
    flex-direction:column;
    gap:30px;
}

.imgContainVal{
    width:40%;
}

.imgContainVal img{
    width:100%;
    height:auto;display: block;
}



.flexValIconH5{
    display:flex;
    gap:10px;
    align-items:center;
    color:var(--primary);
}

.valorContent{
    padding-bottom:0px;
}

.separatorProEco{
    border-bottom:1px solid var(--gray);
}


.flexValIconH5 h5{
    font-size:20px;
    font-weight:600;
}

.valorContent .controltext{
    font-size:16px;
    padding-top:5px;
}

/*mapa e ubicación*/
.ubicacion{
    text-align:center;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.ubicacion p{
    font-weight:600;
    font-size:20px;
}
.ubicacion p i{
    color:red;
}

.ubicacion span{
    font-weight:500;
    font-size:18px;
    padding-bottom:30px;
}


.iframeMapControl{
    background-color:var(--white);
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border-radius:10px;
    padding:20px;
    height:400px;
}

.iframeMapControl iframe{
    width:100%;
    height:100%;
    border-radius:10px;
    display:block;
}


/*Preguntas frecuentes - acordión */
 /* Accordion styles */
        .accordionGen {
            margin: 20px 0;
            border-radius: 6px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }

        .accordion-item {
            border-bottom: 1px solid var(--gray);
        }

        .accordionGen-item:last-child {
            border-bottom: none;
        }

        .accordionGen-header {
            background-color: var(--grayextralight);
            padding: 15px 20px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 500;
            transition: all 0.3s;
            border-bottom: 1px solid var(--graylight);
        }

        .accordionGen-header:hover {
            background-color: #e8f5e9;
        }

        .accordionGen-header.active {
            background-color: var(--primarylight);
            color: var(--primary);
        }

        .accordionGen-header::after {
            content: '+';
            font-size: 20px;
            transition: transform 0.3s;
        }

        .accordionGen-header.active::after {
            content: '-';
        }

        .accordionGen-content {
            padding: 0px 20px;
            max-height: 0;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .accordionGen-content.active {
            padding: 15px 20px;
            max-height: 1000px;
        }


@media (max-width:1100px) {
    .flexTwoColumns .columnFle{
        width: 500px;
    }
    .columnFle span{
        font-size:18px;
    }
    .columnFle h3{
        font-size:35px;
    }
    .columnFle .p{
        font-size:18px;
    }
}

@media (max-width:1030px) {
    .flexTwoColumns .columnFle{
        width:45%;
    }
    .columnFle span{
        font-size:16px;
    }
    .columnFle h3{
        font-size:30px;
    }
    .columnFle .p{
        font-size:16px;
    }

    .flexBtnsGen .btnClassGen{
        font-size:14px;
        padding: 10px 20px;
    }
}


@media (max-width: 992px) {
    .btn-centered{
        font-size: 14px;
    }

    .subtitleGen{
         font-size: 22px;
    }


    .flexValoress{
        flex-wrap:wrap;
        gap:40px;
        width:100%;
    }

    .flexVals{flex-wrap:wrap;}
    .flexVals .valItem{width:45%;}

    .valoresss{width:100%;}
    .imgContainVal{width:50%; margin:auto;}

    .bannerTop{
        height:300px;
    }
}



@media (max-width:920px) {
    .flexTwoColumns{
        gap:20px;
    }
    .columnFle span{
        font-size:14px;
    }
    .columnFle h3{
        font-size:25px;
        padding-bottom:15px;
    }
    .columnFle .p{
        font-size:14px;
        margin-bottom:20px;
    }

    .flexBtnsGen{
        flex-wrap:wrap;
        gap:15px;
    }

    .flexBtnsGen .btnClassGen{
        font-size:14px;
        padding: 10px 15px;
    }

    .flexTwoColumnsv2{
        flex-wrap:wrap;
    }
    .flexTwoColumnsv2 .columnFleV2,.flexTwoColumnsv2 .columnFleV3{width:100%;}
    .flexTwoColumnsv2{padding:30px;gap:20px;}
    .columnFleV3 .containerImgFle{padding-top:0px;padding-bottom:0px;}
    .columnFleV2 h3{font-size:30px;}
    .columnFleV2 .p{font-size:16px;}
    .flexTwoColumnsv2 .columnFleV3{padding:0px;}
}



@media (max-width: 768px) {
    .btn-centered{
        font-size: 12px;
    }
    .subtitleGen{
         font-size: 20px;
    }

    .flexTwoColumns{
        flex-wrap:wrap;
        gap:50px;
    }
    .flexTwoColumns .columnFle{
        width:100%;
        text-align:center;
        justify-content:center;
        align-items:center;
    }
    .flexBtnsGen{
        justify-content:center;
    }

    .flexBtnsGen .btnClassGen{
        font-size:12px;
    }

    .columnFle span,.columnFle .p{
        font-size:18px;
    }

    .columnFle span{
        padding-bottom:10px;
    }

    .containSupr span{
        font-size:14px;
    }
    .containSupr h2{
        font-size:22px;
    }

    .containSupr div{
        margin-top:10px;
        font-size:14px;
    }

    .flexVals{gap:20px;}
    .flexVals .valItem{width:100%;}
    .imgContainVal{width:100%; margin:auto;}


    .columnFleV2 h3{font-size:22px;}
    .columnFleV2 .p{font-size:14px;}


    .ubicacion p{
        font-size:20px;
    }
    .ubicacion span{
        font-size:14px;
    }

    .iframeMapControl{
        padding:10px;
        height:300px;
    }

     .bannerTop{
        height:250px;
    }

    .flexCentered h1{
        font-size:25px;
    }

    .redirectGen a,.redirectGen span{
        font-size:14px;
    }
}




@media (max-width: 500px) {
    .flexVals .valItem h4{
        font-size:16px;
    }
    .flexVals .valItem div{
        font-size:12.8px;
    }
    .flexValIconH5 h5{
        font-size:16px;
    }
    .valorContent .controltext{
         font-size:12.8px;
    }

    .ubicacion p{
        font-size:16px;
    }
    .ubicacion span{
        font-size:12.8px;
    }

    .columnFleV2 .p{
        margin-bottom:0px;
    }
    .flexTwoColumnsv2{
        padding:20px;
    }
}