/* ***************************************** 
                Colores 
***************************************** */
:root{
    --black:        #000000;
    --white:        #FFFFFF;
    --green-1:      #169A8E;
    --green-2:      #2E7B6D;
    --green-3:      #C1E1D8;
    --green-4:      #235A53;
    --green-5:      #007838;
    --purple-1:     #5F2167;
    --purple-2:     #4C1A52;
    --purple-3:     #946B9A;
    --orange-1:     #D1820B;
    --blue-1:       #207AD5;
    --blue-2:       #432EFF;
    --red-1:        #E11F2A;
    --red-2:        #DA291C;  
    --red-3:        #D53711;  
    --gray-1:       #FAFAFA;
    --gray-2:       #ECEFF6;
    --gray-3:       #E3E7F2;
    --gray-4:       #F6F7FB;
    --gray-5:       #FAFBFD;
    --gray-6:       #595E6D;
    --gray-7:       #474A56;
    --gray-8:       #373A43;
    --gray-9:       #31343C;
    --gray-10:      #2C2E35;
    --gray-11:      #1D1F24;
    --pink1:        #FF6AAB;
}

/* ***************************************** 
            Tipografías Colores 
***************************************** */
.fc-white{
    color: var(--white);
}
.fc-black{
    color: var(--black);
}
.fc-red1{
    color: var(--red-1);
}
.fc-purple1{
    color: var(--purple-1);
}
.fc-orange1{
    color: var(--orange-1);
}
.fc-green2{
    color: var(--green-2);
}
.fc-gray1{
    color: var(--gray-1);
}
.fc-gray2{
    color: var(--gray-2);
}
.fc-gray3{
    color: var(--gray-3);
}
.fc-gray4{
    color: var(--gray-4);
}
.fc-gray5{
    color: var(--gray-5);
}
.fc-gray6{
    color: var(--gray-6);
}
.fc-gray7{
    color: var(--gray-7);
}
.fc-gray11{
    color: var(--gray-11);
}



/* ***************************************** 
            Tipografías Tamaños 
***************************************** */
.fs-12{
    font-size: 12px;
    line-height: 14px;
}
.fs-14{
    font-size: 14px;
    line-height: 16px;
}
.fs-16{
    font-size: 16px;
    line-height: 18px;
}
.fs-18{
    font-size: 18px;
    line-height: 20px;
}
.fs-24{
    font-size: 24px;
    line-height: 26px;
}
.fs-32{
    font-size: 32px;
    line-height: 34px;
}
.fs-40{
    font-size: 40px;
    line-height: 42px;
}
.fs-48{
    font-size: 48px;
    line-height: 50px;
}

@media(max-width: 767px){
    .fs-32{
        font-size: 24px;
        line-height: 26px;
    }
    .fs-40{
        font-size: 32px;
        line-height: 34px;
    }
}


/* ***************************************** 
            Tipografías Weights 
***************************************** */
.fw-300{
    font-weight: 300;
}
.fw-500{
    font-weight: 500;
}
.fw-600{
    font-weight: 600;
}
.fw-700{
    font-weight: 700;
}


/* ***************************************** 
                    Links
***************************************** */
.purple1-link{
    color: var(--purple-1);
}.purple1-link:hover{
    color: var(--red-1);
}
.blog-link{
    color: var(--white);
}.blog-link:hover{
    color: var(--red-1);
}



