.bgGray{
    background-color:var(--grayextralight);
}
.bgDeg{
    background: linear-gradient(to right, var(--primary), var(--primarydeg));
}

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

section{padding:80px 0px;}
button{outline:none;border:none;}
a{text-decoration: none;}
.flexCenteredButton{
    display:flex;
    justify-content:center;
    align-items:center;
}

.containerMax{
    width:100%;
    max-width:1400px;
    padding:0px 10px;
    margin:auto;
}

.containerMax h1{
    font-size:40px;
}

.priceFree{
    background-color:#1E9800;
    color:var(--white);
    border-radius:4px 10px;
        border-radius: 8px;
    padding: 5px 15px;
}


.flexTitleGen{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 0px;
}

.flexTitleGen h2{
    text-align:center;
    font-size:30px;
    color:var(--blackv3);
    line-height:1.2;
}

.btnGen{
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color:var(--primary);
    color: var(--white);
    outline: none;
    border:2px solid var(--primary);
}

.btnGen:hover{
    background-color:var(--primaryhover);
}



.btnGenTwo{
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color:var(--white);
    color: var(--primary);
    outline: none;
    border:2px solid var(--primary);
}

.btnGenTwo:hover{
    background-color:var(--primaryhover);
    color:var(--white);
}



.backK{
    z-index:1;
    border-bottom:1px solid var(--graylight);
    font-size:14px;
    padding-bottom:10px;
}

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

.backK a:hover{
    color:var(--primary);
}

.backK span{
    color:var(--primary)
}



.pDiv{
    font-size:16px;
    padding:10px 0px;
}


/*-- Quienes somo extracto --*/
.flexImgText{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
}

.containerImgQ{
    width:48%;padding:50px 0px;
}
.containerImgQ img{
    width:100%;
    height:auto;
    display:block;
}

.containerTextQ{
    width:45%;
}

.containerTextQ h4{
    font-size:30px;
    color:var(--primary);
}
.containerTextQ h5{
    font-size:30px;
    color:#191919;
}

.descCq{
    padding:10px 0px;
}

.flexBtns{
    display:flex;
    gap:10px;
    margin:10px 0px;
}



/*titulo centered + description*/
.flexTitleGenCentered{
    display:flex;
    flex-direction: column;
    align-items: center;
}
.flexTitleGenCentered h2{
    font-size:30px;text-align: center;
}


.flexTitleGenCentered p{
    font-size:18px;
    padding:20px 0px;
    text-align:center;
}


/*titulo left + description*/
.flexTitleGenLeft{
    display:flex;
    flex-direction: column;
    align-items: start;
}
.flexTitleGenLeft h2{
    font-size:30px;
    padding-bottom:20px;
    color:var(--primary);
}


/* Nosotros te Ofrecemos */
.flexImgItemsOf{
    display:flex;
    justify-content:space-between;
    gap:45px;
    flex-wrap: wrap;
    align-items:center;
}

.flexImgItemsOf .contentItemsOf{
    width:45%;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    color:var(--white);
}
.contentItemsOf h2{
    font-size:30px;text-align: center;
}

.flexImgItemsOf .contentImgItemsOf{
    width:45%;
}

.flexImgItemsOf .contentImgItemsOf img{
    width:100%;
}

.flexItemsOfInside{
      display:flex;
      justify-content:center;
      gap:15px;
      flex-wrap:wrap;
      padding-top:30px;
}

.itemofInside{
    border: 2px solid var(--white);
    padding:15px;
    display:flex;
    justify-content:space-between;
    gap:10px;
    border-radius:5px;
    width:48.5%;
    transition: all ease .3s;
}

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

.itemCOntorli{
    width:25%;
    font-size:50px;
    display:flex;
    justify-content:center;
    align-items:center;
}


.itemCOntrolp{
    width:70%;
    font-size:18x;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
}

/* Testimonios */
.testimonials-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin:40px 0px;
    margin-top:20px;
}

.testimonial-card {
    width: calc(25% - 20px);
    background: var(--white);
    padding: 25px;
    padding-top:15px;
    border: 2px solid var(--graylight);
    border-radius: 15px;
    position: relative;
}

