div#pu-prog:not(.show), 
.programa-container:not(.show) {
    display: none;
}
div#pu-prog {
    position: fixed;
    top: 0;
    z-index: 10;
    background: #fff;
    height: 100vh;
    width: 100vw;
    overflow-y: scroll !important;
}
.programa-container .row-flex,
.programa-container .prog-title {
    max-width: 1200px;
    margin: auto;
    padding-left: 15px;
    padding-right: 15px;
}
.programa-container .row-flex {
    padding-top: 7rem;
    padding-bottom: 7rem;
    display: flex;
    gap: 30px;
    justify-content: space-between;
}
.programa-container .prog-title {
    margin-top: -2.6em;
    padding-bottom: 1.4em;
    color: #fff !important;
    position: relative;
    z-index: 1;
}

.row-banner:after {
    content: '';
    margin-top: -200px;
    width: 100%;
    height: 200px;
    position: relative;
    display: block;
    background: linear-gradient(0deg, rgb(0 0 0 / 70%), transparent);
}

.programa-container h3.style-1 {
    margin-bottom: 45px;
}
.programa-container .programa-info p {
    color: #fff !important;
}
.programa-container .programa-info {
    display: grid;
    grid-template-columns: 4fr 1fr;
    padding: 13px 22px;
    gap: 20px;
    border-radius: 20px;
    align-items: center;
    max-width: 475px;
}
.programa-container .programa-info + div {
    margin-top: 20px;
}
.programa-info img.icon {
    width: 69px;
    height: 62px;
    object-fit: contain;
    margin: auto;
}
.programa-container .programa-info p.dato-num {
    font: normal 600 1.75rem/1.2em var(--titulo) !important;
    letter-spacing: -0.04em;
    margin-bottom: 5px;
}

.programa-container .programa-info p.dato-text {
    font: normal 600 1.125rem/1.4em var(--texto) !important;
}

.graph-dep {
    max-width: 515px !important;
    display: grid;
    gap: 1.5rem;
}
.graph-dep .dep {
    display: grid;
    grid-template-columns: 150px 1fr 60px;
    gap: 20px;
    color: var(--azul-texto) !important;
    font: normal 500 1.125rem/1.2em var(--texto) !important;
    align-items: center;
}

.graph-dep .barra {
    height: 12px;
    border: 0.6px solid;
    border-radius: 30px;
    overflow: hidden;
}
.graph-dep .barra-int {
    height: 100%;
}
.graph-dep .dato-dep {
    justify-self: end;
}

.programa-container .nombre-test {
    margin-bottom: 0 !important;
}
.programa-container h3.prog {
    margin-bottom: 20px;
}
.info-testimonio p {
    font-weight: 500 !important;
    max-width: 480px;
}
a.btn-testimonio {
    padding: 0.75rem 1.25rem;
    font: normal 500 1rem/1.2em var(--boton);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 100px;
	color: #fff;
}
a.btn-testimonio:hover {
    background-color: var(--azul-fundap) !important;
	color: #fff;
}


#testimonio .row-flex {
    align-items: center;
}
#testimonio .video-container {
    border-radius: 30px;
    overflow: hidden;
}


.accion {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        "a a a"
        "b c d";
    gap: 10px 70px;
}
.accion:not(:last-child) {
    margin-bottom: 45px;    
}
.accion h4 {
    width: 100%;
    grid-area: a;
    padding-bottom: 5px;
    border-bottom: 1px solid;
}
.accion p {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}
.accion strong {
    font: normal 600 2rem/1.4em var(--titulo) !important;
}

button.btn-volver {
    font: normal 500 1rem/1.2em var(--boton) !important;
    padding: 0.75rem 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 100px;
    color: #fff;
    background-color: var(--azul-fundap) !important;
    border: 1px solid var(--azul-fundap) !important;
	display: flex;
    align-items: center;
    gap: 5px;
}
button.btn-volver:hover {
    background-color: #fff !important;
    color: var(--azul-fundap) !important;
}
button.btn-volver span {
    margin-left: -5px;
}

/*REGLAS DE COLOR*/