/* ***************************************** 
                Backgrounds
***************************************** */
.purple-bg{
    background-color: var(--purple-1);
}
.purple2-bg{
    background-color: var(--purple-2);
}
.purple3-bg{
    background-color: var(--purple-3);
}
.red1-bg{
    background-color: var(--red-1);
}
.red2-bg{
    background-color: var(--red-2);
}
.red3-bg{
    background-color: var(--red-3);
}
.white-bg{
    background-color: var(--white);
}
.black-bg{
    background-color: var(--black);
}
.blue1-bg{
    background-color: var(--blue-1);
}
.blue2-bg{
    background-color: var(--blue-2);
}
.gray1-bg{
    background-color: var(--gray-1);
}
.gray2-bg{
    background-color: var(--gray-2);
}
.gray3-bg{
    background-color: var(--gray-3);
}
.gray4-bg{
    background-color: var(--gray-4);
}
.gray5-bg{
    background-color: var(--gray-5);
}
.green1-bg{
    background-color: var(--green-1);
}
.green-grad-bg{
    background: linear-gradient(to bottom, #ffffff 0%, #FAFAFA 35%, #C1E1D8 100%);
}
.green3-opa-bg{
    background-color: rgba(193, 225, 216, .6);
}
.green5-bg{
    background-color: var(--green-5);
}
.pink1-bg{
    background-color: var(--pink1);
}


/* ***************************************** 
                Radios
***************************************** */
.rad-840{
    border-top-left-radius: 8px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 40px;
}
.img-840{
    border-top-left-radius: 8px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 40px;
}


/* ***************************************** 
                Botones
***************************************** */
.purple-btn1{
    background-color: var(--purple-1);
    border: 1px solid var(--purple-1);
    color: var(--white)
}.purple-btn1:hover{
    background-color: var(--white);
    color: var(--purple-1)
}

.white-btn{
    background-color: var(--white);
    border: 1px solid var(--purple-1);
    color: var(--purple-1);
    width: 205px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
}.white-btn:hover{
    background-color: var(--purple-1);
    color: var(--white)
}

.gray1-btn{
    background-color: #F1F3F9;
    border: 1px solid #F1F3F9;
    color: var(--purple-1);
    display: flex;
    align-items: center;
    justify-content: center;
}.gray1-btn:hover{
    background-color: var(--purple-1);
    border: 1px solid var(--purple-1);
    color: #F1F3F9
}



/* ***************************************** 
                Globales 
***************************************** */
a{ 
    text-decoration: none !important; 
}
ul, ol{
    list-style-type: none;
}
.go-top{
    cursor: pointer;
}
body{
    font-family: 'Montserrat', sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}
.badge-white-op{
    background-color: rgba(255, 255, 255, .16);
    padding: 8px 16px;
    border-radius: 20px;
}
.badge-red1{
    background-color: var(--red-1);
    padding: 8px 16px;
    border-radius: 20px;
}
.separador-1{
    border-top: 1px solid #B5BAC7;
}.separador-2{
    border-top: 1px solid var(--gray-3);
}
.sticky-top-30 {
    position: sticky;
    top: 30%;
}
@media(max-width: 767px){
    .w-xs-100{
        width: 100%;
    }    
}

/* ***************************************** 
                Mega Menu
***************************************** */
.mega-menu{
    position: static;
}
.mega-menu__panel{
    padding: 0;
    border: none;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
    left: 50%;
    transform: translateX(-50%);
}
.mega-menu__panel--lg{
    width: 100%;
    max-width: 850px;
}
.mega-menu__panel--sm{
    width: 100%;
    max-width: 620px;
}
.mega-menu__inner{
    padding: 2rem;
}
.mega-menu__title{
    color: var(--purple-1);
    font-weight: 600;
    margin-bottom: 24px;
    font-size: 20px;
}
.mega-menu__link{
    display: block;
    font-size: 16px;
    padding: .5rem 0;
    color: var(--gray-11) !important;
    transition: color .2s ease;
    margin-bottom: 5px;
}.mega-menu__link:hover{
    background-color: #F1F3F9;
    font-weight: 700;
}
.mega-menu__promo{
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

.mega-menu__promo-img{
    width: 100%;
    height: auto;
    object-fit: cover;
}
.mega-menu__promo-text{
    position: absolute;
    bottom: 24px;
    left: 24px;
    right: 24px;
    color: var(--gray-5);
    font-weight: 600;
    margin: 0;
    font-size: 16px;
}


/* ***************************************** 
                Header - Navbar
***************************************** */
#top-header{
    background-color: var(--gray-9);
}
#mainNavbar ul li:not(:last-child){
    border-right: 1px solid #D9D9D9;
}
#mainNavbar ul li a{
    padding: 5px 35px 5px 20px;
    color: var(--gray-11);
    font-weight: 500;
    font-size: 12px;
    transition: .3s ease all;
}
#mainNavbar ul li a:hover{
    color: var(--purple-1);
    font-weight: 600;
}
.dropdown-toggle::after {
    position: absolute;
    top: 34px;
    content: " ";
    margin-left: 10px;
    border: none;
    width: 7px;
    height: 7px;
    background-image: url("../images/icons/arrow-down-purple.svg");
    background-size: 7px;
    background-position: center;
    background-repeat: no-repeat;
}
.sticky-navbar .navbar {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}
.sticky-navbar .logo-nabvar{
    transition: 1s ease;
    width: 80px;
}
@media (max-width: 991.98px){
    /* .navbar{
        position: fixed;
        top: 50px;
        background: var(--white);
    } */
    #mainNavbar{
        position: fixed;
        background-color: var(--white);
        left: 0;
        right: 0;
        top: 90px;
        z-index: 999;
        padding: 10px 20px;
    }
    #mainNavbar ul li a{
        font-size: 20px;
        font-weight: 600;
        color: var(--gray-11);
        margin-bottom: 6px;
    }
    #mainNavbar ul li a:hover{
        color: var(--purple-1);
    }
    .mega-menu__inner{
        padding: 10px 20px;
    }
    .mega-menu__panel {
        padding: 0;
        border: none;
        border-radius: 0;
        box-shadow:none;
        left: 0;
        right: 0;
        transform: none !important;
    }
    .mega-menu__inner .row > [class*="col-"]{
        margin-bottom:0;
    }
}