.quote-icon {
    font-size:35px;
    color: var(--blackv3);
    font-weight: 700;
}

.testimonial-header {
    display: flex;
    align-items: center;
    margin-top: 10px;
    gap: 10px;
}


.testimonial-header img {
    width: 45px;
    height: 45px;
    object-fit: cover;
    background-color: var(--graylight);
}

.testimonial-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight:500;
}

.profession {
    margin: 0;
    color: var(--gray);
    font-size: 12px;
}

.comment {
    margin: 15px 0;
    color: #6b6b6b;
    font-size: 14px;
    line-height: 1.5;
}

.course-link {
    color:var(--primary);
    font-weight:300;
    text-decoration: underline;
    font-size:11.2px;
    transition: all ease .3s;
}

.course-link:hover{
    color:var(--primaryhover);
}


/* Responsive */

@media (max-width: 1150px) {
    .flexImgItemsOf .contentItemsOf{
        width:50%;
    }
    .flexImgItemsOf .contentImgItemsOf{
        width:40%;
    }
}

@media (max-width: 1024px) {
    .testimonial-card {
        width: calc(50% - 20px); /* 2 por fila */
    }
     .flexImgItemsOf .contentItemsOf{
        width:100%;
    }
    .flexImgItemsOf .contentImgItemsOf{
        width:100%;
    }
}



/* Accordion */

        /* Accordion styles */
        .accordion {
            margin: 20px 0;
            border-radius: 6px;
            overflow: hidden;
            border:1px solid var(--graylight);
        }

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

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

        .accordion-header {
            background-color: var(--white);
            padding: 20px 25px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 500;
            transition: all 0.3s;
            color:var(--black);
        }

        .accordion-header:hover {
            background-color: var(--primaryhover);
            color:var(--white);
        }

        .accordion-header.active {
            background-color: var(--primaryhover);
            color:var(--white);
        }

        .accordion-header::after {
                font-family: "Font Awesome 6 Free";
                font-weight: 900;
                content: "\f078"; /* chevron-right */
                font-size: 18px;
                transition: transform 0.3s;
            }

       .accordion-header.active::after {
            content: "\f077"; /* chevron-down */
        }

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

        .accordion-content.active {
            padding: 15px 20px;
            max-height: 1000px;
            overflow-x: auto;
        }

        .accordion-content ul {
            margin-left: 18px;
        }

        .accordion-content li {
            margin-bottom: 8px;
            color: var(--dark-gray);
        }



/* Accordion Two */

        /* Accordion styles */
        .accordionTwo {
            margin: 20px 0;
            border-radius: 6px;
            overflow: hidden;
            border:1px solid var(--graylight);
        }

        .accordion-itemTwo {
            border-bottom: 1px solid var(--graylight);
        }

        .accordion-itemTwo:last-child {
            border-bottom: none;
        }

        .accordion-headerTwo {
            background-color: var(--secondary);
            padding: 20px 25px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 700;
            font-size:20px;
            transition: all 0.3s;
            color:var(--primary);
        }

        .accordion-headerTwo:hover {
            background-color: var(--primaryhover);
            color:var(--white);
        }

        .accordion-headerTwo.active {
            background-color: var(--primaryhover);
            color:var(--white);
        }

        .accordion-headerTwo::after {
                font-family: "Font Awesome 6 Free";
                font-weight: 900;
                content: "\f078"; /* chevron-right */
                font-size: 18px;
                transition: transform 0.3s;
            }

       .accordion-headerTwo.active::after {
            content: "\f077"; /* chevron-down */
        }

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

        .accordion-contentTwo.active {
            padding: 15px 20px;
            max-height: 1000px;
            overflow-x: auto;
        }

        .accordion-contentTwo ul {
            margin-left: 18px;
        }

        .accordion-contentTwo li {
            margin-bottom: 8px;
            color: var(--dark-gray);
        }




/*Banner general*/

/*-- NOSOTROS --*/
.bannerTop{
    width:100%;
    height:320px;
    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:start;
    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);
}

.redirectGen span{
    color:var(--secondary);
}


/* Nosotros */
.flexMisionVision{
    display: flex;
    justify-content:space-between;
    gap:50px;
}

