#misionVision{
    position: relative;
    overflow: hidden;
    height: auto;
}


#misionVisionContainer{
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

#misionVisionTitleBlock{
    display: grid;
    place-items: center;
    height: 80px;
    width: 100%;
    background: #ffffffce;
    z-index: 1;
}
#misionVisionTitle{
    text-align: center;
}

#misionVisionTarjetasBlock{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: stretch;
    height: calc(100% - 80px);
    width: 100%;
    z-index: 1;
    padding-block: 30px;
}

#misionVisionTarjetasBlock > div{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    height: auto;
    align-self: stretch;
    width: 45%;
    background: var(--color-blanco);
    z-index: 1;
    border-radius: 30px;
    box-shadow: 0px 0px 10px 2px var(--color-sombra);
    padding: 30px;
}

.iconosMisionVision{
    width: 20%; /* fixed circle size */
    aspect-ratio: 1/1;
    background: var(--color-rojo);
    border-radius: 50%; /* make it a circle */
    display: grid;
    place-items: center; /* center the svg inside */
    margin-left: 20px; /* space from left edge */
    flex-shrink: 0; /* prevent shrinking */
    overflow: hidden; /* ensure background color fills circle */
}

.iconosMisionVision > svg{
    width: 60%;
    height: 60%;
}

.misionVisionTextContainer{
    width: 60%;
    display: grid;
    place-items: center; 
}

#icono_foco{
    background-color: var(--color-verde);
}