/* ***************************************** 
                Breadcrumb 
***************************************** */
#breadcrumb{
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
#breadcrumb li:not(:last-child)::after{
    content: "/";
    margin: 0 7px;
    font-size: 12px;
}
#breadcrumb li:last-child a{
    color: var(--gray-11);
    font-weight: 700;
}
#breadcrumb li a{
    color: var(--gray-6);
    font-size: 12px;
}
#breadcrumb li a:hover{
    color: var(--gray-11);
}


/* ***************************************** 
                Títulos Banners 
***************************************** */
.titulos-banner{
    background-size: 150px;
    background-position: right top;
    background-repeat: no-repeat;
    border-top-left-radius: 8px;
    border-top-right-radius: 56px;
    border-bottom-left-radius: 56px;
    border-bottom-right-radius: 8px;
}
.titulos-banner.purple{
    background-color: var(--purple-2);
    background-image: url("../images/circle-bg.svg");
    background-size: 150px;
    background-position: right top;
    background-repeat: no-repeat;    
}
.titulos-banner.home{
    background-color: var(--purple-2);
    background-image: url("../images/banners/back-woman.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.titulos-banner.empresas{
    background-color: var(--purple-2);
    background-image: url("../images/banners/banner-empresas");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.titulos-banner.green{
    background-color: var(--green-4);
    background-image: url("../images/circle-bg.svg");
    background-size: 150px;
    background-position: right top;
    background-repeat: no-repeat;    
}
.titulos-banner.fundacion{
    background-image: url("../images/back-fundacion.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;    
}
.titulos-banner.empleadora{
    background-image: url("../images/banners/heading-empleadora.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;    
}

@media(max-width: 767px){
    .titulos-banner{
        background-color: var(--purple-2);
        background-image: none;        
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
}


/* ***************************************** 
            Card y Textos laterales 
***************************************** */
.grow-title-hover{
    font-size: 24px;
    color: var(--gray-11);
    font-weight: 600;
    transition: .5s ease all;
}
.grow-title-hover:hover{
    font-size: 32px;
    color: var(--purple-1);
    cursor: context-menu;
}

@media(max-width: 767px){
    .grow-title-hover{
        font-size: 20px;
        color: var(--gray-11);
        font-weight: 600;
        transition: .5s ease all;
    }
    .grow-title-hover:hover{
        font-size: 24px;
        color: var(--purple-1);
        cursor: context-menu;
    }
}


/* ***************************************** 
                Beneficios
***************************************** */
.beneficios .purple-square{
    height: 200px;
    width: 238px;
    border-top-left-radius: 8px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 40px;
}
.grid-asim{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 200px 200px;
    gap: 20px;
    
    grid-template-areas: 
        "uno dos dos"
        "tres tres cuatro"
    ;
}
.grid-asim .g-area-2 img,
.grid-asim .g-area-3 img,
.grid-asim .g-area-4 img{
    width: 100%;
    height: 200px;
    object-fit: cover;
}


.grid-asim-2{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 200px;
    gap: 20px;
    
    grid-template-areas: 
        "uno dos dos"
    ;
}
.grid-asim-2 .g-area-2 img,
.grid-asim-2 .g-area-3 img,
.grid-asim-2 .g-area-4 img{
    width: 100%;
    height: 200px;
    object-fit: cover;
}
@media(max-width: 767px){
    .grid-asim .purple-square,
    .grid-asim-2 .purple-square{
        width: 200px;
    }
    .grid-asim .g-area-2 img,
    .grid-asim .g-area-3 img,
    .grid-asim .g-area-4 img{
        width: 100%;
        height: 200px;
        object-fit: cover;
    }
}



/* ***************************************** 
            Counter - Squares 
***************************************** */
.counter-square{
    height: 242px;
    border-top-left-radius: 8px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius:40px;
}
.counter-square2{
    height: 350px;
    border-top-left-radius: 8px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius:40px;
}
.counter-square.fundacion1{
    background-image: url("../images/ambiente.jpg");
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center;
    background-size: cover;
}
.counter-square.fundacion2{
    background-image: url("../images/mujeres.jpg");
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center;
    background-size: cover;
}
.counter-square.fundacion3{
    background-image: url("../images/voluntariado.jpg");
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center;
    background-size: cover;
}

.white-square-op{
    background-color: rgba(255, 255, 255, .1);  
    border: 1px solid rgba(255, 255, 255, .2);
}

@media(max-width: 767px){
    .counter-square,
    .counter-square2{
        height: auto;
    }
    .counter-square.fundacion1,
    .counter-square.fundacion2,
    .counter-square.fundacion3{
        height: 150px;
    }
}


/* ***************************************** 
            Cards Hover
***************************************** */
.cards-hover img{
    opacity: 0;
    transition: opacity .2s ease;
}.cards-hover:hover img{
    opacity: 1;
}

.cards-hover .arrow{
    background: url("../images/icons/arrow-right-gray.svg"), var(--gray-5);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
    width: 40px;
    height: 40px;
}
.cards-hover:hover .arrow{
    background: url("../images/icons/arrow-right-white.svg"), var(--purple-1);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
}

@media(max-width: 767px){
    .cards-hover img{
        opacity: 1;
    }
    .cards-hover .arrow{
        background: url("../images/icons/arrow-right-white.svg"), var(--purple-1);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 20px;
        margin-right: -10px;
        margin-top: -10px;
    }
}


/* ***************************************** 
            Cards Hover 2
***************************************** */
.cards-hover-2:hover,
.cards-hover-2:hover :is(p, h1, h2, h3, h4, h5, h6){
    background-color: var(--purple-1);
    color: var(--white);
}

@media(max-width: 767px){
    .cards-hover-2 img{
        opacity: 1;
    }
    .cards-hover-2 .arrow{
        background: url("../images/icons/arrow-right-white.svg"), var(--purple-1);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 20px;
        margin-right: -10px;
        margin-top: -10px;
    }
}



/* ***************************************** 
            Curtain Cards
***************************************** */
.curtain-card{
    border-top-left-radius: 8px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 40px;
    height: 180px;
}
.curtain-card__media{
    position: relative;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
}

.curtain-card__img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: inset(0 0 100% 0);
    transition: clip-path .4s ease;
}
.curtain-card__line{
    position: absolute;
    top: 10px;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: var(--purple-1);
    border-radius: 999px;
    transform: translateY(-50%);
    transition: opacity .3s ease .4s;
}
.curtain-card:hover .curtain-card__img{
    clip-path: inset(0 0 0% 0);
}
.curtain-card:hover .curtain-card__line{
    opacity: 0;
    transition: opacity .2s ease 0s;
}

@media(max-width: 767px){
    .curtain-card{
        height: auto;
    }
    .curtain-card__img{
        clip-path: none;
        transition: none;
    }
    .curtain-card__line{
        display: none;
    }
}


/* ***************************************** 
                Accordion
                Innovación
***************************************** */
.back-purple-pat{
    background: url("../images/world-pattern.svg"), var(--purple-1);
}
.accordion-cont{
    background-color: rgba(255, 255, 255, .1);
    border-radius: 8px 40px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 100%;
    backdrop-filter: blur(5px);
}
#accordInnova .card{
    background-color: transparent;
    background-clip: border-box;
    border: none;
}
#accordInnova .card-header {
    padding: .75rem .25rem .5rem .25rem;
    margin-bottom: 0;
    background-color: transparent;
    border-bottom: none;
}
#accordInnova button{
    color: var(--white) !important;
}
#accordInnova button.collapsed{
    font-size: 18px;
}