.flexMisionVision .itemMv{
    width:45%;
}

.flexMisionVision .itemMv h3{
    width:45%;font-size: 30px;
    padding-bottom: 20px;
    color:var(--blackv3);
}

.subtitleGen{
    font-size: 30px;
    text-align:center;
    color:var(--primary);
}

.controltextCotizar{
    padding-top:20px;
    padding-bottom:50px;text-align:center;
}

.ContenedorImgReclamos {
    display: flex;
    justify-content: center;
    align-items: center;
}

.subtitleGenLeft h2{
    font-size: 30px;
    color:var(--blackv3);
}


/* Map Iframe */
.map-container {
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}


/* -- Valores --*/
.flexImgVal{
   display:flex;
    justify-content: space-between;
    gap:50px;
    flex-wrap:wrap;
    margin-top:30px;
}

.flexImgVal .values{
    width:60%;
}

.flexImgVal .imgValue{
    width:35%;
}

.flexImgVal .imgValue img{
    width:100%;
    display:block;
    mix-blend-mode: multiply;
}

.flexImgVal .value{
    margin-bottom:20px;
    padding:30px;
    border-radius:10px;
}

.flexImgVal .value h3{
    padding-bottom:10px;
    font-size:22px;
}

.flexImgVal .value p{
    font-size:18px;
}



.flexImgVal .value:nth-child(odd) {
    background-color: var(--secondary);
    color:var(--blackv3);

}

.flexImgVal .value:nth-child(even) {
    background-color: var(--primary);
    color:var(--white);
}

/*-- Articulos --*/


.searchBox {
    display: flex;
    align-items: center;
    background: var(--white);
    border-radius: 5px;
    padding: 8px 15px;
    position: relative;
    border: 1px solid var(--gray);
}
.searchBox input{
    border: none;
    outline: none;
    background: none;
    width: 100%;
    font-size: 14px;
}

.flexArticles{
    display:flex;
    justify-content:space-between;
    gap:25px;
    flex-wrap:wrap;
    padding-top:40px;
}

.articleResume{
    width:48%;
    background: var(--white);
    padding: 25px;
    border: 2px solid var(--graylight);
    border-radius: 10px;
    margin-bottom:20px;
}
.dateArticleResume{
    color:var(--gray);
    font-size:14px;
}

.articleResume h3{
    font-size:20px;color:var(--blackv3);
    padding:10px 0px;font-weight:550;
}

.flexAuthorNameImg{
    display:flex;
    justify-content:start;
    align-items:center;
    gap:10px;
    padding:20px 0px;
}

.containerImgeAuthor{
    width:50px;
    height:50px;
    border-radius:50%;
    border:2px solid var(--graylight);
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
}

.containerImgeAuthor img{
    width:100%;
    height:100%;
    object-fit: cover;
}




.bgColorartdes{
    background-color: var(--ColorBtn);

}

.ContenedorFlexartdes{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap:10px;
}
.ContenedorInfoartdes{
    width: 56%;
    line-height: 1.8;
}


.ContenedorInfoartdes h2{
    color: var(--blackv3);
    font-size:30px;
    line-height:1.2;
    padding-bottom:10px;
}
.ContenedorInfoartdes p{
    color: var(--black);
    font-size:18px;
}

.FlexBotonesConsulta{
    width: 40%;
}

.FlexBotonesConsulta{
    display: flex;
    gap: 30px;
    align-items: center;
    justify-content: flex-end;

}

.btnartdes{
    width: 100%;
}

.btnartdes a button{
    padding: 12px 20px;
    font-size: 14px;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
}
.btnartdes a button i{
    font-size: 24px;
}

.bg-wasap a button{
    background-color: var(--green);
    border: none;
    color: var(--white);
    border-radius:5px;
    transition: all ease .3s;
}

.bg-wasap a button:hover{
    background-color: var(--greenhover);
}

.bg-email a button{
    background-color: var(--primary);
    border: none;
    color: var(--white);
    border-radius:5px;
    transition: all ease .3s;
}

.bg-email a button:hover{
    background-color: var(--primaryhover);
}