.programa-container.educacion .accion strong,
.programa-container.educacion .prog {
    color: var(--educa) !important;
}
.programa-container.salud .accion strong,
.programa-container.salud .prog {
    color: var(--salud) !important;
}
.programa-container.microcredito .accion strong,
.programa-container.microcredito .prog {
    color: var(--micro) !important;
}
.programa-container.artesania .accion strong,
.programa-container.artesania .prog {
    color: var(--artes) !important;
}
.programa-container.agropecuario .accion strong,
.programa-container.agropecuario .prog {
    color: var(--agrop) !important;
}
.programa-container.forestal-ambiental .accion strong,
.programa-container.forestal-ambiental .prog {
    color: var(--fores) !important;
}


.programa-container.educacion a.btn-testimonio,
.programa-container.educacion .programa-info,
.programa-container.educacion .graph-dep .barra-int {
    background-color: var(--educa);
}
.programa-container.salud a.btn-testimonio,
.programa-container.salud .programa-info,
.programa-container.salud .graph-dep .barra-int {
    background-color: var(--salud);
}
.programa-container.microcredito a.btn-testimonio,
.programa-container.microcredito .programa-info,
.programa-container.microcredito .graph-dep .barra-int {
    background-color: var(--micro);
}
.programa-container.artesania a.btn-testimonio,
.programa-container.artesania .programa-info,
.programa-container.artesania .graph-dep .barra-int {
    background-color: var(--artes);
}
.programa-container.agropecuario a.btn-testimonio,
.programa-container.agropecuario .programa-info,
.programa-container.agropecuario .graph-dep .barra-int {
    background-color: var(--agrop);
}
.programa-container.forestal-ambiental a.btn-testimonio,
.programa-container.forestal-ambiental .programa-info,
.programa-container.forestal-ambiental .graph-dep .barra-int {
    background-color: var(--fores);
}


.programa-container.educacion #testimonio {
    background-color: var(--educa-l);
}
.programa-container.salud #testimonio {
    background-color: var(--salud-l);
}
.programa-container.microcredito #testimonio {
    background-color: var(--micro-l);
}
.programa-container.artesania #testimonio {
    background-color: var(--artes-l);
}
.programa-container.agropecuario #testimonio {
    background-color: var(--agrop-l);
}
.programa-container.forestal-ambiental #testimonio {
    background-color: var(--fores-l);
}


.programa-container.educacion .accion h4,
.programa-container.educacion .graph-dep .barra {
    border-color: var(--educa);
}
.programa-container.salud .accion h4,
.programa-container.salud .graph-dep .barra {
    border-color: var(--salud);
}
.programa-container.microcredito .accion h4,
.programa-container.microcredito .graph-dep .barra {
    border-color: var(--micro);
}
.programa-container.artesania .accion h4,
.programa-container.artesania .graph-dep .barra {
    border-color: var(--artes);
}
.programa-container.agropecuario .accion h4,
.programa-container.agropecuario .graph-dep .barra {
    border-color: var(--agrop);
}
.programa-container.forestal-ambiental .accion h4,
.programa-container.forestal-ambiental .graph-dep .barra {
    border-color: var(--fores);
}



html[lang="en-US"] .word-ben:after {
    content: 'e of ' !important;
}
html[lang="en-US"] .word-ben.artesania:after {
    content: 'es of ' !important;
}
.word-ben.educacion:after {
    content: 'a de ';
}
.word-ben.salud:after {
    content: 'a de ';
}
.word-ben.microcredito:after {
    content: 'a de ';
}
.word-ben.artesania:after {
    content: 'os de ';
}
.word-ben.agropecuario:after {
    content: 'o de ';
}
.word-ben.forestal-ambiental:after {
    content: 'a de ';
}
@media (max-width:767px) {
    .programa-container .row-flex {
        padding: 3rem 30px;
        flex-direction: column;
    }
    .programa-container h3.style-1 {
        margin-bottom: 2rem;
        max-width: 230px !important;
    }
    .programa-container .programa-info p.dato-text {
        font-size: 0.8rem !important;
    }
    .graph-dep .dep {
        font-size: 0.8rem !important;
        grid-template-columns: 100px 1fr 40px;
        gap: 10px;
    }
    .graph-dep .barra {
        height: 6px;
    }
    .row-flex .column.col-1-2 {
        width: 100%;
    }
    #testimonio .row-flex {
        flex-direction: column-reverse;
    }
    .accion {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
}