/* ***************************************** 
                Contacto
***************************************** */
.square-contact{
    height: 345px;
}
.cform-1 label{
    color: var(--gray-11);
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 5px;
}
.cform-1 .form-control{
    border: 1px solid var(--gray-3);
    background-color: var(--gray-1);
}
.cform-1 textarea{
    resize: none;
}
.cform-1 .input-group-text {
    color: var(--gray-8);
    font-weight: 500;
    font-size: 14px;
    padding: .375rem 0 .375rem .75rem;
    background-color: var(--gray-1);
    border: 1px solid var(--gray-3);
    border-right: none;
}
.cform-1 .celular{
    border-left: none;
}
@media(max-width: 767px){
    .send-form{
        width: 100%;
    }
}


/* ***************************************** 
                Purple Hover
***************************************** */
.purple-hover:hover,
.purple-hover:hover :is(p, h1, h2, h3, h4, h5, h6, li){
    background-color: var(--purple-1);
    color: var(--white);
}

@media(max-width: 767px){
    .compromiso .btn{
        width: 100%;
    }
}


/* ***************************************** 
                Slick 
***************************************** */
.logos-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 100px;
    align-items: center;
    justify-items: center;
}


/* ***************************************** 
                Formularios Rutas 
***************************************** */
.custom-select{
    background: #fff url("../images/icons/arrow-down.svg") right .75rem center / 12px 12px no-repeat;
}
.custom-control-label::before,
.custom-control-label::after {
    top: 0px;
}
.custom-control-input:checked~.custom-control-label::before {
    color: #fff;
    border-color: var(--purple-1);
    background-color: var(--purple-1);
}