/*-- detalle de autor --*/
.flexImgNameProAuthor{
    display:flex;
    justify-content:start;
    align-items:center;
    gap:20px;
    padding:20px 0px;
    padding-bottom:30px;
}
.containerImgAuthor{
    width:100px;
    height:100px;
}

.containerImgAuthor img{
    width:100px;
    height:100px;
    object-fit: cover;
    display:block;
    border:5px solid var(--graylight);
    border-radius:50%;
}

.containerNameMoreAuthor h3{
    font-weight:500;
    color:var(--blackv3);
    font-size:22px;
}
.containerNameMoreAuthor p{
    font-weight:400;
    color:var(--black);
    font-size:16px;
    padding-top:8px;
    padding-bottom:12px;
}
.flexRdsAuthor{
    display:flex;
    justify-content:start;
    align-items:center;
    gap:10px;
}

.flexRdsAuthor a{
    background-color:var(--blackv3);
    color:var(--white);
    width:30px; height:30px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:5px;
    transition: all ease .3s;
}

.flexRdsAuthor a:hover{
    background-color:var(--primary);
}

/*-- Artículos --*/
.nameDateArticle{
    padding-bottom:15px;
}

.nameDateArticle p{
    color:var(--gray);
    font-size:15px;
}

.nameDateArticle h1{
    color:var(--primary);
    font-size:35px;
    font-weight:700;
    padding:10px 0px;
}

.contenteArticle{
    border-top:1px solid var(--graylight);
    padding-top:20px;
}
.paddCont{
    padding-top:40px;
}

/*-- Servicios --*/
.flexContainerServices{
    display:flex;
    justify-content: center;
    gap:25px;
    flex-wrap:wrap;
}

.containerService{
    width:32%;
    border: 2px solid var(--graylight);
    background: var(--white);
    border-radius: 10px;
    overflow: hidden;
}

.containerImgService{
    width:100%;
    height: auto;
}
.containerImgService img{
    width:100%;
}

.contentContainerService{
    padding:15px;
}

.contentContainerService h3{
    color:var(--blackv3);
    font-weight:600;
    font-size:20px;
    line-height:1.2;
}

.contentContainerService p{
    font-size:16px;
    padding:20px 0px;
}

.contentContainerService a i{
    font-size:20px;
}


/* Detalles de pago */
.flexPagoCapacitacion{
    display:flex;
    justify-content:center;
    align-items:start;
    gap:25px;
}
.detallePagoCapacitacion{
    width:55%;
    display:flex;
    flex-direction:column;
    gap:25px;
}

.informacionPagoCapacitacion{
    width:41%;
}

.itemPagoDetalle{
    width:100%;
    border: 1px solid var(--graylight);
    padding: 20px;
    border-radius: 15px;
    background-color: var(--white);
}

.itemPagoDetalle form{
    padding-top:25px;
}

.alertGray{
    padding:15px;
    background-color:var(--grayextralight);
    text-align:center;
    color:var(--black);
    border-radius: 15px;
    font-size:15px;
    margin:20px 0px;
    margin-top:0px;
}

.dudasCOns{
    text-align:center;
    padding:20px 0px;
    padding-top:25px;
}

.dudasCOns h5{
    color:var(--primary);
    font-size:20px;
    font-weight:500;
}

.dudasCOns p{
    color:var(--black);
}


.itemPagoDetalle h2{
    color:var(--primary);
    font-size:25px;
    font-weight:500;
    padding-bottom:15px;
    border-bottom:1px solid var(--graylight);
}

.conteineritempagoimg{
    margin:20px 0px;
    width:200px;
    height:auto;
}
.conteineritempagoimg img{
    width:100%;
    display:block;
}

.itemPagoDetalle h3{
    font-size:25px;line-height:1.2;
    color:var(--blackv3);
}

.itemPagoDetalle .priceTotal{
    display:flex;
    gap:5px;
    align-items:center;
    padding:10px 0px;
}
.itemPagoDetalle .priceTotal p{
    font-size:16px;
}
.itemPagoDetalle .priceTotal span{
    font-size:20px;
    font-weight:600;
    color:var(--black);
}

.flexYapePlin{
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding-top:20px;
    border-top: 1px solid var(--graylight);
}

.separatorLine{
    margin-bottom:30px;
    margin-top:15px;
    width:100%;
    height:1px;
    background-color:var(--graylight);
}


.descPagoDetalle{
    padding:20px 0px;
}

.itemQrPlinYape{
    width:45%;
}

.itemQrPlinYape h4{
    font-size:20px;
    font-weight:600;
    color:#5D196B;
}

.itemQrPlinYape .containerPlinQr{
    width:200px;
    height:200px;
    border: 1px solid var(--graylight);
    margin:15px 0px;
}
.itemQrPlinYape .containerPlinQr img{
    width:100%;
    height:100%;
    display:block;
}

.itemQrPlinYape p{
    font-size:17px;
}

.formLabelInput{
    display:flex;
    flex-direction:column;
    gap:5px;
    padding-bottom:20px;
}
.formLabelInput span{
    color:red;
}

.formLabelInput label{
    font-size:18px;
    width:100%;
}

.formLabelInput input, .formLabelInput textarea{
    width:100%;
    padding:10px;
    font-size:18px;
    border-radius:5px;
    border:1px solid var(--graylight)
}

.formLabelInput textarea{
    width:100%;min-width:100%;
    min-height:50px;resize: vertical;
}


@media(max-width:1280px){
    .containerService{
        width:30%;
    }
}



@media(max-width:1050px){
    .ContenedorFlexartdes{
        flex-wrap: wrap;
    }
    .FlexBotonesConsulta{justify-content:start;padding-top:20px;}
    .btnartdes{width: max-content;}

    .FlexBotonesConsulta{
        width:100%;
    }
    .ContenedorInfoartdes{
        width:100%;
    }
    .ContenedorInfoartdes h2{
        font-size:25px;
    }

    .ContenedorInfoartdes p{
        font-size:16px;
    }

    .flexPagoCapacitacion{
        flex-wrap:wrap;
    }
    .detallePagoCapacitacion{
        width:100%;
    }
    .informacionPagoCapacitacion{
        width:100%;
    }
    .itemPagoDetalle h3{
        font-size:25px;
    }
    .itemPagoDetalle .priceTotal{
        padding:20px 0px;
    }
    
    
.flexImgVal .values{
    width:100%;
}

}

@media(max-width:768px){
    .flexImgNameProAuthor{
        justify-content:center;
    }

    .containerNameMoreAuthor h3{
        font-size:20px;
    }
    .containerNameMoreAuthor p{
        font-size:14px;
    }

    .flexImgText{
        flex-wrap:wrap-reverse;
    }
    .containerImgQ,.containerTextQ{
        width:100%;
    }
    .containerTextQ h4,.flexTitleGen h2,.contentItemsOf H2,.flexMisionVision .itemMv h3,.flexTitleGenLeft h2{
        font-size:25px;
    }
    .containerTextQ h5{
        font-size:25px;text-align:center;
    }
        .subtitleGenLeft h2{
            font-size: 25px;
            text-align:center;
        }

     .containerService{
        width:47%;
    }

    .articleResume{
        width:47%;
    }
    .flexMisionVision{
        flex-wrap:wrap;
    }
    .flexMisionVision .itemMv{
        width: 100%;
    }
    .flexTitleGenCentered h2{
        font-size:25px;
    }

    .flexTitleGenCentered p{
        font-size:14px;
    }
    .contentContainerService p{
        font-size:14px;
    }
    .contentContainerService h3{
        font-size:18px;
    }

    .containerMax h1{
        font-size:28px;
    }

    .conteineritempagoimg{
        width:100%;
    }

}


@media (max-width: 600px) {
    .testimonial-card {
        width: 100%; /* 1 por fila */
    }
    .itemofInside{
        width:100%;
    }
     .articleResume{
        width:100%;
    }
    .FlexBotonesConsulta{flex-wrap:wrap;}
    .btnartdes a button,.bg-email a button{
        width:100%;padding:20px 30px;
        min-width:318px;
    }

}


@media(max-width:500px){
  .containerService{
        width:100%;
    }

    .bannerTop{
        height:280px;
    }
}