/* ***************************************** 
                Timeline 
***************************************** */
.timeline .lapso{
    background-image: url("../images/icons/purple-line.png"), url("../images/icons/purple-line.png");
    background-position: top center, bottom center;
    background-repeat: no-repeat;
    background-size: 3px 35%, 3px 35%;
}
.timeline .year{
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.timeline .quote{
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
@media(max-width: 767px){
    .timeline .lapso{
        background-image: none;
    }
    .timeline .year span{
        font-size: 16px;
    }
    .timeline .quote p{
        font-size: 14px;
    }
    .timeline .w-25{
        width: 200px !important;
        margin: 20px auto;
    }
}


/* ***************************************** 
                Conócenos
***************************************** */
.conocenos{
    background: url("../images/back-conocenos.svg"), var(--gray-2);
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: bottom 100px center;
}
.txt-arrows{
    position: relative;
    display: inline-block;
}
.txt-arrows::before{
    content: '';
    background-image: url("../images/icons/arrow-square-right.png");
    position: absolute;
    left: -35px;             
    top: -2px;            
    height: 30px;          
    width: 30px;          
}
.txt-arrows::after{
    content: '';
    background-image: url("../images/icons/arrow-square-left.png");
    position: absolute;
    right: -35px;             
    top: -2px;            
    height: 30px;          
    width: 30px;          
}
.separador-red{
    border: 1px solid var(--red-1);
    width: 50px;
}

@media(max-width: 767px){
    .conocenos .btn{
        width: 100%;
    }
}

/* ***************************************** 
                Vacantes
***************************************** */
.grid-vacantes{
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    gap: 30px;
}
.box-talento{
    background-color: var(--white);
    border-radius: 8px 40px;
}

@media(max-width: 767px){
    .grid-vacantes{
        display: grid;
        grid-template-columns: 1fr;
        gap: 30px;
    } 
    .box-talento p{
        font-size: 20px;
    } 
    .box-talento .btn{
        width: 100%;
    }
}



/* ***************************************** 
                Accordion
***************************************** */
#accordion_clean .card,
#accordion_clean .card-header{
    border: none;
    background-color: transparent;
}




/* ***************************************** 
                Footer 
***************************************** */
footer{
    background-color: var(--gray-8);
}
.ir-arriba{
    background-color: var(--gray-10);
}
.ir-arriba a:hover{
    color: var(--white);
}
footer .separador{
    border-top: 1px solid #808391;
}

.rowFooter{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}
.rowFooter .tit-menu-footer{
    font-size: 14px;
    font-weight: 700;
    font-weight: bold;
    color: var(--white);
}
.menu-footer li a{
    color: var(--white);
    font-size: 12px;
}

footer .list-terminos{
    display: flex;
    align-items: center;
    justify-content: center;
}
footer .list-terminos li:not(:last-child)::after{
    content: "|";
    margin: 0 10px;
    color:var(--white);
}
footer .list-terminos a{
    color: var(--white);
    font-weight: 600;
    font-size: 12px;
}

@media(max-width: 767px){
    .rowFooter{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}